From fa8d9de2e9f40d18fb36f0895ddd4cd6c969b200 Mon Sep 17 00:00:00 2001 From: Scarriffle Date: Mon, 14 Sep 2026 18:50:09 +0200 Subject: [PATCH] =?UTF-8?q?Die=20Kn=C3=B6pfe=20hatten=20Fl=C3=A4chen,=20di?= =?UTF-8?q?e=20es=20in=20der=20App=20nie=20gab?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Ich habe nach dem Code gebaut und dabei das Wesentliche übersehen: In PlayerView gibt es genau ein "background", und das ist die Abdunklung über dem ganzen Bild. Die Knöpfe selbst sind blanke weiße Symbole. Meine runden, hinterlegten Flächen waren eine Erfindung — und der Grund, warum der Qualitätsknopf schief aussah: ein Wort passt in keinen Kreis. Jetzt steht "Original" als das da, was es ist, nämlich Text. Dazu die Spultasten als Kreispfeile mit der Sekundenzahl darin, wie gobackward.10 und goforward.30 sie zeichnen, statt als "−10" und "+30" in Textform. Und der Abspielpfeil in 52 Punkt, der Größe aus der App. Co-Authored-By: Claude Opus 5 --- web/frontend/index.html | 64 +++++++++++++++++++++-------------------- 1 file changed, 33 insertions(+), 31 deletions(-) diff --git a/web/frontend/index.html b/web/frontend/index.html index 7dd11dc..a8c7384 100644 --- a/web/frontend/index.html +++ b/web/frontend/index.html @@ -275,28 +275,26 @@ img { display: block; } } .pl-bottom { padding-bottom: calc(var(--s-loose) + env(safe-area-inset-bottom)); } -/* Die Stufe als Text, deshalb kein rundes Feld. */ -.pl-quality { - width: auto; padding: 0 var(--s-regular); border-radius: var(--r-control); - font-size: 13px; font-weight: 600; white-space: nowrap; -} +/* Die Stufe als Text — jetzt ohne Kreis darum, also ohne Widerspruch. */ +.pl-quality { font-size: 14px; font-weight: 600; white-space: nowrap; } .pl-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .pl-title strong { font-size: 17px; font-weight: 600; letter-spacing: -.01em; } .pl-title span { font-size: 13px; color: var(--text-2); } +/* **Keine Knopfflächen.** In der App sind das blanke weiße Symbole auf dem + Bild — der einzige Hintergrund ist die Abdunklung über allem. Runde + Flächen darunter waren meine Erfindung, und sie sind der Grund, warum + „Original" als Text darin schief aussah: ein Wort passt in keinen Kreis. */ .pl-icon { - width: 38px; height: 38px; border-radius: 999px; flex: 0 0 auto; - background: rgba(20,20,23,.55); color: var(--text); font-size: 15px; - border: 1px solid rgba(255,255,255,.14); - backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); - transition: background .15s ease; + background: none; border: none; color: #fff; flex: 0 0 auto; + padding: var(--s-snug); font-size: 15px; border-radius: var(--r-control); + opacity: .9; transition: opacity .15s ease, background .15s ease; } -.pl-icon:hover { background: rgba(40,40,46,.75); } +.pl-icon:hover { opacity: 1; background: rgba(255,255,255,.12); } /* Eine Vorgabegröße für alle Symbole, damit sie zueinander passen; einzelne überschreiben sie über `icon(name, size)`. */ -.pl-icon svg, .pl-round svg, .tiny svg, .hero-nav svg { width: 18px; height: 18px; } -.pl-round svg { width: 22px; height: 22px; } +.pl-icon svg, .tiny svg, .hero-nav svg { width: 22px; height: 22px; } .btn svg { width: 15px; height: 15px; vertical-align: -2px; margin-right: 2px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .tiny, .pl-icon, .pl-round, .hero-nav { display: inline-flex; align-items: center; justify-content: center; } @@ -305,22 +303,17 @@ img { display: block; } display: flex; align-items: center; justify-content: center; gap: calc(var(--s-section) * 2); } -/* Dunkel statt hell durchscheinend: über einer sonnigen Szene verschwanden - helle Knöpfe vollständig. Ein Schatten hebt sie zusätzlich ab. */ +/* Auch hier keine Fläche — nur das Symbol, wie in der App. Lesbar bleibt es + durch die Abdunklung, die über dem ganzen Bild liegt. */ .pl-round { - position: relative; width: 58px; height: 58px; border-radius: 999px; - background: rgba(20,20,23,.55); color: var(--text); font-size: 22px; - border: 1px solid rgba(255,255,255,.14); - box-shadow: 0 4px 16px rgba(0,0,0,.45); - backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); - transition: background .15s ease, transform .15s ease; + background: none; border: none; color: #fff; padding: var(--s-snug); + opacity: .95; transition: opacity .15s ease, transform .15s ease; } -.pl-round:hover { background: rgba(40,40,46,.8); transform: scale(1.06); } -.pl-round.pl-play { width: 84px; height: 84px; } -.pl-round.pl-play svg { width: 34px; height: 34px; } +.pl-round:hover { opacity: 1; transform: scale(1.08); } + /* Die Sekundenzahl als Text, nicht als Ziffer im Pfeil: übereinander war beides unlesbar, und die Zahl ist die eigentliche Auskunft. */ -#pl-back, #pl-fwd { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; } + /* Wie in der App: der Regler über die **volle Breite**, die Zeiten darunter. Nebeneinander gestellt nimmt er in der Mitte Platz weg und wirkt wie ein @@ -1609,9 +1602,9 @@ function openPlayer(item) {
- - - + + +
@@ -1664,7 +1657,7 @@ function openPlayer(item) { v.addEventListener('click', toggle); const paint = () => { - el2('pl-toggle').innerHTML = icon(v.paused ? 'play' : 'pause', 30); + el2('pl-toggle').innerHTML = icon(v.paused ? 'play' : 'pause', 52); el2('pl-toggle').setAttribute('aria-label', v.paused ? 'Abspielen' : 'Anhalten'); show(); }; @@ -2077,6 +2070,14 @@ const ICONS = { play: '', waveform: '', speed: '', + // Kreispfeile mit der Sekundenzahl darin — dasselbe Bild wie + // `gobackward.10` und `goforward.30` auf dem iPad. + goBack: (n) => `` + + `${n}`, + goFwd: (n) => `` + + `${n}`, captions: '', captionsOn: '', check: '', @@ -2092,10 +2093,11 @@ const ICONS = { }; /// Ein Symbol als Vektor. `size` nur, wo es von der Vorgabe abweicht. -function icon(name, size) { +function icon(name, size, arg) { + const inhalt = typeof ICONS[name] === 'function' ? ICONS[name](arg) : ICONS[name]; return ``; + ${size ? `style="width:${size}px;height:${size}px"` : ''}>${inhalt}`; } /* ---------- Kleinkram ---------- */