138 lines
2.2 KiB
SCSS
138 lines
2.2 KiB
SCSS
/* system menu */
|
|
.system-menu-box { @include window; }
|
|
|
|
/* between net/bt and their arrows */
|
|
.separator {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
/* date & time */
|
|
.top-row {
|
|
margin: 1rem 1.5rem 0;
|
|
|
|
.time { font-size: 2rem; }
|
|
|
|
.date-box {
|
|
margin: 0 1rem;
|
|
|
|
label { font-size: 1.1rem; }
|
|
|
|
.date {
|
|
background: unset;
|
|
margin: 0 .5rem 0 0;
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* wifi/bt/airplane button boxes */
|
|
.system-row {
|
|
margin: .5rem .7rem;
|
|
|
|
/* the airplane icon is not properly spaced */
|
|
.airplane-box button {
|
|
padding: 1rem 3rem;
|
|
}
|
|
|
|
label {
|
|
font-size: 1rem;
|
|
margin: 0 .1rem;
|
|
}
|
|
}
|
|
|
|
/* wifi/bt/airplane buttons */
|
|
.element {
|
|
@include rounding;
|
|
background-color: $bg1;
|
|
margin: .3rem;
|
|
|
|
button {
|
|
@include rounding;
|
|
padding: 1rem;
|
|
|
|
label {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* volume & brightness sliders */
|
|
.sliders {
|
|
@include rounding;
|
|
background-color: $bg1;
|
|
margin: .5rem 1rem;
|
|
padding: .6rem 1rem;
|
|
|
|
scale {
|
|
margin-right: -1rem;
|
|
min-width: 21.5rem;
|
|
|
|
trough { margin-right: 0; }
|
|
}
|
|
|
|
box { margin: .2rem 0; }
|
|
label { font-size: 1.2rem; }
|
|
}
|
|
|
|
.volume-slider-box,
|
|
.brightness-slider-box {
|
|
trough { background-color: $base; }
|
|
}
|
|
|
|
.volume-bar highlight {
|
|
@include rounding;
|
|
background-image: linear-gradient(to right, $teal, $sky);
|
|
}
|
|
|
|
.brightness-slider-box scale highlight {
|
|
@include rounding;
|
|
background-image: linear-gradient(to right, $yellow, $peach);
|
|
}
|
|
|
|
/* battery & power button */
|
|
.bottom-row {
|
|
margin: .5rem 1rem;
|
|
|
|
.battery-icon {
|
|
color: $green;
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.battery-icon .low { color: $red; }
|
|
.battery-rate { color: $mauve; }
|
|
|
|
.battery-status {
|
|
color: $subtext0;
|
|
margin: 0 .5rem;
|
|
}
|
|
|
|
button {
|
|
background-color: $bg1;
|
|
border-radius: 50%;
|
|
margin-bottom: .1rem;
|
|
padding: 0 .5rem;
|
|
|
|
label { font-size: 1.5rem; }
|
|
&:hover { background-color: $bg1; }
|
|
}
|
|
}
|
|
|
|
/* set wifi/bt colors and dim buttons when hovering */
|
|
.element {
|
|
button:hover { background-color: rgba(0, 0, 0, .1); }
|
|
}
|
|
|
|
.bt-connected {
|
|
background-color: $blue;
|
|
color: $crust;
|
|
}
|
|
|
|
.net-connected {
|
|
background-color: $mauve;
|
|
color: $crust;
|
|
}
|