Implement styling options for all the bar components (not menus) through options variables.
This commit is contained in:
Jas Singh
11
scss/style/bar/audio.scss
Normal file
11
scss/style/bar/audio.scss
Normal file
@@ -0,0 +1,11 @@
|
||||
@import '../colors';
|
||||
@import '../../variables';
|
||||
|
||||
.bar-volume_icon {
|
||||
font-size: 1.3em;
|
||||
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-volume-icon);
|
||||
}
|
||||
|
||||
.bar-volume_percentage {
|
||||
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-volume-text);
|
||||
}
|
||||
108
scss/style/bar/bar.scss
Normal file
108
scss/style/bar/bar.scss
Normal file
@@ -0,0 +1,108 @@
|
||||
@import "../colors";
|
||||
@import "../../variables";
|
||||
|
||||
.bar {
|
||||
background: if($bar-transparent, transparent, $bar-background);
|
||||
.transparent {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.bar_item_box_visible {
|
||||
background-color: $bar-buttons-background;
|
||||
border-radius: 0.35em;
|
||||
padding: 0.2rem 0.9rem;
|
||||
margin: 0.5rem 0.25rem;
|
||||
|
||||
&:hover {
|
||||
background: $bar-buttons-hover;
|
||||
}
|
||||
|
||||
&.battery {
|
||||
background-color: if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-battery-background);
|
||||
&:hover {
|
||||
background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-battery-background);
|
||||
}
|
||||
}
|
||||
&.bluetooth {
|
||||
background-color: if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-bluetooth-background);
|
||||
&:hover {
|
||||
background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-bluetooth-background);
|
||||
}
|
||||
}
|
||||
&.clock {
|
||||
background-color: if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-clock-background);
|
||||
&:hover {
|
||||
background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-clock-background);
|
||||
}
|
||||
}
|
||||
&.media {
|
||||
background-color: if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-media-background);
|
||||
&:hover {
|
||||
background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-media-background);
|
||||
}
|
||||
}
|
||||
&.dashboard {
|
||||
background-color: if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-dashboard-background);
|
||||
&:hover {
|
||||
background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-dashboard-background);
|
||||
}
|
||||
}
|
||||
&.network {
|
||||
background-color: if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-network-background);
|
||||
&:hover {
|
||||
background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-network-background);
|
||||
}
|
||||
}
|
||||
&.notifications {
|
||||
background-color: if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-notifications-background);
|
||||
&:hover {
|
||||
background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-notifications-background);
|
||||
}
|
||||
}
|
||||
&.power {
|
||||
background-color: if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-power-background);
|
||||
&:hover {
|
||||
background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-power-background);
|
||||
}
|
||||
}
|
||||
&.systray {
|
||||
background-color: if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-systray-background);
|
||||
&:hover {
|
||||
background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-systray-background);
|
||||
}
|
||||
}
|
||||
&.volume {
|
||||
background-color: if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-volume-background);
|
||||
&:hover {
|
||||
background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-volume-background);
|
||||
}
|
||||
}
|
||||
&.windowtitle {
|
||||
background-color: if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-windowtitle-background);
|
||||
&:hover {
|
||||
background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-windowtitle-background);
|
||||
}
|
||||
}
|
||||
&.workspaces {
|
||||
background-color: if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-workspaces-background);
|
||||
&:hover {
|
||||
background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-workspaces-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bar_item_box_hidden {
|
||||
background: none;
|
||||
border-radius: 0rem;
|
||||
padding: 0rem 0rem 0rem 0rem;
|
||||
margin: 0rem 0rem 0rem 0rem;
|
||||
}
|
||||
|
||||
.box-left {
|
||||
margin-left: 1.9rem;
|
||||
}
|
||||
|
||||
.box-right {
|
||||
margin-right: 1.9rem;
|
||||
}
|
||||
20
scss/style/bar/battery.scss
Normal file
20
scss/style/bar/battery.scss
Normal file
@@ -0,0 +1,20 @@
|
||||
@import '../colors';
|
||||
@import '../../variables';
|
||||
|
||||
.bar {
|
||||
.battery {
|
||||
label {
|
||||
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-battery-text);
|
||||
}
|
||||
image {
|
||||
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-battery-icon);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-section-container.brightness {
|
||||
margin-bottom: 0em;
|
||||
}
|
||||
.menu-section-container.energy {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
22
scss/style/bar/bluetooth.scss
Normal file
22
scss/style/bar/bluetooth.scss
Normal file
@@ -0,0 +1,22 @@
|
||||
@import '../colors';
|
||||
@import '../../variables';
|
||||
|
||||
.bar-bt_icon {
|
||||
font-size: 1.15em;
|
||||
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-bluetooth-icon);
|
||||
}
|
||||
|
||||
.bar-bt_label {
|
||||
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-bluetooth-text);
|
||||
}
|
||||
|
||||
.bluetooth-disabled-menu {
|
||||
font-weight: bold;
|
||||
font-size: 1.1rem;
|
||||
color: $surface2;
|
||||
margin: 6rem 0rem;
|
||||
}
|
||||
|
||||
.menu-button-isactive {
|
||||
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-bluetooth-text);
|
||||
}
|
||||
6
scss/style/bar/clock.scss
Normal file
6
scss/style/bar/clock.scss
Normal file
@@ -0,0 +1,6 @@
|
||||
@import "../colors";
|
||||
@import '../../variables';
|
||||
|
||||
.clock {
|
||||
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-clock-text);
|
||||
}
|
||||
11
scss/style/bar/media.scss
Normal file
11
scss/style/bar/media.scss
Normal file
@@ -0,0 +1,11 @@
|
||||
@import "../colors";
|
||||
@import '../../variables';
|
||||
|
||||
.media {
|
||||
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-media-text);
|
||||
}
|
||||
|
||||
.bar-media_icon {
|
||||
font-size: 1.2em;
|
||||
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-media-icon);
|
||||
}
|
||||
7
scss/style/bar/menu.scss
Normal file
7
scss/style/bar/menu.scss
Normal file
@@ -0,0 +1,7 @@
|
||||
@import "../colors";
|
||||
@import '../../variables';
|
||||
|
||||
.bar-menu_label {
|
||||
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-dashboard-icon);
|
||||
font-size: 1.3em;
|
||||
}
|
||||
10
scss/style/bar/network.scss
Normal file
10
scss/style/bar/network.scss
Normal file
@@ -0,0 +1,10 @@
|
||||
@import "../colors";
|
||||
@import '../../variables';
|
||||
|
||||
.bar-network-label {
|
||||
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-network-text);
|
||||
}
|
||||
|
||||
.bar-network-icon {
|
||||
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-network-icon);
|
||||
}
|
||||
7
scss/style/bar/notifications.scss
Normal file
7
scss/style/bar/notifications.scss
Normal file
@@ -0,0 +1,7 @@
|
||||
@import "../colors";
|
||||
|
||||
.bar-notifications-label {
|
||||
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-notifications-icon);
|
||||
font-size: 1.3em;
|
||||
min-width: 1em;
|
||||
}
|
||||
7
scss/style/bar/power.scss
Normal file
7
scss/style/bar/power.scss
Normal file
@@ -0,0 +1,7 @@
|
||||
@import "../colors";
|
||||
@import '../../variables';
|
||||
|
||||
.bar-power_label {
|
||||
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-power-icon);
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
30
scss/style/bar/systray.scss
Normal file
30
scss/style/bar/systray.scss
Normal file
@@ -0,0 +1,30 @@
|
||||
@import "../colors";
|
||||
|
||||
.systray button:not(:first-child) {
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
|
||||
.systray-menu {
|
||||
background: $crust;
|
||||
}
|
||||
.systray-menu label {
|
||||
font-weight: bold;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
.systray-menu separator {
|
||||
background-color: $surface1;
|
||||
}
|
||||
|
||||
.systray-menu check:not(:checked) {
|
||||
background-color: $surface0;
|
||||
border: 1px solid $lavender;
|
||||
}
|
||||
|
||||
.systray-menu check:checked {
|
||||
background-color: $lavender;
|
||||
}
|
||||
|
||||
.systray-icon {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
6
scss/style/bar/window_title.scss
Normal file
6
scss/style/bar/window_title.scss
Normal file
@@ -0,0 +1,6 @@
|
||||
@import "../colors";
|
||||
@import '../../variables';
|
||||
|
||||
.window_title {
|
||||
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-windowtitle-text);
|
||||
}
|
||||
34
scss/style/bar/workspace.scss
Normal file
34
scss/style/bar/workspace.scss
Normal file
@@ -0,0 +1,34 @@
|
||||
@import "../colors";
|
||||
@import '../../variables';
|
||||
|
||||
.workspaces {
|
||||
label {
|
||||
font-size: 0.2em;
|
||||
min-width: 4em;
|
||||
min-height: 4em;
|
||||
border-radius: 1.9rem * .6;
|
||||
margin: 0rem 0.5rem * .5;
|
||||
transition: 300ms * .5;
|
||||
background-color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-workspaces-available);
|
||||
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-workspaces-available);
|
||||
|
||||
&.occupied {
|
||||
background-color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-workspaces-occupied);
|
||||
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-workspaces-occupied);
|
||||
min-width: 4em;
|
||||
min-height: 4em;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-workspaces-active);
|
||||
background-color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-workspaces-active);
|
||||
min-width: 12em;
|
||||
min-height: 4em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.workspaces label:not(:first-child) {
|
||||
margin-left: 4.5em;
|
||||
}
|
||||
52
scss/style/colors.scss
Normal file
52
scss/style/colors.scss
Normal file
@@ -0,0 +1,52 @@
|
||||
$primary-color: #CDD6F4;
|
||||
$dark-background: #0e0e1e;
|
||||
$light-background: #1e1e2e;
|
||||
$mauve: #cba6f7;
|
||||
$red: #f38ba8;
|
||||
$yellow: #f9e2af;
|
||||
$orange: #fab387;
|
||||
$teal: #94e2d5;
|
||||
$lightteal: #bac2de;
|
||||
$pink: #f5c2e7;
|
||||
$green: #a6e3a1;
|
||||
$grey: #585b70;
|
||||
$blue: #89b4fa;
|
||||
$lightgrey: #a6adc8;
|
||||
$lightblue: #74c7ec;
|
||||
|
||||
$rosewater: #f5e0dc;
|
||||
$flamingo: #f2cdcd;
|
||||
$pink: #f5c2e7;
|
||||
$mauve: #cba6f7;
|
||||
$red: #f38ba8;
|
||||
$maroon: #eba0ac;
|
||||
$peach: #fab387;
|
||||
$yellow: #f9e2af;
|
||||
$green: #a6e3a1;
|
||||
$teal: #94e2d5;
|
||||
$sky: #89dceb;
|
||||
$sapphire: #74c7ec;
|
||||
$blue: #89b4fa;
|
||||
$lavender: #b4befe;
|
||||
$text: #cdd6f4;
|
||||
$subtext1: #bac2de;
|
||||
$subtext2: #a6adc8;
|
||||
$overlay2: #9399b2;
|
||||
$overlay1: #7f849c;
|
||||
$overlay0: #6c7086;
|
||||
$surface2: #585b70;
|
||||
$surface1: #45475a;
|
||||
$surface0: #313244;
|
||||
$base: #1e1e2e;
|
||||
$base2: #242438;
|
||||
$mantle: #181825;
|
||||
$crust: #11111b;
|
||||
|
||||
$default_fg: $primary-color;
|
||||
$default_bg: #000000;
|
||||
$primary_bg: $dark-background;
|
||||
// $primary_fg: mix($mauve, $primary_bg, 70%);
|
||||
$primary_fg: mix($mauve, $primary_bg, 70%);
|
||||
$secondary_fg: $green;
|
||||
$secondary_bg: $light-background;
|
||||
$shadow-color: #1e1e2e;
|
||||
232
scss/style/common/common.scss
Normal file
232
scss/style/common/common.scss
Normal file
@@ -0,0 +1,232 @@
|
||||
@import "../colors";
|
||||
|
||||
menu {
|
||||
margin: 6px;
|
||||
padding: 6px;
|
||||
background-color: $primary_bg;
|
||||
background-clip: border-box;
|
||||
border-radius: 12px;
|
||||
border: 1px solid $secondary_bg;
|
||||
|
||||
menuitem {
|
||||
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
|
||||
min-height: 20px;
|
||||
min-width: 40px;
|
||||
padding: 4px 8px;
|
||||
color: #FFFFFF;
|
||||
font: initial;
|
||||
text-shadow: none;
|
||||
border-radius: 6px;
|
||||
&:hover, &:active{
|
||||
background-color: $secondary_bg;
|
||||
}
|
||||
&:disabled {
|
||||
color: $secondary_bg;
|
||||
}
|
||||
arrow {
|
||||
min-height: 16px;
|
||||
min-width: 16px;
|
||||
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
separator {
|
||||
min-height: 1px;
|
||||
margin: 4px 0;
|
||||
background-color: $secondary_bg
|
||||
}
|
||||
}
|
||||
|
||||
menu > arrow {
|
||||
min-height: 16px;
|
||||
min-width: 16px;
|
||||
padding: 4px;
|
||||
color: $secondary_bg;
|
||||
}
|
||||
|
||||
menu > arrow.top {
|
||||
margin-top: 0;
|
||||
border-radius: 6px;
|
||||
-gtk-icon-source: -gtk-icontheme("pan-up-symbolic");
|
||||
}
|
||||
|
||||
menu > arrow.bottom {
|
||||
margin-top: 8px;
|
||||
margin-bottom: -12px;
|
||||
border-radius: 6px;
|
||||
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
|
||||
}
|
||||
|
||||
check,
|
||||
radio {
|
||||
min-height: 15px;
|
||||
min-width: 15px;
|
||||
margin: 4px;
|
||||
padding: 0;
|
||||
color: transparent;
|
||||
background-color: $secondary_bg;
|
||||
transition: all 75ms cubic-bezier(0, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
radio {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
check {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
check:hover,
|
||||
radio:hover {
|
||||
box-shadow: 0 0 0 4px transparentize($primary_bg, 0.8);
|
||||
background-color: $primary_bg;
|
||||
}
|
||||
|
||||
check:active,
|
||||
radio:active {
|
||||
box-shadow: 0 0 0 4px transparentize($primary_bg, 0.8);
|
||||
background-color: $primary_bg;
|
||||
}
|
||||
|
||||
check:checked, check:indeterminate,
|
||||
radio:checked,
|
||||
radio:indeterminate {
|
||||
color: $primary_bg;
|
||||
background-color: $primary_fg;
|
||||
}
|
||||
|
||||
check:checked:hover, check:indeterminate:hover,
|
||||
radio:checked:hover,
|
||||
radio:indeterminate:hover {
|
||||
box-shadow: 0 0 0 4px transparentize($primary_fg, 0.8);
|
||||
background-color: $primary_fg;
|
||||
}
|
||||
|
||||
check:checked:active, check:indeterminate:active,
|
||||
radio:checked:active,
|
||||
radio:indeterminate:active {
|
||||
box-shadow: 0 0 0 4px transparentize($primary_fg, 0.8);
|
||||
background-color: $primary_fg;
|
||||
}
|
||||
|
||||
switch {
|
||||
transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
|
||||
margin: 4px 0;
|
||||
border: none;
|
||||
border-radius: 9999px;
|
||||
background-color: $secondary_bg;
|
||||
background-clip: padding-box;
|
||||
font-size: 0;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
switch:checked {
|
||||
background-color: $primary_fg;
|
||||
}
|
||||
|
||||
switch:disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
switch slider {
|
||||
transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
|
||||
min-width: 18px;
|
||||
min-height: 18px;
|
||||
margin: 3px;
|
||||
border-radius: 9999px;
|
||||
outline: none;
|
||||
background-color: $default_fg;
|
||||
border: none;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
scale {
|
||||
min-height: 2px;
|
||||
min-width: 2px;
|
||||
}
|
||||
|
||||
scale.horizontal {
|
||||
padding: 17px 12px;
|
||||
}
|
||||
|
||||
scale.vertical {
|
||||
padding: 12px 17px;
|
||||
}
|
||||
|
||||
scale slider {
|
||||
min-height: 18px;
|
||||
min-width: 18px;
|
||||
margin: -8px;
|
||||
}
|
||||
|
||||
scale trough {
|
||||
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
|
||||
outline: none;
|
||||
background-color: $secondary_bg;
|
||||
}
|
||||
|
||||
scale highlight {
|
||||
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
|
||||
background-color: $primary_fg;
|
||||
}
|
||||
|
||||
scale highlight:disabled {
|
||||
background-color: #1e1e2e;
|
||||
}
|
||||
|
||||
scale fill {
|
||||
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
scale fill:disabled {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
scale slider {
|
||||
transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
|
||||
border-radius: 9999px;
|
||||
color: $primary_fg;
|
||||
background-color: $primary_bg;
|
||||
box-shadow: inset 0 0 0 2px $primary_fg;
|
||||
}
|
||||
|
||||
scale slider:hover {
|
||||
box-shadow: inset 0 0 0 2px $primary_fg, 0 0 0 8px transparentize($primary_fg, 0.9);
|
||||
}
|
||||
|
||||
scale slider:active {
|
||||
box-shadow: inset 0 0 0 4px $primary_fg, 0 0 0 8px transparentize($primary_fg, 0.9);
|
||||
}
|
||||
|
||||
tooltip {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
tooltip.background {
|
||||
background-color: $crust;
|
||||
color: $text;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
separator {
|
||||
min-width: 1px;
|
||||
min-height: 1px;
|
||||
background-color: $secondary_bg;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
-gtk-icon-transform: rotate(1turn);
|
||||
}
|
||||
}
|
||||
|
||||
spinner {
|
||||
background: none;
|
||||
opacity: 0;
|
||||
-gtk-icon-source: -gtk-icontheme("process-working-symbolic");
|
||||
}
|
||||
|
||||
spinner:checked {
|
||||
opacity: 1;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
10
scss/style/common/floating-widget.scss
Normal file
10
scss/style/common/floating-widget.scss
Normal file
@@ -0,0 +1,10 @@
|
||||
@import "../colors";
|
||||
|
||||
@mixin floating-widget {
|
||||
margin: max($spacing, 8px);
|
||||
border: 0.2rem solid $surface0;
|
||||
background-color: $base;
|
||||
color: $primary_fg;
|
||||
border-radius: 0.5rem;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
52
scss/style/common/widget-button.scss
Normal file
52
scss/style/common/widget-button.scss
Normal file
@@ -0,0 +1,52 @@
|
||||
$popover-padding: 7px * 1.6;
|
||||
$padding: 7px;
|
||||
$spacing: 12px;
|
||||
$radius: 11px;
|
||||
|
||||
.widget-button {
|
||||
background: $crust;
|
||||
opacity: 1;
|
||||
font-size: 1.6rem;
|
||||
font-weight: bold;
|
||||
margin: 10px;
|
||||
padding: 15px 20px;
|
||||
border-radius: 10px;
|
||||
border: 3px solid;
|
||||
border-color: $crust;
|
||||
transition: border-color .3s ease-in-out;
|
||||
transition: opacity .3s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
border: 3px solid;
|
||||
border-color: $lavender;
|
||||
transition: border-color .3s ease-in-out;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
border: 3px solid;
|
||||
border-color: $lavender;
|
||||
}
|
||||
|
||||
image {
|
||||
border-radius: $radius + ($popover-padding * 1.4);
|
||||
min-width: 1.2em;
|
||||
min-height: 1.2em;
|
||||
font-size: 4em;
|
||||
}
|
||||
|
||||
label {
|
||||
margin-top: $spacing;
|
||||
}
|
||||
|
||||
&:active {
|
||||
image {
|
||||
opacity: .3;
|
||||
transition: opacity .3s ease-in-out;
|
||||
}
|
||||
label {
|
||||
opacity: .3;
|
||||
transition: opacity .3s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
43
scss/style/entry.scss
Normal file
43
scss/style/entry.scss
Normal file
@@ -0,0 +1,43 @@
|
||||
@import '/tmp/ags/hyprpanel/variables.scss';
|
||||
* {
|
||||
all: unset;
|
||||
font-family: "Ubuntu Nerd Font";
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
//general
|
||||
@import "../scss/colors";
|
||||
@import "../scss/common/common.scss";
|
||||
@import "../scss/common/floating-widget.scss";
|
||||
@import "../scss/common/widget-button.scss";
|
||||
|
||||
//modules - bar
|
||||
@import "bar/menu";
|
||||
@import "bar/audio";
|
||||
@import "bar/media";
|
||||
@import "bar/network";
|
||||
@import "bar/bluetooth";
|
||||
@import "bar/clock";
|
||||
@import "bar/workspace";
|
||||
@import "bar/window_title";
|
||||
@import "bar/systray";
|
||||
@import "bar/notifications";
|
||||
@import "bar/power";
|
||||
@import "bar/bar";
|
||||
@import "bar/battery";
|
||||
|
||||
//modules - menus
|
||||
@import "menus/menu";
|
||||
@import "menus/power";
|
||||
@import "menus/audiomenu";
|
||||
@import "menus/network";
|
||||
@import "menus/bluetooth";
|
||||
@import "menus/media";
|
||||
@import "menus/notifications";
|
||||
@import "menus/calendar";
|
||||
@import "menus/energy";
|
||||
@import "menus/dashboard";
|
||||
|
||||
//notifications
|
||||
@import "notifications/popups";
|
||||
222
scss/style/highlights.scss
Normal file
222
scss/style/highlights.scss
Normal file
@@ -0,0 +1,222 @@
|
||||
@import "colors";
|
||||
|
||||
* {
|
||||
color: $default_fg;
|
||||
font-family: "JetBrainsMono NF";
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
html, body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: $primary_bg;
|
||||
}
|
||||
|
||||
// scrollbar {
|
||||
// background-color: red;
|
||||
// min-width: 5em;
|
||||
// }
|
||||
|
||||
.code {
|
||||
background: $light-background;
|
||||
border-radius: 0.5rem;
|
||||
|
||||
.code-header {
|
||||
background: $light-background;
|
||||
border-top-left-radius: 0.5rem;
|
||||
border-top-right-radius: 0.5rem;
|
||||
border-bottom: 1px solid $primary_fg;
|
||||
padding: 5px;
|
||||
|
||||
> button {
|
||||
color: $default_fg;
|
||||
background: transparent;
|
||||
float: right;
|
||||
border: none;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$languages-map: (
|
||||
arduino: "",
|
||||
armasm: "",
|
||||
avrasm: "",
|
||||
bash: "",
|
||||
c: "",
|
||||
clojure: "",
|
||||
coffeescript: "",
|
||||
cpp: "",
|
||||
csharp: "",
|
||||
css: "",
|
||||
dockerfile: "",
|
||||
go: "",
|
||||
gradle: "",
|
||||
haskell: "",
|
||||
html: "",
|
||||
java: "",
|
||||
javascript: "",
|
||||
json: "",
|
||||
latex: "",
|
||||
lua: "",
|
||||
makefile: "",
|
||||
markdown: "",
|
||||
mipsasm: "",
|
||||
nginx: "",
|
||||
nix: "",
|
||||
php: "",
|
||||
prolog: "",
|
||||
python: "",
|
||||
r: "",
|
||||
ruby: "",
|
||||
rust: "",
|
||||
scss: "",
|
||||
shell: "",
|
||||
typescript: "",
|
||||
wasm: "",
|
||||
x86asm: "",
|
||||
xml: "",
|
||||
);
|
||||
|
||||
@each $lang, $content in $languages-map {
|
||||
[data-language="#{$lang}"]:before {
|
||||
content: $content;
|
||||
font-size: 1.1rem;
|
||||
color: $primary_fg;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: 5px;
|
||||
overflow-x: scroll;
|
||||
|
||||
code.hljs {
|
||||
color: $default_fg;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
& .hljs-keyword {
|
||||
color: $mauve;
|
||||
}
|
||||
|
||||
& .hljs-built_in {
|
||||
color: $red;
|
||||
}
|
||||
|
||||
& .hljs-type {
|
||||
color: $yellow;
|
||||
}
|
||||
|
||||
& .hljs-literal,
|
||||
& .hljs-number {
|
||||
color: $orange;
|
||||
}
|
||||
|
||||
& .hljs-operator {
|
||||
color: $teal;
|
||||
}
|
||||
|
||||
& .hljs-punctuation {
|
||||
color: $lightteal;
|
||||
}
|
||||
|
||||
& .hljs-property,
|
||||
& .hljs-variable.language_,
|
||||
& .hljs-symbol {
|
||||
color: $teal;
|
||||
}
|
||||
|
||||
& .hljs-regexp {
|
||||
color: $pink;
|
||||
}
|
||||
|
||||
& .hljs-string,
|
||||
& .hljs-char.escape_,
|
||||
& .hljs-subst {
|
||||
color: $green;
|
||||
}
|
||||
|
||||
& .hljs-comment {
|
||||
color: $grey;
|
||||
}
|
||||
|
||||
& .hljs-doctag {
|
||||
color: $red;
|
||||
}
|
||||
|
||||
& .hljs-meta,
|
||||
& .hljs-title.function_,
|
||||
& .hljs-section {
|
||||
color: $orange;
|
||||
}
|
||||
|
||||
& .hljs-tag,
|
||||
& .hljs-attribute {
|
||||
color: $lightgrey;
|
||||
}
|
||||
|
||||
& .hljs-name,
|
||||
& .hljs-selector-attr {
|
||||
color: $mauve;
|
||||
}
|
||||
|
||||
& .hljs-params,
|
||||
& .hljs-selector-class,
|
||||
& .hljs-template-variable {
|
||||
color: $default_fg;
|
||||
}
|
||||
|
||||
& .hljs-selector-tag {
|
||||
color: $yellow;
|
||||
}
|
||||
|
||||
& .hljs-selector-id {
|
||||
color: $blue;
|
||||
}
|
||||
|
||||
& .hljs-bullet,
|
||||
& .hljs-code,
|
||||
& .hljs-formula {
|
||||
color: $teal;
|
||||
}
|
||||
|
||||
& .hljs-emphasis {
|
||||
color: $red;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
& .hljs-strong {
|
||||
color: $red;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
& .hljs-link {
|
||||
color: $lightblue;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
& .hljs-quote {
|
||||
color: $green;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
& .hljs-addition {
|
||||
color: $green;
|
||||
background: rgba(166, 227, 161, 0.15);
|
||||
}
|
||||
|
||||
& .hljs-deletion {
|
||||
color: $red;
|
||||
background: rgba(243, 139, 168, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
46
scss/style/menus/audiomenu.scss
Normal file
46
scss/style/menus/audiomenu.scss
Normal file
@@ -0,0 +1,46 @@
|
||||
@import "../colors";
|
||||
|
||||
.menu-dropdown-label.audio {
|
||||
color: $maroon;
|
||||
}
|
||||
|
||||
.menu-label.audio {
|
||||
color: $maroon;
|
||||
}
|
||||
|
||||
.menu-button-isactive.audio {
|
||||
color: $maroon;
|
||||
}
|
||||
|
||||
.menu-active-slider {
|
||||
trough {
|
||||
highlight,
|
||||
progress {
|
||||
background: $maroon;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-button.audio {
|
||||
&:hover {
|
||||
color: $maroon;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-section-container.volume {
|
||||
margin-bottom: 0.65em;
|
||||
}
|
||||
.menu-section-container.playback {
|
||||
margin-top: 0em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.menu-section-container.input {
|
||||
margin-top: 0em;
|
||||
}
|
||||
|
||||
.menu-label-container.input {
|
||||
border-radius: 0em;
|
||||
}
|
||||
.menu-items-section.playback {
|
||||
border-radius: 0em;
|
||||
}
|
||||
86
scss/style/menus/bluetooth.scss
Normal file
86
scss/style/menus/bluetooth.scss
Normal file
@@ -0,0 +1,86 @@
|
||||
@import "../colors";
|
||||
|
||||
.menu-items-container.bluetooth {
|
||||
font-size: 1.3em;
|
||||
.menu-section-container {
|
||||
margin: 1em 0em;
|
||||
}
|
||||
|
||||
.menu-label-container {
|
||||
.menu-label {
|
||||
color: $sky;
|
||||
}
|
||||
|
||||
.controls-container {
|
||||
margin: 0.5em 1em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.menu-items-section {
|
||||
min-height: 20em;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
button {
|
||||
margin-right: 0.5em;
|
||||
&.search {
|
||||
image {
|
||||
color: $text;
|
||||
}
|
||||
&:hover image {
|
||||
color: $sky;
|
||||
}
|
||||
font-size: 0.8em;
|
||||
margin-bottom: 0em;
|
||||
}
|
||||
&:hover {
|
||||
color: $sky;
|
||||
}
|
||||
}
|
||||
|
||||
.bluetooth-element-item {
|
||||
margin-bottom: 0.4em;
|
||||
&:hover {
|
||||
color: $sky;
|
||||
}
|
||||
|
||||
image {
|
||||
margin-right: 0em;
|
||||
margin-top: 0.0em;
|
||||
min-height: 1em;
|
||||
min-width: 1em;
|
||||
|
||||
&.active {
|
||||
color: $sky;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.menu-button-icon {
|
||||
font-size: 1.5em;
|
||||
|
||||
&.active {
|
||||
color: $sky;
|
||||
}
|
||||
}
|
||||
|
||||
.connection-status {
|
||||
font-size: 0.9em;
|
||||
margin-left: 0.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
spinner {
|
||||
min-height: 1.3em;
|
||||
min-width: 1.3em;
|
||||
color: $sky;
|
||||
}
|
||||
|
||||
.menu-separator {
|
||||
margin: 0em 1em;
|
||||
}
|
||||
}
|
||||
179
scss/style/menus/calendar.scss
Normal file
179
scss/style/menus/calendar.scss
Normal file
@@ -0,0 +1,179 @@
|
||||
@import "../colors";
|
||||
|
||||
.calendar-content-container {
|
||||
margin-top: 0em;
|
||||
min-width: 27em;
|
||||
min-height: 6em;
|
||||
background: $crust;
|
||||
border: 0.13em solid $surface0;
|
||||
border-radius: 0.7em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
.calendar-menu-item-container {
|
||||
border-radius: 0.4em;
|
||||
margin-bottom: 1.35em;
|
||||
background: $base;
|
||||
}
|
||||
|
||||
.calendar-content-items {
|
||||
margin: 1.35em;
|
||||
}
|
||||
|
||||
.calendar-container-box {
|
||||
margin: 0.75em;
|
||||
margin-bottom: 0em;
|
||||
}
|
||||
|
||||
.calendar-menu-widget {
|
||||
border-radius: 0.4em;
|
||||
color: $text;
|
||||
|
||||
&:selected {
|
||||
box-shadow: inset 0 -0.5em 0 0 $pink,
|
||||
inset -0.4em -0.3em 0 0 $base,
|
||||
inset 0.4em 0 0 0.01em $base;
|
||||
color: $pink;
|
||||
border-radius: 0em;
|
||||
}
|
||||
|
||||
&.header {
|
||||
background-color: transparent;
|
||||
color: $teal;
|
||||
}
|
||||
&.button {
|
||||
color: $text;
|
||||
font-weight: 900;
|
||||
font-size: 900em;
|
||||
}
|
||||
&:hover {
|
||||
color: $pink;
|
||||
}
|
||||
&.highlight {
|
||||
border: 2em solid $pink;
|
||||
background-color: transparent;
|
||||
color: $pink;
|
||||
}
|
||||
&:indeterminate {
|
||||
color: $surface2;
|
||||
}
|
||||
|
||||
font-size: 1.1em;
|
||||
padding: 0.35em;
|
||||
}
|
||||
|
||||
.clock-content-items {
|
||||
min-height: 8em;
|
||||
|
||||
.clock-content-time {
|
||||
font-size: 4em;
|
||||
color: $pink;
|
||||
}
|
||||
.clock-content-period {
|
||||
font-size: 1.75em;
|
||||
margin-bottom: 1.35em;
|
||||
margin-right: -0.875em;
|
||||
color: $teal;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-menu-item-container.clock {
|
||||
margin-bottom: 0.65em;
|
||||
}
|
||||
.calendar-menu-item-container.calendar {
|
||||
margin-bottom: 0.65em;
|
||||
}
|
||||
.calendar-menu-item-container.weather {
|
||||
margin-bottom: 0em;
|
||||
}
|
||||
|
||||
.weather-container-box {
|
||||
color: $red;
|
||||
margin: 1.5em;
|
||||
margin-top: 2.5em;
|
||||
min-width: 3em;
|
||||
// min-height: 10em;
|
||||
|
||||
.calendar-menu-weather.today.icon {
|
||||
image {
|
||||
color: $pink;
|
||||
font-size: 6em;
|
||||
// margin-right: 0.3em;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-menu-weather.today.temp.label {
|
||||
color: $text;
|
||||
margin-left: 0.2em;
|
||||
font-size: 2.5em;
|
||||
|
||||
&.icon {
|
||||
font-size: 2.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-menu-weather.today.condition.label {
|
||||
color: $teal;
|
||||
font-size: 1.5em;
|
||||
margin-bottom: 0.4em;
|
||||
}
|
||||
|
||||
// .calendar-menu-weather.today.condition.label.weather-color.red {
|
||||
// color: $red;
|
||||
// }
|
||||
// .calendar-menu-weather.today.condition.label.weather-color.orange {
|
||||
// color: $orange;
|
||||
// }
|
||||
// .calendar-menu-weather.today.condition.label.weather-color.lavender {
|
||||
// color: $lavender;
|
||||
// }
|
||||
// .calendar-menu-weather.today.condition.label.weather-color.blue {
|
||||
// color: $blue;
|
||||
// }
|
||||
// .calendar-menu-weather.today.condition.label.weather-color.sky {
|
||||
// color: $sky;
|
||||
// }
|
||||
|
||||
.calendar-menu-weather.today.temp.label.icon.weather-color.red {
|
||||
color: $red;
|
||||
}
|
||||
.calendar-menu-weather.today.temp.label.icon.weather-color.orange {
|
||||
color: $orange;
|
||||
}
|
||||
.calendar-menu-weather.today.temp.label.icon.weather-color.lavender {
|
||||
color: $lavender;
|
||||
}
|
||||
.calendar-menu-weather.today.temp.label.icon.weather-color.blue {
|
||||
color: $blue;
|
||||
}
|
||||
.calendar-menu-weather.today.temp.label.icon.weather-color.sky {
|
||||
color: $sky;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-menu-weather.today.stats.container {
|
||||
margin-bottom: 0.75em;
|
||||
color: $pink;
|
||||
|
||||
.weather.label {
|
||||
margin-left: 0.35em;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-separator.weather {
|
||||
margin: 1.5em 0em;
|
||||
}
|
||||
|
||||
.hourly-weather-time {
|
||||
color: $pink;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.hourly-weather-icon {
|
||||
color: $pink;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.hourly-weather-temp {
|
||||
color: $pink;
|
||||
}
|
||||
338
scss/style/menus/dashboard.scss
Normal file
338
scss/style/menus/dashboard.scss
Normal file
@@ -0,0 +1,338 @@
|
||||
@import "../colors";
|
||||
|
||||
.dashboard-content-items {
|
||||
margin-left: 0.50em;
|
||||
min-width: 28.5em;
|
||||
background: $crust;
|
||||
border: 0.13em solid $surface0;
|
||||
border-radius: 0.7em;
|
||||
|
||||
button {
|
||||
border-radius: 0.4em;
|
||||
}
|
||||
|
||||
.dashboard-card {
|
||||
background: $base;
|
||||
margin: 1.3em;
|
||||
border-radius: 0.4em;
|
||||
padding: 1.5em;
|
||||
}
|
||||
|
||||
.profile-picture-container {
|
||||
margin-right: 0.65em;
|
||||
margin-bottom: 0.65em;
|
||||
.profile-picture {
|
||||
font-size: 7.5em;
|
||||
}
|
||||
.profile-name {
|
||||
font-size: 1.5em;
|
||||
color: $pink;
|
||||
margin-top: 0.75em;
|
||||
}
|
||||
}
|
||||
|
||||
.power-menu-container {
|
||||
margin-left: 0em;
|
||||
margin-bottom: 0.65em;
|
||||
|
||||
.dashboard-button {
|
||||
min-width: 3em;
|
||||
min-height: 2.5em;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 0.75em;
|
||||
}
|
||||
|
||||
image {
|
||||
color: $base;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
&.shutdown {
|
||||
background: $red;
|
||||
}
|
||||
&.restart {
|
||||
background: $peach;
|
||||
}
|
||||
&.lock {
|
||||
background: $green;
|
||||
}
|
||||
&.sleep {
|
||||
background: $sky;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $mauve;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.shortcuts-container {
|
||||
.dashboard-card {
|
||||
padding: 1.5em;
|
||||
button {
|
||||
min-height: 2.5em;
|
||||
min-width: 2.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.card-button-left-section {
|
||||
margin-right: 1.5em;
|
||||
}
|
||||
|
||||
.top-button {
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin-top: 0em;
|
||||
margin-bottom: 0.65em;
|
||||
|
||||
&.most-used {
|
||||
margin-right: 0em;
|
||||
}
|
||||
&.utilities {
|
||||
margin-left: 0.65em;
|
||||
}
|
||||
|
||||
button {
|
||||
background: $lavender;
|
||||
color: $base;
|
||||
min-height: 3em;
|
||||
|
||||
&.discord {
|
||||
label {
|
||||
margin-right: 0.15em;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
&.record.active {
|
||||
background: $green;
|
||||
|
||||
&:hover {
|
||||
background: $red;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $pink;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.controls-container {
|
||||
margin-bottom: 0.65em;
|
||||
&.dashboard-card {
|
||||
margin-top: 0em;
|
||||
}
|
||||
|
||||
button {
|
||||
background: $red;
|
||||
padding: 0em;
|
||||
min-height: 3em;
|
||||
|
||||
label {
|
||||
color: $base;
|
||||
font-size: 1.6em;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
&.wifi {
|
||||
background: $mauve;
|
||||
}
|
||||
&.bluetooth {
|
||||
background: $sky;
|
||||
}
|
||||
&.notifications {
|
||||
background: $yellow;
|
||||
}
|
||||
&.playback {
|
||||
background: $maroon;
|
||||
}
|
||||
&.input {
|
||||
background: $pink;
|
||||
}
|
||||
&.wifi:hover {
|
||||
background: transparentize($mauve, 0.7);
|
||||
}
|
||||
&.bluetooth:hover {
|
||||
background: transparentize($sky, 0.7);
|
||||
}
|
||||
&.notifications:hover {
|
||||
background: transparentize($yellow, 0.7);
|
||||
}
|
||||
&.playback:hover {
|
||||
background: transparentize($maroon, 0.7);
|
||||
}
|
||||
&.input:hover {
|
||||
background: transparentize($pink, 0.7);
|
||||
}
|
||||
&:hover {
|
||||
background: $surface1;
|
||||
}
|
||||
&.disabled {
|
||||
background: $surface2;
|
||||
&.wifi:hover {
|
||||
background: transparentize($mauve, 0.7);
|
||||
}
|
||||
&.bluetooth:hover {
|
||||
background: transparentize($sky, 0.7);
|
||||
}
|
||||
&.notifications:hover {
|
||||
background: transparentize($yellow, 0.7);
|
||||
}
|
||||
&.playback:hover {
|
||||
background: transparentize($maroon, 0.7);
|
||||
}
|
||||
&.input:hover {
|
||||
background: transparentize($pink, 0.7);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.directories-container {
|
||||
&.dashboard-card {
|
||||
margin-top: 0em;
|
||||
margin-bottom: 0.65em;
|
||||
padding-left: 1.5em;
|
||||
padding-right: 0em;
|
||||
}
|
||||
|
||||
.directory-link {
|
||||
padding: 0.5em 0em;
|
||||
min-width: 9em;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0em;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
&.documents {
|
||||
color: $teal;
|
||||
}
|
||||
&.downloads {
|
||||
color: $pink;
|
||||
}
|
||||
&.home {
|
||||
color: $lavender;
|
||||
}
|
||||
&.pictures {
|
||||
color: $mauve;
|
||||
}
|
||||
&.videos {
|
||||
color: $yellow;
|
||||
}
|
||||
&.projects {
|
||||
color: $maroon;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stats-container {
|
||||
margin-top: 0em;
|
||||
|
||||
.stat {
|
||||
label {
|
||||
margin-right: 1em;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
&.cpu label{
|
||||
color: $maroon;
|
||||
}
|
||||
&.ram label{
|
||||
color: $yellow;
|
||||
}
|
||||
&.gpu label{
|
||||
color: $green;
|
||||
}
|
||||
&.storage label{
|
||||
color: $pink;
|
||||
}
|
||||
|
||||
.stats-bar {
|
||||
levelbar * {
|
||||
transition: 200ms;
|
||||
}
|
||||
|
||||
trough {
|
||||
min-height: 1.05em;
|
||||
}
|
||||
|
||||
block {
|
||||
border-radius: 0.4em;
|
||||
|
||||
&.empty {
|
||||
background: $surface1;
|
||||
}
|
||||
|
||||
&.filled {
|
||||
padding-left: 0.85em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.cpu .stats-bar block.filled {
|
||||
background: $maroon;
|
||||
}
|
||||
|
||||
&.ram .stats-bar block.filled {
|
||||
background: $yellow;
|
||||
}
|
||||
|
||||
&.gpu .stats-bar block.filled {
|
||||
background: $green;
|
||||
}
|
||||
|
||||
&.storage .stats-bar block.filled {
|
||||
background: $pink;
|
||||
}
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
margin-bottom: 0.75em;
|
||||
font-size: 0.9em;
|
||||
&.cpu {
|
||||
color: $maroon;
|
||||
}
|
||||
|
||||
&.ram {
|
||||
color: $yellow;
|
||||
}
|
||||
|
||||
&.gpu {
|
||||
color: $green;
|
||||
}
|
||||
|
||||
&.storage {
|
||||
color: $pink;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown.recording {
|
||||
color: red;
|
||||
background-color: $crust;
|
||||
|
||||
menuitem {
|
||||
|
||||
}
|
||||
}
|
||||
61
scss/style/menus/energy.scss
Normal file
61
scss/style/menus/energy.scss
Normal file
@@ -0,0 +1,61 @@
|
||||
@import "../colors";
|
||||
|
||||
.menu-items-container.energy {
|
||||
.menu-label {
|
||||
color: $yellow;
|
||||
}
|
||||
|
||||
.power-profile-item {
|
||||
margin-bottom: 0.5em;
|
||||
|
||||
label {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
image {
|
||||
font-size: 1.3em;
|
||||
min-width: 1em;
|
||||
min-height: 1em;
|
||||
|
||||
color: $overlay1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
label {
|
||||
color: $yellow;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
image {
|
||||
color: $yellow;
|
||||
}
|
||||
}
|
||||
}
|
||||
.menu-active-slider.brightness {
|
||||
trough {
|
||||
highlight,
|
||||
progress {
|
||||
background: $yellow;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.brightness-container {
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
.brightness-slider-icon {
|
||||
font-size: 1.4em;
|
||||
min-width: 1em;
|
||||
min-height: 1em;
|
||||
color: $overlay2;
|
||||
}
|
||||
|
||||
.brightness-slider-label {
|
||||
font-size: 0.9em;
|
||||
min-width: 2.5em;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.2em;
|
||||
}
|
||||
}
|
||||
109
scss/style/menus/media.scss
Normal file
109
scss/style/menus/media.scss
Normal file
@@ -0,0 +1,109 @@
|
||||
@import "../colors";
|
||||
|
||||
.menu-items-container.media {
|
||||
min-width: 23em;
|
||||
min-height: 10em;
|
||||
|
||||
.menu-section-container {
|
||||
margin: 1em 0em;
|
||||
}
|
||||
|
||||
.menu-items-section {
|
||||
border-radius: 0.4em;
|
||||
padding: 0em;
|
||||
}
|
||||
|
||||
.menu-content {
|
||||
border-radius: 0.4em;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.media-content {
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
.media-indicator-current-song-name {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.media-indicator-current-song-author {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.media-indicator-current-song-name-label {
|
||||
color: $lavender;
|
||||
font-size: 1.35em;
|
||||
}
|
||||
|
||||
.media-indicator-current-song-author-label {
|
||||
color: $teal;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.media-indicator-current-song-album-label {
|
||||
color: $pink;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.media-indicator-current-controls {
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.media-indicator-control-button {
|
||||
margin: 0rem 0.5rem;
|
||||
}
|
||||
|
||||
.media-indicator-control-button {
|
||||
background: $lavender;
|
||||
color: $crust;
|
||||
min-height: 1.8em;
|
||||
min-width: 2.5em;
|
||||
border-radius: 0.2rem;
|
||||
|
||||
&.disabled {
|
||||
background: $surface2;
|
||||
}
|
||||
|
||||
&.enabled {
|
||||
background: $lavender;
|
||||
|
||||
&:hover {
|
||||
background: $pink;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: $green;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
image {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.menu-slider.media.progress {
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
|
||||
trough {
|
||||
background: $surface2;
|
||||
border-radius: 0.2em;
|
||||
|
||||
highlight,
|
||||
progress {
|
||||
border-radius: 0.2em;
|
||||
min-height: .85em;
|
||||
background: $pink;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
trough {
|
||||
background: $surface1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
266
scss/style/menus/menu.scss
Normal file
266
scss/style/menus/menu.scss
Normal file
@@ -0,0 +1,266 @@
|
||||
.menu-slider {
|
||||
trough {
|
||||
border-radius: 0.3rem;
|
||||
background: $surface0;
|
||||
|
||||
highlight,
|
||||
progress {
|
||||
background: $peach;
|
||||
border-radius: 0.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
slider {
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
min-height: 0.6rem;
|
||||
min-width: 0.6rem;
|
||||
border: 0rem solid transparent;
|
||||
border-radius: 0.3rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
trough {
|
||||
background: $surface0;
|
||||
}
|
||||
|
||||
slider {
|
||||
background: $overlay0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-switch {
|
||||
font-size: 1.3em;
|
||||
background-color: $surface0;
|
||||
border-radius: 0.2em;
|
||||
|
||||
&:checked {
|
||||
background: $sky;
|
||||
}
|
||||
|
||||
trough {
|
||||
highlight,
|
||||
progress {
|
||||
background-color: $peach;
|
||||
border-radius: 0.3em;
|
||||
}
|
||||
}
|
||||
|
||||
slider {
|
||||
box-shadow: none;
|
||||
background-color: $overlay0;
|
||||
min-height: 1em;
|
||||
min-width: 1em;
|
||||
border: 0em solid transparent;
|
||||
border-radius: 0.2em;
|
||||
margin: 0.1em 0.15em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
trough {
|
||||
background: $surface0;
|
||||
}
|
||||
|
||||
slider {
|
||||
background: $overlay0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: $sky;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
}
|
||||
|
||||
trough:focus {
|
||||
}
|
||||
}
|
||||
|
||||
tooltip label {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.menu-separator {
|
||||
min-height: .1rem;
|
||||
margin: .6rem 0rem;
|
||||
background: $surface1;
|
||||
}
|
||||
|
||||
.menu-items {
|
||||
background: $crust;
|
||||
border: .13em solid $surface0;
|
||||
border-radius: .7rem;
|
||||
min-width: 18em;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
.menu-items-container {
|
||||
border-radius: 0.4em;
|
||||
font-size: 1.3em;
|
||||
min-width: 18em;
|
||||
}
|
||||
|
||||
.menu-section-container {
|
||||
margin: 1em 0em;
|
||||
|
||||
.menu-label {
|
||||
color: $text;
|
||||
font-size: 1.1em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.menu-label-container {
|
||||
background: $base;
|
||||
border-radius: 0.4em;
|
||||
border-bottom-left-radius: 0em;
|
||||
border-bottom-right-radius: 0em;
|
||||
margin: 0em 1em ;
|
||||
min-height: 2em;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-bottom: 0em;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-top: 0em;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.menu-items-section {
|
||||
background: $base;
|
||||
border-radius: 0.4em;
|
||||
border-top-left-radius: 0em;
|
||||
border-top-right-radius: 0em;
|
||||
padding: 0.9em;
|
||||
margin: 0em 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-active {
|
||||
font-size: 0.9em;
|
||||
font-weight: bold;
|
||||
margin: 0rem 1em;
|
||||
margin-bottom: 0.9em;
|
||||
}
|
||||
|
||||
.menu-active-container {
|
||||
&:first-child {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-active-button {
|
||||
padding: 0.1em;
|
||||
margin-bottom: -0.2em;
|
||||
.menu-active-icon {
|
||||
color: $overlay2;
|
||||
font-size: 1.4em;
|
||||
font-weight: bold;
|
||||
|
||||
}
|
||||
|
||||
&.muted image {
|
||||
color: $maroon;
|
||||
}
|
||||
&:hover image {
|
||||
color: $maroon;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-active-percentage {
|
||||
font-size: 0.9em;
|
||||
min-width: 2.5em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.menu-active-slider {
|
||||
margin-left: 1rem;
|
||||
margin-right: 1.5rem;
|
||||
}
|
||||
|
||||
.menu-active-slider * {
|
||||
min-height: 0.85em;
|
||||
border-radius: .2em;
|
||||
}
|
||||
.menu-slider-container {
|
||||
margin-bottom: .7rem;
|
||||
}
|
||||
|
||||
.menu-label-dim {
|
||||
color: $overlay0;
|
||||
margin-right: 1rem;
|
||||
font-size: 1em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.dim {
|
||||
color: $overlay0;
|
||||
}
|
||||
.menu-icon-button {
|
||||
&:hover {
|
||||
color: $surface2;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-dropdown-label-container {
|
||||
background: $base;
|
||||
border-radius: 0.4em;
|
||||
}
|
||||
|
||||
.menu-button {
|
||||
margin-bottom: .4em;
|
||||
}
|
||||
|
||||
.menu-button-name {
|
||||
font-size: 0.95em;
|
||||
font-weight: bold;
|
||||
margin-left: 0.5em;
|
||||
margin-right: 1.2rem;
|
||||
}
|
||||
|
||||
.menu-button-icon {
|
||||
font-size: 1.3em;
|
||||
font-weight: bold;
|
||||
color: $overlay0;
|
||||
margin-right: .5rem;
|
||||
|
||||
&.active {
|
||||
color: $maroon;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-item-box {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.dropdown-menu-container {
|
||||
min-height: 10em;
|
||||
}
|
||||
|
||||
.menu-label {
|
||||
margin: 0.5em 1em;
|
||||
color: $sky;
|
||||
}
|
||||
|
||||
.event-top-padding * {
|
||||
min-height: 0em;
|
||||
margin-top: 2.8em;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { -gtk-icon-transform: rotate(1turn); }
|
||||
}
|
||||
|
||||
image.spinning {
|
||||
animation-name: spin;
|
||||
animation-duration: 1s;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
89
scss/style/menus/network.scss
Normal file
89
scss/style/menus/network.scss
Normal file
@@ -0,0 +1,89 @@
|
||||
@import "../colors";
|
||||
|
||||
.menu-items-container.network {
|
||||
font-size: 1.3em;
|
||||
.menu-items-section {
|
||||
padding-bottom: 1.5em;
|
||||
}
|
||||
.menu-label {
|
||||
color: $mauve;
|
||||
}
|
||||
|
||||
.menu-icon-button.network {
|
||||
margin: 1em;
|
||||
|
||||
&:hover {
|
||||
color: $mauve;
|
||||
}
|
||||
}
|
||||
|
||||
.network-icon {
|
||||
font-size: 1.3em;
|
||||
min-width: 1em;
|
||||
min-height: 1em;
|
||||
color: $overlay1;
|
||||
|
||||
&.active {
|
||||
color: $mauve;
|
||||
}
|
||||
}
|
||||
|
||||
.connection-container {
|
||||
margin-left: 1em;
|
||||
}
|
||||
.connection-status {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.menu-section-container.wifi {
|
||||
margin-top: 0.65em;
|
||||
.menu-items-section {
|
||||
min-height: 12em;
|
||||
}
|
||||
}
|
||||
|
||||
.network-element-item {
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
&.staging {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $mauve;
|
||||
}
|
||||
}
|
||||
|
||||
.spinner.wap {
|
||||
color: $mauve;
|
||||
}
|
||||
|
||||
.network-password-input-container {
|
||||
background: $mantle;
|
||||
border-radius: 0.4em;
|
||||
margin: 0em 2em;
|
||||
margin-top: 0.75em;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.close-network-password-input-button {
|
||||
padding: 0em 0.5em;
|
||||
&:hover image {
|
||||
color: $mauve;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-icon-button.network.disconnect {
|
||||
margin: 0em;
|
||||
margin-top: -0.2em;
|
||||
margin-left: 1em;
|
||||
label {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
&:hover {
|
||||
color: $mauve;
|
||||
}
|
||||
}
|
||||
}
|
||||
109
scss/style/menus/notifications.scss
Normal file
109
scss/style/menus/notifications.scss
Normal file
@@ -0,0 +1,109 @@
|
||||
@import "../colors";
|
||||
|
||||
.notification-card-container.menu {
|
||||
margin: 0em;
|
||||
min-width: 30.5em;
|
||||
min-height: 48em;
|
||||
background: $crust;
|
||||
border: 0.13em solid $surface0;
|
||||
border-radius: 0.7em;
|
||||
margin-right: 0.45em;
|
||||
|
||||
.window-content.notificationsmenu-window {
|
||||
margin-right: 0.50em;
|
||||
}
|
||||
|
||||
.menu-content-container.notifications {
|
||||
margin: 1em;
|
||||
margin-bottom: 0em;
|
||||
min-height: 4em;
|
||||
}
|
||||
|
||||
.notification-menu-controls {
|
||||
background: $base;
|
||||
margin: 1em 1em;
|
||||
margin-bottom: 0.5em;
|
||||
border-radius: 0.4em;
|
||||
padding: 0.4em 0.75em;
|
||||
}
|
||||
|
||||
.notification-card.menu {
|
||||
background: $base;
|
||||
min-width: 26.2em;
|
||||
border: 0.15em solid $base;
|
||||
border-radius: 0em;
|
||||
border-bottom-left-radius: 0.4em;
|
||||
border-top-left-radius: 0.4em;
|
||||
margin: 0em;
|
||||
}
|
||||
|
||||
.notification-card-content-container {
|
||||
margin-bottom: 0.65em;
|
||||
&:last-child {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
.notification-card-content {
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
|
||||
.menu-label.notifications {
|
||||
margin: 0em;
|
||||
color: $lavender;
|
||||
}
|
||||
|
||||
.menu-separator.notification-controls {
|
||||
min-width: 0.1em;
|
||||
background-color: $surface0;
|
||||
margin: 0em 1em;
|
||||
}
|
||||
|
||||
.menu-switch.notifications:checked {
|
||||
&:checked {
|
||||
background: $lavender;
|
||||
}
|
||||
}
|
||||
|
||||
.clear-notifications-button {
|
||||
margin-right: 0.3em;
|
||||
|
||||
&:hover label {
|
||||
color: $maroon;
|
||||
}
|
||||
}
|
||||
|
||||
.clear-notifications-label {
|
||||
color: $red;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.notification-label-container {
|
||||
margin-bottom: 8em;
|
||||
|
||||
label {
|
||||
color: $surface0;
|
||||
}
|
||||
|
||||
.bell {
|
||||
font-size: 10em;
|
||||
}
|
||||
.message {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.close-notification-button.menu {
|
||||
background: $red;
|
||||
color: $crust;
|
||||
min-width: 2.1em;
|
||||
border-radius: 0rem 0.35em 0.35em 0em;
|
||||
|
||||
label {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $maroon;
|
||||
}
|
||||
}
|
||||
196
scss/style/menus/power.scss
Normal file
196
scss/style/menus/power.scss
Normal file
@@ -0,0 +1,196 @@
|
||||
@import "../colors";
|
||||
|
||||
window#powermenu,
|
||||
window#verification {
|
||||
// the fraction has to be more than hyprland ignorealpha
|
||||
background-color: rgba(0, 0, 0, .4);
|
||||
}
|
||||
|
||||
$popover-padding: 0.6rem * 1.6;
|
||||
|
||||
window#verification .verification {
|
||||
@include floating-widget;
|
||||
background: $crust;
|
||||
padding: 0.35em * 1.6 * 1.5;
|
||||
min-width: 20em;
|
||||
min-height: 6em;
|
||||
font-size: 1.3em;
|
||||
|
||||
.verification-content {
|
||||
background: $base;
|
||||
border-radius: 0.4em;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.text-box {
|
||||
margin-bottom: 0.3em;
|
||||
|
||||
.title {
|
||||
font-size: 1.5em;
|
||||
color: $lavender;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.desc {
|
||||
color: $text;
|
||||
font-size: 1em;
|
||||
margin-bottom: 0.55em;
|
||||
padding: 1em 3em;
|
||||
}
|
||||
}
|
||||
|
||||
.verification-button {
|
||||
background: $base;
|
||||
padding: 0.7em 0em;
|
||||
margin: 0.4em 1.7em;
|
||||
border-radius: 0.3em;
|
||||
opacity: 1;
|
||||
transition: border-color 0.2s ease-in-out;
|
||||
transition: opacity .3s ease-in-out;
|
||||
|
||||
&.bar-verification_yes {
|
||||
background-color: $green;
|
||||
}
|
||||
&.bar-verification_no {
|
||||
background-color: $red;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&.bar-verification_yes {
|
||||
background: $lavender;
|
||||
transition: background-color 0.2s ease-in-out;
|
||||
}
|
||||
&.bar-verification_no {
|
||||
background: $lavender;
|
||||
transition: background-color 0.2s ease-in-out;
|
||||
}
|
||||
}
|
||||
&:focus {
|
||||
&.bar-verification_yes{
|
||||
background: $lavender;
|
||||
transition: background 0.2s ease-in-out;
|
||||
}
|
||||
&.bar-verification_no {
|
||||
background: $lavender;
|
||||
transition: background 0.2s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
&.bar-verification_yes {
|
||||
background: rgb($lavender, 0.4);
|
||||
transition: background 0.2s ease-in-out;
|
||||
}
|
||||
&.bar-verification_no {
|
||||
background: rgb($lavender, 0.4);
|
||||
transition: background 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
image {
|
||||
opacity: .3;
|
||||
transition: opacity .3s ease-in-out;
|
||||
}
|
||||
label {
|
||||
opacity: .3;
|
||||
transition: opacity .3s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bar-verification_no label {
|
||||
color: $mantle;
|
||||
}
|
||||
.bar-verification_yes label {
|
||||
color: $mantle;
|
||||
}
|
||||
}
|
||||
|
||||
window#powermenu .powermenu {
|
||||
@include floating-widget;
|
||||
&.line {
|
||||
padding: $popover-padding * 1.5;
|
||||
}
|
||||
|
||||
&.box {
|
||||
padding: $popover-padding * 2;
|
||||
}
|
||||
}
|
||||
|
||||
.widget-button {
|
||||
border-color: $crust;
|
||||
min-width: 4.5em;
|
||||
min-height: 4.5em;
|
||||
opacity: 1;
|
||||
transition: border-color 0.2s ease-in-out;
|
||||
transition: opacity .3s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
&.powermenu-button-shutdown {
|
||||
border-color: $red;
|
||||
}
|
||||
&.powermenu-button-logout {
|
||||
border-color: $green;
|
||||
}
|
||||
&.powermenu-button-sleep {
|
||||
border-color: $sky;
|
||||
}
|
||||
&.powermenu-button-reboot {
|
||||
border-color: $peach;
|
||||
}
|
||||
}
|
||||
&:focus {
|
||||
&.powermenu-button-shutdown {
|
||||
border-color: $red;
|
||||
}
|
||||
&.powermenu-button-logout {
|
||||
border-color: $green;
|
||||
}
|
||||
&.powermenu-button-sleep {
|
||||
border-color: $sky;
|
||||
}
|
||||
&.powermenu-button-reboot {
|
||||
border-color: $peach;
|
||||
}
|
||||
} &:active {
|
||||
&.powermenu-button-shutdown {
|
||||
border-color: rgba($red, .5);
|
||||
}
|
||||
&.powermenu-button-logout {
|
||||
border-color: rgba($green, .5);
|
||||
}
|
||||
&.powermenu-button-sleep {
|
||||
border-color: rgba($sky, .5);
|
||||
}
|
||||
&.powermenu-button-reboot {
|
||||
border-color: rgba($peach, .5);
|
||||
}
|
||||
}
|
||||
}
|
||||
.system-button_icon {
|
||||
&.shutdown {
|
||||
color: $red;
|
||||
}
|
||||
&.logout {
|
||||
color: $green;
|
||||
}
|
||||
&.reboot {
|
||||
color: $peach;
|
||||
}
|
||||
&.sleep {
|
||||
color: $sky;
|
||||
}
|
||||
}
|
||||
|
||||
.system-button_label {
|
||||
&.shutdown {
|
||||
color: $red;
|
||||
}
|
||||
&.logout {
|
||||
color: $green;
|
||||
}
|
||||
&.reboot {
|
||||
color: $peach;
|
||||
}
|
||||
&.sleep {
|
||||
color: $sky;
|
||||
}
|
||||
}
|
||||
110
scss/style/notifications/popups.scss
Normal file
110
scss/style/notifications/popups.scss
Normal file
@@ -0,0 +1,110 @@
|
||||
@import "../colors";
|
||||
.notification-card-container {
|
||||
margin-top: 3.5rem;
|
||||
}
|
||||
|
||||
.notification-card {
|
||||
color: $text;
|
||||
background: $mantle;
|
||||
margin-right: 0.45em;
|
||||
border: 0.15em solid transparentize($surface0, 0.5);
|
||||
min-width: 26em;
|
||||
min-height: 6rem;
|
||||
border-radius: 0.6em;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: 0.85em;
|
||||
}
|
||||
}
|
||||
|
||||
.notification-card-container {
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.notification-card-image-container {
|
||||
margin: 0.65em 0.65em;
|
||||
border-radius: 0.4em;
|
||||
}
|
||||
.notification-card-image {
|
||||
border-radius: 0.4em;
|
||||
min-width: 1.5em;
|
||||
min-height: 1.5em;
|
||||
padding: 0.85em 0.85em;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.notification-card-content {
|
||||
min-width: 2.9em;
|
||||
min-height: 2.9em;
|
||||
padding: 0.5em 0.5em;
|
||||
margin-right: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.notification-card-content.noimg {
|
||||
margin-left: 0.5em;
|
||||
margin-top: .15em;
|
||||
}
|
||||
|
||||
.notification-card-header-label {
|
||||
font-size: 0.95em;
|
||||
margin-bottom: 0.5em;
|
||||
color: $lavender;
|
||||
}
|
||||
|
||||
.notification-card-body-label {
|
||||
font-size: 0.84em;
|
||||
margin-bottom: 1em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.notification-card-actions {
|
||||
margin-top: 0.25em;
|
||||
margin-bottom: 0.4em;
|
||||
}
|
||||
|
||||
.notification-action-buttons {
|
||||
color: $lavender;
|
||||
background: $surface0;
|
||||
min-width: 4em;
|
||||
min-height: 1.65em;
|
||||
border-radius: 0.2em;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 2rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $surface1;
|
||||
}
|
||||
}
|
||||
|
||||
.notification-icon {
|
||||
color: $lavender;
|
||||
margin-bottom: 0.4em;
|
||||
min-width: 1em;
|
||||
min-height: 1em;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.notification-time {
|
||||
font-size: 0.85em;
|
||||
color: $overlay1;
|
||||
}
|
||||
|
||||
.close-notification-button {
|
||||
background: $red;
|
||||
color: $crust;
|
||||
min-width: 2.1em;
|
||||
border-radius: 0rem 0.35em 0.35em 0em;
|
||||
|
||||
label {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $maroon;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user