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>
This commit is contained in:
Jonas Dreßler 2020-08-06 20:58:44 +02:00 committed by Marge Bot
parent 87103374fd
commit d1468f7f6d
2 changed files with 44 additions and 11 deletions

View File

@ -15,3 +15,21 @@ stage {
background-image: url("resource:///org/gnome/shell/theme/toggle-off-hc.svg"); 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"); } &: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;
}
}

View File

@ -5,22 +5,23 @@ $panel_corner_radius: $base_border_radius+1;
$panel_bg_color: #000; $panel_bg_color: #000;
$panel_fg_color: #ccc; $panel_fg_color: #ccc;
$panel_height: 2.2em; $panel_height: 2.2em;
$panel_transition_duration: 250ms; // same as the overview transition duration
#panel { #panel {
background-color: $panel_bg_color; background-color: $panel_bg_color;
font-weight: bold; font-weight: bold;
height: $panel_height; height: $panel_height;
font-feature-settings: "tnum"; font-feature-settings: "tnum";
transition-duration: $panel_transition_duration;
// transparent panel on lock & login screens // transparent panel on lock & login screens
&.unlock-screen, &.unlock-screen,
&.login-screen { &.login-screen,
&:overview {
background-color: transparent; background-color: transparent;
.panel-corner { .panel-corner {
-panel-corner-radius: 0; -panel-corner-opacity: 0;
-panel-corner-background-color: transparent;
} }
} }
@ -34,7 +35,9 @@ $panel_height: 2.2em;
-panel-corner-radius: $panel_corner_radius; -panel-corner-radius: $panel_corner_radius;
-panel-corner-background-color: $panel_bg_color; -panel-corner-background-color: $panel_bg_color;
-panel-corner-border-width: 2px; -panel-corner-border-width: 2px;
-panel-corner-border-color: transparent;
-panel-corner-opacity: 1; -panel-corner-opacity: 1;
transition-duration: $panel_transition_duration;
} }
// panel menus // panel menus
@ -83,18 +86,30 @@ $panel_height: 2.2em;
// dimensions of the icon are hardcoded // 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 { &#panelActivities {
-natural-hpadding: $base_padding * 3; -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-indicators-box,
.panel-status-menu-box { .panel-status-menu-box {