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 modal. 

This change moves the light and dark theme colors for modal to
CSS variables.
This commit is contained in:
sanchi-t 2024-09-13 10:44:13 +05:30
parent 63a7c9061b
commit e1d6b4e65b
3 changed files with 22 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
web/styles/app_variables.css
View File

@ -689,6 +689,14 @@
--color-text-url-hover: hsl(200deg 100% 25%);
--color-text-settings-field-hint: hsl(0deg 0% 57%);
/* Modal colors */
--color-user-profile-manage-button: hsl(200deg 100% 50%);
--color-user-profile-manage-button-hover: hsl(200deg 100% 25%);
--color-modal-footer-border: hsl(0deg 0% 87%);
--color-modal-close-hover-bg: hsl(0deg 0% 90%);
--color-read-receipts-item-hover: hsl(0deg 0% 0% / 5%);
--color-read-receipts-item-active-focus: hsl(0deg 0% 0% / 10%);
/* Markdown colors */
--color-background-rendered-markdown-thead: hsl(0deg 0% 93%);
--color-border-rendered-markdown-table: hsl(0deg 0% 80%);
@ -1140,6 +1148,14 @@
--color-text-url-hover: hsl(200deg 79% 66%);
--color-text-settings-field-hint: hsl(0deg 0% 52%);
/* Modal colors */
--color-user-profile-manage-button: hsl(200deg 100% 50%);
--color-user-profile-manage-button-hover: hsl(200deg 79% 66%);
--color-modal-footer-border: hsl(0deg 0% 100% / 20%);
--color-modal-close-hover-bg: hsl(0deg 0% 91% / 10%);
--color-read-receipts-item-hover: hsl(0deg 0% 100% / 5%);
--color-read-receipts-item-active-focus: hsl(0deg 0% 100% / 10%);
/* Markdown colors */
--color-background-rendered-markdown-thead: hsl(0deg 0% 0% / 50%);
--color-border-rendered-markdown-table: hsl(0deg 0% 33%);

30
web/styles/dark_theme.css
View File

@ -62,26 +62,7 @@
.user-profile-manage-own-edit-button,
.user-profile-manage-others-edit-button,
.user-profile-manage-own-copy-link-button {
color: hsl(200deg 100% 50%);
cursor: pointer;
&:hover {
color: hsl(200deg 79% 66%);
}
}
.modal__content.simplebar-scrollable-y + .modal__footer {
border-top: 1px solid hsl(0deg 0% 100% / 20%);
}
.modal__close {
&::before {
color: hsl(236deg 33% 90%);
}
&:hover {
background: hsl(0deg 0% 91% / 10%);
}
}
#subscription_overlay #stream-creation .settings-sticky-footer,
@ -997,17 +978,6 @@
}
}
#read_receipts_modal .read_receipts_list li {
&:hover {
background-color: hsl(0deg 0% 100% / 5%);
}
&:active,
&:focus {
background-color: hsl(0deg 0% 100% / 10%);
}
}
#settings_page,
#stream_settings,
#user_group_settings {

12
web/styles/modal.css
View File

@ -75,11 +75,11 @@
.user-profile-manage-own-edit-button,
.user-profile-manage-others-edit-button,
.user-profile-manage-own-copy-link-button {
color: hsl(200deg 100% 50%);
color: var(--color-user-profile-manage-button);
cursor: pointer;
&:hover {
color: hsl(200deg 100% 25%);
color: var(--color-user-profile-manage-button-hover);
}
}
}
@ -93,7 +93,7 @@
border: 0;
&:hover {
background: hsl(0deg 0% 90%);
background: var(--color-modal-close-hover-bg);
}
}
@ -107,7 +107,7 @@
line-height: 1.5;
&.simplebar-scrollable-y + .modal__footer {
border-top: 1px solid hsl(0deg 0% 87%);
border-top: 1px solid var(--color-modal-footer-border);
}
}
@ -256,12 +256,12 @@
line-height: 26px;
&:hover {
background-color: hsl(0deg 0% 0% / 5%);
background-color: var(--color-read-receipts-item-hover);
}
&:active,
&:focus {
background-color: hsl(0deg 0% 0% / 10%);
background-color: var(--color-read-receipts-item-active-focus);
outline: none;
}
}