sidebar: player switching

1 files changed, 101 insertions, 63 deletions

diff --git a/scss/sidebar.scss b/scss/sidebar.scss
index 83d1953..9f72ca8 100644
--- a/scss/sidebar.scss
+++ b/scss/sidebar.scss
@@ -171,7 +171,7 @@
         }
     }
 
-    .dashboard .media {
+    .media {
         @include lib.spacing(15);
 
         .cover-art {
@@ -316,91 +316,129 @@
         }
     }
 
-    .audio .media {
-        @include lib.spacing(40, true);
+    .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);
+            .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);
-        }
+                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);
+            .progress {
+                margin: 0 lib.s(40);
 
-            .slider {
-                @include lib.rounded(8);
-                @include lib.fluent-decel(1000ms);
+                .slider {
+                    @include lib.rounded(8);
+                    @include lib.fluent-decel(1000ms);
 
-                min-height: lib.s(15);
-                background-color: scheme.$overlay0;
-                color: scheme.$subtext1;
-            }
+                    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;
+                .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);
+            .details {
+                font-size: lib.s(14);
+                margin-top: lib.s(20);
 
-            @include lib.spacing(3, true);
+                @include lib.spacing(3, true);
 
-            .title {
-                font-size: lib.s(18);
-                color: scheme.$text;
-                font-weight: bold;
-            }
+                .title {
+                    font-size: lib.s(18);
+                    color: scheme.$text;
+                    font-weight: bold;
+                }
 
-            .artist {
-                color: scheme.$green;
+                .artist {
+                    color: scheme.$green;
+                }
+
+                .album {
+                    color: scheme.$subtext0;
+                }
             }
 
-            .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);
+                }
             }
         }
 
-        .controls {
-            margin-top: lib.s(-20);
-            margin-bottom: lib.s(5);
+        .indicators {
+            @include lib.spacing(10);
 
-            button {
-                @include media-button;
+            & > button {
+                @include lib.rounded(1000);
+                @include lib.element-decel;
 
-                // Cause some nerd font icons don't have the correct width
-                &.needs-adjustment {
-                    padding-right: lib.s(5);
+                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);
                 }
-            }
 
-            .playback {
-                font-size: lib.s(32);
+                &:active {
+                    background-color: color.change(scheme.$overlay2, $alpha: 0.5);
+                }
 
-                @include lib.spacing(40);
-            }
+                &.active {
+                    background-color: color.change(scheme.$primary, $alpha: 0.9);
 
-            .options {
-                margin: 0 lib.s(40);
-                margin-top: lib.s(-10);
-                font-size: lib.s(20);
+                    &:hover,
+                    &:focus {
+                        background-color: color.change(scheme.$primary, $alpha: 0.7);
+                    }
 
-                @include lib.spacing(20);
+                    &:active {
+                        background-color: color.change(scheme.$primary, $alpha: 0.6);
+                    }
+                }
             }
         }
     }