From ac9faacefbcf29c931fe1900cb7043b182fe31d0 Mon Sep 17 00:00:00 2001 From: Scarriffle Date: Tue, 6 Oct 2026 21:15:39 +0200 Subject: [PATCH] =?UTF-8?q?Im=20Aufmacher=20steht=20in=20Ruhe=20nur,=20was?= =?UTF-8?q?=20l=C3=A4uft?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Inhaltsangabe und Knöpfe blenden sich beim Überfahren ein und wieder aus. In Ruhe bleibt oben nur, *was* läuft — Schriftzug oder Name, Jahr, Laufzeit, Freigabe. Was man damit tun kann und worum es geht, kommt auf Zuruf. So ist das Bild in Ruhe ein Bild und nicht eine Wand aus Text darüber. **Langsamer herein als hinaus**, 340 gegen 220 Millisekunden: das Erscheinen soll man sehen, das Verschwinden nicht abwarten müssen. Die Pfeile gehen denselben Takt mit; sie standen auf 150 ms und blitzten dagegen auf. **Der Platz bleibt reserviert.** Mit `display: none` spränge beim ersten Überfahren der ganze Block nach oben; geschaltet wird nur die Deckung. Gemessen an derselben Folie: 349,2 px hoch mit Deckung 0, 349,2 px mit Deckung 1. **Der Terminhinweis bleibt stehen.** „Ab Di., 6. Okt., 18:00 Uhr" ist keine Handlung, sondern die Auskunft, warum hier nichts zu drücken ist — die darf nicht erst auf Zuruf kommen. Darum trifft die Regel `.btn` und nicht die ganze Knopfzeile. **Der Fokus zählt wie der Zeiger.** Ein Knopf, der unsichtbar den Fokus bekommt, ist eine Sackgasse. Gemessen, mit abgeschalteten Übergängen: in Ruhe alles auf 0; Fokus im Aufmacher — Text 1, beide Knöpfe 1, beide Pfeile 0,72; nach dem Verlassen wieder 0. `hover: hover` wie bei den Pfeilen: ohne Zeiger gäbe es kein Überfahren, und „Abspielen" wäre nicht mehr erreichbar. Dort steht alles wie immer. Co-Authored-By: Claude Opus 5 --- web/app/src/style.css | 51 +++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 49 insertions(+), 2 deletions(-) diff --git a/web/app/src/style.css b/web/app/src/style.css index 3743aa9..086ec85 100644 --- a/web/app/src/style.css +++ b/web/app/src/style.css @@ -1218,6 +1218,48 @@ body:has(.pl.pl-klein) .auswahlleiste { bottom: 92px; } .hero-bald span:not(.icon) { overflow: hidden; text-overflow: ellipsis; } .hero-bald .icon svg { width: 18px; height: 18px; } +/* **Inhaltsangabe und Knöpfe kommen erst, wenn man hinzeigt.** + * + * In Ruhe steht oben nur, *was* läuft: Schriftzug oder Name, Jahr, Laufzeit. + * Was man damit tun kann und worum es geht, erscheint beim Überfahren — so + * ist das Bild in Ruhe ein Bild und nicht eine Wand aus Text darüber. + * + * **Der Platz bleibt reserviert.** Verschwinden würden die Zeilen nur mit + * `display: none` — und dann spränge beim ersten Überfahren der ganze Block + * nach oben. Hier wird nur die Deckung geschaltet; die Höhe steht still. + * + * **Der Termin bleibt sichtbar**, deshalb `.btn` und nicht die ganze + * Knopfzeile. „Ab Di., 6. Okt., 18:00 Uhr" ist keine Handlung, sondern die + * Auskunft, warum hier nichts zu drücken ist — die darf nicht erst auf + * Zuruf kommen. (Technisch ginge es ohnehin nicht anders: ein Kind kann + * nicht undurchsichtiger sein als sein Elternteil.) + * + * **Langsamer herein als hinaus**, 340 gegen 220 Millisekunden. Das + * Erscheinen soll man sehen, das Verschwinden nicht abwarten müssen. + * + * `hover: hover` wie bei den Pfeilen: ohne Zeiger gäbe es kein Überfahren, + * und „Abspielen" wäre nicht mehr erreichbar. Dort steht alles wie immer. */ +@media (hover: hover) { + .hero-text, + .hero-knoepfe .btn { + opacity: 0; pointer-events: none; + transition: opacity .22s ease; + } + /* **Der Fokus zählt wie der Zeiger.** Ein Knopf, der unsichtbar den Fokus + bekommt, ist eine Sackgasse: man drückt die Eingabetaste auf etwas, das + man nicht sieht. `pointer-events: none` hält nur den Zeiger ab, nicht + den Fokus — die Deckung muss es hier tun. Und wer mit der Tastatur + hineinspringt, soll dasselbe sehen wie der, der hinzeigt: nicht nur den + Knopf, sondern auch, worum es geht. */ + .hero:hover .hero-text, + .hero:focus-within .hero-text, + .hero:hover .hero-knoepfe .btn, + .hero:focus-within .hero-knoepfe .btn { + opacity: 1; pointer-events: auto; + transition: opacity .34s ease; + } +} + /* **Pfeile am Bildrand.** Senkrecht mittig, damit sie nicht über dem Text liegen, und über allem anderen — sonst fängt der Textblock den Klick ab. */ .hero-pfeil { @@ -1226,7 +1268,7 @@ body:has(.pl.pl-klein) .auswahlleiste { bottom: 92px; } border: 0; border-radius: 50%; background: rgba(11, 11, 13, .55); color: var(--text); backdrop-filter: blur(6px); - opacity: .72; transition: opacity .15s ease, background .15s ease; + opacity: .72; transition: opacity .22s ease, background .22s ease; } .hero-pfeil:hover { opacity: 1; background: rgba(11, 11, 13, .8); } .hero-pfeil svg { width: 24px; height: 24px; } @@ -1249,7 +1291,12 @@ body:has(.pl.pl-klein) .auswahlleiste { bottom: 92px; } * den Zeiger ab, nicht den Fokus. */ @media (hover: hover) { .hero-pfeil { opacity: 0; pointer-events: none; } - .hero:hover .hero-pfeil { opacity: .72; pointer-events: auto; } + /* Derselbe Takt wie Text und Knöpfe: langsamer herein, schneller hinaus. */ + .hero:hover .hero-pfeil, + .hero:focus-within .hero-pfeil { + opacity: .72; pointer-events: auto; + transition: opacity .34s ease, background .22s ease; + } .hero:hover .hero-pfeil:hover { opacity: 1; background: rgba(11, 11, 13, .8); } .hero-pfeil:focus-visible { opacity: 1; pointer-events: auto; } }