253 lines
5.2 KiB
SCSS
253 lines
5.2 KiB
SCSS
@import "../colors";
|
|
|
|
.dashboard-content-items {
|
|
min-width: 26.5em;
|
|
background: $crust;
|
|
border: 0.13em solid $surface0;
|
|
border-radius: 0.7em;
|
|
|
|
button {
|
|
border-radius: 0.4em;
|
|
}
|
|
|
|
.dashboard-card {
|
|
background: $base;
|
|
margin: 1.3em;
|
|
border-radius: 0.4em;
|
|
padding: 1.5em;
|
|
}
|
|
|
|
.profile-picture-container {
|
|
.profile-picture {
|
|
font-size: 7.5em;
|
|
}
|
|
.profile-name {
|
|
font-size: 1.5em;
|
|
color: $pink;
|
|
margin-top: 0.75em;
|
|
}
|
|
}
|
|
|
|
.power-menu-container {
|
|
margin-left: 0em;
|
|
|
|
.dashboard-button {
|
|
min-width: 3em;
|
|
min-height: 2.5em;
|
|
|
|
&:not(:last-child) {
|
|
margin-bottom: 0.75em;
|
|
}
|
|
|
|
image {
|
|
color: $base;
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
&.shutdown {
|
|
background: $red;
|
|
}
|
|
&.restart {
|
|
background: $peach;
|
|
}
|
|
&.lock {
|
|
background: $green;
|
|
}
|
|
&.sleep {
|
|
background: $sky;
|
|
}
|
|
|
|
&:hover {
|
|
background: $mauve;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.shortcuts-container {
|
|
.dashboard-card {
|
|
padding: 1.5em;
|
|
button {
|
|
min-height: 2.5em;
|
|
min-width: 2.5em;
|
|
}
|
|
}
|
|
|
|
.card-button-left-section {
|
|
margin-right: 1.5em;
|
|
}
|
|
|
|
.top-button {
|
|
margin-bottom: 1.5em;
|
|
}
|
|
|
|
.container {
|
|
margin-top: 0em;
|
|
|
|
&.most-used {
|
|
margin-right: 0em;
|
|
}
|
|
|
|
button {
|
|
background: $lavender;
|
|
color: $base;
|
|
min-height: 3em;
|
|
|
|
|
|
label {
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
&.record.active {
|
|
background: $red;
|
|
}
|
|
|
|
&:hover {
|
|
background: $pink;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.controls-container {
|
|
&.dashboard-card {
|
|
margin-top: 0em;
|
|
// padding: 1em;
|
|
}
|
|
|
|
button {
|
|
background: $red;
|
|
padding: 0em;
|
|
min-height: 3em;
|
|
|
|
label {
|
|
color: $base;
|
|
font-size: 1.6em;
|
|
}
|
|
|
|
&:not(:last-child) {
|
|
margin-right: 1em;
|
|
}
|
|
|
|
&.wifi {
|
|
background: $mauve;
|
|
}
|
|
&.bluetooth {
|
|
background: $sky;
|
|
}
|
|
&.notifications {
|
|
background: $yellow;
|
|
}
|
|
&.playback {
|
|
background: $maroon;
|
|
}
|
|
&.input {
|
|
background: $pink;
|
|
}
|
|
&:hover {
|
|
background: $surface2;
|
|
}
|
|
&.disabled {
|
|
background: $surface2;
|
|
&.wifi:hover {
|
|
background: $mauve;
|
|
}
|
|
&.bluetooth:hover {
|
|
background: $sky;
|
|
}
|
|
&.notifications:hover {
|
|
background: $yellow;
|
|
}
|
|
&.playback:hover {
|
|
background: $maroon;
|
|
}
|
|
&.input:hover {
|
|
background: $pink;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.stats-container {
|
|
margin-top: 0em;
|
|
|
|
.stat {
|
|
label {
|
|
margin-right: 1em;
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
&.cpu label{
|
|
color: $maroon;
|
|
}
|
|
&.ram label{
|
|
color: $yellow;
|
|
}
|
|
&.gpu label{
|
|
color: $green;
|
|
}
|
|
&.storage label{
|
|
color: $pink;
|
|
}
|
|
|
|
.stats-bar {
|
|
levelbar * {
|
|
transition: 200ms;
|
|
}
|
|
|
|
trough {
|
|
min-height: 1.2em;
|
|
}
|
|
|
|
block {
|
|
border-radius: 0.4em;
|
|
|
|
&.empty {
|
|
background: $surface1;
|
|
}
|
|
|
|
&.filled {
|
|
padding-left: 0.85em;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.cpu .stats-bar block.filled {
|
|
background: $maroon;
|
|
}
|
|
|
|
&.ram .stats-bar block.filled {
|
|
background: $yellow;
|
|
}
|
|
|
|
&.gpu .stats-bar block.filled {
|
|
background: $green;
|
|
}
|
|
|
|
&.storage .stats-bar block.filled {
|
|
background: $pink;
|
|
}
|
|
}
|
|
|
|
.stat-value {
|
|
margin-bottom: 0.75em;
|
|
font-size: 0.9em;
|
|
&.cpu {
|
|
color: $maroon;
|
|
}
|
|
|
|
&.ram {
|
|
color: $yellow;
|
|
}
|
|
|
|
&.gpu {
|
|
color: $green;
|
|
}
|
|
|
|
&.storage {
|
|
color: $pink;
|
|
}
|
|
}
|
|
}
|
|
}
|