fully-functioning music status!

- accessible via /music - only detects strawberry for now
2026-06-13 03:09:21 +01:00 · 2026-06-13 03:09:21 +01:00 · 8a1fabf91a
commit 8a1fabf91a
parent f838edeadb
53 changed files with 923 additions and 51 deletions
--- a/music/public/music.css
+++ b/music/public/music.css
@ -0,0 +1,120 @@
+:root {
+    --sp-1: 1px;
+    --sp-2: 2px;
+    --sp-3: 4px;
+    --sp-4: 8px;
+    --sp-5: 16px;
+
+    --col-fg: #ffffff;
+
+    --smooth: cubic-bezier(.1, 1, .5, 1);
+}
+
+body {
+    width: 100%;
+    height: 100vh;
+    margin: 0;
+    font-family: Inter, sans-serif;
+    font-feature-settings: 'liga' 1, 'calt' 1;
+
+    color: var(--col-fg);
+    background-color: transparent;
+
+    text-shadow:
+    var(--sp-1) var(--sp-1) var(--sp-4) #000,
+    var(--sp-1) var(--sp-2) #0008;
+}
+@supports (font-variation-settings: normal) {
+    body { font-family: InterVariable, sans-serif; }
+}
+
+.flex {
+    display: flex;
+}
+
+.flex-col {
+    flex-direction: column;
+}
+
+.flex-row {
+    flex-direction: row;
+}
+
+.justify-center {
+    justify-content: center;
+}
+
+.gap-1 { gap: var(--sp-1); }
+.gap-2 { gap: var(--sp-2); }
+.gap-3 { gap: var(--sp-3); }
+.gap-4 { gap: var(--sp-4); }
+.gap-5 { gap: var(--sp-5); }
+
+.text-ellipses {
+    text-overflow: ellipsis;
+    overflow-x: clip;
+    text-wrap: nowrap;
+}
+
+p {
+    margin: 0;
+}
+
+#music {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: min-content;
+    padding: 2em;
+}
+
+.nowplaying {
+    margin-bottom: var(--sp-3);
+    text-transform: uppercase;
+    opacity: .5;
+    font-weight: bold;
+}
+
+.artwork {
+    width: 80px;
+    height: 80px;
+    border-radius: var(--sp-3);
+    background: #0008;
+    box-shadow:
+    0 0 var(--sp-5) #000c,
+    var(--sp-1) var(--sp-1) var(--sp-2) #0004;
+    transition: transform .5s var(--smooth), opacity .5s, filter .5s;
+}
+
+.title-artist {
+    max-width: calc(100vw - 2em - 80px);
+}
+
+.title {
+    padding: 0 var(--sp-5);
+    font-size: 2em;
+    font-weight: 800;
+    transition: transform .5s var(--smooth), opacity .1s;
+}
+
+.artist {
+    padding: 0 var(--sp-5);
+    margin-top: calc(0px - var(--sp-3));
+    font-size: 1.5em;
+    font-weight: 600;
+    transition: transform .5s var(--smooth), opacity .1s;
+    transition-delay: .05s;
+}
+
+#music.paused, #music.switching {
+    .artwork {
+        transform: scale(0.8);
+        opacity: .5;
+        filter: grayscale(1);
+    }
+
+    .title, .artist {
+        transform: translateX(-16px);
+        opacity: 0;
+    }
+}