Changeset 102d2f0 in Klonkt

Timestamp:

06/14/2026 11:12:05 PM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

67d4067

Parents:

ddecd9a

Message:

fix: tablet/auto full-player overrides now win (cascade order) + cover

My tablet media query was BEFORE the base sheet rules (.audio-sheet-cover/
info/controls at ~446+), so the base overrode the tablet overrides -> cover
stayed 320px, buttons small. Block moved to AFTER the base rules. Cover now
scales with 48vh, play 108px, panel full-width. audio.css v=2->v=3.

(Verified live via Chrome at 768-1199px: panel full-width, cover ~437px at
tablet height, large buttons.)

Co-Authored-By: Claude <noreply@…>

Location:

src

Files:

• assets/css/audio.css (modified) (2 diffs)
• views/shell.ejs (modified) (1 diff)

src/assets/css/audio.css

@@ -377 +377 @@
 }
 
+/* (De grote tablet/auto-variant staat onderaan deze sectie — NÁ de basis cover/
+   info/controls-regels — anders overschrijft de basis die overrides.) */
+
+.audio-sheet-panel.is-dragging {
+  transition: none;
+  will-change: transform;
+}
+[data-theme="dark"] .audio-sheet-panel {
+  background: var(--paper, #1a1a1a);
+  box-shadow: 0 -20px 60px rgba(0, 0, 0, .5);
+}
+
+.audio-sheet-drag-zone {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 1rem;
+  /* MUST be 'none' so pointer events reach JS (drag-down-to-close handler).
+     'pan-y' would let the browser claim the vertical gesture for scroll. */
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+  cursor: grab;
+  margin: -.75rem -1.5rem 0;
+  padding: .75rem 1.5rem 0;
+}
+.audio-sheet-drag-zone:active { cursor: grabbing; }
+
+@media (hover: hover) and (pointer: fine) {
+  .audio-sheet-drag-zone {
+    touch-action: auto;
+    cursor: default;
+    pointer-events: none;
+  }
+  .audio-sheet-drag-zone .audio-sheet-handle {
+    pointer-events: auto;
+    cursor: pointer;
+  }
+}
+
+.audio-sheet-handle {
+  display: block;
+  width: 48px; height: 4px;
+  border-radius: 2px;
+  background: color-mix(in srgb, var(--ink, #000) 25%, transparent);
+  border: 0; padding: 0;
+  margin: 0 auto .5rem;
+  cursor: pointer;
+  flex-shrink: 0;
+  position: relative;
+}
+.audio-sheet-handle::before {
+  content: ""; position: absolute;
+  inset: -10px -20px;
+}
+
+.audio-sheet-cover {
+  width: 100%;
+  max-width: 320px;
+  aspect-ratio: 1;
+  margin: 0 auto;
+  border-radius: 12px;
+  background:
+    linear-gradient(135deg,
+      var(--accent, #c2410c),
+      color-mix(in srgb, var(--accent, #c2410c) 55%, #000));
+  background-size: cover; background-position: center;
+  display: flex; align-items: center; justify-content: center;
+  color: rgba(255,255,255,0.9);
+  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
+}
+.audio-sheet-cover svg { width: 30%; height: 30%; }
+.audio-sheet-cover.has-image svg { display: none; }
+
+.audio-sheet-info { text-align: center; min-width: 0; }
+.audio-sheet-title  { font-family: var(--font-display, serif); font-size: 1.5rem; font-weight: 600; line-height: 1.2; }
+.audio-sheet-artist { color: var(--ink-soft, rgba(0,0,0,.55)); margin-top: .25rem; }
+.audio-sheet-album  { color: var(--ink-muted, rgba(0,0,0,.45)); font-size: 0.85rem; margin-top: .15rem; }
+
+.audio-sheet-progress {
+  display: flex;
+  gap: .75rem;
+  align-items: center;
+  padding: 0 1rem;
+}
+
+.audio-sheet-controls {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+  flex-wrap: nowrap;
+  min-height: 64px;
+}
+.audio-sheet-btn { width: 48px; height: 48px; }
+.audio-sheet-btn svg { width: 22px; height: 22px; }
+.audio-sheet-play {
+  background: var(--accent, #c2410c);
+  color: #fff;
+  width: 64px; height: 64px;
+  border-radius: 50%;
+  padding: 0;
+}
+.audio-sheet-play svg { width: 24px; height: 24px; }
+.audio-sheet-play .icon-pause { display: none; }
+/* Both descendant AND sibling — works whether the sheet is nested in
+   .audio-player (legacy) or detached as a body sibling (current fix). */
+.audio-player.is-playing .audio-sheet-play .icon-play,
+.audio-player.is-playing ~ .audio-sheet .audio-sheet-play .icon-play,
+body.audio-is-playing .audio-sheet-play .icon-play { display: none; }
+.audio-player.is-playing .audio-sheet-play .icon-pause,
+.audio-player.is-playing ~ .audio-sheet .audio-sheet-play .icon-pause,
+body.audio-is-playing .audio-sheet-play .icon-pause { display: block; }
+
+.audio-sheet-queue {
+  border-top: 1px solid var(--rule);
+  padding-top: 1rem;
+}
+.audio-sheet-queue-label {
+  font-size: 0.85rem;
+  color: var(--ink-muted, rgba(0,0,0,.55));
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 0.5rem;
+}
+.audio-sheet-queue-list {
+  list-style: none;
+  margin: 0; padding: 0;
+}
+.audio-sheet-queue-item {
+  display: flex;
+  align-items: baseline;
+  gap: 0.4rem;
+  padding: 0.5rem 0.6rem;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.95rem;
+}
+.audio-sheet-queue-item:hover { background: color-mix(in srgb, var(--ink, #000) 5%, transparent); }
+.audio-sheet-queue-item.is-current { color: var(--accent); font-weight: 600; }
+.audio-sheet-queue-item .aqi-num { color: var(--ink-muted, rgba(0,0,0,.45)); min-width: 1.6em; }
+.audio-sheet-queue-item .aqi-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.audio-sheet-queue-item .aqi-artist {
+  color: var(--ink-muted, rgba(0,0,0,.45));
+  font-size: 0.85rem;
+  margin-left: auto;
+}
+
 /* TABLET / AUTO (768–1199px): grote, landscape, knop-vriendelijke full-player
    voor tablets + een tablet-in-de-auto. Bewust full-screen + grote touch-targets.
-   Desktop (≥1200px) opent de full player NIET (afgehandeld in audio-player.js),
-   dus daar is geen sheet-styling nodig. */
+   STAAT BEWUST NA de basis-sheet-regels hierboven, anders overschrijft de basis
+   deze overrides (cascade-volgorde). Desktop (≥1200px) opent de full player NIET
+   (afgehandeld in audio-player.js), dus daar is geen sheet-styling nodig. */
 @media (min-width: 768px) and (max-width: 1199.98px) {
   .audio-sheet-panel {
@@ -411 +561 @@
 }
 
-.audio-sheet-panel.is-dragging {
-  transition: none;
-  will-change: transform;
-}
-[data-theme="dark"] .audio-sheet-panel {
-  background: var(--paper, #1a1a1a);
-  box-shadow: 0 -20px 60px rgba(0, 0, 0, .5);
-}
-
-.audio-sheet-drag-zone {
-  flex-shrink: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  gap: 1rem;
-  /* MUST be 'none' so pointer events reach JS (drag-down-to-close handler).
-     'pan-y' would let the browser claim the vertical gesture for scroll. */
-  touch-action: none;
-  user-select: none;
-  -webkit-user-select: none;
-  cursor: grab;
-  margin: -.75rem -1.5rem 0;
-  padding: .75rem 1.5rem 0;
-}
-.audio-sheet-drag-zone:active { cursor: grabbing; }
-
-@media (hover: hover) and (pointer: fine) {
-  .audio-sheet-drag-zone {
-    touch-action: auto;
-    cursor: default;
-    pointer-events: none;
-  }
-  .audio-sheet-drag-zone .audio-sheet-handle {
-    pointer-events: auto;
-    cursor: pointer;
-  }
-}
-
-.audio-sheet-handle {
-  display: block;
-  width: 48px; height: 4px;
-  border-radius: 2px;
-  background: color-mix(in srgb, var(--ink, #000) 25%, transparent);
-  border: 0; padding: 0;
-  margin: 0 auto .5rem;
-  cursor: pointer;
-  flex-shrink: 0;
-  position: relative;
-}
-.audio-sheet-handle::before {
-  content: ""; position: absolute;
-  inset: -10px -20px;
-}
-
-.audio-sheet-cover {
-  width: 100%;
-  max-width: 320px;
-  aspect-ratio: 1;
-  margin: 0 auto;
-  border-radius: 12px;
-  background:
-    linear-gradient(135deg,
-      var(--accent, #c2410c),
-      color-mix(in srgb, var(--accent, #c2410c) 55%, #000));
-  background-size: cover; background-position: center;
-  display: flex; align-items: center; justify-content: center;
-  color: rgba(255,255,255,0.9);
-  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
-}
-.audio-sheet-cover svg { width: 30%; height: 30%; }
-.audio-sheet-cover.has-image svg { display: none; }
-
-.audio-sheet-info { text-align: center; min-width: 0; }
-.audio-sheet-title  { font-family: var(--font-display, serif); font-size: 1.5rem; font-weight: 600; line-height: 1.2; }
-.audio-sheet-artist { color: var(--ink-soft, rgba(0,0,0,.55)); margin-top: .25rem; }
-.audio-sheet-album  { color: var(--ink-muted, rgba(0,0,0,.45)); font-size: 0.85rem; margin-top: .15rem; }
-
-.audio-sheet-progress {
-  display: flex;
-  gap: .75rem;
-  align-items: center;
-  padding: 0 1rem;
-}
-
-.audio-sheet-controls {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 1rem;
-  flex-wrap: nowrap;
-  min-height: 64px;
-}
-.audio-sheet-btn { width: 48px; height: 48px; }
-.audio-sheet-btn svg { width: 22px; height: 22px; }
-.audio-sheet-play {
-  background: var(--accent, #c2410c);
-  color: #fff;
-  width: 64px; height: 64px;
-  border-radius: 50%;
-  padding: 0;
-}
-.audio-sheet-play svg { width: 24px; height: 24px; }
-.audio-sheet-play .icon-pause { display: none; }
-/* Both descendant AND sibling — works whether the sheet is nested in
-   .audio-player (legacy) or detached as a body sibling (current fix). */
-.audio-player.is-playing .audio-sheet-play .icon-play,
-.audio-player.is-playing ~ .audio-sheet .audio-sheet-play .icon-play,
-body.audio-is-playing .audio-sheet-play .icon-play { display: none; }
-.audio-player.is-playing .audio-sheet-play .icon-pause,
-.audio-player.is-playing ~ .audio-sheet .audio-sheet-play .icon-pause,
-body.audio-is-playing .audio-sheet-play .icon-pause { display: block; }
-
-.audio-sheet-queue {
-  border-top: 1px solid var(--rule);
-  padding-top: 1rem;
-}
-.audio-sheet-queue-label {
-  font-size: 0.85rem;
-  color: var(--ink-muted, rgba(0,0,0,.55));
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  margin-bottom: 0.5rem;
-}
-.audio-sheet-queue-list {
-  list-style: none;
-  margin: 0; padding: 0;
-}
-.audio-sheet-queue-item {
-  display: flex;
-  align-items: baseline;
-  gap: 0.4rem;
-  padding: 0.5rem 0.6rem;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 0.95rem;
-}
-.audio-sheet-queue-item:hover { background: color-mix(in srgb, var(--ink, #000) 5%, transparent); }
-.audio-sheet-queue-item.is-current { color: var(--accent); font-weight: 600; }
-.audio-sheet-queue-item .aqi-num { color: var(--ink-muted, rgba(0,0,0,.45)); min-width: 1.6em; }
-.audio-sheet-queue-item .aqi-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.audio-sheet-queue-item .aqi-artist {
-  color: var(--ink-muted, rgba(0,0,0,.45));
-  font-size: 0.85rem;
-  margin-left: auto;
-}
-
 /* ============================================================
    External-link variant ([[link:url]])

src/views/shell.ejs

@@ -168 +168 @@
      anywhere (admin previews, post embeds, etc). The player itself is
      a singleton — see the script tag near </body>. -->
-<link rel="stylesheet" href="/assets/css/audio.css?v=2">
+<link rel="stylesheet" href="/assets/css/audio.css?v=3">
 
 <%- include('partials/shared-styles') %>