150 lines
2 KiB
SCSS
150 lines
2 KiB
SCSS
$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;
|
|
} |