Squash merge audio-player-component into main

2026-02-13 20:39:23 -06:00
parent 9b7cfd5bd1
commit d78c0584e2
122 changed files with 11750 additions and 1175 deletions
@@ -1,4 +1,116 @@
+html {
+    height: 100%;
+}
+
 body {
-  background-color: black;
-  color: white;
+    background-color: black;
+    color: white;
+    margin: 0;
+    height: 100vh;
+    display: grid;
+    grid-template: "top-bar top-bar" 4em "sidebar main-panel" 1fr "bottom-bar bottom-bar" 4em / auto 1fr;
+    overflow: hidden;
+}
+
+p {
+    margin: 0;
+    /* I want to set paragraph margins myself */
+}
+
+.top-bar {
+    grid-area: top-bar;
+    height: 100%;
+    padding-left: 2em;
+    padding-right: 2em;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #343a40;
+}
+
+ul {
+    list-style-type: none;
+}
+
+.title {
+    font-size: 1.5em;
+    margin-bottom: 0;
+}
+
+  .subtitle {
+    font-size: 0.8em;
+    margin-top: 0;
+  }
+
+body div.sidebar {
+    grid-area: sidebar;
+    background-color: #212529;
+    overflow: hidden;
+}
+
+.bottom-bar {
+    grid-area: bottom-bar;
+    padding: 0.25em;
+    background-color: #343a40;
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    align-items: center;
+
+    #now-playing-info {
+        justify-self: start;
+        display: flex;
+        min-width: 0;
+        overflow: hidden;
+
+        #album-art {
+            width: 3.5em;
+            min-width: 3.5em;
+            height: 3.5em;
+            min-height: 3.5em;
+            border-radius: 0.25em;
+            background-color: #ffd43b;
+        }
+
+        #track-info {
+            display: flex;
+            margin-left: 1em;
+            flex-direction: column;
+            font-size: 0.75em;
+            justify-content: center;
+            text-wrap-mode: nowrap;
+            overflow: hidden;
+
+            p {
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
+    }
+
+    audio-player {
+        justify-self: center;
+        margin: 0.5em 1em;
+    }
+
+    #queue-button {
+        justify-self: end;
+        background: none;
+        border: none;
+        color: inherit;
+        cursor: pointer;
+        padding: 8px;
+        display: flex;
+        align-items: center;
+    }
+
+    #queue-button:hover {
+        color: #ffd43b;
+    }
+}
+
+.main-panel {
+    grid-area: main-panel;
+    padding: 0.25em;
+    background-color: #212529;
+    overflow: auto;
 }