diff options
Diffstat (limited to 'data/theme/gnome-shell-sass/widgets/_panel.scss')
| -rw-r--r-- | data/theme/gnome-shell-sass/widgets/_panel.scss | 233 |
1 files changed, 233 insertions, 0 deletions
diff --git a/data/theme/gnome-shell-sass/widgets/_panel.scss b/data/theme/gnome-shell-sass/widgets/_panel.scss new file mode 100644 index 0000000..fd3e7d2 --- /dev/null +++ b/data/theme/gnome-shell-sass/widgets/_panel.scss @@ -0,0 +1,233 @@ +/* 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; + } +} |