nixos-configs/eww/dashboard/dashboard.scss
2023-05-28 18:05:51 -04:00

305 lines
8 KiB
SCSS

.dashboardbox {
background-color: $black;
color: $fg;
}
.headerbox {
padding: 8px 10px 6px;
.userbox {
.pfp {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
min-height: 32px;
min-width: 32px;
border-radius: 50px;
}
.pcname {
font-family: Product Sans;
.sep {
color: $blue;
}
}
}
.searchbox {
.searchinput {
background-color: $bg;
padding: 5px 0px;
border-radius: 50px;
transition: all ease .2s;
&:hover { background-color: $bgSecondary; }
&:active { background-color: $contrastbg; }
.searchinput-content {
padding: 0px 200px 0px 10px;
font-family: Product Sans;
.icon {
font-family: Iosevka Nerd Font;
color: $blue;
margin-right: 12px;
}
.placeholder {
color: $lightblack;
}
}
}
}
}
.content-container {
.contentbox {
background-color: $bg;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
padding: 25px;
.firstcol {
.usercard {
background-color: $black;
border-radius: 12px;
padding: 10px;
.user-content {
font-family: Product Sans;
.pfp {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 64px;
min-width: 64px;
border-radius: 50px;
}
.username {
font-weight: bolder;
font-size: 20px;
}
.uptime {
font-size: 12px;
}
}
.user-powerbuttons {
button {
background-color: $dimblack;
border-radius: 7px;
padding: 2px 10px 2px 7px;
font-family: Iosevka Nerd Font;
font-size: 16px;
transition: all ease .2s;
&:hover { background-color: $lightblack; }
&:active { background-color: $dimblack; }
}
.poweroff { color: $red; }
.reboot { color: $magenta; }
}
}
.controlscard {
background-color: $black;
padding: 10px;
border-radius: 12px;
.control-container {
.control-item {
transition: all ease .2s;
border-radius: 50px;
background-color: $dimblack;
color: $blue;
&:hover { background-color: $lightblack; }
&:active { background-color: $dimblack; }
&.active {
background: $blue;
color: $bg;
}
.control-icon {
font-family: Iosevka Nerd Font;
font-size: 14px;
}
// solving nerd fonts alignment issues
&.network { padding: 9px 19px 9px 10px; }
&.network-disconnected { padding: 9px 18px 9px 11px; }
&.airplane { padding: 9px 17px 9px 12px; }
&.volume { padding: 9px 18px 9px 11px; }
&.volume-muted { padding: 9px 17px 9px 12px; }
&.mic { padding: 9px 16px 9px 13px; }
&.mic-on { padding: 9px 15px 9px 14px; }
&.redshift { padding: 9px 18px 9px 11px; }
&.redshift-on { padding: 9px 17px 9px 12px; }
&.bluetooth { padding: 9px 16px 9px 13px; }
&.bluetooth-on { padding: 9px 15px 9px 14px; }
&.fullscreensht { padding: 9px 17px 9px 12px; }
&.areascreensht { padding: 9px 17px 9px 12px; }
}
}
}
.slidersbox {
.vol-slider {
.vol-label {
font-size: 16px;
font-family: Iosevka Nerd Font;
color: $bg;
margin-left: 10px;
}
& scale trough {
all: unset;
border-radius: 10px;
background-color: $black;
border: none;
min-height: 25px;
min-width: 245px;
margin-left: 3px;
& highlight {
all: unset;
background: $blue;
color: #000000;
border-radius: 10px;
}
}
}
.br-slider {
.br-label {
font-size: 16px;
font-family: Iosevka Nerd Font;
color: $bg;
margin-left: 10px;
}
& scale trough {
all: unset;
border-radius: 100px;
background-color: $black;
border: none;
min-height: 25px;
min-width: 245px;
margin-left: 3px;
& highlight {
all: unset;
background: $blue;
color: #000000;
border-radius: 10px;
}
}
}
.mic-slider {
.mic-label {
font-size: 16px;
font-family: Iosevka Nerd Font;
color: $bg;
margin-left: 10px;
}
& scale trough {
all: unset;
border-radius: 100px;
background-color: $black;
border: none;
min-height: 25px;
min-width: 245px;
margin-left: 3px;
& highlight {
all: unset;
background: $blue;
color: #000000;
border-radius: 10px;
}
}
}
}
}
.lastcol {
.musicbox {
background-color: $black;
border-radius: 12px;
.firstrow {
padding: 10px;
.picbox {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
min-width: 64px;
min-height: 64px;
border-radius: 10px;
}
.info {
font-family: Product Sans;
.music-title {
font-weight: bolder;
}
.music-artist {
color: $lightblack;
}
}
}
.lastrow {
padding: 10px 0px;
background-color: $dimblack;
border-bottom-right-radius: 12px;
border-bottom-left-radius: 12px;
.controls-container {
font-size: 16px;
font-family: Iosevka Nerd Font;
button {
transition: all ease .2s;
border-radius: 7px;
&:hover { background-color: $lightblack; }
&:active { background-color: transparent; }
&.previousbutton, &.nextbutton { padding: 1px 11px 1px 10px; }
&.pausebutton {
font-size: 20px;
padding: 1px 12px 1px 9px;
&.playing {
padding: 1px 14px 1px 7px;
}
}
}
}
}
}
.chart-container {
background-color: $black;
border-radius: 12px;
.header {
padding: 5px 10px;
font-family: Product Sans;
font-size: 14px;
color: $lightblack;
}
.body .container {
padding: 10px;
.chart-container {
background-color: $lightblack;
border-radius: 3em;
.chart {
color: $blue;
label {
padding: 1em;
font-size: 23px;
}
}
.chart-icon {
background-color: $black;
border-radius: 3em;
padding: 12px 5px;
margin: 0.5em;
font-family: Iosevka Nerd Font;
// nf alignment issues (again).
&.cpu { padding: 12px 9px 12px 4px; }
&.ram { padding: 12px 8px 12px 5px; }
&.temp { padding: 13px 9px 12px 3px; }
&.disk { padding: 13px 8px 12px 4px; }
}
}
}
}
}
}
.footer {
background-color: $bg;
padding: 10px 0px;
font-family: Product Sans;
.protipbox {
.icon {
font-family: Iosevka Nerd Font;
color: $yellow;
}
}
}
}