/* Overlay-Styles - Browserquelle für OBS / Moblin. Regeln: kein Blur, kein Parallax, keine Dauer-Animation, keine Scrollbar. Es wird nur gerendert, wenn sich Daten wirklich ändern. */ :root { --accent: #22d3ee; --accent-2: #a855f7; --card-bg: rgba(10, 13, 20, 0.82); --card-line: rgba(255, 255, 255, 0.1); --text: #ffffff; --muted: #a7b1c4; --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* Themes (kommen aus dem Admin-Bereich) */ html[data-theme="cyan"] { --accent: #22d3ee; --accent-2: #22d3ee; } html[data-theme="purple"] { --accent: #a855f7; --accent-2: #a855f7; } html[data-theme="minimal"] { --accent: #e9edf6; --accent-2: #e9edf6; --card-bg: rgba(8, 10, 15, 0.78); } /* Farbe pro Teilnehmer (Einzel-Widget und Roulette). Steht nach den Themes, damit sie im eigenen Widget gewinnt. */ html[data-accent="cyan"], [data-accent="cyan"] { --accent: #22d3ee; --accent-2: #22d3ee; } html[data-accent="purple"], [data-accent="purple"] { --accent: #a855f7; --accent-2: #a855f7; } html[data-accent="green"], [data-accent="green"] { --accent: #34d399; --accent-2: #34d399; } html[data-accent="pink"], [data-accent="pink"] { --accent: #f472b6; --accent-2: #f472b6; } html[data-accent="amber"], [data-accent="amber"] { --accent: #fbbf24; --accent-2: #fbbf24; } html[data-accent="red"], [data-accent="red"] { --accent: #f87171; --accent-2: #f87171; } * { box-sizing: border-box; } html, body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; background: transparent; } /* Optional per ?bg=dark - sonst transparent für OBS */ html.bg-dark, html.bg-dark body { background: #070910; } /* Aus den Einstellungen im Dashboard, gesetzt von public/widget-look.js. Der Hintergrund gehört an und an : OBS rendert beide, und färbt man nur eines, blitzt beim Laden kurz das andere durch. */ html[data-bg='solid'], html[data-bg='solid'] body { background: var(--widget-bg, #0b0e15); } body { font-family: var(--font); color: var(--text); user-select: none; cursor: none; } .stage { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.2vh; padding: 3vh 2vw; text-align: center; } .title { font-size: clamp(34px, 4.6vw, 92px); font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.05; background: linear-gradient(100deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } html[data-theme="minimal"] .title { background: none; color: var(--text); } .subtitle { font-size: clamp(15px, 1.55vw, 31px); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: -0.6vh; } .cards { display: flex; align-items: stretch; justify-content: center; gap: 2.2vw; margin-top: 2vh; width: 100%; max-width: 1720px; } .card { flex: 1 1 0; max-width: 520px; padding: 3.4vh 1.4vw 4vh; border: 2px solid var(--card-line); border-radius: 24px; background: var(--card-bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4vh; } .card.leader { border-color: var(--accent); } .card .name { font-size: clamp(18px, 1.9vw, 40px); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .card.leader .name { color: var(--text); } .card .wins { font-size: clamp(64px, 8.6vw, 172px); font-weight: 800; line-height: 0.95; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--text); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55); } .card.leader .wins { color: var(--accent); } .card .label { font-size: clamp(11px, 0.85vw, 18px); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); } /* ---------- Einzel-Widget: /overlay/user/:id ---------- */ .stage[data-align='left'] { align-items: flex-start; } .stage[data-align='right'] { align-items: flex-end; } .stage[data-align='top'] { justify-content: flex-start; } .user-card { flex: 0 0 auto; min-width: 300px; max-width: none; border-color: var(--accent); } .user-card .wins { color: var(--accent); } .user-card .name { color: var(--text); } .user-card .result { margin-top: 0.6vh; padding-top: 1.2vh; border-top: 1px solid var(--card-line); width: 100%; font-size: clamp(14px, 1.15vw, 24px); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); } /* ---------- Roulette: /overlay/wheel/:id ---------- */ .wheel-stage { gap: 1.6vh; } .wheel-title { font-size: clamp(20px, 2.2vw, 44px); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); } .wheel-frame { position: relative; display: block; } .wheel-frame canvas { display: block; /* Nur dieses eine Element wird animiert - GPU-freundlich. */ transform: rotate(0deg); will-change: transform; } .wheel-pointer { position: absolute; top: -6px; left: 50%; margin-left: -16px; width: 0; height: 0; border-left: 16px solid transparent; border-right: 16px solid transparent; border-top: 28px solid var(--accent); z-index: 2; } .wheel-result { position: relative; z-index: 1; font-size: clamp(22px, 3vw, 56px); font-weight: 800; letter-spacing: 0.02em; color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.75); text-align: center; } /* Gewinner liegt auf dem Rad: 90 Prozent, genau in der Mitte. */ .wheel-reveal { position: absolute; top: 50%; left: 50%; z-index: 3; display: grid; place-items: center; width: 90%; height: 90%; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(0.84); } .wheel-reveal.is-an { opacity: 1; transform: translate(-50%, -50%) scale(1); transition: opacity 0.48s ease, transform 0.56s cubic-bezier(0.16, 0.84, 0.28, 1); } .wheel-reveal-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 50%, transparent), 0 14px 42px rgba(0, 0, 0, 0.48); } .wheel-reveal-bild.is-waffe { object-fit: contain; background: rgba(8, 12, 18, 0.72); } .wheel-reveal .wheel-label { position: relative; z-index: 1; } @media (prefers-reduced-motion: reduce) { .wheel-reveal.is-an { transition: none; } } /* Der eigene Text über dem Ergebnis, z.B. "Gewonnen:" */ .wheel-label { font-size: clamp(12px, 1.1vw, 20px); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); } /* Rahmen und Leuchten - abschaltbar über die Einstellungen. */ [data-frame='on'] .wheel-frame::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--accent) 40%, transparent); box-shadow: 0 0 34px color-mix(in srgb, var(--accent) 28%, transparent), inset 0 0 24px rgba(0, 0, 0, 0.5); pointer-events: none; } .wheel-name { font-size: clamp(13px, 1.1vw, 22px); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); } /* Sichtbarkeit für ?mode=onspin - nur Opacity, kein Layout-Reflow. */ .fade { opacity: 1; transition: opacity 0.35s ease; } .fade.hidden { opacity: 0; } /* ---------- Spiele-Liste: /overlay/games ---------- */ .games-card { min-width: 360px; max-width: 92vw; padding: 2.6vh 2vw; border: 2px solid var(--card-line); border-radius: 22px; background: var(--card-bg); text-align: left; } .games-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1.4vw; margin-bottom: 1.6vh; } .games-title { font-size: clamp(20px, 2.1vw, 42px); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); } .games-progress { font-size: clamp(16px, 1.6vw, 32px); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--accent); white-space: nowrap; } .games-sub { margin-top: -0.8vh; margin-bottom: 1.4vh; font-size: clamp(12px, 1.05vw, 21px); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .games-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.9vh; } .game-item { display: flex; align-items: center; gap: 1vw; font-size: clamp(16px, 1.7vw, 34px); font-weight: 700; color: var(--text); } .game-mark { flex: none; width: 1.15em; height: 1.15em; border: 2px solid var(--card-line); border-radius: 6px; display: grid; place-items: center; font-size: 0.72em; color: transparent; line-height: 1; } .game-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .game-count { flex: none; font-size: 0.78em; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--muted); } /* Erledigt: grün und durchgestrichen. */ .game-item.done .game-label { text-decoration: line-through; text-decoration-thickness: 0.08em; color: #34d399; } .game-item.done .game-count, .game-item.done .game-mark { color: #34d399; border-color: #34d399; } .game-item.hidden { display: none; } /* ---------- Timer: /overlay/timer/ID ---------- */ .timer-card { padding: 2.4vh 2.4vw; border: 2px solid var(--card-line); border-radius: 22px; background: var(--card-bg); text-align: center; } html[data-bg='transparent'] .timer-card { background: transparent; } .timer-card.plain { border: 0; background: none; padding: 0; } .timer-name { font-size: clamp(13px, 1.15vw, 24px); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.8vh; } .timer-value { font-size: clamp(44px, 6.4vw, 132px); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; color: var(--accent); } /* Ziel überschritten bzw. erreicht - deutlich, aber ohne Animation. */ .timer-card.over .timer-value { color: #fbbf24; } .timer-card.done .timer-value { color: #34d399; } .timer-end { margin-top: 0.9vh; font-size: clamp(15px, 1.5vw, 30px); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #34d399; } .subathon-toast { position: fixed; top: 50%; right: 4vw; max-width: 36vw; padding: 1.1vh 1.6vw; border-radius: 16px; background: rgba(7, 10, 18, 0.55); font-size: clamp(18px, 2.2vw, 42px); font-weight: 800; letter-spacing: 0.02em; line-height: 1.15; color: #34d399; pointer-events: none; opacity: 0; transform: translateX(36px) translateY(-50%); } .subathon-toast.is-links { right: auto; left: 4vw; transform: translateX(-36px) translateY(-50%); } .subathon-toast.is-an { opacity: 1; transform: translateX(0) translateY(-50%); transition: opacity 0.4s ease, transform 0.4s ease; } .subathon-toast.is-klar { background: transparent; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7); } /* ---------- Zähler: /ov/:id ---------- */ .counter-card { padding: 2.4vh 2.4vw; border: 2px solid var(--card-line); border-radius: 22px; background: var(--card-bg); text-align: center; } .counter-card.plain { border: 0; background: none; padding: 0; } .counter-name { font-size: clamp(13px, 1.15vw, 24px); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.8vh; } .counter-value { font-size: clamp(44px, 6.4vw, 132px); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; color: var(--accent); } .counter-ziel { margin-top: 0.9vh; font-size: clamp(13px, 1.2vw, 22px); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .counter-card.has-ziel::after { display: block; width: var(--ziel, 0%); height: 6px; margin: 1.2vh auto 0; border-radius: 999px; background: var(--accent); content: ""; transform-origin: left center; } .counter-card.is-tick .counter-value { animation: counter-tick 280ms ease; } @keyframes counter-tick { from { transform: scale(1.08); opacity: 0.7; } to { transform: scale(1); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .counter-card.is-tick .counter-value { animation: none; } } /* ---------- Info-Popups: /overlay/announcements ---------- */ .ad-wrap { position: fixed; inset: 0; display: flex; padding: 3vh 2.4vw; pointer-events: none; } .ad-wrap[data-position^='top'] { align-items: flex-start; } .ad-wrap[data-position^='bottom'] { align-items: flex-end; } .ad-wrap[data-position$='left'] { justify-content: flex-start; } .ad-wrap[data-position$='center'] { justify-content: center; } .ad-wrap[data-position$='right'] { justify-content: flex-end; } .ad-card { max-width: 40vw; padding: 1.8vh 1.6vw; border: 2px solid var(--accent); border-left-width: 8px; border-radius: 16px; background: var(--card-bg); opacity: 0; transform: translateY(10px); transition: opacity 0.28s ease, transform 0.28s ease; } .ad-card.show { opacity: 1; transform: translateY(0); } .ad-title { font-size: clamp(13px, 1.05vw, 21px); font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.5vh; } .ad-text { font-size: clamp(17px, 1.6vw, 33px); font-weight: 700; line-height: 1.3; color: var(--text); } /* ---------- Vorschau-Modus (?preview=1) ---------- */ html.preview-flash body { outline: 4px solid var(--accent); outline-offset: -4px; } /* Kurzer Impuls nur beim Wechsel einer Zahl - keine Endlos-Animation. */ .wins.bump { animation: bump 220ms ease-out; } @keyframes bump { 0% { transform: scale(1); } 45% { transform: scale(1.11); } 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .wins.bump { animation: none; } } /* ---------- Outro ---------- */ .outro { position: relative; width: 100vw; height: 100vh; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity var(--outro-in-ms, 800ms) var(--outro-ease, ease-out); } .outro.is-on { opacity: 1; } .outro.is-out { opacity: 0; transition-duration: var(--outro-out-ms, 900ms); } .outro-bg { position: absolute; inset: 0; overflow: hidden; background: var(--outro-bg, transparent); } .outro-bg-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); opacity: 0; } .outro[data-outro-bg='cover'] .outro-bg-cover { opacity: 1; } .outro-bg-dim { position: absolute; inset: 0; opacity: 0; background: #000; pointer-events: none; } .outro[data-outro-bg='cover'] .outro-bg-dim { opacity: var(--outro-bg-dim, 0.48); } .outro-info, .outro-lyrics, .outro-bar { position: absolute; inset: auto; pointer-events: none; } .outro-lyrics { display: var(--outro-lyrics-an, flex); left: var(--outro-lyrics-x, 10%); top: var(--outro-lyrics-y, 16%); width: var(--outro-lyrics-w, 80%); height: var(--outro-lyrics-h, 54%); flex-direction: column; justify-content: center; gap: 0.35em; overflow: hidden; text-align: var(--outro-lyrics-align, center); font-family: var(--outro-lyrics-font, Georgia, serif); font-size: var(--outro-lyrics-size, 42px); font-weight: var(--outro-lyrics-weight, 500); letter-spacing: var(--outro-lyrics-tracking, 0); line-height: var(--outro-lyrics-leading, 1.25); text-transform: var(--outro-lyrics-transform, none); } .outro-info { display: var(--outro-info-an, flex); left: var(--outro-info-x, 4%); top: var(--outro-info-y, 78%); width: var(--outro-info-w, 48%); height: var(--outro-info-h, 16%); align-items: center; gap: var(--outro-gap, 24px); overflow: hidden; } .outro-cover-wrap { display: var(--outro-cover-show, flex); width: var(--outro-cover-size, 88px); height: var(--outro-cover-size, 88px); flex: 0 0 var(--outro-cover-size, 88px); border-radius: var(--outro-cover-radius, 10px); overflow: hidden; box-shadow: var(--outro-cover-shadow, none); } .outro-cover { width: 100%; height: 100%; object-fit: cover; } .outro-title { color: var(--outro-primary, #fff); font-family: var(--outro-title-font, system-ui, sans-serif); font-size: var(--outro-title-size, 28px); font-weight: var(--outro-title-weight, 650); letter-spacing: var(--outro-title-tracking, 0); line-height: var(--outro-title-leading, 1.15); text-align: var(--outro-title-align, left); text-transform: var(--outro-title-transform, none); text-shadow: var(--outro-title-shadow, none), var(--outro-title-glow, none); } .outro-artist, .outro-album { margin-top: 4px; color: var(--outro-secondary, #ccc); font-family: var(--outro-artist-font, system-ui, sans-serif); font-size: var(--outro-artist-size, 18px); font-weight: var(--outro-artist-weight, 500); letter-spacing: var(--outro-artist-tracking, 0); line-height: var(--outro-artist-leading, 1.2); text-align: var(--outro-artist-align, left); text-transform: var(--outro-artist-transform, none); text-shadow: var(--outro-artist-shadow, none), var(--outro-artist-glow, none); } .outro-album { opacity: 0.7; font-size: calc(var(--outro-artist-size, 18px) * 0.85); } .outro-bar { display: var(--outro-bar-an, flex); left: var(--outro-bar-x, 4%); top: var(--outro-bar-y, 95.2%); width: var(--outro-bar-w, 92%); height: var(--outro-bar-h, 1.6%); border-radius: 2px; background: rgba(255, 255, 255, 0.16); overflow: hidden; } .outro-bar-fill { height: 100%; width: var(--outro-progress, 0%); background: var(--outro-accent, #7ec8c8); transform: translateZ(0); } .outro-extras { position: absolute; inset: 0; pointer-events: none; } .outro-extra { position: absolute; box-sizing: border-box; overflow: hidden; pointer-events: none; } .outro-extra[data-typ='text'] { display: flex; align-items: center; white-space: pre-wrap; word-break: break-word; } .outro-extra[data-typ='panel'] { background: var(--extra-fill, #000); opacity: var(--extra-opacity, 0.42); border-radius: var(--extra-radius, 12px); } .outro-extra[data-typ='cover'] { border-radius: var(--extra-radius, 12px); } .outro-extra-cover { width: 100%; height: 100%; object-fit: cover; } .outro-line { color: var(--outro-lyric-next, rgba(255, 255, 255, 0.55)); text-shadow: var(--outro-lyrics-shadow, none), var(--outro-lyrics-glow, none); transition: opacity var(--outro-line-ms, 420ms) var(--outro-ease, ease-out), transform var(--outro-line-ms, 420ms) var(--outro-ease, ease-out); } .outro-line[data-role='prev'] { color: var(--outro-lyric-prev, rgba(255, 255, 255, 0.38)); transform: scale(0.92); } .outro-line[data-role='active'] { color: var(--outro-lyric-active, #fff); } .outro-line[data-role='next'] { opacity: 0.72; transform: scale(0.96); } .outro[data-outro-mode='fokus'] .outro-line[data-role='prev'], .outro[data-outro-mode='fokus'] .outro-line[data-role='next'] { opacity: 0; } .outro[data-outro-enter='slide'] .outro-line[data-role='active'] { transform: translateY(0); } .outro[data-outro-enter='scale'] .outro-line[data-role='active'] { transform: scale(1); } .outro[data-outro-idle='1'] .outro-info { animation: outro-atmen 4.8s var(--outro-ease, ease-out) infinite; } .outro[data-outro-bounce='1'] .outro-line[data-role='active'] { animation: outro-puls 1.2s var(--outro-ease, ease-out) infinite; } .outro-line-base, .outro-line-fill { display: block; } .outro-line-fill { position: absolute; left: 0; top: 0; width: var(--outro-fill, 0%); overflow: hidden; color: var(--outro-accent, #7ec8c8); white-space: nowrap; } .outro-line { position: relative; } @keyframes outro-atmen { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.02); opacity: 0.92; } } @keyframes outro-puls { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } } @media (prefers-reduced-motion: reduce) { .outro, .outro-line, .outro-info { transition: none; animation: none; } }