[gnome-shell-sass] panel: Indicate focus using a pill-shaped background

[Florian Müllner <fmuellner src gnome org>]

commit 0ea27ebc85b25a3264fd7025abaa867a36a66b49
Author: Jonas Dreßler <verdre v0yd nl>
Date:   Tue Aug 4 13:47:59 2020 +0200

    panel: Indicate focus using a pill-shaped background
    
    The current way of indicating focus of elements in the panel does not
    work very well with a fully-transparent panel, a line at the bottom of
    the panel doesn't make too much sense if there is no real panel, but
    only the text and icons.
    
    To make the indicators look better in this case, switch to a pill-shaped
    background color to indicate the focus of items in the panel.
    
    For this to look good, there has to be a small black border above and
    below the background, this also requires increasing the height of the
    panel (from 1.86em to 2.2em) for visual purposes.
    
    Also, since we now no longer need to color the lower bottom of the
    panel, we can remove the custom drawing code for the border of the
    panels corner, so do that.
    
    Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1397>

 widgets/_calendar.scss |  6 +++---
 widgets/_panel.scss    | 52 +++++++++++++++++++++-----------------------------
 2 files changed, 25 insertions(+), 33 deletions(-)
---
diff --git a/widgets/_calendar.scss b/widgets/_calendar.scss
index 16391a1..33aea17 100644
--- a/widgets/_calendar.scss
+++ b/widgets/_calendar.scss
@@ -1,11 +1,11 @@
 /* Date/Time Menu */
 
 .clock-display-box {
-  spacing: $base_spacing / 2;
+  spacing: 2px;
 
   .clock {
-    padding-left: $base_padding;
-    padding-right: $base_padding;
+    padding-left: $base_padding * 2;
+    padding-right: $base_padding * 2;
   }
 }
 
diff --git a/widgets/_panel.scss b/widgets/_panel.scss
index 1ee17d3..9c41c15 100644
--- a/widgets/_panel.scss
+++ b/widgets/_panel.scss
@@ -4,7 +4,7 @@
 $panel_corner_radius: $base_border_radius+1;
 $panel_bg_color: #000;
 $panel_fg_color: #ccc;
-$panel_height: 1.86em;
+$panel_height: 2.2em;
 
 
 #panel {
@@ -21,7 +21,6 @@ $panel_height: 1.86em;
     .panel-corner {
       -panel-corner-radius: 0;
       -panel-corner-background-color: transparent;
-      -panel-corner-border-color: transparent;
     }
   }
 
@@ -35,11 +34,6 @@ $panel_height: 1.86em;
     -panel-corner-radius: $panel_corner_radius;
     -panel-corner-background-color: $panel_bg_color;
     -panel-corner-border-width: 2px;
-    -panel-corner-border-color: transparent;
-
-    &:active, &:overview, &:focus {
-      -panel-corner-border-color: lighten($selected_bg_color,5%);
-    }
   }
 
   // panel menus
@@ -48,13 +42,30 @@ $panel_height: 1.86em;
     color: $panel_fg_color;
     -natural-hpadding: $base_padding * 2;
     -minimum-hpadding: $base_padding;
+    transition-duration: 150ms;
+    border: 3px solid transparent;
+    border-radius: 99px;
 
-    &:hover {
-      color: lighten($panel_fg_color, 20%);
+    &.clock-display {
+      .clock {
+        transition-duration: 150ms;
+        border: 3px solid transparent;
+        border-radius: 99px;
+      }
     }
 
-    &:active, &:overview, &:focus, &:checked {
-      color: lighten($panel_fg_color, 20%);
+    &:hover, &:active, &:overview, &:focus, &:checked {
+      box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.20);
+
+      // The clock display needs to have the background on .clock because
+      // we want to exclude the do-not-disturb indicator from the background
+      &.clock-display {
+        box-shadow: none;
+
+        .clock {
+          box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.20);
+        }
+      }
     }
 
     // status area icons
@@ -83,25 +94,6 @@ $panel_height: 1.86em;
     }
   }
 
-  .panel-button {
-    &:active, &:overview, &:focus, &:checked {
-      // Trick due to St limitations. It needs a background to draw a box-shadow
-      background-color: rgba(0, 0, 0, 0.01);
-      box-shadow: inset 0 -2px 0 0 lighten($selected_bg_color,5%);
-    }
-  }
-
-  .panel-button.clock-display {
-    // Move highlight from .panel-button to .clock
-    &:active, &:overview, &:focus, &:checked {
-      box-shadow: none;
-
-      .clock {
-        background-color: rgba(0, 0, 0, 0.01);
-        box-shadow: inset 0 -2px 0 0 lighten($selected_bg_color,5%);
-      }
-    }
-  }
 
   .panel-status-indicators-box,
   .panel-status-menu-box {