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

css: Refactor theme colors for `settings`. 

This change moves the light and dark theme colors for
`settings` to CSS variables.
This commit is contained in:
sanchi-t 2024-09-15 20:44:56 +05:30
parent 63a7c9061b
commit 349ff832e5
3 changed files with 10 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/styles/app_variables.css
View File

@ -689,6 +689,10 @@
--color-text-url-hover: hsl(200deg 100% 25%);
--color-text-settings-field-hint: hsl(0deg 0% 57%);
/* Settings */
--color-realm-enable-spectator-access-link: hsl(0deg 0% 20%);
--color-unmute-stream-hover: hsl(0deg 0% 20%);
/* Markdown colors */
--color-background-rendered-markdown-thead: hsl(0deg 0% 93%);
--color-border-rendered-markdown-table: hsl(0deg 0% 80%);
@ -1140,6 +1144,10 @@
--color-text-url-hover: hsl(200deg 79% 66%);
--color-text-settings-field-hint: hsl(0deg 0% 52%);
/* Settings */
--color-realm-enable-spectator-access-link: hsl(236deg 33% 90%);
--color-unmute-stream-hover: hsl(0deg 0% 100%);
/* Markdown colors */
--color-background-rendered-markdown-thead: hsl(0deg 0% 0% / 50%);
--color-border-rendered-markdown-table: hsl(0deg 0% 33%);

14
web/styles/dark_theme.css
View File

@ -983,20 +983,6 @@
}
}
/* Originally the icon inherits the color of label, but when the setting
is disabled, the color of the label is changed and thus the icon becomes
too light. So, we set the color explicitly to original color of label to
keep the color of the icon same even when the setting is disabled. */
#id_realm_enable_spectator_access_label a {
color: hsl(236deg 33% 90%);
}
#stream-specific-notify-table .unmute_stream {
&:hover {
color: hsl(0deg 0% 100%);
}
}
#read_receipts_modal .read_receipts_list li {
&:hover {
background-color: hsl(0deg 0% 100% / 5%);

4
web/styles/settings.css
View File

@ -283,7 +283,7 @@ h3,
too light. So, we set the color explicitly to original color of label to
keep the color of the icon same even when the setting is disabled. */
#id_realm_enable_spectator_access_label a {
color: hsl(0deg 0% 20%);
color: var(--color-realm-enable-spectator-access-link);
}
.settings_select {
@ -462,7 +462,7 @@ input[type="checkbox"] {
top: 2px;
&:hover {
color: hsl(0deg 0% 20%);
color: var(--color-unmute-stream-hover);
cursor: pointer;
}
}