c894ec95cd
The current way of indicating focus of elements in the panel does not work very well with a fully-transparent panel, a line at the bottom of the panel doesn't make too much sense if there is no real panel, but only the text and icons. To make the indicators look better in this case, switch to a pill-shaped background color to indicate the focus of items in the panel. For this to look good, there has to be a small black border above and below the background, this also requires increasing the height of the panel (from 1.86em to 2.2em) for visual purposes. Also, since we now no longer need to color the lower bottom of the panel, we can remove the custom drawing code for the border of the panels corner, so do that. Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1397>
118 lines
2.6 KiB
SCSS
118 lines
2.6 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 {
|
|
background-color: $panel_bg_color;
|
|
font-weight: bold;
|
|
height: $panel_height;
|
|
font-feature-settings: "tnum";
|
|
|
|
// transparent panel on lock & login screens
|
|
&.unlock-screen,
|
|
&.login-screen {
|
|
background-color: transparent;
|
|
|
|
.panel-corner {
|
|
-panel-corner-radius: 0;
|
|
-panel-corner-background-color: transparent;
|
|
}
|
|
}
|
|
|
|
// 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 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
|
|
}
|
|
|
|
// 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;
|
|
}
|
|
}
|
|
|
|
|
|
.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; }
|
|
}
|