Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

css: Use variables for colors used to display message time. 

This makes color changes easy to review and maintain in the
codebase.

This is also an attempt towards removing dark_theme.css
as we will only need to override color variables for these
elements in `body.dark-theme` in zulip.css without need of
overriding colors for any specific elements.
This commit is contained in:
Aman Agrawal 2022-08-04 12:13:31 +00:00 committed by Tim Abbott
parent 97a5690f55
commit 5a3d3f5303
2 changed files with 17 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
static/styles/dark_theme.css
View File

@ -378,8 +378,7 @@
/* these are converting grey things to "new grey" */
:disabled,
input:not([type="radio"]):read-only,
textarea:read-only,
.recipient_row_date {
textarea:read-only {
color: inherit;
opacity: 0.5;
}
@ -520,11 +519,6 @@
}
}
/* Disable blue link styling for the message timestamp link. */
.message_time {
color: hsl(236, 33%, 90%);
}
.emoji-popover .reaction:focus {
box-shadow: 0 0 1px hsl(0, 0%, 98%);
}

18
static/styles/zulip.css
View File

@ -52,6 +52,20 @@ body,
:root {
color-scheme: light;
--color-message-time: hsl(0, 0%, 20%);
--color-recipient-row-date: hsl(0, 0%, 53%);
}
:root.dark-theme {
--color-message-time: hsl(236, 33%, 90%);
--color-recipient-row-date: hsl(236, 33%, 90%);
}
@media (prefers-color-scheme: dark) {
:root.color-scheme-automatic {
@extend :root.dark-theme;
}
}
input,
@ -901,7 +915,7 @@ td.pointer {
opacity: 0.4;
font-weight: 400;
/* Disable blue link styling for the message timestamp link. */
color: hsl(0, 0%, 20%);
color: var(--color-message-time);
transition: background-color 1.5s ease-in, color 1.5s ease-in;
a& {
@ -1161,7 +1175,7 @@ td.pointer {
}
.recipient_row_date {
color: hsl(0, 0%, 53%);
color: var(--color-recipient-row-date);
font-size: 12px;
font-weight: 600;
padding: 3px 11px 2px 10px;