158 lines
3.3 KiB
SCSS
158 lines
3.3 KiB
SCSS
.actions {
|
|
background-color: $bg;
|
|
color: $fg;
|
|
font-family: Product Sans;
|
|
border-radius: 30px;
|
|
border: 5px solid $contrastbg;
|
|
padding: 10px 18px;
|
|
}
|
|
|
|
.controlsbox {
|
|
background-color: $contrastbg;
|
|
border-radius: 15px;
|
|
padding: 7px 12px;
|
|
|
|
.vol-slider {
|
|
.vol-label {
|
|
min-width: 25px; /* Set the width according to your icons */
|
|
font-size: 26px;
|
|
font-family: Iosevka Nerd Font;
|
|
margin-right: 15px;
|
|
color: $blue;
|
|
}
|
|
& scale trough {
|
|
all: unset;
|
|
border-radius: 10px;
|
|
background-color: $black;
|
|
border: none;
|
|
min-height: 16px;
|
|
min-width: 250px;
|
|
margin-left: 3px;
|
|
& highlight {
|
|
all: unset;
|
|
background: linear-gradient(to right, $blue, $cyan);
|
|
color: #000000;
|
|
border-radius: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.br-slider {
|
|
.br-label {
|
|
min-width: 25px; /* Set the width according to your icons */
|
|
font-size: 26px;
|
|
font-family: Iosevka Nerd Font;
|
|
margin-right: 15px;
|
|
color: $yellow;
|
|
}
|
|
& scale trough {
|
|
all: unset;
|
|
border-radius: 10px;
|
|
background-color: $black;
|
|
border: none;
|
|
min-height: 16px;
|
|
min-width: 250px;
|
|
margin-left: 3px;
|
|
& highlight {
|
|
all: unset;
|
|
background: linear-gradient(to right, $red, $yellow);
|
|
color: #000000;
|
|
border-radius: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.userinfobox {
|
|
.time {
|
|
font-size: 42px;
|
|
}
|
|
.pfp {
|
|
background-position: center;
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
border-radius: 50px;
|
|
min-width: 30px;
|
|
min-height: 30px;
|
|
}
|
|
.daybox {
|
|
margin-top: 8px;
|
|
font-size: 14px;
|
|
}
|
|
.username {
|
|
font-family: Product Sans;
|
|
}
|
|
.useractions {
|
|
.logout {
|
|
background-color: $black;
|
|
font-family: Iosevka Nerd Font;
|
|
font-size: 18px;
|
|
padding: 6px 12px 6px 6px;
|
|
border-radius: 4px;
|
|
transition: all ease .2s;
|
|
&:hover { background-color: $dimblack; }
|
|
&:active { background-color: $black; }
|
|
}
|
|
}
|
|
}
|
|
|
|
.sysbuttonsbox {
|
|
.block-container {
|
|
.block {
|
|
background-color: $contrastbg;
|
|
padding: 0px 6px;
|
|
border-radius: 50px;
|
|
transition: all ease .2s;
|
|
color: $fg;
|
|
&:hover { background-color: $bgSecondary; }
|
|
&:active { background-color: $contrastbg; }
|
|
&.active {
|
|
background-color: $black;
|
|
&:hover { background-color: $dimblack; }
|
|
&:active { background-color: $black; }
|
|
.sepbox .sep {
|
|
background-color: $lightblack;
|
|
}
|
|
}
|
|
.iconbox .icon {
|
|
font-family: MesloLGS NF;
|
|
padding: 7px 14px 7px 14px;
|
|
font-size: 20px;
|
|
min-width: 20px;
|
|
}
|
|
.sepbox .sep {
|
|
background-color: $black;
|
|
margin: 0px 4px;
|
|
padding: 0px 1px;
|
|
}
|
|
.chevronbox {
|
|
font-family: Iosevka Nerd Font;
|
|
padding: 0px 12px;
|
|
}
|
|
}
|
|
.label {
|
|
font-family: Product Sans;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.poweractionsbox {
|
|
.info {
|
|
font-size: 26px;
|
|
}
|
|
.buttons {
|
|
font-family: Iosevka Nerd Font;
|
|
font-size: 22px;
|
|
button {
|
|
padding: 1px 9px 1px 9px;
|
|
background-color: $bgSecondary;
|
|
border-radius: 5px;
|
|
transition: all ease .2s;
|
|
&:hover { background-color: $black; }
|
|
&:active { background-color: $bg; }
|
|
&.do-logout { color: $yellow; }
|
|
}
|
|
}
|
|
}
|