148 lines
3.5 KiB
SCSS
148 lines
3.5 KiB
SCSS
@use "sass:color";
|
|
@use "../scheme";
|
|
@use "../lib";
|
|
@use "../font";
|
|
|
|
$-accent: scheme.$peach;
|
|
$-accent2: scheme.$blue;
|
|
|
|
.sideright {
|
|
@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;
|
|
}
|
|
|
|
.time {
|
|
padding: lib.s(12) lib.s(8);
|
|
font-size: lib.s(48);
|
|
font-weight: bold;
|
|
|
|
& > * {
|
|
@include lib.spacing(3);
|
|
}
|
|
|
|
.ampm {
|
|
font-size: lib.s(24);
|
|
font-weight: normal;
|
|
margin-top: lib.s(18);
|
|
color: $-accent2;
|
|
}
|
|
}
|
|
|
|
.calendar {
|
|
padding: lib.s(5) lib.s(8) 0 lib.s(8);
|
|
min-width: lib.s(350);
|
|
color: scheme.$text;
|
|
|
|
calendar {
|
|
padding: lib.s(8); // Padding for each day
|
|
|
|
// Month and year
|
|
&.header {
|
|
color: $-accent2;
|
|
}
|
|
|
|
// Change month/year buttons
|
|
&.button {
|
|
&:hover {
|
|
color: scheme.$subtext0;
|
|
}
|
|
|
|
&:disabled {
|
|
color: color.mix(scheme.$text, scheme.$base, 65%);
|
|
}
|
|
}
|
|
|
|
// Weekday labels
|
|
&.highlight {
|
|
color: $-accent;
|
|
}
|
|
|
|
// Days in other month
|
|
&:indeterminate {
|
|
color: color.mix(scheme.$text, scheme.$base, 65%);
|
|
}
|
|
|
|
// Current day
|
|
&:selected {
|
|
$base: color.change(scheme.$base, $alpha: 1);
|
|
box-shadow: inset 0 lib.s(-12) 0 0 $-accent, inset 0 lib.s(-9) 0 0 $base,
|
|
inset lib.s(-10) lib.s(-3) 0 0 $base, inset lib.s(10) 0 0 lib.s(0.1) $base;
|
|
color: $-accent;
|
|
}
|
|
}
|
|
}
|
|
|
|
.weather {
|
|
padding: lib.s(5) lib.s(15);
|
|
|
|
@include lib.spacing(10, true);
|
|
|
|
.current {
|
|
@include lib.spacing(20);
|
|
|
|
.status-icon {
|
|
font-size: lib.s(64);
|
|
padding: lib.s(10) lib.s(20) 0 0;
|
|
}
|
|
|
|
.status {
|
|
color: $-accent2;
|
|
font-size: lib.s(16);
|
|
|
|
@include lib.spacing($vertical: true);
|
|
|
|
.temperature {
|
|
font-size: lib.s(28);
|
|
font-weight: bold;
|
|
color: scheme.$text;
|
|
|
|
@include lib.spacing;
|
|
|
|
.temp-icon {
|
|
font-size: lib.s(30);
|
|
|
|
$-temps: freezing, cold, normal, hot, burning;
|
|
$-colours: scheme.$sky, scheme.$blue, scheme.$green, scheme.$yellow, scheme.$red;
|
|
@for $i from 1 through length($-temps) {
|
|
&.#{nth($-temps, $i)} {
|
|
color: nth($-colours, $i);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.separator {
|
|
background-color: scheme.$surface0;
|
|
}
|
|
|
|
.forecast {
|
|
padding: lib.s(10) 0 lib.s(15) 0;
|
|
|
|
@include lib.spacing(10);
|
|
|
|
.hour {
|
|
@include lib.spacing($vertical: true);
|
|
|
|
.icon {
|
|
font-size: lib.s(32);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|