db9a008e8a
The keyboard/language selector area is the smallest element on the panel. Additional margin about 6px inside the a11y and language items to make them comfortable to click targets. With that, we can remove the remaining arrows. https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/3567 Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1583>
140 lines
3.2 KiB
SCSS
140 lines
3.2 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);
|
|
}
|
|
}
|
|
}
|
|
|
|
// single indicator
|
|
.single-indicator {
|
|
margin-left: $base_margin + 3px;
|
|
margin-right: $base_margin + 3px;
|
|
}
|
|
|
|
// 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; }
|
|
}
|