1 files changed, 113 insertions, 0 deletions
diff --git a/scss/popdowns/media.scss b/scss/popdowns/media.scss
new file mode 100644
index 0000000..998c269
--- /dev/null
+++ b/scss/popdowns/media.scss
@@ -0,0 +1,113 @@
+@use "sass:color";
+@use "../scheme";
+@use "../lib";
+@use "../font";
+
+$-accent: scheme.$lavender;
+$-accent2: scheme.$pink;
+
+.media {
+    @include lib.rounded(8);
+    @include lib.border($-accent, 0.4, 2);
+    @include lib.shadow;
+    @include font.mono;
+
+    background-color: scheme.$base;
+    color: $-accent;
+    padding: lib.s(12);
+    font-size: lib.s(14);
+    min-width: lib.s(500);
+    min-height: lib.s(220);
+
+    .icon {
+        font-size: lib.s(32);
+    }
+
+    .overlay {
+        @include lib.rounded(5);
+
+        background-color: color.change(scheme.$base, $alpha: 0.8);
+    }
+
+    .background {
+        @include lib.rounded(5);
+
+        transition: background 300ms ease-in-out;
+        background-color: scheme.$surface0;
+        background-position: center;
+        background-size: cover;
+        background-repeat: no-repeat;
+    }
+
+    .player {
+        padding: lib.s(35) lib.s(12);
+        font-weight: bold;
+
+        @include lib.spacing(10, true);
+
+        .title {
+            font-size: lib.s(18);
+        }
+
+        .artist {
+            color: scheme.$green;
+        }
+
+        .album {
+            color: $-accent2;
+        }
+
+        .controls {
+            margin-top: lib.s(3);
+
+            @include lib.spacing(10);
+
+            button {
+                @include lib.rounded(4);
+                @include lib.element-decel;
+                @include lib.border(scheme.$base, 0.7);
+
+                padding: lib.s(5) lib.s(12);
+                font-size: lib.s(18);
+                background-color: $-accent;
+                color: scheme.$base;
+
+                &:disabled {
+                    background-color: scheme.$overlay2;
+                }
+
+                &:hover,
+                &:focus {
+                    background-color: color.change($-accent, $alpha: 0.8);
+                }
+
+                &:active {
+                    background-color: color.change($-accent, $alpha: 0.6);
+                }
+            }
+        }
+
+        // Progress bar
+        trough {
+            @include lib.rounded(3);
+
+            margin-top: lib.s(10);
+            background-color: scheme.$surface0;
+
+            highlight {
+                @include lib.rounded(3);
+
+                background-color: $-accent2;
+                padding: lib.s(3) 0;
+            }
+
+            slider {
+                @include lib.rounded(3);
+
+                background-color: scheme.$overlay0;
+                min-width: lib.s(15);
+                min-height: lib.s(15);
+            }
+        }
+    }
+}