127 lines
2.3 KiB
SCSS
127 lines
2.3 KiB
SCSS
@use "sass:color";
|
|
@use "lib";
|
|
@use "scheme";
|
|
@use "font";
|
|
|
|
.bar {
|
|
@include font.mono;
|
|
|
|
background-color: scheme.$crust;
|
|
padding: lib.s(8) lib.s(20);
|
|
font-size: lib.s(14);
|
|
|
|
@include lib.spacing(10);
|
|
|
|
& > * {
|
|
@include lib.spacing(10);
|
|
}
|
|
|
|
.module {
|
|
@include lib.rounded(5);
|
|
|
|
padding: lib.s(3) lib.s(8);
|
|
background-color: scheme.$base;
|
|
|
|
@include lib.spacing;
|
|
}
|
|
|
|
label.icon {
|
|
font-size: lib.s(18);
|
|
}
|
|
|
|
.os-icon {
|
|
@include lib.border(scheme.$yellow);
|
|
|
|
color: scheme.$yellow;
|
|
font-size: lib.s(14);
|
|
padding-right: lib.s(12);
|
|
}
|
|
|
|
.active-window {
|
|
color: scheme.$pink;
|
|
}
|
|
|
|
.media-playing {
|
|
color: scheme.$lavender;
|
|
|
|
@include lib.spacing(8);
|
|
|
|
icon {
|
|
font-size: lib.s(16);
|
|
}
|
|
}
|
|
|
|
.workspaces {
|
|
@include lib.border(scheme.$maroon);
|
|
|
|
padding: lib.s(3) lib.s(18);
|
|
|
|
& > * {
|
|
@include lib.rounded(2);
|
|
@include lib.element-decel;
|
|
|
|
min-width: lib.s(20);
|
|
min-height: lib.s(4);
|
|
background-color: scheme.$surface1;
|
|
|
|
&.occupied {
|
|
background-color: scheme.$sky;
|
|
}
|
|
|
|
&.focused {
|
|
min-width: lib.s(30);
|
|
background-color: scheme.$mauve;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tray {
|
|
font-size: lib.s(15);
|
|
|
|
@include lib.spacing(10);
|
|
}
|
|
|
|
.status-icons {
|
|
color: scheme.$rosewater;
|
|
|
|
.bluetooth {
|
|
@include lib.spacing(10);
|
|
|
|
// The spacing doesn't look right for some reason so this
|
|
& > :first-child:not(:last-child) {
|
|
margin-right: lib.s(5);
|
|
}
|
|
}
|
|
}
|
|
|
|
.pkg-updates {
|
|
color: scheme.$blue;
|
|
}
|
|
|
|
.notif-count {
|
|
color: scheme.$mauve;
|
|
}
|
|
|
|
.date-time {
|
|
color: scheme.$peach;
|
|
}
|
|
|
|
.power {
|
|
@include lib.border(scheme.$red);
|
|
@include lib.element-decel;
|
|
@include font.icon;
|
|
|
|
color: scheme.$red;
|
|
font-weight: bold;
|
|
font-size: lib.s(16);
|
|
|
|
&:hover,
|
|
&:focus {
|
|
background-color: scheme.$surface1;
|
|
}
|
|
|
|
&:active {
|
|
background-color: scheme.$surface2;
|
|
}
|
|
}
|
|
}
|