102 lines
1.5 KiB
SCSS
102 lines
1.5 KiB
SCSS
@use "sass:map";
|
|
@import "catppuccin";
|
|
|
|
@mixin icon {
|
|
font-family: "Font Awesome 6 Pro Dutone";
|
|
font-weight: 900;
|
|
font-size: 22px;
|
|
}
|
|
|
|
$font-family: "";
|
|
$used-palette: "frappe";
|
|
$colors: map.get($palette, $used-palette);
|
|
|
|
$gradient:
|
|
"rosewater", "flamingo", "pink", "mauve", "red", "maroon", "peach",
|
|
"yellow", "green", "teal", "sky";
|
|
|
|
@each $name, $color in $colors {
|
|
.color-#{$name} {
|
|
color: $color;
|
|
}
|
|
|
|
.bg-#{$name} {
|
|
background: $color;
|
|
}
|
|
}
|
|
|
|
@for $i from 1 through length($gradient) {
|
|
$color: map.get($colors, nth($gradient, $i));
|
|
|
|
.gradient-#{$i} {
|
|
color: $color;
|
|
}
|
|
|
|
.gradient-#{$i}:hover {
|
|
color: desaturate($color: $color, $amount: 20);
|
|
}
|
|
|
|
.bg-gradient-#{$i} {
|
|
background: $color;
|
|
}
|
|
}
|
|
|
|
* {
|
|
all: unset;
|
|
}
|
|
|
|
.spraggins {
|
|
padding: 5px 15px 0;
|
|
font-family: $font-family;
|
|
color: map.get($colors, "text");
|
|
}
|
|
|
|
.box {
|
|
background: map.get($colors, "base");
|
|
border-radius: 4px;
|
|
// border: 2px solid $blue;
|
|
padding: 0 12px;
|
|
}
|
|
|
|
.icon {
|
|
@include icon;
|
|
|
|
&.smol {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
.time {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.date {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.workspaceButton {
|
|
&.active {
|
|
color: white;
|
|
}
|
|
|
|
&.empty {
|
|
font-weight: 300;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
&.empty.active {
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
|
|
.sys {
|
|
padding: 8px 0;
|
|
|
|
label {
|
|
padding: 0 8px;
|
|
}
|
|
|
|
.icon {
|
|
font-size: 19px;
|
|
}
|
|
}
|