131 lines
3 KiB
SCSS
131 lines
3 KiB
SCSS
@use "sass:color";
|
|
@use "../scheme";
|
|
@use "../lib";
|
|
@use "../font";
|
|
|
|
$-accent: scheme.$yellow;
|
|
|
|
.sideleft {
|
|
@include lib.rounded(8);
|
|
@include lib.border($-accent, 0.4, 2);
|
|
@include lib.shadow;
|
|
@include font.mono;
|
|
|
|
background-color: scheme.$crust;
|
|
color: $-accent;
|
|
padding: lib.s(12);
|
|
font-size: lib.s(14);
|
|
|
|
@include lib.spacing(10, true);
|
|
|
|
& > * {
|
|
@include lib.rounded(5);
|
|
|
|
background-color: scheme.$base;
|
|
padding: lib.s(16) lib.s(20);
|
|
}
|
|
|
|
.user {
|
|
@include lib.spacing(15);
|
|
|
|
.face {
|
|
@include lib.rounded(1000);
|
|
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
min-width: lib.s(48);
|
|
min-height: lib.s(48);
|
|
font-size: lib.s(24);
|
|
}
|
|
|
|
.details {
|
|
font-size: lib.s(14);
|
|
|
|
@include lib.spacing(3, true);
|
|
|
|
.name {
|
|
font-size: lib.s(18);
|
|
color: scheme.$text;
|
|
}
|
|
}
|
|
|
|
.power {
|
|
@include lib.element-decel;
|
|
@include font.icon;
|
|
|
|
font-size: lib.s(24);
|
|
color: scheme.$red;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: color.mix(scheme.$red, scheme.$base, 80%);
|
|
}
|
|
|
|
&:active {
|
|
color: color.mix(scheme.$red, scheme.$base, 60%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.locations {
|
|
@include lib.spacing(30);
|
|
|
|
& > * {
|
|
@include lib.spacing(8, true);
|
|
}
|
|
|
|
$-colours: scheme.$pink, scheme.$yellow, scheme.$maroon, scheme.$green, scheme.$mauve, scheme.$lavender;
|
|
@for $i from 1 through 6 {
|
|
.loc#{$i} {
|
|
@include lib.element-decel;
|
|
|
|
color: nth($-colours, $i);
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: color.mix(nth($-colours, $i), scheme.$base, 80%);
|
|
}
|
|
|
|
&:active {
|
|
color: color.mix(nth($-colours, $i), scheme.$base, 60%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.hw-resources {
|
|
@include lib.spacing(10, true);
|
|
|
|
.resource {
|
|
font-size: lib.s(13);
|
|
|
|
.inner {
|
|
font-size: lib.s(16);
|
|
|
|
@include lib.spacing(20);
|
|
}
|
|
|
|
.slider {
|
|
@include lib.rounded(5);
|
|
@include lib.fluent-decel(1000ms);
|
|
|
|
min-height: lib.s(10);
|
|
background-color: scheme.$surface0;
|
|
color: scheme.$red;
|
|
}
|
|
|
|
$-names: gpu, cpu, memory, storage;
|
|
$-colours: scheme.$green, scheme.$maroon, scheme.$yellow, scheme.$pink;
|
|
@for $i from 1 through length($-names) {
|
|
&.#{nth($-names, $i)} {
|
|
color: nth($-colours, $i);
|
|
|
|
.slider {
|
|
color: nth($-colours, $i);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|