d1468f7f6d
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>
134 lines
3.0 KiB
SCSS
134 lines
3.0 KiB
SCSS
/* Top Bar */
|
|
// a.k.a. the panel
|
|
|
|
$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,
|
|
&:overview {
|
|
background-color: transparent;
|
|
|
|
.panel-corner {
|
|
-panel-corner-opacity: 0;
|
|
}
|
|
}
|
|
|
|
// spacing between activities, app menu and such
|
|
#panelLeft, #panelCenter {
|
|
spacing: $base_spacing;
|
|
}
|
|
|
|
// the rounded outset corners
|
|
.panel-corner {
|
|
-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
|
|
.panel-button {
|
|
font-weight: bold;
|
|
color: $panel_fg_color;
|
|
-natural-hpadding: $base_padding * 2;
|
|
-minimum-hpadding: $base_padding;
|
|
transition-duration: 150ms;
|
|
border: 3px solid transparent;
|
|
border-radius: 99px;
|
|
|
|
&.clock-display {
|
|
.clock {
|
|
transition-duration: 150ms;
|
|
border: 3px solid transparent;
|
|
border-radius: 99px;
|
|
}
|
|
}
|
|
|
|
&:hover, &:active, &:overview, &:focus, &:checked {
|
|
box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.20);
|
|
|
|
// The clock display needs to have the background on .clock because
|
|
// we want to exclude the do-not-disturb indicator from the background
|
|
&.clock-display {
|
|
box-shadow: none;
|
|
|
|
.clock {
|
|
box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.20);
|
|
}
|
|
}
|
|
}
|
|
|
|
// status area icons
|
|
.system-status-icon {
|
|
icon-size: $base_icon_size;
|
|
padding: $base_padding - 1px;
|
|
}
|
|
|
|
// app menu icon
|
|
.app-menu-icon {
|
|
margin-left: $base_margin;
|
|
margin-right: $base_margin;
|
|
-st-icon-style: symbolic;
|
|
// dimensions of the icon are hardcoded
|
|
}
|
|
|
|
&#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 {
|
|
spacing: 2px;
|
|
}
|
|
|
|
// spacing between power icon and (optional) percentage label
|
|
.power-status.panel-status-indicators-box {
|
|
spacing: 0;
|
|
}
|
|
|
|
// indicator for active
|
|
.screencast-indicator,
|
|
.remote-access-indicator { color: $warning_color; }
|
|
}
|
|
|
|
// App Menu
|
|
#appMenu {
|
|
spacing: $base_spacing;
|
|
.label-shadow { color: transparent; }
|
|
}
|