1 files changed, 139 insertions, 0 deletions
diff --git a/scss/mediadisplay.scss b/scss/mediadisplay.scss
new file mode 100644
index 0000000..701a0ce
--- /dev/null
+++ b/scss/mediadisplay.scss
@@ -0,0 +1,139 @@
+@use "sass:color";
+@use "scheme";
+@use "lib";
+@use "font";
+
+.mediadisplay {
+    @include font.mono;
+
+    background-color: scheme.$mantle;
+    color: scheme.$text;
+    padding: lib.s(20);
+    min-height: lib.s(200);
+
+    .visualiser {
+        background-color: scheme.$primary; // Visualiser colour
+        margin-right: lib.s(5); // Gaps between bars
+        min-width: lib.s(10); // Bar width
+        color: scheme.$error;
+        font-size: lib.s(24);
+        font-weight: bold;
+    }
+
+    .cover-art {
+        @include lib.rounded(10);
+        @include lib.element-decel;
+
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        min-width: lib.s(196);
+        min-height: lib.s(196);
+        font-size: lib.s(96);
+        font-weight: bold;
+        background-color: scheme.$surface0;
+        color: scheme.$subtext0;
+    }
+
+    .details {
+        @include font.title;
+
+        font-size: lib.s(14);
+        margin-top: lib.s(5);
+        margin-left: lib.s(15);
+
+        .title {
+            font-size: lib.s(28);
+            font-weight: 500;
+            color: scheme.$text;
+        }
+
+        .artist {
+            font-size: lib.s(18);
+            color: scheme.$secondary;
+        }
+
+        .controls {
+            @include lib.rounded(1000);
+            @include font.icon;
+
+            margin-top: lib.s(10);
+            background-color: color.change(scheme.$overlay0, $alpha: 0.4);
+            font-size: lib.s(28);
+            padding: lib.s(3) lib.s(8);
+
+            @include lib.spacing;
+
+            & > button {
+                @include lib.element-decel;
+
+                &:hover,
+                &:focus {
+                    color: color.mix(scheme.$subtext1, scheme.$subtext0, 50%);
+                }
+
+                &:active {
+                    color: scheme.$subtext0;
+                }
+
+                &:disabled {
+                    color: scheme.$subtext0;
+                }
+            }
+        }
+    }
+
+    .center-module {
+        @include lib.rounded(20);
+        margin: 0 lib.s(40);
+        background-color: color.change(scheme.$surface1, $alpha: 0.4);
+    }
+
+    .selector {
+        @include lib.rounded(15);
+        @include lib.element-decel;
+
+        background-color: color.change(scheme.$overlay0, $alpha: 0.4);
+        padding: lib.s(8) lib.s(15);
+
+        .identity {
+            @include lib.spacing(8);
+        }
+
+        button {
+            @include lib.element-decel;
+
+            &:hover,
+            &:focus {
+                color: color.mix(scheme.$subtext1, scheme.$subtext0, 50%);
+            }
+
+            &:active {
+                color: scheme.$subtext0;
+            }
+        }
+
+        .list > button {
+            margin-top: lib.s(5);
+            color: scheme.$subtext1;
+
+            &:hover,
+            &:focus {
+                color: color.mix(scheme.$subtext1, scheme.$subtext0, 50%);
+            }
+
+            &:active {
+                color: scheme.$subtext0;
+            }
+        }
+    }
+
+    .time {
+        @include lib.rounded(1000);
+
+        font-size: lib.s(16);
+        background-color: color.change(scheme.$overlay0, $alpha: 0.4);
+        padding: lib.s(5) lib.s(10);
+        margin-bottom: lib.s(10);
+    }
+}