nixos-configs/configs/eww/actions/actions.scss

158 lines
3.3 KiB
SCSS
Raw Normal View History

.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; }
}
}
}