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

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

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 {