178 lines
2.7 KiB
SCSS
178 lines
2.7 KiB
SCSS
|
$base: #44465c;
|
||
|
$blue: #3fc6de;
|
||
|
$surface0: #44465c;
|
||
|
$surface1: #44465c;
|
||
|
$text: #d9e0ee;
|
||
|
$overlay0: #6e738d;
|
||
|
$red: #ec6a88;
|
||
|
$peach: #efb993;
|
||
|
$yellow: #efb993;
|
||
|
$mauve: #b072d1;
|
||
|
$green: #3fdaa4;
|
||
|
$mantle: #292a37;
|
||
|
$crust: #2e303e;
|
||
|
$light-gray: #9699b7;
|
||
|
|
||
|
* {
|
||
|
all: unset; //Unsets everything so you can style everything from scratch
|
||
|
font-family: "JetBrainsMono"
|
||
|
}
|
||
|
|
||
|
.icon {
|
||
|
font-family: monospace;
|
||
|
font-size: 1.4rem;
|
||
|
}
|
||
|
|
||
|
|
||
|
button {
|
||
|
transition: background-color 200ms, color 200ms;
|
||
|
}
|
||
|
|
||
|
.active {
|
||
|
color: $green;
|
||
|
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: $blue;
|
||
|
}
|
||
|
|
||
|
.clock {
|
||
|
font-weight: bold;
|
||
|
background-color: $base;
|
||
|
color: $text;
|
||
|
border-radius: 10px;
|
||
|
padding: 0.2rem;
|
||
|
margin: 0.5rem;
|
||
|
}
|
||
|
|
||
|
|
||
|
.date {
|
||
|
font-size: 1.5rem;
|
||
|
}
|
||
|
|
||
|
.reg-btn {
|
||
|
font-size: 2rem;
|
||
|
margin: 2px 8px;
|
||
|
border-radius: 10px;
|
||
|
}
|
||
|
|
||
|
.powerbutton {
|
||
|
color: $red;
|
||
|
}
|
||
|
|
||
|
.powerbutton:hover {
|
||
|
background-color: $base;
|
||
|
}
|
||
|
|
||
|
.powerbutton:active {
|
||
|
background-color: $red;
|
||
|
color: $mantle;
|
||
|
}
|
||
|
|
||
|
.battery {
|
||
|
font-size: 1.5rem;
|
||
|
color: $green;
|
||
|
}
|
||
|
|
||
|
.volume {
|
||
|
font-size: 1.5rem;
|
||
|
color: $blue;
|
||
|
}
|
||
|
|
||
|
// Credits AlphaTechnolog
|
||
|
.powermenu-box {
|
||
|
padding: 0 2px;
|
||
|
margin: 7px 7px 7px 0px;
|
||
|
background: inherit;
|
||
|
|
||
|
.dispatcher {
|
||
|
border-radius: 15px;
|
||
|
background: $base;
|
||
|
color: $red;
|
||
|
font-size: 14px;
|
||
|
padding: 0 14px 0 10px;
|
||
|
|
||
|
&:hover {
|
||
|
background-color: $surface0;
|
||
|
}
|
||
|
|
||
|
&:active {
|
||
|
background-color: $surface1;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// powermenu
|
||
|
.powermenu-container {
|
||
|
background: $crust;
|
||
|
color: $text;
|
||
|
padding: 10px;
|
||
|
font-size: 55px;
|
||
|
|
||
|
transition: all 200ms cubic-bezier(.1, -0.00, .0, 1.49);
|
||
|
|
||
|
.btn {
|
||
|
margin: 1rem;
|
||
|
}
|
||
|
|
||
|
// shutdown
|
||
|
.shutdown-btn-box .btn {
|
||
|
color: $red;
|
||
|
border-radius: 15px;
|
||
|
background-color: $mantle;
|
||
|
|
||
|
&:hover {
|
||
|
background-color: $base;
|
||
|
}
|
||
|
|
||
|
&:active {
|
||
|
background-color: $surface1;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// reboot
|
||
|
.reboot-btn-box .btn {
|
||
|
color: $mauve;
|
||
|
border-radius: 15px;
|
||
|
background-color: $mantle;
|
||
|
|
||
|
&:hover {
|
||
|
background-color: $base;
|
||
|
}
|
||
|
|
||
|
&:active {
|
||
|
background-color: $surface1;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// exit
|
||
|
.exit-btn-box .btn {
|
||
|
color: $yellow;
|
||
|
border-radius: 15px;
|
||
|
background-color: $mantle;
|
||
|
|
||
|
&:hover {
|
||
|
background-color: $base;
|
||
|
}
|
||
|
|
||
|
&:active {
|
||
|
background-color: $surface1;
|
||
|
}
|
||
|
}
|
||
|
}
|