feat: add grid/list view toggle to track gallery with hover-reveal art cards

2026-06-08 07:56:14 -04:00
parent 2eebc04733
commit 8fbabcdbc5
10 changed files with 269 additions and 17 deletions
@@ -86,3 +86,96 @@
        height: 200px;
    }
 }
+
+/* ── Mode A: hover-reveal overlay (art cards only) ──────────────────────── */
+
+/* Gate the hidden-at-rest rule on (a) art present and (b) a hover-capable pointer.
+   Fallback cards (no --art modifier) and touch devices always show the overlay. */
+@media (hover: hover) and (pointer: fine) {
+    .deepdrft-track-card-container--art .deepdrft-track-card-content {
+        opacity: 0;
+        background: transparent;
+        transition: opacity 180ms ease, background-color 180ms ease;
+    }
+    .deepdrft-track-card-container--art:hover .deepdrft-track-card-content {
+        opacity: 1;
+        background: var(--deepdrft-navy-mid, #162437);
+        transition: opacity 180ms ease, background-color 180ms ease;
+    }
+}
+
+/* ── Mode B: list row ───────────────────────────────────────────────────── */
+
+.deepdrft-track-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 16px;
+    height: 80px;
+    padding: 8px 16px;
+    background: var(--deepdrft-navy-mid, #162437);
+    border: 1px solid rgba(250, 250, 248, 0.12);
+    border-radius: 4px;
+    box-sizing: border-box;
+    width: 100%;
+}
+
+.deepdrft-track-row-link {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 16px;
+    flex: 1 1 auto;
+    min-width: 0;
+    text-decoration: none;
+    color: inherit;
+}
+
+.deepdrft-track-row-fab {
+    flex: 0 0 auto;
+}
+
+.deepdrft-track-row-thumb {
+    flex: 0 0 64px;
+    width: 64px;
+    height: 64px;
+    background-size: cover;
+    background-position: center;
+    border-radius: 2px;
+}
+
+.deepdrft-track-row-thumb--fallback {
+    background: color-mix(in srgb, var(--deepdrft-navy-mid, #162437) 60%, rgba(250,250,248,0.1));
+    border: 1px solid rgba(250, 250, 248, 0.12);
+}
+
+.deepdrft-track-row-text {
+    flex: 1 1 auto;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.deepdrft-track-row-meta {
+    flex: 0 0 auto;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    justify-content: center;
+    gap: 4px;
+}
+
+@media (max-width: 480px) {
+    .deepdrft-track-row {
+        height: auto;
+        min-height: 72px;
+        padding: 8px 12px;
+        gap: 10px;
+    }
+    .deepdrft-track-row-thumb {
+        flex: 0 0 48px;
+        width: 48px;
+        height: 48px;
+    }
+}