/* * DiFo-Darstellung fuer QuizDock (offizieller Override: /branding/override.css). * Getestet mit fchaussin/quizdock:standalone-0.10.0 (QuizDock v0.10.0), Chromium 153, * Beamer 1920x1080 und Handy 390x844. Doku: README.md in diesem Ordner. * * Selektoren: nur die dokumentierten qd-*-Hooks und data-*-Attribute plus die * Struktur direkt darunter (Kind-Elemente, :has). Keine Tailwind-Klassen, keine Hashes. * Wird unlayered nach der App geladen und schlaegt damit Tailwinds @layer utilities. */ /* ---- 1. Aufloesung: Balken wachsen mit dem Antworttext ---------------------- * v0.10.0: Balken fest 1.9em hoch, Text absolut darueber, zweite Zeile ragt heraus. * .qd-distribution > li > div = Balken, darin > div = Fuellung, > span = Text. */ .qd-distribution > li > div { height: auto; min-height: 1.9em; } .qd-distribution > li > div > div { position: absolute; top: 0; bottom: 0; left: 0; height: auto; } .qd-distribution > li > div > span { position: relative; inset: auto; min-height: 2em; padding-block: 0.3em; line-height: 1.2; text-align: left; overflow-wrap: break-word; } /* Kontrast in der Aufloesung (WCAG AA, 4,5:1 gegen Fuellung und Balkengrund). * v0.10.0 blendet falsche Antworten als ganze Zeile auf 50 % ab (grauer Text auf Farbe). * Richtige Zeile = die mit dem Haken-Span (span[aria-label]). Nur wenn es eine gibt. */ .qd-distribution:has(> li > span[aria-label]) > li:not(:has(> span[aria-label])) { opacity: 1; filter: none; } .qd-distribution:has(> li > span[aria-label]) > li:not(:has(> span[aria-label])) > :is(span:first-child, img) { opacity: 0.45; } .qd-distribution:has(> li > span[aria-label]) > li:not(:has(> span[aria-label])) > div > div { opacity: 0.4; } .qd-distribution:has(> li > span[aria-label]) > li:not(:has(> span[aria-label])) > div > span { color: oklch(0.3 0 0); } .qd-distribution > li:has(> span[aria-label]) > div > div { opacity: 0.7; } /* ---- 3. Umbrueche: ganze Woerter, lesbarer Zeilenabstand ---------------------- * v0.10.0: overflow-wrap:anywhere und line-height 1em in Kacheln und Listen. * Silbentrennung (hyphens:auto) bewusst nicht: QuizDock setzt fest . */ .qd-answer > span:not([aria-hidden]) { overflow-wrap: break-word; line-height: 1.2; } .qd-prompt { overflow-wrap: break-word; } /* Handy: Antwortkacheln mit Text (Remote-Spieler, "Show the big screen") eine pro Zeile, * damit lange Woerter in die Zeile passen. Kacheln nur mit Form (im Raum) bleiben 2x2. */ @media (max-width: 599px) { .qd-answers:not([data-layout]):has(> .qd-answer > span:not([aria-hidden])) { grid-template-columns: minmax(0, 1fr); } .qd-answers:not([data-layout]):has(> .qd-answer > span:not([aria-hidden])) > .qd-answer { grid-column: auto; width: auto; justify-self: stretch; font-size: 1.1em; } } /* Kurzes Handy (z. B. 390x664, Safari mit Leisten), Frage offen: Bild nicht hinter den * Antworten verstecken. Remote-Bild max. 20 % der Hoehe, Frage und Kacheln etwas kompakter. */ @media (max-width: 599px) and (max-height: 720px) { .qd-player .qd-prompt { font-size: 1.3em; } .qd-player div:has(> .qd-prompt) > div > button > img { max-height: 20dvh; } .qd-player .qd-answers:not([data-layout]):has(> .qd-answer > span:not([aria-hidden])) > .qd-answer { font-size: 1em; min-height: 2.6em; padding-block: 0.35em; } } /* ---- Beamer (Projektionsfenster, Querformat) --------------------------------- */ @media (min-width: 1000px) and (min-aspect-ratio: 5/4) { /* 1. Aufloesung mit Rangliste: Frage oben, Antworten links, Top 10 rechts. * Sonst stehen Frage, Balken und 10 Zeilen untereinander und laufen unten raus. */ .qd-shell[data-shell='bare'] .qd-screen div:has(> .qd-prompt):has(> div > .qd-leaderboard) { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; grid-auto-flow: row dense; column-gap: 2.5em; row-gap: 1.2em; width: 100%; max-width: 100em; align-items: start; } .qd-shell[data-shell='bare'] .qd-screen div:has(> .qd-prompt):has(> div > .qd-leaderboard) > * { grid-column: 1; } .qd-shell[data-shell='bare'] .qd-screen div:has(> .qd-prompt):has(> div > .qd-leaderboard) > .qd-prompt { grid-column: 1 / -1; font-size: 1.8em; line-height: 1.25; } .qd-shell[data-shell='bare'] .qd-screen div:has(> .qd-prompt) > div:has(> .qd-leaderboard) { grid-column: 2; grid-row: 2 / -1; max-width: none; font-size: 0.85em; } .qd-shell[data-shell='bare'] .qd-screen .qd-leaderboard-row { padding-block: 0.3em; } /* Podium mit Gesamtrangliste: Podium links, Rangliste rechts. */ .qd-shell[data-shell='bare'] .qd-screen div:has(> .qd-podium):has(> div > .qd-leaderboard) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; grid-auto-flow: row dense; column-gap: 4em; row-gap: 1em; width: 100%; max-width: 90em; align-items: center; } .qd-shell[data-shell='bare'] .qd-screen div:has(> .qd-podium):has(> div > .qd-leaderboard) > * { grid-column: 1; } .qd-shell[data-shell='bare'] .qd-screen div:has(> .qd-podium):has(> div > .qd-leaderboard) > h2 { grid-column: 1 / -1; } .qd-shell[data-shell='bare'] .qd-screen div:has(> .qd-podium) > div:has(> .qd-leaderboard) { grid-column: 2; grid-row: 2 / -1; align-self: start; font-size: 0.85em; } /* 2. Lobby: Raumname und Quiz oben, links Adresse/PIN/QR/Zaehler, rechts die Namen. * Kinder von .qd-lobby in v0.10.0: h1, p (Quiz), p (Adresse), p.qd-join-pin, * .qd-join-qr, Zaehler, Bereitschaft, ul.qd-roster, Raumwertung (ab dem 2. Quiz). */ .qd-shell[data-shell='bare'] .qd-lobby { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); grid-template-rows: auto auto repeat(6, auto) 1fr; grid-auto-flow: row dense; column-gap: 2.5em; row-gap: 0; width: 100%; max-width: 100em; align-items: center; justify-items: center; } .qd-shell[data-shell='bare'] .qd-lobby > * { grid-column: 1; margin-block: 0.35em; } .qd-shell[data-shell='bare'] .qd-lobby > h1, .qd-shell[data-shell='bare'] .qd-lobby > h1 + p:not(.qd-join-pin) { grid-column: 1 / -1; margin-block: 0; } .qd-shell[data-shell='bare'] .qd-lobby > .qd-roster { grid-column: 2; grid-row: 3 / -1; align-self: start; max-width: none; width: 100%; margin-top: 1em; align-content: flex-start; } /* PIN nie breiter als ihre Spalte (4:3-Beamer), auf 1920x1080 wie ausgeliefert. */ .qd-shell[data-shell='bare'] .qd-lobby > .qd-join-pin { font-size: min(4em, 5.8vw); } /* Beitrittsadresse (die Zeile vor der PIN): nie breiter als die Spalte. */ .qd-shell[data-shell='bare'] .qd-lobby > p:has(+ .qd-join-pin) { font-size: min(1.5em, 2.2vw); overflow-wrap: anywhere; } .qd-shell[data-shell='bare'] .qd-lobby:has(> .qd-roster + div) > p:has(+ .qd-join-pin) { font-size: min(1.5em, 1.6vw); } /* QR-Code: 200px wie ausgeliefert, auf niedrigen Beamern (720p) kleiner. */ .qd-shell[data-shell='bare'] .qd-lobby > .qd-join-qr svg { width: min(200px, 22vh); height: auto; } /* Namen kleiner, je mehr Spieler (50 passen auf 1920x1080). */ .qd-shell[data-shell='bare'] .qd-roster:has(> li:nth-child(13)) > li { font-size: 0.9em; } .qd-shell[data-shell='bare'] .qd-roster:has(> li:nth-child(31)) > li { font-size: 0.75em; } .qd-shell[data-shell='bare'] .qd-roster:has(> li:nth-child(51)) > li { font-size: 0.62em; } .qd-shell[data-shell='bare'] .qd-roster:has(> li:nth-child(71)) > li { font-size: 0.52em; } /* Naechstes Quiz im selben Raum: Raumwertung als dritte Spalte. */ .qd-shell[data-shell='bare'] .qd-lobby:has(> .qd-roster + div) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 0.75fr); } .qd-shell[data-shell='bare'] .qd-lobby > .qd-roster + div { grid-column: 3; grid-row: 3 / -1; align-self: start; max-width: none; margin-top: 1em; font-size: 0.8em; } .qd-shell[data-shell='bare'] .qd-lobby:has(> .qd-roster + div) > .qd-join-pin { font-size: min(3.3em, 4.6vw); } .qd-shell[data-shell='bare'] .qd-lobby:has(> .qd-roster + div) > .qd-roster:has(> li:nth-child(13)) > li { font-size: 0.75em; } .qd-shell[data-shell='bare'] .qd-lobby:has(> .qd-roster + div) > .qd-roster:has(> li:nth-child(31)) > li { font-size: 0.62em; } .qd-shell[data-shell='bare'] .qd-lobby:has(> .qd-roster + div) > .qd-roster:has(> li:nth-child(51)) > li { font-size: 0.52em; } } /* Niedrige Beamer (1366x768, 1280x800, 1024x768): Kopf kleiner, weniger Abstand, * Namen mit kleinerem Avatar, damit 50 Spieler ohne Scrollen passen. */ @media (min-width: 1000px) and (min-aspect-ratio: 5/4) and (max-height: 820px) { .qd-shell[data-shell='bare'] .qd-lobby > h1 { font-size: 1.9em; } .qd-shell[data-shell='bare'] .qd-lobby > h1 + p:not(.qd-join-pin) { font-size: 1.3em; } .qd-shell[data-shell='bare'] .qd-lobby > * { margin-block: 0.2em; } .qd-shell[data-shell='bare'] .qd-lobby > .qd-join-qr svg { width: min(200px, 20vh); } .qd-shell[data-shell='bare'] .qd-roster:has(> li:nth-child(13)) > li > span[aria-hidden] { width: 1.5em !important; height: 1.5em !important; } .qd-shell[data-shell='bare'] .qd-roster:has(> li:nth-child(31)) > li { font-size: 0.8em; } .qd-shell[data-shell='bare'] .qd-roster:has(> li:nth-child(51)) > li { font-size: 0.68em; } } /* Schmale Beamer (4:3): Namensspalte schmaler, also Namen noch eine Stufe kleiner. */ @media (min-width: 1000px) and (min-aspect-ratio: 5/4) and (max-aspect-ratio: 3/2) { .qd-shell[data-shell='bare'] .qd-roster:has(> li:nth-child(31)) > li { font-size: 0.72em; } .qd-shell[data-shell='bare'] .qd-roster:has(> li:nth-child(51)) > li { font-size: 0.6em; } }