diff options
Diffstat (limited to 'scss/sidebar.scss')
| -rw-r--r-- | scss/sidebar.scss | 1118 |
1 files changed, 0 insertions, 1118 deletions
diff --git a/scss/sidebar.scss b/scss/sidebar.scss deleted file mode 100644 index d82ad7f..0000000 --- a/scss/sidebar.scss +++ /dev/null @@ -1,1118 +0,0 @@ -@use "sass:color"; -@use "sass:list"; -@use "scheme"; -@use "lib"; -@use "font"; - -@mixin notification($accent) { - .separator { - background-color: $accent; - } - - .image { - @include lib.border($accent, 0.05); - } -} - -@mixin button { - @include lib.element-decel; - - background-color: color.change(scheme.$surface1, $alpha: 0.5); - - &:hover, - &:focus { - background-color: color.change(scheme.$surface2, $alpha: 0.5); - } - - &:active { - background-color: color.change(scheme.$overlay0, $alpha: 0.5); - } - - &:disabled { - color: scheme.$subtext0; - } -} - -@mixin button-active { - @include lib.element-decel; - - background-color: color.change(color.mix(scheme.$surface1, scheme.$primary, 50%), $alpha: 0.5); - - &:hover, - &:focus { - background-color: color.change(color.mix(scheme.$surface1, scheme.$primary, 30%), $alpha: 0.5); - } - - &:active { - background-color: color.change(color.mix(scheme.$surface1, scheme.$primary, 20%), $alpha: 0.5); - } -} - -@mixin media-button { - @include lib.element-decel; - - &:disabled { - color: color.change(scheme.$overlay2, $alpha: 1); - } - - &:hover, - &:focus { - color: color.mix(scheme.$subtext1, scheme.$subtext0, 50%); - } - - &:active { - color: scheme.$subtext0; - } -} - -.sidebar { - @include font.mono; - - background-color: scheme.$base; - color: scheme.$text; - padding: lib.s(18) lib.s(20); - min-width: lib.s(380); - - .pane { - @include lib.spacing(20, true); - } - - .separator { - background-color: if(scheme.$light, scheme.$surface1, scheme.$overlay0); - margin: 0 lib.s(10); - } - - .header-bar { - margin-bottom: lib.s(10); - - @include lib.spacing; - - & > :not(button) { - font-weight: bold; - font-size: lib.s(16); - } - - & > button { - @include lib.element-decel; - @include lib.rounded(10); - - padding: lib.s(3) lib.s(8); - - &:disabled { - color: color.change(scheme.$overlay0, $alpha: 1); - } - - &:hover, - &:focus { - color: scheme.$subtext0; - } - - &:active { - color: color.change(scheme.$overlay2, $alpha: 1); - } - - &.enabled { - $-base: color.change(scheme.$base, $alpha: 1); - - background-color: scheme.$primary; - color: $-base; - - &:hover, - &:focus { - background-color: color.mix(scheme.$primary, $-base, 80%); - } - - &:active { - background-color: color.mix(scheme.$primary, $-base, 70%); - } - } - } - } - - .empty { - color: scheme.$subtext0; - font-size: lib.s(18); - - .icon { - font-size: lib.s(48); - } - } - - .user { - @include lib.spacing(15); - - .face { - @include lib.rounded(10); - - background-position: center; - background-repeat: no-repeat; - background-size: cover; - min-width: lib.s(96); - min-height: lib.s(96); - font-size: lib.s(48); - font-weight: bold; - background-color: scheme.$base; - } - - .details { - font-size: lib.s(14); - - @include lib.spacing(8, true); - - .name { - font-size: lib.s(18); - color: scheme.$text; - margin-bottom: lib.s(10); - } - - $-colours: scheme.$yellow, scheme.$blue; - @for $i from 1 through list.length($-colours) { - :nth-child(#{$i + 1}) { - color: list.nth($-colours, $i); - } - } - } - } - - .media { - @include lib.spacing(15); - - .cover-art { - @include lib.rounded(10); - @include lib.element-decel; - - background-position: center; - background-repeat: no-repeat; - background-size: cover; - min-width: lib.s(128); - min-height: lib.s(128); - font-size: lib.s(64); - font-weight: bold; - background-color: scheme.$base; - color: scheme.$subtext0; - } - - .details { - font-size: lib.s(14); - - .title { - font-size: lib.s(16); - color: scheme.$text; - } - - .artist { - color: scheme.$green; - } - - .controls { - margin-top: lib.s(20); - margin-bottom: lib.s(5); - font-size: lib.s(24); - - & > button { - @include media-button; - } - } - - .slider { - @include lib.rounded(5); - @include lib.fluent-decel(1000ms); - - min-height: lib.s(8); - background-color: scheme.$overlay0; - color: scheme.$subtext1; - } - - .time { - margin-top: lib.s(5); - font-size: lib.s(13); - color: scheme.$subtext0; - } - } - } - - .notification { - .wrapper { - padding-bottom: lib.s(10); - } - - .inner { - @include lib.rounded(20); - - background-color: color.change(scheme.$surface1, $alpha: 0.4); - - &.low { - @include notification(if(scheme.$light, scheme.$surface1, scheme.$overlay0)); - - @if not scheme.$borders { - background-color: color.change(scheme.$surface0, $alpha: 0.4); - } - } - - &.normal { - @include lib.border(scheme.$primary, if(scheme.$light, 0.5, 0.3)); - @include notification(scheme.$primary); - } - - &.critical { - @include lib.border(scheme.$error, 0.8); - @include notification(scheme.$error); - - @if not scheme.$borders { - background-color: color.change(color.mix(scheme.$surface1, scheme.$error, 80%), $alpha: 0.4); - } - } - } - - .actions { - @include lib.spacing; - - & > button { - @include button; - @include lib.rounded(10); - - padding: lib.s(5) lib.s(10); - } - } - } - - .upcoming { - .list { - min-height: lib.s(300); - } - - .day { - @include lib.spacing($vertical: true); - - &:not(:first-child) { - margin-top: lib.s(20); - } - - .date { - margin-left: lib.s(10); - } - - .sublabel { - font-size: lib.s(14); - color: scheme.$subtext0; - } - - .events { - @include lib.rounded(20); - - background-color: color.change(scheme.$surface1, $alpha: 0.4); - padding: lib.s(10) lib.s(15); - - @include lib.spacing(10, true); - } - - .event { - @include lib.spacing(8); - } - - .calendar-indicator { - @include lib.rounded(5); - - min-width: lib.s(1); - - $-colours: scheme.$red, scheme.$sapphire, scheme.$flamingo, scheme.$maroon, scheme.$pink, scheme.$sky, - scheme.$peach, scheme.$yellow, scheme.$green, scheme.$rosewater, scheme.$mauve, scheme.$teal, - scheme.$blue; - @for $i from 1 through list.length($-colours) { - &.calendar-#{$i} { - background-color: list.nth($-colours, $i); - } - } - } - } - } - - .players { - .player { - @include lib.spacing(40, true); - - .cover-art { - @include lib.rounded(10); - @include lib.element-decel; - @include lib.shadow(scheme.$mantle, $blur: 5, $spread: 2); - - background-position: center; - background-repeat: no-repeat; - background-size: cover; - min-width: lib.s(256); - min-height: lib.s(256); - font-size: lib.s(96); - font-weight: bold; - background-color: scheme.$base; - color: scheme.$subtext0; - margin-top: lib.s(20); - } - - .progress { - margin: 0 lib.s(40); - - .slider { - @include lib.rounded(8); - @include lib.fluent-decel(1000ms); - - min-height: lib.s(15); - background-color: scheme.$overlay0; - color: scheme.$subtext1; - } - - .time { - margin-top: lib.s(5); - font-size: lib.s(13); - color: scheme.$subtext1; - } - } - - .details { - font-size: lib.s(14); - margin-top: lib.s(20); - - @include lib.spacing(3, true); - - .title { - font-size: lib.s(18); - color: scheme.$text; - font-weight: bold; - } - - .artist { - color: scheme.$green; - } - - .album { - color: scheme.$subtext0; - } - } - - .controls { - margin-top: lib.s(-20); - margin-bottom: lib.s(5); - - button { - @include media-button; - - // Cause some nerd font icons don't have the correct width - &.needs-adjustment { - padding-right: lib.s(5); - } - } - - .playback { - font-size: lib.s(32); - - @include lib.spacing(40); - } - - .options { - margin: 0 lib.s(40); - margin-top: lib.s(-10); - font-size: lib.s(20); - - @include lib.spacing(20); - } - } - } - - .indicators { - @include lib.spacing(10); - - & > button { - @include lib.rounded(1000); - @include lib.element-decel; - - min-width: lib.s(10); - min-height: lib.s(10); - - background-color: color.change(scheme.$overlay0, $alpha: 0.5); - - &:hover, - &:focus { - background-color: color.change(scheme.$overlay1, $alpha: 0.5); - } - - &:active { - background-color: color.change(scheme.$overlay2, $alpha: 0.5); - } - - &.active { - background-color: color.change(scheme.$primary, $alpha: 0.9); - - &:hover, - &:focus { - background-color: color.change(scheme.$primary, $alpha: 0.7); - } - - &:active { - background-color: color.change(scheme.$primary, $alpha: 0.6); - } - } - } - } - } - - .no-wp-prompt { - font-size: lib.s(16); - color: scheme.$error; - margin-top: lib.s(8); - } - - .streams { - .list { - @include lib.spacing(10, true); - } - - .stream { - @include lib.rounded(20); - @include lib.element-decel; - - background-color: color.change(scheme.$surface1, $alpha: 0.4); - padding: lib.s(10) lib.s(15); - - @include lib.spacing(5); - - &.playing { - background-color: color.change(color.mix(scheme.$surface1, scheme.$primary, 50%), $alpha: 0.4); - } - - .icon { - font-size: lib.s(28); - margin-right: lib.s(12); - } - - .sublabel { - font-size: lib.s(14); - color: scheme.$subtext0; - } - - trough { - @include lib.rounded(10); - - min-width: lib.s(100); - min-height: lib.s(10); - background-color: color.change(scheme.$error, $alpha: 0.3); - - fill { - @include lib.rounded(10); - - background-color: color.change(scheme.$overlay0, $alpha: 1); - } - - highlight { - @include lib.rounded(10); - - background-color: scheme.$subtext1; - } - } - - & > button { - @include media-button; - - font-size: lib.s(18); - min-width: lib.s(20); - min-height: lib.s(20); - } - } - } - - .device-selector { - @include lib.spacing(10, true); - - .selector { - @include lib.rounded(20); - - background-color: color.change(scheme.$surface1, $alpha: 0.4); - padding: lib.s(10) lib.s(15); - - .icon { - font-size: lib.s(20); - } - - .separator { - margin-bottom: lib.s(8); - margin-top: lib.s(5); - background-color: if(scheme.$light, scheme.$overlay1, scheme.$overlay0); - } - - .list { - color: scheme.$subtext0; - - @include lib.spacing(3, true); - } - - .device { - @include lib.spacing; - } - - .selected { - color: scheme.$text; - - @include lib.spacing(10); - - .icon { - font-size: lib.s(32); - } - - .sublabel { - color: scheme.$subtext0; - } - } - - button { - @include lib.element-decel; - - &:hover, - &:focus { - color: scheme.$subtext1; - } - - &:active { - color: scheme.$text; - } - } - } - - .stream { - @include lib.rounded(20); - @include lib.element-decel; - - background-color: color.change(scheme.$surface1, $alpha: 0.4); - padding: lib.s(10) lib.s(15); - - @include lib.spacing(5); - - &.playing { - background-color: color.change(color.mix(scheme.$surface1, scheme.$primary, 50%), $alpha: 0.4); - } - - .icon { - font-size: lib.s(28); - margin-right: lib.s(12); - } - - .sublabel { - font-size: lib.s(14); - color: scheme.$subtext0; - } - - trough { - @include lib.rounded(10); - - min-width: lib.s(100); - min-height: lib.s(10); - background-color: color.change(scheme.$error, $alpha: 0.3); - - fill { - @include lib.rounded(10); - - background-color: color.change(scheme.$overlay0, $alpha: 1); - } - - highlight { - @include lib.rounded(10); - - background-color: scheme.$subtext1; - } - } - - & > button { - @include media-button; - - font-size: lib.s(18); - min-width: lib.s(20); - min-height: lib.s(20); - } - } - } - - .networks { - .list { - @include lib.spacing(10, true); - } - - .network { - @include lib.rounded(20); - @include lib.element-decel; - - background-color: color.change(scheme.$surface1, $alpha: 0.4); - padding: lib.s(10) lib.s(15); - - @include lib.spacing(5); - - &.connected { - background-color: color.change(color.mix(scheme.$surface1, scheme.$primary, 50%), $alpha: 0.4); - - & > button { - @include button-active; - } - } - - .icon { - font-size: lib.s(28); - margin-right: lib.s(12); - } - - .sublabel { - font-size: lib.s(14); - color: scheme.$subtext0; - } - - & > button { - @include button; - @include lib.rounded(1000); - @include font.icon; - - font-size: lib.s(18); - min-width: lib.s(30); - min-height: lib.s(30); - } - } - } - - .bluetooth { - .list { - @include lib.spacing(10, true); - } - - .device { - @include lib.rounded(20); - @include lib.element-decel; - - background-color: color.change(scheme.$surface1, $alpha: 0.4); - padding: lib.s(10) lib.s(15); - - @include lib.spacing(5); - - &.connected { - background-color: color.change(color.mix(scheme.$surface1, scheme.$primary, 50%), $alpha: 0.4); - - & > button { - @include button-active; - } - } - - .icon { - font-size: lib.s(28); - margin-right: lib.s(12); - } - - .sublabel { - font-size: lib.s(14); - color: scheme.$subtext0; - } - - & > button { - @include button; - @include lib.rounded(1000); - @include font.icon; - - font-size: lib.s(18); - min-width: lib.s(30); - min-height: lib.s(30); - } - } - } - - .updates { - .list { - @include lib.spacing(10, true); - } - - .repo { - @include lib.rounded(20); - @include lib.element-decel; - - background-color: color.change(scheme.$surface1, $alpha: 0.4); - padding: lib.s(10) lib.s(15); - - @include lib.spacing(5); - - .icon { - font-size: lib.s(28); - - &:not(:last-child) { - margin-right: lib.s(12); - } - } - - .sublabel { - font-size: lib.s(14); - color: scheme.$subtext0; - } - - .body { - margin-top: lib.s(10); - font-size: lib.s(14); - } - } - } - - .news { - min-height: lib.s(200); - - .empty { - margin-top: lib.s(40); - } - - .list { - @include lib.spacing(10, true); - } - - .article { - @include lib.rounded(20); - @include lib.element-decel; - - background-color: color.change(scheme.$surface1, $alpha: 0.4); - padding: lib.s(10) lib.s(15); - - @include lib.spacing(5); - - .icon { - font-size: lib.s(28); - - &:not(:last-child) { - margin-right: lib.s(12); - } - } - - .sublabel { - font-size: lib.s(14); - color: scheme.$subtext0; - } - - .body { - margin-top: lib.s(10); - font-size: lib.s(14); - } - } - } - - .headlines { - min-height: lib.s(200); - - .empty { - margin-top: lib.s(40); - } - - .list { - @include lib.spacing(10, true); - } - - .category { - @include lib.rounded(20); - @include lib.element-decel; - - background-color: color.change(scheme.$surface0, $alpha: 0.5); - padding: lib.s(10) lib.s(15); - - @include lib.spacing(5); - - .icon { - font-size: lib.s(28); - - &:not(:last-child) { - margin-right: lib.s(12); - } - } - - .sublabel { - font-size: lib.s(14); - color: scheme.$subtext0; - } - - .body { - margin-top: lib.s(10); - font-size: lib.s(14); - - @include lib.spacing(8, true); - } - } - - .article { - @include lib.rounded(20); - @include lib.element-decel; - - background-color: color.change(scheme.$surface1, $alpha: 0.3); - padding: lib.s(10) lib.s(15); - - .article-body { - @include font.reading; - @include lib.element-decel; - - font-size: lib.s(15); - margin-top: lib.s(10); - color: scheme.$subtext1; - - & > :last-child { - margin-top: lib.s(8); - } - - .title { - @include font.title; - - font-size: lib.s(18); - font-weight: 500; - margin-bottom: lib.s(3); - } - } - - button:hover .article-body, - button:focus .article-body { - color: color.mix(scheme.$subtext0, scheme.$blue, 60%); - } - } - } - - .time-date { - padding: lib.s(12) lib.s(8); - font-size: lib.s(48); - font-weight: bold; - color: scheme.$primary; - - & > * { - @include lib.spacing(3); - } - - .ampm { - font-size: lib.s(24); - font-weight: normal; - margin-top: lib.s(18); - color: scheme.$secondary; - } - - .date { - font-size: lib.s(20); - color: scheme.$tertiary; - } - } - - .calendar { - @include lib.rounded(20); - - background-color: color.change(scheme.$surface1, $alpha: 0.4); - padding: lib.s(15); - - .calendar-view { - @include lib.spacing(10, true); - - .header { - @include lib.spacing(10); - - & > button { - @include lib.rounded(1000); - @include lib.element-decel; - - background-color: color.change(scheme.$surface2, $alpha: 0.4); - min-width: lib.s(28); - min-height: lib.s(28); - font-size: lib.s(18); - - &:first-child { - padding: 0 lib.s(10); - } - - &:hover, - &:focus { - background-color: color.change(scheme.$surface2, $alpha: 0.6); - } - - &:active { - background-color: color.change(scheme.$surface2, $alpha: 0.8); - } - } - } - - .weekdays { - @include lib.spacing(10); - - & > label { - min-width: lib.s(40); - font-weight: bold; - color: scheme.$subtext1; - } - } - - .month { - @include lib.spacing(10, true); - } - - .week { - @include lib.spacing(10); - } - - .day { - @include lib.rounded(1000); - @include lib.element-decel; - - min-width: lib.s(40); - min-height: lib.s(40); - - &.dim { - color: scheme.$subtext0; - } - - &.today:not(.dim) { - background-color: scheme.$primary; - color: color.change(scheme.$base, $alpha: 1); - } - - &:hover, - &:focus { - color: scheme.$subtext0; - } - - &:active { - color: color.change(scheme.$overlay2, $alpha: 1); - } - - &.dim { - color: scheme.$subtext0; - - &:hover, - &:focus { - color: color.change(scheme.$overlay2, $alpha: 1); - } - - &:active { - color: color.change(scheme.$overlay1, $alpha: 1); - } - } - - &.today:not(.dim) { - background-color: scheme.$primary; - color: color.change(scheme.$base, $alpha: 1); - - &:hover, - &:focus { - background-color: color.mix(scheme.$primary, scheme.$base, 80%); - } - - &:active { - background-color: color.mix(scheme.$primary, scheme.$base, 70%); - } - } - - label { - margin-top: lib.s(8); - } - - .indicator { - @include lib.rounded(10); - @include lib.element-decel; - - min-height: lib.s(3); - margin: 0 lib.s(8); - } - - $-max: 5; - @for $i from 1 through $-max { - &.events-#{$i} { - $-colour: color.mix(scheme.$red, scheme.$green, calc(100% / $-max) * $i); - - .indicator { - background-color: $-colour; - } - - &:hover .indicator, - &:focus .indicator { - background-color: color.mix($-colour, scheme.$base, 80%); - } - - &:active .indicator { - background-color: color.mix($-colour, scheme.$base, 70%); - } - - &.dim .indicator { - background-color: color.mix($-colour, scheme.$base, 60%); - } - - &.today:not(.dim) { - $-colour: color.mix($-colour, color.complement(scheme.$primary), 50%); - - .indicator { - background-color: $-colour; - } - - &:hover .indicator, - &:focus .indicator { - background-color: color.mix($-colour, scheme.$base, 80%); - } - - &:active .indicator { - background-color: color.mix($-colour, scheme.$base, 70%); - } - } - } - } - } - } - - .events { - @include lib.spacing(10, true); - - .header { - font-weight: bold; - - @include lib.spacing(10); - - & > button { - @include lib.rounded(1000); - @include lib.element-decel; - - min-width: lib.s(24); - min-height: lib.s(24); - - &:hover, - &:focus { - color: scheme.$subtext0; - } - - &:active { - color: color.change(scheme.$overlay2, $alpha: 1); - } - } - } - - scrollable { - min-height: lib.s(315); - } - - .date { - margin-left: lib.s(10); - } - - .sublabel { - font-size: lib.s(14); - color: scheme.$subtext0; - } - - .list { - padding: lib.s(5); - - @include lib.spacing(10, true); - } - - .event { - @include lib.spacing(8); - } - - .calendar-indicator { - @include lib.rounded(5); - - min-width: lib.s(1); - - $-colours: scheme.$red, scheme.$sapphire, scheme.$flamingo, scheme.$maroon, scheme.$pink, scheme.$sky, - scheme.$peach, scheme.$yellow, scheme.$green, scheme.$rosewater, scheme.$mauve, scheme.$teal, - scheme.$blue; - @for $i from 1 through list.length($-colours) { - &.calendar-#{$i} { - background-color: list.nth($-colours, $i); - } - } - } - } - } -} |