159 lines
2.2 KiB
SCSS
159 lines
2.2 KiB
SCSS
$bg: #1e1e2e;
|
|
$fg: #cdd6f4;
|
|
$blue: #89b4fa;
|
|
$surface: #313244;
|
|
$crust: #11111b;
|
|
$yellow: #f9e2af;
|
|
|
|
* {
|
|
font-family: "sans-serif";
|
|
font-size: 14px;
|
|
}
|
|
|
|
window {
|
|
background-color: transparent;
|
|
}
|
|
|
|
button {
|
|
all: unset;
|
|
}
|
|
|
|
.main-container {
|
|
background-color: $bg;
|
|
color: $fg;
|
|
border-radius: 8px;
|
|
padding: 2px 5px;
|
|
margin: 1px;
|
|
}
|
|
|
|
.ws-focused {
|
|
background-color: $blue;
|
|
color: $crust;
|
|
padding: 0 8px;
|
|
border-radius: 6px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.ws-inactive {
|
|
color: #cdd6f4;
|
|
padding: 0 8px;
|
|
border-radius: 6px;
|
|
border: 1px solid #ffffff;
|
|
}
|
|
|
|
.ws-inactive:hover {
|
|
background-color: $surface;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.date-time {
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.date-time:hover {
|
|
background-color: $surface;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.battery-widget, .volume-widget, .brightness-widget, .caffeine {
|
|
padding: 0 2px;
|
|
}
|
|
|
|
.tray-button {
|
|
padding: 0 8px;
|
|
border-radius: 6px;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.tray-button:hover {
|
|
background-color: $surface;
|
|
}
|
|
|
|
.popup-box {
|
|
background-color: $bg;
|
|
color: $fg;
|
|
padding: 15px;
|
|
border: 1px solid $blue;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.vol-bar trough, .br-bar trough {
|
|
background-color: $surface;
|
|
border-radius: 10px;
|
|
min-height: 4px;
|
|
}
|
|
|
|
.vol-bar highlight {
|
|
background-color: $blue;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.br-bar highlight {
|
|
background-color: $yellow;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.caffeine {
|
|
padding: 0 5px;
|
|
}
|
|
|
|
.caffeine-on {
|
|
color: $yellow;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.caffeine-off {
|
|
color: $fg;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.tray-container {
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.calendar-box {
|
|
background-color: $bg;
|
|
color: $fg;
|
|
padding: 15px;
|
|
border: 1px solid $blue;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
calendar {
|
|
padding: 5px;
|
|
}
|
|
|
|
.popup-title {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: $blue;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.popup-subtitle {
|
|
font-size: 12px;
|
|
color: $fg;
|
|
opacity: 0.8;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.profile-active {
|
|
background-color: $blue;
|
|
color: $crust;
|
|
padding: 8px 12px;
|
|
border-radius: 6px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.profile-inactive {
|
|
background-color: $surface;
|
|
color: $fg;
|
|
padding: 8px 12px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.profile-inactive:hover {
|
|
background-color: lighten($surface, 5%);
|
|
border: 1px solid $blue;
|
|
}
|