Use a combination background + left border for highlight messages

This commit is contained in:
Jérémie Astori 2018-06-04 00:55:36 -04:00
parent b986025e1a
commit c2ce56292c
No known key found for this signature in database
GPG Key ID: B9A4F245CD67BDE8
2 changed files with 36 additions and 17 deletions

View File

@ -19,6 +19,10 @@
/* Color of the unread message marker, text and separator */ /* Color of the unread message marker, text and separator */
--unread-marker-color: rgba(231, 76, 60, 0.5); --unread-marker-color: rgba(231, 76, 60, 0.5);
/* Background and left-border color of highlight messages */
--highlight-bg-color: #efe8dc;
--highlight-border-color: #b08c4f;
} }
/* Samsung Internet <7.0 and Microsoft Edge support (yes, both of them use webkit prefix) */ /* Samsung Internet <7.0 and Microsoft Edge support (yes, both of them use webkit prefix) */
@ -1175,7 +1179,7 @@ background on hover (unless active) */
} }
#chat .time { #chat .time {
color: #ddd; color: #999;
padding-left: 10px; padding-left: 10px;
width: 55px; width: 55px;
} }
@ -1365,11 +1369,23 @@ background on hover (unless active) */
} }
#chat .error, #chat .error,
#chat .error .from, #chat .error .from {
#chat .channel .highlight .from, color: #e74c3c;
#chat .channel .highlight .text, }
#chat .channel .highlight .user {
color: #f00; #chat .channel .message.highlight {
background-color: var(--highlight-bg-color);
border-left: 5px solid var(--highlight-border-color);
}
#chat .channel .message.highlight .time {
padding-left: 5px;
width: 50px;
color: #696969;
}
#chat .channel .message.highlight .content {
border-left: 1px solid var(--highlight-bg-color);
} }
#chat .toggle-content.opened .more-caret, /* Expand/Collapse link previews */ #chat .toggle-content.opened .more-caret, /* Expand/Collapse link previews */
@ -2429,12 +2445,12 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
#chat .messages { #chat .messages {
display: block; display: block;
padding: 5px 10px; padding: 5px 0;
} }
#chat .msg { #chat .msg {
display: block; display: block;
padding: 2px 0; padding: 2px 10px;
} }
#chat .time, #chat .time,
@ -2445,16 +2461,15 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
padding: 0; padding: 0;
} }
#chat .channel .message.highlight .time {
padding-left: 0;
}
#chat .condensed-summary .time, #chat .condensed-summary .time,
#chat .condensed-summary .from { #chat .condensed-summary .from {
display: none; display: none;
} }
#chat .date-marker,
#chat .unread-marker {
margin: 0;
}
#help .help-item .subject { #help .help-item .subject {
display: inline-block; display: inline-block;
padding-bottom: 4px; padding-bottom: 4px;

View File

@ -6,6 +6,12 @@
--window-bg-color: #303e4a; --window-bg-color: #303e4a;
--date-marker-color: #97ea70; --date-marker-color: #97ea70;
--unread-marker-color: #f92772; --unread-marker-color: #f92772;
--highlight-bg-color: #4d4332;
--highlight-border-color: #b08c4f;
}
#chat .channel .message.highlight .time {
color: white;
} }
#windows .logo { #windows .logo {
@ -121,10 +127,7 @@
} }
#chat .error, #chat .error,
#chat .error .from, #chat .error .from {
#chat .channel .highlight,
#chat .channel .highlight .from,
#chat .channel .highlight .text {
color: #f92772; color: #f92772;
} }
@ -136,6 +139,7 @@
color: #b7c5d1; color: #b7c5d1;
} }
#chat .time,
#chat .condensed .content, #chat .condensed .content,
#chat .away .content, #chat .away .content,
#chat .back .content, #chat .back .content,