176 lines
No EOL
2.5 KiB
SCSS
176 lines
No EOL
2.5 KiB
SCSS
$rosewater: #f2d5cf;
|
|
$flamingo: #eebebe;
|
|
$pink: #f4b8e4;
|
|
$mauve: #ca9ee6;
|
|
$red: #e78284;
|
|
$maroon: #ea999c;
|
|
$peach: #ef9f76;
|
|
$yellow: #e5c890;
|
|
$green: #a6d189;
|
|
$teal: #81c8be;
|
|
$sky: #99d1db;
|
|
$sapphire: #85c1dc;
|
|
$blue: #8caaee;
|
|
$lavender: #babbf1;
|
|
$text: #c6d0f5;
|
|
$subtext1: #b5bfe2;
|
|
$subtext0: #a5adce;
|
|
$overlay2: #949cbb;
|
|
$overlay1: #838ba7;
|
|
$overlay0: #737994;
|
|
$surface2: #626880;
|
|
$surface1: #51576d;
|
|
$surface0: #414559;
|
|
$base: #303446;
|
|
$mantle: #292c3c;
|
|
$crust: #232634;
|
|
$light-gray: #9699b7;
|
|
|
|
* {
|
|
all: unset; //Unsets everything so you can style everything from scratch
|
|
font-family: "JetBrainsMono"
|
|
}
|
|
|
|
tooltip {
|
|
background-color: $base;
|
|
border-radius: 5px
|
|
}
|
|
|
|
.icon {
|
|
font-family: monospace;
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
button {
|
|
transition: background-color 200ms, color 200ms;
|
|
}
|
|
|
|
.active {
|
|
color: $pink;
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
.inactive {
|
|
color: $base;
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
.inactive:hover {
|
|
color: $light-gray;
|
|
}
|
|
|
|
.bar {
|
|
background-color: $mantle;
|
|
border-left: 4px dotted $red;
|
|
}
|
|
|
|
.wifi {
|
|
font-size: 2rem;
|
|
color: $mauve;
|
|
}
|
|
|
|
.clock {
|
|
font-weight: bold;
|
|
background-color: $base;
|
|
color: $text;
|
|
border-radius: 10px;
|
|
padding: 0.2rem;
|
|
margin: 0.5rem;
|
|
}
|
|
|
|
|
|
.date {
|
|
font-size: 1.5rem;
|
|
color: $text;
|
|
}
|
|
|
|
.reg-btn {
|
|
font-size: 2rem;
|
|
margin: 2px 8px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
|
|
.battery {
|
|
font-size: 1.5rem;
|
|
color: $teal;
|
|
}
|
|
|
|
.volume {
|
|
font-size: 1.5rem;
|
|
color: $mauve;
|
|
}
|
|
|
|
// battery menu
|
|
.batterywindow {
|
|
background-color: $mantle;
|
|
border-radius: 5px;
|
|
font-size: 18px;
|
|
font-weight: normal;
|
|
color: $text;
|
|
|
|
progressbar {
|
|
border-radius: 5px;
|
|
}
|
|
|
|
progressbar progress {
|
|
background-color: $green;
|
|
}
|
|
|
|
progressbar trough {
|
|
background-color: $base;
|
|
}
|
|
|
|
.batterymenu {
|
|
padding: 10px;
|
|
}
|
|
|
|
}
|
|
|
|
// Calendar
|
|
.cal {
|
|
background-color: $mantle;
|
|
border-radius: 5px;
|
|
font-size: 18px;
|
|
font-weight: normal;
|
|
|
|
.cal-in {
|
|
padding: 0px 10px 0px 10px;
|
|
color: $text;
|
|
|
|
.cal {
|
|
&.highlight {
|
|
padding: 20px;
|
|
}
|
|
|
|
padding: 5px 5px 5px 5px;
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
calender {
|
|
color: $text;
|
|
}
|
|
|
|
calendar:selected {
|
|
color: $mauve;
|
|
}
|
|
|
|
calendar.header {
|
|
color: $overlay0;
|
|
font-weight: bold;
|
|
}
|
|
|
|
calendar.button {
|
|
color: $base;
|
|
}
|
|
|
|
calendar.highlight {
|
|
color: $overlay0;
|
|
font-weight: bold;
|
|
}
|
|
|
|
calendar:indeterminate {
|
|
color: $text;
|
|
} |