paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-18 12:54:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

dark_theme: Cleanup todo widget colors.

Browse Source 
Fixes part of #35880.
This commit is contained in:
Sayam Samal
2025-09-09 11:46:00 +05:30
committed by Karl Stolley
parent 732cdaa800
commit c1e65280aa
3 changed files with 31 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
web/styles/app_variables.css
View File

@@ -1503,6 +1503,27 @@
hsl(185deg 40% 35%) hsl(185deg 40% 35%)
); );
--color-poll-names: light-dark(hsl(0deg 0% 45%), hsl(236deg 15% 70%)); --color-poll-names: light-dark(hsl(0deg 0% 45%), hsl(236deg 15% 70%));
/* TODO Widget */
--color-border-todo-checkbox: light-dark(
hsl(156deg 28% 70%),
color-mix(in oklch, hsl(185deg 40% 45%) 70%, transparent)
);
--color-border-todo-checkbox-hover: light-dark(
hsl(156deg 30% 50%),
hsl(185deg 40% 35%)
);
--color-border-todo-checkbox-checked: light-dark(
hsl(156deg 41% 40%),
hsl(185deg 40% 45%)
);
--color-background-todo-checkbox-hover: light-dark(
transparent,
hsl(185deg 20% 20%)
);
--color-background-todo-checkbox-checked: light-dark(
hsl(156deg 41% 40%),
hsl(185deg 40% 45%)
);
/* KBD colors */ /* KBD colors */
--color-kbd-background: light-dark(hsl(0deg 0% 98%), hsl(211deg 29% 14%)); --color-kbd-background: light-dark(hsl(0deg 0% 98%), hsl(211deg 29% 14%));

25
web/styles/dark_theme.css
View File

@@ -438,31 +438,6 @@
} }
} }
/* Widgets: Todo */
.todo-widget {
& label.checkbox {
& input[type="checkbox"] {
~ .custom-checkbox {
border-color: hsl(185deg 40% 45%);
opacity: 0.7;
}
&:hover ~ .custom-checkbox {
background-color: hsl(185deg 20% 20%);
border-color: hsl(185deg 40% 35%);
}
&:checked ~ .custom-checkbox {
background-color: hsl(185deg 40% 45%);
}
&:focus ~ .custom-checkbox {
outline-color: hsl(0deg 0% 100% / 0%);
}
}
}
}
.panel_user_list > .pill-container, .panel_user_list > .pill-container,
.creator_details > .display_only_pill { .creator_details > .display_only_pill {
&:hover { &:hover {

14
web/styles/widgets.css
View File

@@ -70,7 +70,7 @@
font-weight: 300; font-weight: 300;
line-height: 0.8; line-height: 0.8;
text-align: center; text-align: center;
border: 2px solid hsl(156deg 28% 70%); border: 2px solid var(--color-border-todo-checkbox);
border-radius: 4px; border-radius: 4px;
filter: brightness(1); filter: brightness(1);
@@ -83,8 +83,8 @@
background-size: 75%; background-size: 75%;
background-position: 50% 50%; background-position: 50% 50%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-color: hsl(156deg 41% 40%); background-color: var(--color-background-todo-checkbox-checked);
border: 2px solid hsl(156deg 41% 40%); border-color: var(--color-border-todo-checkbox-checked);
} }
&:disabled ~ .custom-checkbox { &:disabled ~ .custom-checkbox {
@@ -93,7 +93,13 @@
} }
&:hover ~ .custom-checkbox { &:hover ~ .custom-checkbox {
border-color: hsl(156deg 30% 50%); border-color: var(--color-border-todo-checkbox-hover);
}
&:not(:checked):hover ~ .custom-checkbox {
/* We only change the background color on hover,
when the checkbox is not checked. */
background-color: var(--color-background-todo-checkbox-hover);
} }
&:focus ~ .custom-checkbox { &:focus ~ .custom-checkbox {