mirror of
https://github.com/hack-chat/main.git
synced 2024-03-22 13:20:33 +08:00
Create retro.css
5 hours and almost 300 lines of CSS later, a theme that redefines the hack.chat experience
This commit is contained in:
Roslot
GitHub
parent
1fd0350c94
commit
3fc153a0c4
285
client/schemes/retro.css
Normal file
285
client/schemes/retro.css
Normal file
|
|
@ -0,0 +1,285 @@
|
|||
/** defaults **/
|
||||
|
||||
body {
|
||||
background: #20201d;
|
||||
color: #a6a28c;
|
||||
}
|
||||
input,
|
||||
textarea {
|
||||
color: #a6a28c;
|
||||
}
|
||||
.message {
|
||||
border-left: 1px solid rgba(125, 122, 104, 0.5) !important;
|
||||
}
|
||||
.refmessage {
|
||||
border-left: 1px solid rgba(125, 122, 104, 1) !important;
|
||||
}
|
||||
.nick {
|
||||
color: #6684e1;
|
||||
}
|
||||
.trip {
|
||||
color: #6e6b5e;
|
||||
}
|
||||
.text a {
|
||||
color: #e8e4cf;
|
||||
}
|
||||
.admin .nick {
|
||||
color: #d73737;
|
||||
}
|
||||
.mod .nick {
|
||||
color: #1fad83;
|
||||
}
|
||||
.me .nick {
|
||||
color: #b854d4;
|
||||
}
|
||||
.info .nick,
|
||||
.info .text {
|
||||
color: #60ac39;
|
||||
}
|
||||
.warn .nick,
|
||||
.warn .text {
|
||||
color: #cfb017;
|
||||
}
|
||||
#footer {
|
||||
background: #20201d;
|
||||
}
|
||||
#sidebar {
|
||||
background: #292824;
|
||||
border-color: #7d7a68;
|
||||
}
|
||||
#chatform {
|
||||
border-color: #7d7a68;
|
||||
}
|
||||
|
||||
|
||||
/** customizations **/
|
||||
|
||||
:root {
|
||||
color-scheme: dark!important;
|
||||
scrollbar-color: #8e8e8e #151515;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: 'Courier New', 'Consolas', 'Lucida Console', 'Menlo', Courier, monospace;
|
||||
}
|
||||
body, #footer, #sidebar {
|
||||
background: #050505;
|
||||
}
|
||||
article.container {
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
max-width: calc(100% - 264px);
|
||||
margin: 36px 36px 0em 36px;
|
||||
overflow: hidden;
|
||||
border: 2px solid gray;
|
||||
border-top: 0;
|
||||
border-bottom: 0;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
.hidden {
|
||||
display: inherit;
|
||||
}
|
||||
@keyframes changeColors {
|
||||
0%, 100% {
|
||||
background-color: initial;
|
||||
}
|
||||
0.1% {
|
||||
background-color: #0d1b62;
|
||||
}
|
||||
99.9% {
|
||||
background-color: #0d1b62;
|
||||
}
|
||||
}
|
||||
.message {
|
||||
animation-name: changeColors;
|
||||
animation-duration: 10s;
|
||||
animation-timing-function: steps(1, start);
|
||||
animation-iteration-count: 1;
|
||||
}
|
||||
|
||||
#pin-sidebar {
|
||||
display: none;
|
||||
}
|
||||
label[for=pin-sidebar] {
|
||||
display: none;
|
||||
}
|
||||
#messages {
|
||||
padding: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
#messages::after {
|
||||
width: 100%;
|
||||
max-width: calc(100% - 270px);
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 15px;
|
||||
left: 36px;
|
||||
height: 14px;
|
||||
padding: 2px 3px;
|
||||
content: "#programming [+ver 1.0] :: https://hack.chat - The Next Frontier of Unknown Pleasures";
|
||||
border: 2px solid gray;
|
||||
border-bottom: 2px solid gray;
|
||||
background: linear-gradient(to right, #000080, #1084d0);
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
text-overflow:ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#messages > :first-child {
|
||||
background: #1f71a4!important;
|
||||
}
|
||||
#sidebar {
|
||||
width: 195px;
|
||||
}
|
||||
#users li {
|
||||
list-style-type: none!important;
|
||||
margin-left: -1.3em;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
#sidebar-content {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content:start;
|
||||
align-items:start;
|
||||
}
|
||||
#sidebar-content hr {
|
||||
display:none;
|
||||
}
|
||||
#sidebar-content select, #sidebar-content button {
|
||||
border-radius: 0;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
#sidebar-content > :nth-child(19) {
|
||||
/* border: 1px solid red; */
|
||||
margin-top: 80vh;
|
||||
margin-bottom: 2.5em;
|
||||
}
|
||||
#sidebar-content > :nth-child(22) {
|
||||
display: none;
|
||||
}
|
||||
#sidebar-content > :nth-child(21) {
|
||||
display: none;
|
||||
}
|
||||
#sidebar-content > :nth-child(1) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* chat form */
|
||||
#footer {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
#footer .container {
|
||||
margin: 0 0 0 3em;
|
||||
border: 2px solid gray;
|
||||
max-width: calc(100% - 22em);
|
||||
overflow: hidden;
|
||||
}
|
||||
#chatform {
|
||||
height: 4em;
|
||||
overflow: hidden;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
#chatinput {
|
||||
padding: 1px 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* chat room */
|
||||
pre {
|
||||
margin-top: 0.3rem;
|
||||
margin-bottom: 0.3rem;
|
||||
margin-left: 0em;
|
||||
overflow: hidden;
|
||||
padding: 0.1rem;
|
||||
font-weight: 400;
|
||||
background: #1d1f21;
|
||||
border: 0;
|
||||
border-radius: 3px;
|
||||
width: calc(100% - 17em);
|
||||
}
|
||||
.message {
|
||||
position: relative;
|
||||
border: 0 !important;
|
||||
padding: 0.2em 0;
|
||||
}
|
||||
.message .nick {
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
margin-left: 6.6em;
|
||||
width: 226px;
|
||||
}
|
||||
.trip {
|
||||
display: inline-block!important;
|
||||
width: 6em;
|
||||
text-align: right;
|
||||
margin-right: 0.75em;
|
||||
}
|
||||
.nick > a {
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
}
|
||||
.nick > a::before {
|
||||
display: inline;
|
||||
content: attr(title);
|
||||
font-weight: normal;
|
||||
margin-left: -5.8em;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
/* Missing trip */
|
||||
.message .nick a:only-child {
|
||||
margin-left: 5.5em;
|
||||
}
|
||||
.message .nick a::after {
|
||||
content: "|";
|
||||
position: absolute;
|
||||
font-weight: bolder;
|
||||
color: #6e6b5e;
|
||||
font-size: 10px;
|
||||
margin-top: 1px;
|
||||
margin-left: 0.6em;
|
||||
}
|
||||
/* system */
|
||||
.message.info {
|
||||
background: #2a7550!important;
|
||||
}
|
||||
.message.info * {
|
||||
color: black!important;
|
||||
}
|
||||
.message.warn {
|
||||
background: #887221!important;
|
||||
}
|
||||
.message.warn * {
|
||||
color: black!important;
|
||||
}
|
||||
.info > .nick {
|
||||
margin-left: 6.6em;
|
||||
}
|
||||
.info > .nick > :only-child {
|
||||
margin-left: 15em;
|
||||
}
|
||||
.message.info .nick a::after, .message.warn .nick a::after {
|
||||
color: black;
|
||||
}
|
||||
/* misc */
|
||||
.text > p {
|
||||
line-height: 1.2em !important;
|
||||
width: calc(100% - 20px);
|
||||
display: inline-block;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
.text > pre, .text > blockquote:first-child {
|
||||
display: block;
|
||||
margin: 6px 0 5px 6px;
|
||||
width: calc(100% - 2.3em);
|
||||
}
|
||||
.text > ol {
|
||||
margin-left: 20px;
|
||||
}
|
||||
.message .text:not(:first-child) {
|
||||
width: auto;
|
||||
margin-left: 320px;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user