2019-12-18 21:25:03 +00:00
|
|
|
/* Top Bar */
|
|
|
|
// a.k.a. the panel
|
|
|
|
|
2020-02-07 01:17:53 +00:00
|
|
|
$panel_bg_color: #000;
|
2021-12-28 13:46:54 +00:00
|
|
|
$panel_fg_color: if($variant == 'light', lighten($bg_color, 10%), darken($fg_color, 5%));
|
2020-08-04 11:47:59 +00:00
|
|
|
$panel_height: 2.2em;
|
2020-08-06 18:58:44 +00:00
|
|
|
$panel_transition_duration: 250ms; // same as the overview transition duration
|
2019-12-18 21:25:03 +00:00
|
|
|
|
|
|
|
#panel {
|
|
|
|
background-color: $panel_bg_color;
|
|
|
|
font-weight: bold;
|
|
|
|
height: $panel_height;
|
2022-02-07 18:22:40 +00:00
|
|
|
@extend %numeric;
|
2020-08-06 18:58:44 +00:00
|
|
|
transition-duration: $panel_transition_duration;
|
2019-12-18 21:25:03 +00:00
|
|
|
|
|
|
|
// transparent panel on lock & login screens
|
|
|
|
&.unlock-screen,
|
2020-08-06 18:58:44 +00:00
|
|
|
&.login-screen,
|
|
|
|
&:overview {
|
2019-12-18 21:25:03 +00:00
|
|
|
background-color: transparent;
|
|
|
|
}
|
|
|
|
|
|
|
|
// panel menus
|
|
|
|
.panel-button {
|
|
|
|
font-weight: bold;
|
|
|
|
color: $panel_fg_color;
|
|
|
|
-natural-hpadding: $base_padding * 2;
|
|
|
|
-minimum-hpadding: $base_padding;
|
2020-08-04 11:47:59 +00:00
|
|
|
transition-duration: 150ms;
|
|
|
|
border: 3px solid transparent;
|
|
|
|
border-radius: 99px;
|
2019-12-18 21:25:03 +00:00
|
|
|
|
2020-08-04 11:47:59 +00:00
|
|
|
&.clock-display {
|
|
|
|
.clock {
|
|
|
|
transition-duration: 150ms;
|
|
|
|
border: 3px solid transparent;
|
|
|
|
border-radius: 99px;
|
|
|
|
}
|
2019-12-18 21:25:03 +00:00
|
|
|
}
|
|
|
|
|
2022-02-08 16:18:01 +00:00
|
|
|
&.screen-recording-indicator {
|
|
|
|
box-shadow: inset 0 0 0 100px $screenshot_ui_button_red;
|
2022-07-27 10:29:26 +00:00
|
|
|
}
|
|
|
|
&.screen-sharing-indicator {
|
|
|
|
box-shadow: inset 0 0 0 100px $warning_color;
|
|
|
|
StBoxLayout { margin: 0 $base_padding; }
|
|
|
|
}
|
2022-02-08 16:18:01 +00:00
|
|
|
|
2022-07-27 10:29:26 +00:00
|
|
|
&.screen-recording-indicator,
|
|
|
|
&.screen-sharing-indicator {
|
2022-02-08 16:18:01 +00:00
|
|
|
StBoxLayout {
|
2022-02-07 18:22:40 +00:00
|
|
|
spacing: $base_padding;
|
2022-02-08 16:18:01 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
StIcon {
|
|
|
|
icon-size: $base_icon_size;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-12-28 13:46:54 +00:00
|
|
|
&:active, &:overview, &:focus, &:checked {
|
|
|
|
box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.8);
|
2020-08-04 11:47:59 +00:00
|
|
|
|
|
|
|
// 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 {
|
2021-12-28 13:46:54 +00:00
|
|
|
box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.8);
|
|
|
|
}
|
|
|
|
}
|
2022-02-08 16:18:01 +00:00
|
|
|
|
|
|
|
&.screen-recording-indicator {
|
|
|
|
box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.15);
|
|
|
|
}
|
2022-07-27 10:29:26 +00:00
|
|
|
&.screen-sharing-indicator {
|
|
|
|
box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.15);
|
|
|
|
}
|
2021-12-28 13:46:54 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.85);
|
|
|
|
&.clock-display {
|
|
|
|
box-shadow: none;
|
|
|
|
.clock {
|
|
|
|
box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.85);
|
|
|
|
}
|
|
|
|
}
|
2022-02-08 16:18:01 +00:00
|
|
|
|
|
|
|
&.screen-recording-indicator {
|
|
|
|
box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.1);
|
|
|
|
}
|
2022-07-27 10:29:26 +00:00
|
|
|
&.screen-sharing-indicator {
|
|
|
|
box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.1);
|
|
|
|
}
|
2021-12-28 13:46:54 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
&:active:hover, &:overview:hover, &:focus:hover, &:checked:hover {
|
|
|
|
box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.75);
|
|
|
|
&.clock-display {
|
|
|
|
box-shadow: none;
|
|
|
|
.clock {
|
|
|
|
box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.75);
|
2020-08-04 11:47:59 +00:00
|
|
|
}
|
|
|
|
}
|
2022-02-08 16:18:01 +00:00
|
|
|
|
|
|
|
&.screen-recording-indicator {
|
|
|
|
box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.2);
|
|
|
|
}
|
2022-07-27 10:29:26 +00:00
|
|
|
&.screen-sharing-indicator {
|
|
|
|
box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.2);
|
|
|
|
}
|
2019-12-18 21:25:03 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
// status area icons
|
|
|
|
.system-status-icon {
|
|
|
|
icon-size: $base_icon_size;
|
|
|
|
padding: $base_padding - 1px;
|
2021-02-02 00:51:15 +00:00
|
|
|
margin: 0 $base_margin;
|
|
|
|
}
|
|
|
|
|
|
|
|
.panel-status-indicators-box .system-status-icon,
|
|
|
|
.panel-status-menu-box .system-status-icon {
|
|
|
|
margin: 0;
|
2019-12-18 21:25:03 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
// app menu icon
|
|
|
|
.app-menu-icon {
|
|
|
|
-st-icon-style: symbolic;
|
|
|
|
// dimensions of the icon are hardcoded
|
|
|
|
}
|
|
|
|
|
2020-08-04 09:47:18 +00:00
|
|
|
&#panelActivities {
|
|
|
|
-natural-hpadding: $base_padding * 3;
|
|
|
|
}
|
2019-12-18 21:25:03 +00:00
|
|
|
}
|
|
|
|
|
2020-08-06 18:58:44 +00:00
|
|
|
&.unlock-screen,
|
|
|
|
&.login-screen,
|
|
|
|
&:overview {
|
|
|
|
.panel-button {
|
2021-12-28 13:46:54 +00:00
|
|
|
&:active, &:overview, &:focus, &:checked {
|
|
|
|
box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.15);
|
2020-08-06 18:58:44 +00:00
|
|
|
|
|
|
|
&.clock-display {
|
|
|
|
box-shadow: none;
|
|
|
|
|
|
|
|
.clock {
|
2021-12-28 13:46:54 +00:00
|
|
|
box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.15);
|
|
|
|
}
|
|
|
|
}
|
2022-02-08 16:18:01 +00:00
|
|
|
|
|
|
|
&.screen-recording-indicator {
|
|
|
|
box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.15);
|
|
|
|
}
|
2022-07-27 10:29:26 +00:00
|
|
|
&.screen-sharing-indicator {
|
|
|
|
box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.15);
|
|
|
|
}
|
2021-12-28 13:46:54 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.10);
|
|
|
|
&.clock-display {
|
|
|
|
box-shadow: none;
|
|
|
|
.clock {
|
|
|
|
box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.10);
|
|
|
|
}
|
|
|
|
}
|
2022-02-08 16:18:01 +00:00
|
|
|
|
|
|
|
&.screen-recording-indicator {
|
|
|
|
box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.1);
|
|
|
|
}
|
2022-07-27 10:29:26 +00:00
|
|
|
&.screen-sharing-indicator {
|
|
|
|
box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.1);
|
|
|
|
}
|
2021-12-28 13:46:54 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
&:active:hover, &:overview:hover, &:focus:hover, &:checked:hover {
|
|
|
|
box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.2);
|
|
|
|
&.clock-display {
|
|
|
|
box-shadow: none;
|
|
|
|
.clock {
|
|
|
|
box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.2);
|
2020-08-06 18:58:44 +00:00
|
|
|
}
|
|
|
|
}
|
2022-02-08 16:18:01 +00:00
|
|
|
|
|
|
|
&.screen-recording-indicator {
|
|
|
|
box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.2);
|
|
|
|
}
|
2022-07-27 10:29:26 +00:00
|
|
|
&.screen-sharing-indicator {
|
|
|
|
box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.2);
|
|
|
|
}
|
2020-08-06 18:58:44 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2020-02-20 19:10:54 +00:00
|
|
|
|
2019-12-18 21:25:03 +00:00
|
|
|
.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 {
|
2022-02-07 18:22:40 +00:00
|
|
|
spacing: $base_padding;
|
2019-12-18 21:25:03 +00:00
|
|
|
.label-shadow { color: transparent; }
|
2020-01-08 10:08:14 +00:00
|
|
|
}
|
2021-02-02 00:54:48 +00:00
|
|
|
|
|
|
|
#appMenu .panel-status-menu-box {
|
|
|
|
padding: 0 $base_padding;
|
2022-02-07 18:22:40 +00:00
|
|
|
spacing: $base_padding;
|
2021-03-01 09:21:58 +00:00
|
|
|
}
|
2021-12-28 13:46:54 +00:00
|
|
|
|
|
|
|
|
|
|
|
// Clock
|
|
|
|
|
|
|
|
.clock-display-box {
|
|
|
|
spacing: 2px;
|
|
|
|
|
|
|
|
.clock {
|
|
|
|
padding-left: $base_padding * 2;
|
|
|
|
padding-right: $base_padding * 2;
|
|
|
|
}
|
2022-02-02 22:19:12 +00:00
|
|
|
}
|