From fd01ebdc5d1e28e774fa4cbc6e73d36df5cdf39b Mon Sep 17 00:00:00 2001 From: Karl Stolley Date: Fri, 15 Sep 2023 11:29:22 -0500 Subject: [PATCH] vdots: Simplify colors in streamlined selectors on left sidebar. This expresses the colors for vdots icons in just three variations, all as CSS variables. The colors are all derived from the existing design, and the dots colors in the streams/topics area was used as as reference. The only visual change here, then, is to the global filters area, whose vdots were the outliers prior to this change. The three variations are: 1. hint: for touchscreens where a :hover state is not available 2. visible: for all screens when a parent element is highlighted 3. hover: for when the vdots themselves are hovered The selectors have been streamlined to use the .sidebar-menu-icon utility class, and the hover-within-a-hover color on vdots is expressed more directly, eliminating the need for selector-specificity busting via !important. Fixes: #20600 --- web/styles/dark_theme.css | 14 ++------ web/styles/left_sidebar.css | 65 ++++++++++++++++++------------------- web/styles/zulip.css | 6 ++++ 3 files changed, 40 insertions(+), 45 deletions(-) diff --git a/web/styles/dark_theme.css b/web/styles/dark_theme.css index cd56edf3bb..96eb6f5ba7 100644 --- a/web/styles/dark_theme.css +++ b/web/styles/dark_theme.css @@ -729,12 +729,7 @@ .clear_search_button:disabled:hover, #user-groups .save-instructions, .close, - #user_presences li:hover .user-list-sidebar-menu-icon, - li.top_left_all_messages:hover .all-messages-sidebar-menu-icon, - li.top_left_starred_messages:hover .starred-messages-sidebar-menu-icon, - li.top_left_drafts:hover .drafts-sidebar-menu-icon, - #stream_filters li:hover .stream-sidebar-menu-icon, - li.topic-list-item:hover .topic-sidebar-menu-icon { + #user_presences li:hover .user-list-sidebar-menu-icon { color: hsl(236deg 33% 80%); } @@ -755,12 +750,7 @@ color: hsl(236deg 33% 90%); } - #user_presences li .user-list-sidebar-menu-icon:hover, - .all-messages-sidebar-menu-icon:hover, - .starred-messages-sidebar-menu-icon:hover, - .drafts-sidebar-menu-icon:hover, - .stream-sidebar-menu-icon:hover, - .topic-sidebar-menu-icon:hover { + #user_presences li .user-list-sidebar-menu-icon:hover { color: hsl(0deg 0% 100%) !important; } diff --git a/web/styles/left_sidebar.css b/web/styles/left_sidebar.css index 3dfcdf1f72..593de2a550 100644 --- a/web/styles/left_sidebar.css +++ b/web/styles/left_sidebar.css @@ -626,14 +626,15 @@ li.top_left_scheduled_messages { All of our left sidebar handlers use absolute positioning. We should fix that. */ -.all-messages-sidebar-menu-icon, -.stream-sidebar-menu-icon, -.starred-messages-sidebar-menu-icon, -.drafts-sidebar-menu-icon, -.topic-sidebar-menu-icon { +.top_left_row .sidebar-menu-icon, +.bottom_left_row .sidebar-menu-icon { position: absolute; display: none; - right: 10px; + top: 1px; + right: 0; + font-size: 1em; + text-align: center; + padding: 0 6px; & i { padding-right: 0.35em; @@ -649,7 +650,7 @@ li.top_left_scheduled_messages { */ &:hover { - color: hsl(0deg 0% 0%) !important; + color: var(--color-vdots-hover); } /* @@ -661,22 +662,34 @@ li.top_left_scheduled_messages { @media (hover: none) { display: block; + /* Show dots on touchscreens in a less distracting, + lighter shade. */ + color: var(--color-vdots-hint); } } /* - The All messages and stream ellipsis-v (vertical 3 dots) are - pretty similar. + When you hover over list items, we hover + the vdots in light gray. + + The stream icon should always display when + any topic is hovered, which is why it gets + a more specific selector here. */ -.all-messages-sidebar-menu-icon, -.starred-messages-sidebar-menu-icon, -.drafts-sidebar-menu-icon, -.stream-sidebar-menu-icon { - top: 1px; - right: 0; - font-size: 1em; - text-align: center; - padding: 0 6px; +#stream_filters li:hover .stream-sidebar-menu-icon, +.top_left_row:hover .sidebar-menu-icon, +.bottom_left_row:hover .sidebar-menu-icon { + display: inline; + cursor: pointer; + color: var(--color-vdots-visible); + + /* + If you hover directly over the vdots icon, + show it in black. + */ + &:hover { + color: var(--color-vdots-hover); + } } /* @@ -684,7 +697,7 @@ li.top_left_scheduled_messages { font to show they're "lower" in the hierarchy, which also affects it positioning. */ -.topic-sidebar-menu-icon { +.bottom_left_row .topic-sidebar-menu-icon { top: 2px; right: 0; font-size: 0.9em; @@ -692,20 +705,6 @@ li.top_left_scheduled_messages { padding: 1px 6px 0; } -/* - When you hover over list items, we hover - the relevant ellipsis-v(vertical 3 dots) in light gray. -*/ -li.top_left_all_messages:hover .all-messages-sidebar-menu-icon, -li.top_left_starred_messages:hover .starred-messages-sidebar-menu-icon, -li.top_left_drafts:hover .drafts-sidebar-menu-icon, -#stream_filters li:hover .stream-sidebar-menu-icon, -li.topic-list-item:hover .topic-sidebar-menu-icon { - display: inline; - cursor: pointer; - color: hsl(0deg 0% 53%); -} - ul.topic-list { list-style-type: none; font-weight: normal; diff --git a/web/styles/zulip.css b/web/styles/zulip.css index ec274fa764..ae6347c0e0 100644 --- a/web/styles/zulip.css +++ b/web/styles/zulip.css @@ -184,6 +184,9 @@ body { /* The gray on the filter icons is the same as what's set on ul.filters, but with 70% opacity. */ --color-global-filter-icon: hsl(0deg 0% 20% / 70%); + --color-vdots-hint: hsl(0deg 0% 0% / 30%); + --color-vdots-visible: hsl(0deg 0% 0% / 53%); + --color-vdots-hover: hsl(0deg 0% 0%); /* Message feed loading indicator colors */ --color-zulip-logo: hsl(0deg 0% 0% / 34%); @@ -264,6 +267,9 @@ body { --color-message-action-visible: hsl(217deg 41% 90% / 50%); --color-message-action-interactive: hsl(217deg 41% 90% / 100%); --color-global-filter-icon: hsl(0deg 0% 100% / 56%); + --color-vdots-hint: hsl(0deg 0% 100% / 30%); + --color-vdots-visible: hsl(236deg 33% 80%); + --color-vdots-hover: hsl(0deg 0% 100%); /* Message feed loading indicator colors */ --color-zulip-logo: hsl(0deg 0% 100% / 50%);