/* ========================================================= components.css – die Bauteile, die jede Seite gleich zeichnet Knopf, Abzeichen, Pille und Avatar standen zwangsläufig mehrfach im Repo: das Dashboard lädt `style.css`, die Verkaufsseite `landing.css`, die Statusseite beide plus `status.css`. Seit Runde 9 sind das vier Blätter – und die Gleichheit hielten nur Tests fest, die Werte vergleichen. Ein Test, der zwei Kopien gleich hält, ist besser als nichts; **eine** Kopie ist besser als der Test. Geladen **nach `tokens.css`** (die Werte kommen von dort) und **vor dem Seitenblatt** – eine Seite darf eine Variante überschreiben, und sie tut es: `.btn-primary` trägt im Dashboard den Verlauf, auf der Verkaufsseite die flache Füllung. Hier steht nur, was **überall gleich** ist. Was eine Seite allein hat, bleibt in ihrem Blatt: `.btn-primary`, `.btn-ghost`, `.btn-danger`, `.btn-round` und der Druckblock im Dashboard, `.btn-pfeil` und `.btn-status` auf der Verkaufsseite. Die Rechtstexte laden diese Datei nicht – sie sind Fließtext und benutzen kein einziges dieser Bauteile. Erlaubt sind ausschließlich Token aus `tokens.css`. `style.css` überschreibt einige davon (`--surface-2`, `--text`, `--muted`) für das Dashboard – definiert ist jedes aber auch öffentlich, sonst fiele die Regel auf der Verkaufsseite lautlos aus. ========================================================= */ /* ------------------------------------------------------------- Knöpfe Hier standen zwei Systeme nebeneinander. `.btn-small` war keine Größe von `.btn`, sondern eine eigenständige Regel weiter unten – 30-mal ohne `.btn` benutzt, `.btn` 25-mal ohne sie. Wo beide zusammentrafen, gewann schlicht die spätere Regel: - `btn btn-ghost btn-small` (8×) bekam von `.btn-small` wieder `border: none` und eine Füllung – der Umriss-Knopf sah aus wie ein gefüllter, „Suche aufheben" wie „Suchen". - `btn btn-primary btn-small` (3×, darunter „Ausführen" in der Mod-Queue) verlor den Verlauf an `.btn-small`s Füllung. Die wichtigste Aktion der Seite sah aus wie eine Nebensache. - `class="btn"` allein (Antwort im Ticket) hatte gar keine Fläche: weiße Schrift auf der grauen Vorgabefläche des Browsers. Jetzt eine Basis und drei Achsen, die sich nicht ins Gehege kommen – Fläche, Größe, Form. Eine Fläche gehört immer dazu: Fläche .btn-primary | .btn-neutral | .btn-ghost | .btn-danger Größe (Vorgabe) | .btn-sm | .btn-lg Form .btn-round (der 22-px-Kreis in Listen) Festgenagelt in `tests/test_knoepfe.py`. */ .btn { /* `inline-flex` statt `inline-block`: der Abstand zwischen Icon und Beschriftung kommt damit aus `gap` und muss nicht als Rand am Icon hängen (das traf sonst auch Icons ohne Beschriftung). */ display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); /* Waagerecht zwei Stufen mehr als senkrecht – ein Knopf mit gleichem Abstand ringsum wirkt gedrungen. */ padding: var(--sp-3) var(--sp-5); border-radius: var(--radius-md); /* Durchsichtige Kante statt gar keiner: sonst wäre der Umriss-Knopf 2 px höher als der gefüllte daneben. */ border: 1px solid transparent; font: inherit; font-size: var(--fs-sm); font-weight: 700; line-height: 1.2; white-space: nowrap; cursor: pointer; color: #fff; transition: transform var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease); } /* ---- Größe */ .btn-sm { padding: var(--sp-1) var(--sp-3); font-size: var(--fs-xs); border-radius: var(--radius-sm); } .btn-lg { padding: var(--sp-4) var(--sp-6); font-size: var(--fs-md); } /* ---- Fläche. Nur die neutrale steht hier: sie ist auf beiden Seiten dieselbe. `.btn-primary` und `.btn-ghost` sind es **nicht** (Verlauf gegen flache Füllung) und stehen deshalb je im Seitenblatt. `color` muss mit: die Basis setzt Weiß, weil die gefüllten Flächen es tragen. Dieser Knopf hat keine eigene Farbe, sondern eine Aufhellung des Untergrunds – im hellen Thema wäre das weiße Schrift auf Grau. */ .btn-neutral { background: var(--tint-3); color: var(--text); } .btn-neutral:hover { background: var(--tint-4); } /* Ein Knopf, der nicht kann, hebt sich auch nicht an. */ .btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; } .btn:disabled:hover, .btn[disabled]:hover { transform: none; } /* ------------------------------------------------------------- Badges: eine Fläche, sechs Bedeutungen Dieselbe Geschichte wie beim Knopf: `.badge` stand zweimal im Stylesheet – hier und 70 Zeilen weiter unten, wo die zweite Regel Schriftgröße und Umbruch der ersten überschrieb. Daneben lagen zwei Sätze Varianten, die dasselbe meinten und es verschieden machten: `.badge-on/-off/-wait` färbten **nur die Schrift** und behielten die violette Fläche der Basis („Online" war grüne Schrift auf einer Markenpille), `.badge-green/-yellow/-red` färbten Fläche, Kante und Schrift. Der Druckblock kannte nur den ersten Satz. Die Namen sagen jetzt die **Bedeutung**, nicht die Farbe: ein Hell-Design tauscht Farbwerte, keine Klassennamen. Ohne Variante ist die Pille neutral – das ist der Regelfall (Zähler hinter einer Überschrift, Aktionsname im Protokoll, „Bot"). ------------------------------------------------------------- */ .badge { display: inline-block; padding: var(--sp-0) var(--sp-3); border-radius: var(--radius-pill); background: var(--primary-bg); border: 1px solid var(--primary-border); font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; color: var(--text); } .badge-on { background: var(--success-bg); border-color: var(--success-border); color: var(--success-text); } .badge-off { background: var(--tint-2); border-color: var(--border-soft); color: var(--muted); } .badge-wait { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-text); } .badge-danger { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-text); } .badge-info { background: var(--info-bg); border-color: var(--info-border); color: var(--info-text); } /* Eine Pille, die schaltet (Befehl an/aus): der Knopf bringt Fläche, Rand und Schriftart des Browsers mit. Vorher stand das als `style="background:none;border:none;cursor:pointer"` im Template. */ button.badge { cursor: pointer; font-family: inherit; } /* Eine Pille, die irgendwohin führt (Zustand auf der Serverkarte: „2 Fälle warten" → Mod-Queue). Sie behält die Farbe ihres Zustands – die sagt, wie dringend es ist; dass man klicken kann, sagt die Kante beim Zeigen. */ a.badge { text-decoration: none; transition: border-color var(--motion-fast) var(--ease); } a.badge:hover { border-color: currentColor; } /* ------------------------------------------------------------- Pillenreihe: wenige Möglichkeiten, eine davon ist aktiv Fünfmal dasselbe Bauteil, fünfmal eigene Werte: der Zeitraum der Statistik (`.range-pill`), der Zeitraum über den Listen (`.filter-knopf`), der Statusfilter der Mod-Queue (der stand als `