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

[Marge Bot <marge-bot src gnome org>]

commit d1468f7f6d0d3624d8417c29410ff1720c50fb5e
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>

 data/theme/gnome-shell-high-contrast.scss       | 18 ++++++++++++
 data/theme/gnome-shell-sass/widgets/_panel.scss | 37 +++++++++++++++++--------
 2 files changed, 44 insertions(+), 11 deletions(-)
---
diff --git a/data/theme/gnome-shell-high-contrast.scss b/data/theme/gnome-shell-high-contrast.scss
index ed52bbb86c..3e97efc114 100644
--- a/data/theme/gnome-shell-high-contrast.scss
+++ b/data/theme/gnome-shell-high-contrast.scss
@@ -15,3 +15,21 @@ stage {
        background-image: url("resource:///org/gnome/shell/theme/toggle-off-hc.svg");
        &:checked { background-image: url("resource:///org/gnome/shell/theme/toggle-on-hc.svg"); }
 }
+
+//force opaque panel
+#panel {
+  &.login-screen,
+  &.unlock-screen,
+  &:overview {
+    background-color: #000;
+
+    .panel-corner {
+      -panel-corner-opacity: 1;
+    }
+  }
+
+  .panel-button {
+    color: #fff !important;
+  }
+}
+
diff --git a/data/theme/gnome-shell-sass/widgets/_panel.scss b/data/theme/gnome-shell-sass/widgets/_panel.scss
index 5734ab10fb..0f66470660 100644
--- a/data/theme/gnome-shell-sass/widgets/_panel.scss
+++ b/data/theme/gnome-shell-sass/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 {