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