gnome-shell/data/theme/gnome-shell-sass/widgets/_panel.scss
Florian Müllner 7ab7df739a status/remote-access: Split out screen sharing indicator
The latest mockups move the screen sharing indicator into a
separate control, similar to the existing indicator for built-in
screen recordings.

As this removes the submenu and only keeps the top bar icon (for
external screen recordings), this will smooth the transition to
quick settings.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2391>
2022-08-01 12:33:36 +00:00

234 lines
5.9 KiB
SCSS

/* Top Bar */
// a.k.a. the panel
$panel_bg_color: #000;
$panel_fg_color: if($variant == 'light', lighten($bg_color, 10%), darken($fg_color, 5%));
$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;
// transparent panel on lock & login screens
&.unlock-screen,
&.login-screen,
&:overview {
background-color: transparent;
}
// 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;
}
}
&.screen-recording-indicator {
box-shadow: inset 0 0 0 100px $screenshot_ui_button_red;
}
&.screen-sharing-indicator {
box-shadow: inset 0 0 0 100px $warning_color;
StBoxLayout { margin: 0 $base_padding; }
}
&.screen-recording-indicator,
&.screen-sharing-indicator {
StBoxLayout {
spacing: $base_padding;
}
StIcon {
icon-size: $base_icon_size;
}
}
&:active, &:overview, &:focus, &:checked {
box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.8);
// 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 transparentize($panel_fg_color, 0.8);
}
}
&.screen-recording-indicator {
box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.15);
}
&.screen-sharing-indicator {
box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.15);
}
}
&: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);
}
}
&.screen-recording-indicator {
box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.1);
}
&.screen-sharing-indicator {
box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.1);
}
}
&: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);
}
}
&.screen-recording-indicator {
box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.2);
}
&.screen-sharing-indicator {
box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.2);
}
}
// 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 {
&: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);
}
}
&.screen-recording-indicator {
box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.15);
}
&.screen-sharing-indicator {
box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.15);
}
}
&: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);
}
}
&.screen-recording-indicator {
box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.1);
}
&.screen-sharing-indicator {
box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.1);
}
}
&: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);
}
}
&.screen-recording-indicator {
box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.2);
}
&.screen-sharing-indicator {
box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.2);
}
}
}
}
.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_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;
}
}