mirror of
https://github.com/GradienceTeam/Gradience.git
synced 2024-09-07 14:12:31 +00:00
Signed-off-by: tfuxu <73042332+tfuxu@users.noreply.github.com> Co-authored-by: 0xMRTT <0xMRTT@evta.fr> Co-authored-by: 0xMRTT <0xMRTT@proton.me> Co-authored-by: daudix-UFO <ddaudix@gmail.com>
208 lines
5.1 KiB
Text
208 lines
5.1 KiB
Text
/* Top Bar */
|
|
// a.k.a. the panel
|
|
|
|
$panel_bg_color: #000; // TODO: Allow to modify this value
|
|
$panel_fg_color: if($variant == 'light', lighten($bg_color, 10%), darken($fg_color, 5%)); // TODO: Allow to modify this value
|
|
$panel_height: 2.2em; // TODO: Allow to modify this value
|
|
$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;
|
|
|
|
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);
|
|
}
|
|
}
|
|
|
|
&: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);
|
|
}
|
|
}
|
|
|
|
&: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);
|
|
}
|
|
}
|
|
|
|
// 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);
|
|
}
|
|
}
|
|
|
|
&: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);
|
|
}
|
|
}
|
|
|
|
&: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);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|