f5b622a703
We now set a padding for the left and right side of the pill. We also got rid of the padding on the icon. Probably broken due to the removal of the dropdown arrow which likly handled the padding the right side of this item before. Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1615>
142 lines
3.2 KiB
SCSS
142 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);
|
|
}
|
|
}
|
|
}
|
|
|
|
// status area icons
|
|
.system-status-icon {
|
|
icon-size: $base_icon_size;
|
|
padding: $base_padding - 1px;
|
|
margin: 0 $base_margin;
|
|
}
|
|
|
|
.panel-status-indicators-box .system-status-icon,
|
|
.panel-status-menu-box .system-status-icon {
|
|
margin: 0;
|
|
}
|
|
|
|
// app menu icon
|
|
.app-menu-icon {
|
|
-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; }
|
|
}
|
|
|
|
#appMenu .panel-status-menu-box {
|
|
padding: 0 $base_padding;
|
|
spacing: $base_spacing;
|
|
} |