SPP UserandClaude Opus 5.5
43dc5b837a
- Stream-Übersicht unter /stream/<Zuschauercode> (1920x1080, Lobby, Veto, Spielstand) - Live-Stand, Rundenverlauf und Serienstand auf Match-Seite und Übersicht - Parser mit echten AMP-Logs geprüft: Game Over mit leerer Map-Gruppe, Match_Start vor der Aufwärmphase, veraltete Seitenzuordnung nach der Halbzeit - Nach Map-Ende automatisch nächste Map bzw. Abschluss der entschiedenen Serie - LOG_DEBUG zur Fehlersuche, README und .env.example ergänzt Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
168 lines
10 KiB
CSS
168 lines
10 KiB
CSS
/* ---------- Stream-Übersicht (1920×1080, skaliert) ---------- */
|
||
html.stream-mode, html.stream-mode body { background: #000; overflow: hidden; height: 100%; }
|
||
html.stream-mode.stream-transparent, html.stream-mode.stream-transparent body { background: transparent; }
|
||
|
||
.stream-viewport { position: fixed; inset: 0; overflow: hidden; }
|
||
.stream-stage { position: absolute; left: 50%; top: 50%; transform-origin: center center; }
|
||
|
||
.st-root {
|
||
position: relative; width: 100%; height: 100%; overflow: hidden;
|
||
display: grid; grid-template-rows: 104px 260px 1fr 190px 60px;
|
||
padding: 0 72px; color: var(--text); font-family: var(--body);
|
||
background:
|
||
radial-gradient(900px 600px at 0% 30%, rgba(52, 74, 153, .28), transparent 70%),
|
||
radial-gradient(900px 600px at 100% 30%, rgba(167, 42, 28, .26), transparent 70%),
|
||
#000;
|
||
}
|
||
.stream-transparent .st-root { background: transparent; }
|
||
/* Ohne Map-Leiste (Lobby, Veto) bekommt die Hauptfläche den Platz */
|
||
.st-root.no-maps { grid-template-rows: 104px 260px 1fr 60px; }
|
||
.phase-veto .st-veto-grid { align-items: stretch; }
|
||
.phase-veto .st-vmap { min-height: 420px; }
|
||
|
||
/* Kopfzeile */
|
||
.st-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 3px solid var(--brand-red); }
|
||
.st-logo { height: 58px; width: auto; }
|
||
.st-meta { display: flex; gap: 28px; font: 600 26px var(--display); color: var(--muted); }
|
||
.st-meta span + span { padding-left: 28px; border-left: 2px solid var(--line-strong); }
|
||
.st-clock { justify-self: end; display: flex; align-items: center; gap: 22px; font: 600 30px var(--display); font-variant-numeric: tabular-nums; }
|
||
.st-live {
|
||
display: inline-flex; align-items: center; gap: 10px; padding: 4px 16px 4px 12px; border-radius: 4px;
|
||
background: var(--brand-red); color: #fff; font: 700 24px var(--display);
|
||
}
|
||
.st-live::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: #fff; animation: st-blink 1.4s ease-in-out infinite; }
|
||
.st-offline { color: var(--pending); font-size: 22px; }
|
||
@keyframes st-blink { 50% { opacity: .25; } }
|
||
|
||
/* Teams und Serienstand */
|
||
.st-hero { display: grid; grid-template-columns: 1fr 380px 1fr; align-items: center; }
|
||
.st-team h1 {
|
||
margin: 0; font: 700 108px/0.95 var(--display); letter-spacing: -.01em;
|
||
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
|
||
}
|
||
.st-team-a { text-align: right; }
|
||
.st-team-a h1 { color: var(--team-a); }
|
||
.st-team-b h1 { color: var(--team-b); }
|
||
.st-center { position: relative; display: grid; place-items: center; height: 100%; }
|
||
/* Das rote X aus dem Logo als diagonaler Schnitt */
|
||
.st-slash {
|
||
position: absolute; width: 34px; height: 230px; background: var(--brand-red); transform: rotate(18deg);
|
||
border-radius: 6px; box-shadow: 0 0 60px rgba(167, 42, 28, .55); opacity: .9;
|
||
}
|
||
.st-series { position: relative; display: grid; grid-template-columns: 1fr 60px 1fr; align-items: center; gap: 0 34px; text-shadow: 0 4px 24px #000; }
|
||
.st-series span { font: 700 150px/1 var(--display); font-variant-numeric: tabular-nums; }
|
||
.st-series .a { text-align: right; color: var(--team-a); }
|
||
.st-series .b { color: var(--team-b); }
|
||
/* Der rote Schrägstrich übernimmt die Trennung zwischen den Ziffern */
|
||
.st-series .sep { visibility: hidden; }
|
||
.st-series small { grid-column: 1 / -1; text-align: center; font: 600 24px var(--display); color: var(--muted); margin-top: -6px; }
|
||
.st-vs { position: relative; font: 700 84px var(--display); color: #fff; text-shadow: 0 4px 30px #000; }
|
||
|
||
.st-main { min-height: 0; padding: 18px 0 24px; }
|
||
|
||
/* Lobby */
|
||
.st-lobby { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; gap: 24px 80px; height: 100%; }
|
||
.st-roster { padding: 30px 40px; background: rgba(17, 20, 30, .82); border-top: 6px solid var(--team-a); border-radius: 8px; }
|
||
.st-roster-B { border-top-color: var(--team-b); }
|
||
.st-roster h2 { font: 600 36px var(--display); color: var(--muted); margin-bottom: 18px; }
|
||
.st-roster ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
|
||
.st-roster li { display: flex; align-items: baseline; gap: 16px; font: 600 44px var(--display); color: var(--muted); }
|
||
.st-roster li.is-ready { color: var(--text); }
|
||
.st-roster li.is-ready::after { content: 'bereit'; font: 500 24px var(--body); color: var(--ok); }
|
||
.st-roster em { font: 500 22px var(--body); font-style: normal; color: var(--pending); }
|
||
.st-lobby-note { grid-column: 1 / -1; text-align: center; font: 600 34px var(--display); color: var(--muted); }
|
||
|
||
/* Veto */
|
||
.st-veto { display: grid; grid-template-rows: auto 1fr; gap: 26px; height: 100%; }
|
||
.st-turn {
|
||
justify-self: center; padding: 14px 40px; font: 600 40px var(--display); border-radius: 6px;
|
||
background: rgba(17, 20, 30, .85); border-left: 8px solid var(--team-a);
|
||
}
|
||
.st-turn-B { border-left-color: var(--team-b); }
|
||
.st-turn strong { color: var(--team-a); }
|
||
.st-turn-B strong { color: var(--team-b); }
|
||
.st-veto-grid { display: grid; grid-template-columns: repeat(var(--count), minmax(0, 1fr)); gap: 18px; align-items: stretch; }
|
||
.st-vmap { --by: var(--line-strong); position: relative; overflow: hidden; border-radius: 6px; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px; min-height: 0; }
|
||
.st-vmap.by-A { --by: var(--team-a); }
|
||
.st-vmap.by-B { --by: var(--team-b); }
|
||
.st-vmap .map-art::after { background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, .9)); }
|
||
.st-vmap-name, .st-vmap-status { position: relative; z-index: 2; }
|
||
.st-vmap-name { font: 700 46px/1 var(--display); text-shadow: 0 2px 12px #000; }
|
||
.st-vmap-status { font: 600 24px var(--display); color: var(--by); margin-top: 6px; min-height: 30px; }
|
||
.st-vmap.status-banned { filter: grayscale(.95) brightness(.5); }
|
||
.st-vmap.status-banned::after {
|
||
content: ''; position: absolute; inset: 0; z-index: 3;
|
||
background: linear-gradient(to top right, transparent calc(50% - 5px), var(--by) calc(50% - 5px), var(--by) calc(50% + 5px), transparent calc(50% + 5px));
|
||
}
|
||
.st-vmap.status-picked::before, .st-vmap.status-decider::before, .st-vmap.is-side::before {
|
||
content: ''; position: absolute; inset: 0; z-index: 3; border-radius: 6px; box-shadow: inset 0 0 0 6px var(--by);
|
||
}
|
||
.st-vmap.status-decider { --by: #fff; }
|
||
.st-vmap.is-side::before { animation: st-side 1.6s ease-in-out infinite; }
|
||
@keyframes st-side { 50% { box-shadow: inset 0 0 0 6px var(--pending); } }
|
||
|
||
/* Spielstand der aktuellen Map */
|
||
.st-board {
|
||
position: relative; overflow: hidden; height: 100%; border-radius: 10px;
|
||
display: grid; grid-template-rows: auto 1fr auto auto; justify-items: center; padding: 26px 48px 30px;
|
||
background: rgba(17, 20, 30, .7); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .06);
|
||
}
|
||
.st-board-art { opacity: .38; }
|
||
.st-board-art::after { background: linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .85)); }
|
||
.st-board > :not(.st-board-art) { position: relative; z-index: 1; }
|
||
.st-board-head { display: flex; align-items: baseline; gap: 26px; font: 600 30px var(--display); color: var(--muted); }
|
||
.st-board-head strong { font: 700 56px var(--display); color: var(--text); }
|
||
.st-board-state { color: var(--pending); }
|
||
.st-score { display: flex; align-items: center; gap: 40px; }
|
||
.st-score-team { display: flex; align-items: center; gap: 28px; }
|
||
.st-score .num { font: 700 230px/0.9 var(--display); font-variant-numeric: tabular-nums; min-width: 2ch; }
|
||
.st-score-team.a .num { color: var(--team-a); text-align: right; }
|
||
.st-score-team.b .num { color: var(--team-b); }
|
||
.st-score-team.won .num { text-shadow: 0 0 40px currentColor; }
|
||
.st-score-colon { font: 700 120px var(--display); color: var(--muted); }
|
||
.st-score .side-icon { filter: drop-shadow(0 4px 16px #000); }
|
||
.st-winner { font: 700 40px var(--display); color: var(--ok); margin-bottom: 8px; }
|
||
.st-rounds { width: 100%; display: flex; justify-content: center; }
|
||
.st-waiting { display: grid; place-items: center; height: 100%; font: 600 48px var(--display); color: var(--muted); }
|
||
|
||
/* Map-Leiste */
|
||
.st-maps { display: flex; gap: 18px; padding-bottom: 16px; }
|
||
.st-mapcard {
|
||
position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: 8px;
|
||
display: grid; align-content: end; padding: 14px 20px; border-bottom: 6px solid var(--map);
|
||
}
|
||
.st-mapcard .map-art::after { background: linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .9)); }
|
||
.st-mapcard > :not(.map-art) { position: relative; z-index: 1; }
|
||
.st-mapcard-no { font: 600 22px var(--display); color: var(--muted); }
|
||
.st-mapcard strong { font: 700 40px/1.05 var(--display); }
|
||
.st-mapcard-foot { font: 600 26px var(--display); color: var(--muted); min-height: 36px; }
|
||
.st-mapcard-score { display: inline-flex; gap: 10px; align-items: baseline; font-size: 38px; }
|
||
.st-mapcard-score b { font-weight: 700; color: var(--muted); }
|
||
.st-mapcard-score b.won.a { color: var(--team-a); }
|
||
.st-mapcard-score b.won.b { color: var(--team-b); }
|
||
.st-mapcard.is-playing .st-mapcard-score b.a { color: var(--team-a); }
|
||
.st-mapcard.is-playing .st-mapcard-score b.b { color: var(--team-b); }
|
||
.st-mapcard.is-pending, .st-mapcard.is-next { opacity: .65; }
|
||
.st-mapcard.is-playing { box-shadow: 0 0 0 4px var(--brand-red), 0 0 40px rgba(167, 42, 28, .5); }
|
||
|
||
/* Laufband */
|
||
.st-ticker { display: flex; align-items: stretch; margin: 0 -72px; background: #05060a; border-top: 2px solid var(--line); }
|
||
.st-ticker-label { display: flex; align-items: center; padding: 0 30px 0 72px; background: var(--brand-red); color: #fff; font: 700 26px var(--display); }
|
||
.st-ticker-text { display: flex; align-items: center; padding: 0 30px; font: 500 26px var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: st-in .5s ease-out; }
|
||
@keyframes st-in { from { opacity: 0; transform: translateY(8px); } }
|
||
|
||
.st-message { display: grid; place-items: center; align-content: center; gap: 24px; height: 100%; text-align: center; background: #000; }
|
||
.st-message img { height: 90px; }
|
||
.st-message h1 { font: 700 64px var(--display); margin: 0; }
|
||
.st-message p { font-size: 28px; color: var(--muted); }
|
||
|
||
/* Große Rundenleiste */
|
||
.round-strip-lg { gap: 6px; }
|
||
.round-strip-lg .round { width: 50px; height: 50px; border-radius: 5px; }
|
||
.round-strip-lg .round.break { margin-left: 22px; }
|
||
.round-strip-lg .reason-icon { width: 24px; height: 24px; }
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.st-live::before, .st-vmap.is-side::before, .st-ticker-text { animation: none; }
|
||
}
|