Miguel Palhas
249 lines
2.5 KiB
SCSS
249 lines
2.5 KiB
SCSS
//
|
|
// catppuccin-mocha
|
|
//
|
|
$rosewater: #f5e0dc;
|
|
$flamingo: #f2cdcd;
|
|
$pink: #ff3ac6;
|
|
$mauve: #cba6f7;
|
|
$red: #f38ba8;
|
|
$maroon: #eba0ac;
|
|
$peach: #f9e2af;
|
|
$yellow: #f9e2af;
|
|
$green: #a6e3a1;
|
|
$teal: #94e2d5;
|
|
$sky: #89dceb;
|
|
$sapphire: #74c7ec;
|
|
$blue: #89b4fa;
|
|
$lavender: #b4befe;
|
|
$text: #cdd6f4;
|
|
$subtext1: #bac2de;
|
|
$subtext0: #a6adc8;
|
|
$overlay2: #9399b2;
|
|
$overlay1: #7f849c;
|
|
$overlay0: #6c7086;
|
|
$surface2: #585b70;
|
|
$surface1: #45475a;
|
|
$surface0: #313244;
|
|
$base: #1e1e2e;
|
|
$mantle: #181825;
|
|
$crust: #11111b;
|
|
|
|
:not(menu):not(menuitem) {
|
|
all: unset;
|
|
font-family:
|
|
Material Design Icons,
|
|
FiraCode Nerd Font;
|
|
}
|
|
|
|
//
|
|
// color theming
|
|
//
|
|
|
|
tooltip.background,
|
|
.window,
|
|
menu,
|
|
menuitem,
|
|
.bar {
|
|
background-color: $crust;
|
|
}
|
|
|
|
.memory * {
|
|
color: $mauve;
|
|
}
|
|
.cpu * {
|
|
color: $peach;
|
|
}
|
|
.cputemp * {
|
|
color: $red;
|
|
}
|
|
.battery * {
|
|
color: $red;
|
|
}
|
|
|
|
.clock {
|
|
color: $text;
|
|
}
|
|
|
|
//
|
|
// General
|
|
//
|
|
|
|
.bar {
|
|
// min-height: 30px;
|
|
font-size: 16;
|
|
transition: all 0.1s ease-out;
|
|
border-radius: 0px 0px 10 10;
|
|
}
|
|
|
|
.bar {
|
|
opacity: 1;
|
|
}
|
|
|
|
.space {
|
|
margin: 0px 10px;
|
|
}
|
|
|
|
//
|
|
// tooltip
|
|
//
|
|
|
|
tooltip.background {
|
|
border-radius: 10px;
|
|
}
|
|
|
|
tooltip label {
|
|
}
|
|
|
|
//
|
|
// clock
|
|
//
|
|
|
|
.clock-time {
|
|
font-weight: bold;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
//
|
|
// circular bars
|
|
//
|
|
|
|
.circle {
|
|
border-radius: 10px;
|
|
margin: 0 5;
|
|
}
|
|
|
|
.circle .icon {
|
|
font-size: 16px;
|
|
padding: 10px;
|
|
}
|
|
|
|
//
|
|
// sliders
|
|
//
|
|
|
|
.slider,
|
|
.slider trough highlight {
|
|
border-radius: 10px;
|
|
}
|
|
|
|
//
|
|
// network
|
|
//
|
|
|
|
.network,
|
|
.volume {
|
|
margin: 0 5px;
|
|
|
|
& button {
|
|
margin-right: 10;
|
|
}
|
|
|
|
.connected {
|
|
color: $green;
|
|
}
|
|
|
|
.disconnected {
|
|
color: $peach;
|
|
}
|
|
}
|
|
|
|
//
|
|
// brightness
|
|
//
|
|
|
|
.bright_icon {
|
|
font-size: 12;
|
|
color: #e4c9af;
|
|
}
|
|
|
|
//
|
|
// sliders
|
|
//
|
|
|
|
.slider trough highlight {
|
|
background-image: linear-gradient(
|
|
to right,
|
|
$yellow 30%,
|
|
$peach 50%,
|
|
$red 100% * 50
|
|
);
|
|
}
|
|
|
|
scale trough {
|
|
background-color: $surface1;
|
|
border-radius: 16px;
|
|
min-height: 10px;
|
|
min-width: 100px;
|
|
}
|
|
|
|
//
|
|
// systray
|
|
//
|
|
|
|
menu {
|
|
border-radius: 16px;
|
|
}
|
|
|
|
menuitem {
|
|
padding: 8px;
|
|
border-radius: 8px;
|
|
color: $text;
|
|
background-color: $surface2;
|
|
|
|
&:disabled {
|
|
color: $overlay2;
|
|
}
|
|
}
|
|
|
|
//
|
|
// workspaces
|
|
//
|
|
|
|
.w0,
|
|
.w01,
|
|
.w02,
|
|
.w03,
|
|
.w04,
|
|
.w05,
|
|
.w06,
|
|
.w011,
|
|
.w022,
|
|
.w033,
|
|
.w044,
|
|
.w055,
|
|
.w066 {
|
|
border-radius: 10px;
|
|
font-size: 16px;
|
|
padding: 5px 5;
|
|
min-height: 25px;
|
|
min-width: 60px;
|
|
}
|
|
|
|
// Unoccupied
|
|
.w0 {
|
|
color: $overlay0;
|
|
}
|
|
|
|
// Occupied
|
|
.w01,
|
|
.w02,
|
|
.w03,
|
|
.w04,
|
|
.w05,
|
|
.w06 {
|
|
color: $text;
|
|
}
|
|
|
|
// Focused
|
|
.w011,
|
|
.w022,
|
|
.w033,
|
|
.w044,
|
|
.w055,
|
|
.w066 {
|
|
font-size: 16px;
|
|
background-color: $sky;
|
|
color: $crust;
|
|
font-weight: bold;
|
|
}
|