/* ============================================================ * tc-live-now („Welche Partien laufen gerade?") * Streifen der aktuell laufenden Spiele mit pulsierendem LIVE-Badge * und Zuschauen-Link. Ergaenzt die Match-Toolbar tc-live-controls * (gleiche Glanz-/Puls-Sprache via --tc-highlight). Leer-Zustand, * wenn nichts live ist. * * Seit dem 11.09.2026 (#500, Tims Entscheidung B) DIE eine Darstellung * fuer diese Frage: eine Datenquelle, eine Darstellung, jeder Ort filtert * nach seinem System (Dashboard alle, Hubs nur ihr eigenes). Dafuer kamen * die zwei persoenlichen Faelle dazu, die bis dahin nur die Eigenbauten * zeigten — siehe den Abschnitt ganz unten. * Datei: css/components/live-now.css * ============================================================ */ .tc-live-now { display: flex; flex-direction: column; gap: var(--tc-space-3); } .tc-live-now__head { display: flex; align-items: center; gap: var(--tc-space-2); } .tc-live-now__title { margin: 0; font-family: var(--tc-font-display); font-size: var(--tc-text-lg); color: var(--tc-text-strong); } /* LIVE-Badge (pulsierend) - auch ausserhalb wiederverwendbar */ .tc-live-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: var(--tc-radius-full); background: rgba(var(--tc-highlight-rgb), 0.15); color: var(--tc-highlight); font-family: var(--tc-font-body); font-size: var(--tc-text-2xs); font-weight: var(--tc-weight-bold); text-transform: uppercase; letter-spacing: var(--tc-tracking-wide); } .tc-live-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tc-highlight); animation: tc-live-pulse 1.6s var(--tc-ease-default) infinite; } @keyframes tc-live-pulse { 0% { box-shadow: 0 0 0 0 rgba(var(--tc-highlight-rgb), 0.6); opacity: 1; } 70% { box-shadow: 0 0 0 6px rgba(var(--tc-highlight-rgb), 0); opacity: 0.7; } 100% { box-shadow: 0 0 0 0 rgba(var(--tc-highlight-rgb), 0); opacity: 1; } } /* Die Live-Karten der anderen. ⚠️ HIESS „STREIFEN" UND SCROLLTE WAAGERECHT — seit #500 bricht er um. Am Handy standen sonst die zweite und dritte Partie rechts ausserhalb des Bildes, und niemand wischt dorthin; der alte Dashboard-Banner zeigte alle untereinander (Vorher/Nachher nie aermer). Der Name bleibt, damit kein Aufrufer bricht. `min(…, 100%)` haelt die Spalte in schmalen Containern, sonst laeuft die Seite quer (§10, 1fr). */ .tc-live-now__strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: var(--tc-space-3); } .tc-live-card { min-width: 0; display: flex; flex-direction: column; gap: var(--tc-space-2); padding: var(--tc-space-3); background: var(--tc-bg-surface-1); border: 1px solid var(--tc-border-subtle); border-left: 3px solid var(--tc-highlight); border-radius: var(--tc-radius-md); } .tc-live-card__head { display: flex; align-items: center; gap: var(--tc-space-2); } .tc-live-card__sys { font-size: 1.1rem; flex-shrink: 0; } .tc-live-card__match { flex: 1; min-width: 0; font-family: var(--tc-font-body); font-size: var(--tc-text-sm); color: var(--tc-text-strong); } .tc-live-card__meta { font-size: var(--tc-text-xs); color: var(--tc-text-muted); } .tc-live-card__watch { align-self: flex-start; } /* Leer-Zustand (nichts live) */ .tc-live-now__empty { padding: var(--tc-space-4); border: 1px dashed var(--tc-border-default); border-radius: var(--tc-radius-md); color: var(--tc-text-muted); font-size: var(--tc-text-sm); text-align: center; } /* ============================================================ * PERSOENLICHE FAELLE, ABBRUCH, HAENGENDE PARTIEN (11.09.2026, #500) * ------------------------------------------------------------ * Die drei Eigenbauten (Dashboard-Banner, BB-Hub, Mordheim) zeigten * mehr als „andere spielen": Wer herausgefordert wurde, sah eine * Karte „X fordert dich heraus", wer selbst spielte, „Dein Spiel * laeuft". Beides sind Varianten der Live-Karte, keine neue * Komponente (Heuristik 3) — sie stehen in voller Breite UEBER dem * Streifen, weil sie den Leser meinen und nicht ein Ereignis. * * ⚠️ „WARTET" IST AUFMERKSAMKEIT, NICHT GEFAHR. Der alte Banner war * rot; Rot heisst hier Fehler oder Zerstoerung. Jemand wartet auf * dich — das verlangt eine Handlung, es ist kein Schaden. * ⚠️ `--tc-attention-rgb` gibt es nicht; die Stufen -bg/-border schon. * ============================================================ */ .tc-live-now__personal { display: flex; flex-direction: column; gap: var(--tc-space-2); } /* Im Hub steht die Anzeige zwischen Karten, die ihren Abstand selbst mitbringen (margin-bottom wie .hne). Das Dashboard hat einen eigenen Blockrhythmus (.dash-page > * + *) und braucht den Modifier nicht. Leer zeichnet LivePartien gar nichts — dann gibt es auch keinen Abstand. */ .tc-live-now--im-hub { margin: 0 0 var(--tc-space-5); } .tc-live-now__count { margin-left: auto; font-size: var(--tc-text-xs); color: var(--tc-text-muted); } /* Die persoenliche Karte: Zeile statt Spalte, bricht am Handy um. */ .tc-live-card--wartet, .tc-live-card--deine { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--tc-space-3); min-width: 0; padding: var(--tc-space-3) var(--tc-space-4); border-left-width: 4px; } .tc-live-card--wartet { background: var(--tc-attention-bg); border-color: var(--tc-attention-border); border-left-color: var(--tc-attention); animation: tc-live-wartet 2.4s var(--tc-ease-default) infinite; } .tc-live-card--deine { background: rgba(var(--tc-accent-rgb), 0.08); border-color: rgba(var(--tc-highlight-rgb), 0.35); border-left-color: var(--tc-highlight); } @keyframes tc-live-wartet { 0%, 100% { box-shadow: 0 0 0 0 var(--tc-attention-border); } 50% { box-shadow: 0 0 0 10px transparent; } } .tc-live-card--wartet .tc-live-card__sys, .tc-live-card--deine .tc-live-card__sys { font-size: 1.6rem; line-height: 1; } /* Basis 10rem: Symbol und Text bleiben am Handy in EINER Zeile, der Knopf bricht darunter. Mit einer breiteren Basis stand das Symbol allein ueber dem Text. */ .tc-live-card__body { flex: 1 1 10rem; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .tc-live-card__title { font-family: var(--tc-font-display); font-size: var(--tc-text-base); font-weight: var(--tc-weight-bold); color: var(--tc-text-strong); } .tc-live-card--wartet .tc-live-card__title { color: var(--tc-attention); } .tc-live-card--deine .tc-live-card__title { color: var(--tc-highlight); } .tc-live-card__score { padding: 0 var(--tc-space-1); font-variant-numeric: tabular-nums; font-weight: var(--tc-weight-bold); color: var(--tc-text-strong); } /* Nur in der persoenlichen Karte eine Zeile aus Stuecken (System-Badge, Halbzeit, Liga). Im Streifen bleibt __meta Fliesstext wie bisher. */ .tc-live-card__body .tc-live-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tc-space-2); } .tc-live-card__cta { flex-shrink: 0; } /* #767: „⏱️ Spieluhr" neben dem Hauptknopf der eigenen Partie. Gleich laut (secondary, wie „Weiterspielen") — am Handy ist die Uhr genau der Grund, die Karte anzutippen. */ .tc-live-card__uhr { flex-shrink: 0; } /* Am Handy steht der Knopf in einer eigenen Zeile und nimmt sie ganz (neben einem Abbruch-Knopf den Rest) — ein halb breiter Knopf unter dem Text sah aus wie verrutscht. Wie der alte Banner bei 600px. */ @media (max-width: 600px) { .tc-live-card--wartet .tc-live-card__cta, .tc-live-card--deine .tc-live-card__cta, .tc-live-card__uhr { flex: 1 1 auto; } /* #767: Mit „⏱️ Spieluhr" gibt es zwei Knöpfe — sie stehen gemeinsam in der zweiten Zeile, nicht einer rechts neben dem Text (sah dort aus wie eine Beschriftung). Der Text nimmt dafür die erste Zeile ganz. */ .tc-live-card:has(.tc-live-card__uhr) .tc-live-card__body { flex-basis: calc(100% - 3rem); } } /* Abbruch (nur Admin; die Rechte prueft der Server, #286). Er steht NEBEN dem Link, nie darin: ein