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 ---------- */