161 lines
2.5 KiB
SCSS
161 lines
2.5 KiB
SCSS
// General styling
|
|
|
|
* {
|
|
all: unset;
|
|
}
|
|
|
|
scale trough {
|
|
all: unset;
|
|
background-color: #22242b;
|
|
box-shadow: 0 2px 3px 2px #06060b;
|
|
border-radius: 16px;
|
|
min-height: 10px;
|
|
min-width: 70px;
|
|
margin: 0px 10px 0px 0px;
|
|
}
|
|
|
|
// Main bar styling
|
|
|
|
.main {
|
|
background-color: #0e1419;
|
|
color: #e5e1cf;
|
|
font-family: "Noto Sans";
|
|
font-size: 12px;
|
|
}
|
|
|
|
.leftwidgets {
|
|
margin-left: 5px;
|
|
margin-right: 50px;
|
|
|
|
button {
|
|
margin: 0px 5px;
|
|
border-color: #0e1419;
|
|
border-width: 0px;
|
|
padding-left: 0em;
|
|
padding-right: 0em;
|
|
}
|
|
|
|
.occupied {
|
|
color: #919191;
|
|
}
|
|
|
|
.focused {
|
|
color: #ff6054;
|
|
}
|
|
|
|
.empty {
|
|
color: #444444;
|
|
}
|
|
}
|
|
|
|
.rightwidgets {
|
|
margin: 0px 10px 0px 5px;
|
|
}
|
|
|
|
.icon-module__icon {
|
|
margin: 0px 5px 0px 0px;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.button__container {
|
|
padding-left: 7px;
|
|
padding-right: 7px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.button__container:hover {
|
|
background-color: hsla(210, 25%, 25%, 0.3);
|
|
}
|
|
|
|
.player {
|
|
color: #e5e1cf;
|
|
}
|
|
|
|
.player__container {
|
|
padding-left: 7px;
|
|
padding-right: 7px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.player__container:hover {
|
|
background-color: hsla(210, 25%, 25%, 0.3);
|
|
}
|
|
|
|
.power__text {
|
|
margin-top: 3px;
|
|
}
|
|
|
|
.power__text_low {
|
|
margin-top: 3px;
|
|
color: #ff3333;
|
|
}
|
|
|
|
.brightness__label {
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.brightness__bar {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.brightness__bar trough highlight {
|
|
background-image: linear-gradient(to right, #e4c9af 30%, #f2cdcd 50%, #e0b089 100% *50);
|
|
border-radius: 10px;
|
|
min-width: 20px;
|
|
}
|
|
|
|
.volume__bar {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.volume__bar trough highlight {
|
|
background-image: linear-gradient(to right, #f2525d 30%, #cc5a61 50%, #c93640 100% *50);
|
|
border-radius: 10px;
|
|
min-width: 20px;
|
|
}
|
|
|
|
.volume__label {
|
|
margin-top: 3px;
|
|
}
|
|
|
|
.timedate__button {
|
|
padding: 3px 6gpx;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.timedate__button:hover {
|
|
background-color: hsla(210, 25%, 25%, 0.3);
|
|
}
|
|
|
|
// Song card styling
|
|
|
|
.songcard {
|
|
background-color: #0e1419;
|
|
color: #e5e1cf;
|
|
font-family: "Noto Sans";
|
|
font-size: 12px;
|
|
}
|
|
|
|
.songcard__title {
|
|
font-weight: 700;
|
|
font-size: 20px;
|
|
margin-top: 10px;
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
.songcard__artist {
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
margin-top: 0px;
|
|
margin-bottom: 0px;
|
|
color: #919191;
|
|
}
|
|
|
|
.songcard__controls {
|
|
margin-top: 0px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.songcard__button {
|
|
margin: 0px 3px;
|
|
}
|