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

@@ -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;
     }
 

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;

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%);