paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-07 23:43:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

css: Refactor theme colors for #recent_view.

Browse Source 
This change moves the light and dark theme colors for
`#recent_view` element to CSS variables.
This commit is contained in:
sanchi-t
2024-10-31 12:12:52 +05:30
committed by Tim Abbott
parent 0232eaba35
commit 92b8d66c3b
3 changed files with 34 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
web/styles/app_variables.css
View File

@@ -698,6 +698,14 @@
--color-background-recent-view-unread-row-hover: hsl(210deg 100% 97%); --color-background-recent-view-unread-row-hover: hsl(210deg 100% 97%);
--color-recent-view-link: hsl(205deg 47% 42%); --color-recent-view-link: hsl(205deg 47% 42%);
--color-recent-view-link-hover: hsl(214deg 40% 58%); --color-recent-view-link-hover: hsl(214deg 40% 58%);
--color-background-recent-filters-button-focus: hsl(0deg 0% 80%);
--color-background-recent-filters-button-disabled: hsl(0deg 0% 100%);
--color-border-recent-filters-button-disabled: hsl(0deg 0% 80%);
--color-recent-view-participant-overflow-text: hsl(0deg 0% 0%);
--color-background-recent-view-participant-overflow: hsl(0deg 0% 88%);
--color-background-recent-view-selected: hsl(0deg 11% 93%);
--color-background-recent-view-table-thead-th: hsl(0deg 0% 100%);
--color-background-recent-view-table-thead-sort-header: hsl(0deg 0% 95%);
/* Compose box colors */ /* Compose box colors */
--color-compose-box-background: hsl(232deg 30% 92%); --color-compose-box-background: hsl(232deg 30% 92%);
@@ -1458,6 +1466,14 @@
--color-background-recent-view-unread-row-hover: hsl(212deg 30% 22% / 60%); --color-background-recent-view-unread-row-hover: hsl(212deg 30% 22% / 60%);
--color-recent-view-link: hsl(206deg 89% 74%); --color-recent-view-link: hsl(206deg 89% 74%);
--color-recent-view-link-hover: hsl(208deg 64% 52%); --color-recent-view-link-hover: hsl(208deg 64% 52%);
--color-background-recent-filters-button-focus: hsl(0deg 0% 0% / 50%);
--color-background-recent-filters-button-disabled: hsl(0deg 0% 0% / 50%);
--color-border-recent-filters-button-disabled: hsl(0deg 0% 0%);
--color-recent-view-participant-overflow-text: hsl(0deg 0% 100%);
--color-background-recent-view-participant-overflow: hsl(211deg 18% 25%);
--color-background-recent-view-selected: hsl(228deg 11% 17%);
--color-background-recent-view-table-thead-th: hsl(228deg 11% 17%);
--color-background-recent-view-table-thead-sort-header: hsl(211deg 29% 14%);
/* Compose box colors */ /* Compose box colors */
--color-compose-box-background: hsl(228deg 11% 17%); --color-compose-box-background: hsl(228deg 11% 17%);

27
web/styles/dark_theme.css
View File

@@ -496,33 +496,6 @@
} }
} }
.recent_view_participant_overflow {
color: hsl(0deg 0% 100%) !important;
background-color: hsl(211deg 18% 25%) !important;
}
.recent_view_container #recent_view_table .button-recent-filters {
&:focus {
background-color: hsl(0deg 0% 0% / 50%) !important;
}
&.fake_disabled_button {
&:hover {
background-color: hsl(0deg 0% 0% / 50%);
border-color: hsl(0deg 0% 0%);
}
}
}
.button-recent-selected,
#recent_view_table thead th {
background-color: hsl(228deg 11% 17%) !important;
&[data-sort]:hover {
background-color: hsl(211deg 29% 14%) !important;
}
}
#recent_view_table { #recent_view_table {
.zulip-icon-user { .zulip-icon-user {
opacity: 0.7; opacity: 0.7;

27
web/styles/recent_view.css
View File

@@ -181,7 +181,9 @@
} }
&:focus { &:focus {
background-color: hsl(0deg 0% 80%); background-color: var(
--color-background-recent-filters-button-focus
);
outline: 0; outline: 0;
} }
@@ -190,14 +192,18 @@
opacity: 0.5; opacity: 0.5;
&:hover { &:hover {
background-color: hsl(0deg 0% 100%); background-color: var(
border-color: hsl(0deg 0% 80%); --color-background-recent-filters-button-disabled
);
border-color: var(
--color-border-recent-filters-button-disabled
);
} }
} }
} }
.button-recent-selected { .button-recent-selected {
background-color: hsl(0deg 11% 93%); background-color: var(--color-background-recent-view-selected);
} }
.unread_count { .unread_count {
@@ -316,15 +322,16 @@
.recent_view_participant_overflow { .recent_view_participant_overflow {
border: 0; border: 0;
border-radius: 6px; border-radius: 6px;
color: hsl(0deg 0% 100%); color: var(--color-recent-view-participant-overflow-text);
display: block; display: block;
height: 24px; height: 24px;
text-align: center; text-align: center;
background-color: hsl(0deg 0% 88%); background-color: var(
--color-background-recent-view-participant-overflow
);
} }
.recent_view_participant_overflow { .recent_view_participant_overflow {
color: hsl(0deg 0% 0%);
line-height: 24px; line-height: 24px;
} }
@@ -356,7 +363,7 @@
} }
& thead th { & thead th {
background-color: hsl(0deg 0% 100%); background-color: var(--color-background-recent-view-table-thead-th);
color: inherit; color: inherit;
border-top: 1px solid hsl(0deg 0% 0% / 20%) !important; border-top: 1px solid hsl(0deg 0% 0% / 20%) !important;
border-bottom: 1px solid hsl(0deg 0% 0% / 20%) !important; border-bottom: 1px solid hsl(0deg 0% 0% / 20%) !important;
@@ -384,7 +391,9 @@
&[data-sort]:hover { &[data-sort]:hover {
cursor: pointer; cursor: pointer;
background-color: hsl(0deg 0% 95%); background-color: var(
--color-background-recent-view-table-thead-sort-header
);
transition: background-color 100ms ease-in-out; transition: background-color 100ms ease-in-out;
&:not(.active)::after { &:not(.active)::after {