From d1468f7f6d0d3624d8417c29410ff1720c50fb5e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jonas=20Dre=C3=9Fler?= <verdre@v0yd.nl>
Date: Thu, 6 Aug 2020 20:58:44 +0200
Subject: [PATCH] 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 +++++++++
 .../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 ed52bbb86..3e97efc11 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 5734ab10f..0f6647066 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 {