158 lines
3.8 KiB
SCSS
158 lines
3.8 KiB
SCSS
/* Top Bar */
|
|
// a.k.a. the panel
|
|
|
|
$privacy_indicator_color: $orange_3;
|
|
|
|
$panel_bg_color: if($variant == 'light', $light_3, $dark_5);
|
|
$panel_fg_color: if($variant == 'light', $fg_color, darken($fg_color, 5%));
|
|
$panel_border_color: if($variant == 'light', darken($panel_bg_color, 2%), $panel_bg_color);
|
|
|
|
$panel_system_fg_color: $system_fg_color; // always light for lockscreen, overview and other transparent panels
|
|
$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;
|
|
@extend %numeric;
|
|
transition-duration: $panel_transition_duration;
|
|
box-shadow: inset 0 -1px 0 0 $panel_border_color;
|
|
|
|
// panel menus
|
|
.panel-button {
|
|
@include panel_button($panel_fg_color);
|
|
-natural-hpadding: $base_padding * 2;
|
|
-minimum-hpadding: $base_padding;
|
|
|
|
// 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 * 2.5;
|
|
|
|
& StBoxLayout {
|
|
spacing: 5px;
|
|
}
|
|
|
|
& .workspace-dot {
|
|
border-radius: 999px;
|
|
min-width: 8px;
|
|
min-height: 8px;
|
|
background-color: $panel_fg_color;
|
|
}
|
|
}
|
|
|
|
// screen activity indicators
|
|
&.screen-recording-indicator,
|
|
&.screen-sharing-indicator {
|
|
StBoxLayout {
|
|
spacing: $base_padding;
|
|
}
|
|
|
|
StIcon {
|
|
icon-size: $base_icon_size;
|
|
}
|
|
}
|
|
|
|
&.screen-recording-indicator {
|
|
@include panel_button($screenshot_ui_button_red, $flat: false);
|
|
}
|
|
|
|
&.screen-sharing-indicator {
|
|
@include panel_button($privacy_indicator_color, $flat: false);
|
|
}
|
|
|
|
// clock
|
|
&.clock-display {
|
|
// The clock display needs to have the background on .clock because
|
|
// we want to exclude the do-not-disturb indicator from the background
|
|
// see _drawing.scss for override details
|
|
@include panel_button($highlighted_child: true, $child_class:".clock");
|
|
|
|
.clock {
|
|
// the highlighted child
|
|
}
|
|
}
|
|
}
|
|
|
|
// transparent panel on lock & login screens
|
|
&.unlock-screen,
|
|
&.login-screen,
|
|
&:overview {
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
|
|
.panel-button {
|
|
@include panel_button($panel_system_fg_color, $fg:$panel_system_fg_color);
|
|
|
|
&#panelActivities .workspace-dot {
|
|
background-color: $panel_system_fg_color;
|
|
}
|
|
|
|
// clock
|
|
&.clock-display {
|
|
@include panel_button($panel_system_fg_color, $fg:$panel_system_fg_color, $highlighted_child: true, $child_class:".clock");
|
|
}
|
|
|
|
// unfortunate duplication so these indicators have styles
|
|
&.screen-recording-indicator {
|
|
@include panel_button($screenshot_ui_button_red, $flat: false);
|
|
}
|
|
|
|
&.screen-sharing-indicator {
|
|
@include panel_button($privacy_indicator_color, $flat: false);
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
// important privacy related indicators
|
|
.privacy-indicator { color: $privacy_indicator_color; }
|
|
}
|
|
|
|
// App Menu
|
|
#appMenu {
|
|
spacing: $base_padding;
|
|
.label-shadow { color: transparent; }
|
|
}
|
|
|
|
#appMenu .panel-status-menu-box {
|
|
padding: 0 $base_padding;
|
|
spacing: $base_padding;
|
|
}
|
|
|
|
|
|
// Clock
|
|
.clock-display-box {
|
|
spacing: 2px;
|
|
.clock {
|
|
padding-left: $base_padding * 2;
|
|
padding-right: $base_padding * 2;
|
|
}
|
|
}
|