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

left_sidebar: Add hover styles for action headings.

This commit is contained in:
Karl Stolley 2024-09-26 15:47:05 -05:00 committed by Tim Abbott
parent 04f6082dfb
commit 762617e23f
2 changed files with 44 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/styles/app_variables.css
View File

@ -568,6 +568,9 @@
--color-shadow-sidebar-row-hover: hsl(0deg 0% 0% / 30%);
--color-background-sidebar-action-hover: hsl(240deg 100% 93%);
--color-background-navigation-item-hover: hsl(240deg 100% 50% / 7%);
--color-background-sidebar-action-heading-hover: var(
--color-background-navigation-item-hover
);
--color-navbar-bottom-border: hsl(0deg 0% 80%);
--color-unread-marker: hsl(217deg 64% 59%);
--color-masked-unread-marker: hsl(0deg 0% 80%);
@ -713,6 +716,7 @@
--color-text-personal-menu-some-status: hsl(0deg 0% 40%);
--color-text-sidebar-heading: hsl(216deg 65% 20%);
--color-text-sidebar-action-heading: hsl(240deg 30% 40%);
--color-text-sidebar-action-heading-hover: hsl(240deg 100% 15%);
--color-text-sidebar-popover-menu: hsl(0deg 0% 20%);
--color-text-user-card-secondary: var(--grey-550);
--color-text-url: hsl(200deg 100% 40%);
@ -1040,6 +1044,9 @@
--color-shadow-sidebar-row-hover: hsl(0deg 0% 100% / 30%);
--color-background-sidebar-action-hover: hsl(240deg 25% 35%);
--color-background-navigation-item-hover: hsl(240deg 100% 75% / 20%);
--color-background-sidebar-action-heading-hover: var(
--color-background-navigation-item-hover
);
--color-navbar-bottom-border: hsl(0deg 0% 0% / 60%);
--color-unread-marker: hsl(217deg 64% 59%);
--color-masked-unread-marker: hsl(0deg 0% 30%);
@ -1193,6 +1200,7 @@
--color-text-user-card-secondary: var(--grey-400);
--color-text-sidebar-heading: hsl(216deg 50% 75%);
--color-text-sidebar-action-heading: hsl(240deg 35% 68%);
--color-text-sidebar-action-heading-hover: hsl(240deg 100% 90%);
--color-text-url-hover: hsl(200deg 79% 66%);
--color-text-settings-field-hint: hsl(0deg 0% 52%);

44
web/styles/left_sidebar.css
View File

@ -262,6 +262,16 @@
count, when one appears there. */
align-items: baseline;
&:hover {
background-color: var(
--color-background-sidebar-action-heading-hover
);
.dm-name {
color: var(--color-text-sidebar-action-heading-hover);
}
}
.unread_count {
margin-top: 2px;
}
@ -330,6 +340,10 @@
}
}
&:has(.sidebar-topic-action-heading):hover {
background-color: var(--color-background-sidebar-action-heading-hover);
}
&.active-filter,
&.active-sub-filter {
&:has(.left_sidebar_menu_icon_visible) {
@ -1076,9 +1090,8 @@ li.top_left_scheduled_messages {
&:hover {
text-decoration: none;
/* Push back against a:hover color in dark_theme.css
Eventually this will take redesigned hover colors. */
color: var(--color-text-sidebar-action-heading) !important;
/* Push back against a:hover color in dark_theme.css. */
color: var(--color-text-sidebar-action-heading-hover) !important;
}
}
@ -1373,21 +1386,33 @@ li.topic-list-item {
top: 0;
z-index: 2;
grid-template-columns:
var(--left-sidebar-toggle-width-offset) 0 0 minmax(0, 1fr)
max-content 0 42px;
grid-template-rows: var(--line-height-sidebar-row-prominent);
[topics-content-area-start] var(--left-sidebar-toggle-width-offset)
0 0 minmax(0, 1fr)
max-content 0 42px [topics-content-area-end];
grid-template-rows:
[topics-content-area-start] var(--line-height-sidebar-row-prominent)
[topics-content-area-end];
padding-top: var(--left-sidebar-sections-vertical-gutter);
color: hsl(0deg 0% 43%);
background-color: var(--color-background);
.show-all-streams {
grid-area: row-content;
grid-area: topics-content-area;
padding-left: var(--left-sidebar-toggle-width-offset);
font-size: var(--font-size-sidebar-action-heading);
font-weight: var(--font-weight-sidebar-action-heading);
font-variant: var(--font-variant-sidebar-action-heading);
text-transform: var(--text-transform-sidebar-action-heading);
color: var(--color-text-sidebar-action-heading);
text-decoration: none;
&:hover {
background-color: var(
--color-background-sidebar-action-heading-hover
);
box-shadow: inset 0 0 0 1px var(--color-shadow-sidebar-row-hover);
border-radius: 4px;
}
}
.unread_count {
@ -1682,7 +1707,10 @@ li.topic-list-item {
}
&:hover {
background-color: hsl(120deg 12.3% 71.4% / 38%);
background-color: var(
--color-background-sidebar-action-heading-hover
);
box-shadow: inset 0 0 0 1px var(--color-shadow-sidebar-row-hover);
border-radius: 4px;
}
}