Use css variables for some things; change highlights style again

This commit is contained in:
Pavel Djundik 2018-04-12 12:57:44 +03:00
parent 454c6f42b8
commit f925ecc4db
1 changed files with 34 additions and 35 deletions

View File

@ -5,6 +5,12 @@
* License: MIT
*/
:root {
--link-color: #268bd2;
--background-dark-color: #051114;
--background-light-color: #002b36;
}
::-webkit-scrollbar {
display: none;
}
@ -69,7 +75,7 @@ kbd {
#chat .userlist,
#windows .window,
body {
background-color: #051114;
background-color: var(--background-dark-color);
color: #fff;
}
@ -78,10 +84,6 @@ body {
color: #fff;
}
#chat a {
color: #268bd2;
}
#chat .date-marker,
#chat .unread-marker {
opacity: 1;
@ -92,21 +94,21 @@ body {
}
#chat .date-marker-text::before {
background-color: #051114;
background-color: var(--background-dark-color);
color: #acf046;
}
#chat .unread-marker::before {
border-color: #268bd2;
border-color: var(--link-color);
}
#chat .unread-marker-text::before {
background-color: #051114;
color: #268bd2;
background-color: var(--background-dark-color);
color: var(--link-color);
}
#viewport .lt::after {
border-color: #002b36;
border-color: var(--background-light-color);
}
#chat .show-more-button {
@ -138,7 +140,7 @@ body {
}
#sidebar .chan.lobby {
color: #268bd2;
color: var(--link-color);
}
#sidebar .chan.lobby .lobby-wrap:hover,
@ -157,7 +159,7 @@ body {
}
#sidebar .chan.active {
background-color: #051114;
background-color: var(--background-dark-color);
}
#footer {
@ -172,7 +174,7 @@ body {
#sidebar,
#footer {
color: #fff;
background-color: #002b36;
background-color: var(--background-light-color);
}
#chat .time {
@ -184,7 +186,7 @@ body {
#windows .header,
#chat .content,
#chat .userlist {
border-color: #002b36;
border-color: var(--background-light-color);
}
#chat .userlist .search,
@ -281,18 +283,19 @@ body {
border-bottom: 1px dotted #555;
}
#chat .channel .highlight .time {
background: linear-gradient(to right, var(--link-color) 5px, transparent 5px);
color: #fff;
}
#chat .channel .highlight {
background-color: var(--background-light-color);
}
#chat .channel .highlight .from,
#chat .channel .highlight .from .user,
#chat .channel .highlight .text {
color: #fff !important;
}
#chat .channel .highlight .from {
background: linear-gradient(to right, transparent 0%, #2072ac 60%);
}
#chat .channel .highlight .content {
border-color: #2072ac;
#chat .channel .highlight .text,
#chat .channel .highlight .user {
color: inherit;
}
#windows .header .topic,
@ -304,11 +307,11 @@ body {
#chat table.ban-list th,
#chat table.channel-list td,
#chat table.ban-list td {
border-bottom-color: #002b36;
border-bottom-color: var(--background-light-color);
}
#chat .toggle-content {
background-color: #002b36;
background-color: var(--background-light-color);
color: #99a2b4;
}
@ -317,10 +320,6 @@ body {
opacity: 1;
}
#chat .toggle-type-error {
padding: 4px;
}
/* Increase contrast of some IRC colors */
.irc-fg2 { color: #0074d9; }
.irc-fg5 { color: #e969a7; }
@ -341,14 +340,14 @@ body {
content: ">";
}
/* expand highlight background to edges of the screen */
#chat .channel .highlight .time {
color: #fff;
background: #2072ac;
margin-left: -10px;
padding-left: 10px;
}
#chat .channel .highlight .from {
background: linear-gradient(to left, transparent 0%, #2072ac 100%);
#chat .channel .highlight {
margin: 0 -10px;
padding: 0 10px;
}
}