[gnome-shell-sass] panel: Make the panel fully transparent while in the overview

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

commit 9c000f50d05983983fab1ad92a14478bbd4aad66
Author: Jonas Dreßler <verdre v0yd nl>
Date:   Thu Aug 6 20:58:44 2020 +0200

    panel: Make the panel fully transparent while in the overview
    
    The overview is using a heavily darkened background image nowadays.
    Since the contrast provided by this is always good enough, this makes it
    possible to always have a fully transparent panel while showing the
    overview.
    
    So change the theme to always make the panel fully transparent while the
    overview is shown. The duration of the animation for that is 250ms
    because that's the duration of the show and hide animation of the
    overview.
    
    Also add special handling for the high-contrast theme, where we always
    make the panel opaque.
    
    Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1397>

 widgets/_panel.scss | 37 ++++++++++++++++++++++++++-----------
 1 file changed, 26 insertions(+), 11 deletions(-)
---
diff --git a/widgets/_panel.scss b/widgets/_panel.scss
index 5734ab1..0f66470 100644
--- a/widgets/_panel.scss
+++ b/widgets/_panel.scss
@@ -5,22 +5,23 @@ $panel_corner_radius: $base_border_radius+1;
 $panel_bg_color: #000;
 $panel_fg_color: #ccc;
 $panel_height: 2.2em;
-
+$panel_transition_duration: 250ms; // same as the overview transition duration
 
 #panel {
   background-color: $panel_bg_color;
   font-weight: bold;
   height: $panel_height;
   font-feature-settings: "tnum";
+  transition-duration: $panel_transition_duration;
 
   // transparent panel on lock & login screens
   &.unlock-screen,
-  &.login-screen {
+  &.login-screen,
+  &:overview {
     background-color: transparent;
 
     .panel-corner {
-      -panel-corner-radius: 0;
-      -panel-corner-background-color: transparent;
+      -panel-corner-opacity: 0;
     }
   }
 
@@ -34,7 +35,9 @@ $panel_height: 2.2em;
     -panel-corner-radius: $panel_corner_radius;
     -panel-corner-background-color: $panel_bg_color;
     -panel-corner-border-width: 2px;
+    -panel-corner-border-color: transparent;
     -panel-corner-opacity: 1;
+    transition-duration: $panel_transition_duration;
   }
 
   // panel menus
@@ -83,18 +86,30 @@ $panel_height: 2.2em;
       // dimensions of the icon are hardcoded
     }
 
-    // lock & login screen styles
-    .unlock-screen &,
-    .login-screen & {
-      color: lighten($fg_color, 10%);
-      &:focus, &:hover, &:active { color: lighten($fg_color, 10%); }
-    }
-
     &#panelActivities {
       -natural-hpadding: $base_padding * 3;
     }
   }
 
+  &.unlock-screen,
+  &.login-screen,
+  &:overview {
+    .panel-button {
+      color: lighten($fg_color, 3%);
+
+      &:hover, &:active, &:overview, &:focus, &:checked {
+        box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.15);
+
+        &.clock-display {
+          box-shadow: none;
+
+          .clock {
+            box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.15);
+          }
+        }
+      }
+    }
+  }
 
   .panel-status-indicators-box,
   .panel-status-menu-box {