Gestaltung von Vorlagen

Styling & CSS-Variablen – So gestalten Sie den Warteraum mit benutzerdefinierten CSS-Eigenschaften.

Siehe auch: Template-Markup und -Struktur | Vue-Zustand und -Methoden

Styling

CSS-Architektur

Stile sind in zwei Ebenen unterteilt:

Thema (_ch-theme-auto.scss) — Farben, Schriftarten, Schatten, Effekte. Leitet automatisch eine vollständige Palette aus 6 Eingabevariablen ab. Das ist es, was Sie anpassen können.
Basis (_ch-base.scss) — Layout, Größenanpassung, Positionierung, Animationen. Muss selten angepasst werden.

Themen-Eingabevariablen

Überschreiben Sie diese in einem Stylesheet, das nach dem Haupt-Bundle geladen wird. Das Theme leitet alle anderen Farben automatisch ab.

:root {
  --ch-brand-primary:    #424242;  /* Title, accent, stock pill */
  --ch-brand-secondary:  #4b4b4b;  /* Buttons, focus rings */
  --ch-bg:               #FFFFFF;  /* Page background */
  --ch-text:             #1C1917;  /* Main text colour */
  --ch-surface:          #F0F4F8;  /* Card / panel backgrounds */
  --ch-progress-color:   #004f84;  /* Progress bar base colour (optional) */
  --ch-border-radius:    12px;    /* Base radius — all radii scale from this */
}

Fügen Sie Ihre Überschreibungen in einem Stylesheet hinter den Hauptstilen ein:

<link rel="stylesheet" href="crowdhandler-styles.css">
<link rel="stylesheet" href="my-overrides.css">

Progressive Verbesserung

Das Thema verfolgt einen zweistufigen Ansatz:

Statische Fallbacks – Vorab berechnete Hex-Werte, die in allen Browsern funktionieren.
Dynamische Ableitung — In Browsern, die oklch (aus …) (Chrome 119+, Firefox 128+, Safari 16.4+), alle abgeleiteten Farben werden automatisch anhand Ihrer Eingaben berechnet.

Jede abgeleitete Variable kann weiterhin individuell überschrieben werden.

Referenz zu abgeleiteten Variablen

Alle abgeleiteten Variablen können individuell überschrieben werden. In Browsern, die oklch (aus …) Sie werden automatisch aus den oben genannten Eingaben berechnet; andernfalls werden statische Hex-Ausweichwerte verwendet.

Typografie

Variable	Standard	Beschreibung
`--ch-font-primary`	Plus Jakarta Sans	Schriftart für Fließtext und Überschriften
`--ch-font-secondary`	JetBrains Mono	Positionsnummer und Ziffern des Countdowns

Text

Variable	Abgeleitet von	Beschreibung
`--ch-text-primary`	`--ch-text`	Haupttext
`--ch-text-secondary`	`--ch-text` 80%	Zusatztext
`--ch-text-muted`	`--ch-text` 70%	Ausgeblendet / Hilfetext
`--ch-on-bg`	`--ch-bg`	Text automatisch hell oder dunkel auf dem Seitenhintergrund anzeigen
`--ch-on-bg-secondary`	`--ch-on-bg` 65%	Zusatztext auf dem Seitenhintergrund
`--ch-on-surface`	`--ch-Oberfläche`	Automatische Anpassung der Textfarbe (hell/dunkel) auf Karte/Bedienfeld
`--ch-on-surface-secondary`	`--ch-on-surface` 65%	Zusatztext auf der Karte/Tafel
`--ch-on-surface-muted`	`--ch-on-surface` 52%	Ausgeblendeter Text auf Karte/Tafel

Hintergründe

Variable	Abgeleitet von	Beschreibung
`--ch-bg-page`	`--ch-bg`	Seitenhintergrund
`--ch-bg-card`	`--ch-Oberfläche`	Kartenhintergrund
`--ch-bg-inset`	`--ch-Oberfläche` verdunkelt	Hintergrund des eingefügten Feldes
`--ch-bg-input`	`--ch-Oberfläche`	Hintergrund des Eingabefelds
`--ch-bg-surface`	`--ch-Oberfläche` + `--ch-bg` 50/50	Zwischenfläche

Grenzen

Variable	Abgeleitet von	Beschreibung
`--ch-border`	`--ch-on-bg` 12%	Standardfarbe für Rahmen
`--ch-border-focus`	`--ch-brand-secondary`	Farbe des Fokusrings

Akzent

Variable	Abgeleitet von	Beschreibung
`--ch-Akzent`	`--ch-brand-primary`	Akzentfarbe (Überschriften, Stock-Pille)
`--ch-accent-hover`	`--ch-Akzent` verdunkelt	Akzent im Hover-Zustand
`--ch-accent-glow`	`--ch-brand-primary` 25 % Deckkraft	Akzent-Leuchteffekt
`--ch-on-accent`	`--ch-Akzent`	Text automatisch hell/dunkel bei Hervorhebung

Statusfarben

Variable	Abgeleitet von	Beschreibung
`--ch-status-green`	Eingabe	Grüner Status-Eingang (leuchtend)
`--ch-status-gelb`	Eingabe	Eingabe für Status „Gelb“ (hell)
`--ch-status-red`	Eingabe	Rote Status-Eingabe (leuchtend)
`--ch-success`	`--ch-status-green` verdunkelt	AA-safe-grüner Text
`--ch-warning`	`--ch-status-gelb` verdunkelt	AA-Safe-Text in Bernsteinfarbe
`--ch-Gefahr`	`--ch-status-red` verdunkelt	AA-safe roter Text
`--ch-success-glow`	`--ch-status-green` 30 % Deckkraft	Grünes Leuchten
`--ch-warning-glow`	`--ch-status-gelb` 20 % Deckkraft	Bernsteinfarbenes Leuchten
`--ch-Gefahr-Leuchten`	`--ch-status-red` 20 % Deckkraft	Rotes Leuchten

Schaltflächen

Variable	Abgeleitet von	Beschreibung
`--ch-btn-bg`	`--ch-brand-secondary`	Hintergrund der Hauptschaltfläche
`--ch-btn-text`	`--ch-btn-bg`	Text für die Schaltfläche „Hell/Dunkel“
`--ch-btn-hover`	`--ch-btn-bg` verdunkelt	Hover-Effekt für die Hauptschaltfläche
`--ch-btn-disabled-bg`	`--ch-btn-bg` aufgehellt	Hintergrund der deaktivierten Schaltfläche
`--ch-btn-secondary-bg`	transparent	Hintergrund der Sekundärtaste
`--ch-btn-secondary-text`	`--ch-text-secondary`	Text für die sekundäre Schaltfläche
`--ch-btn-secondary-border`	`--ch-border`	Rahmen der sekundären Schaltfläche
`--ch-btn-secondary-hover-bg`	`--ch-on-bg` 4%	Hover-Effekt bei sekundären Schaltflächen

Fortschrittsanzeige

Variable	Abgeleitet von	Beschreibung
`--ch-progress-bg`	`--ch-on-bg` 8%	Hintergrund der Strecke
`--ch-progress-dark`	`--ch-progress-color` verdunkelt	Dunkelstop mit Farbverlauf
`--ch-progress-light`	`--ch-progress-color` aufgehellt	Verlaufsblende
`--ch-progress-gradient`	dunkle + helle Blenden	Animierter Füllverlauf

Positionsnähe

Variable	Abgeleitet von	Beschreibung
`--ch-position-far`	`--ch-text-primary`	Farbe der Positionsnummer (weit)
`--ch-position-mid`	`--ch-text-secondary`	Farbe der Positionsnummer (Mitte)
`--ch-position-near`	`--ch-brand-primary`	Farbe der Positionsnummer (nahe)
`--ch-position-soon`	`--ch-success`	Farbe der Positionsnummer (fast fertig)

Meldungsfelder

Variable	Abgeleitet von	Beschreibung
`--ch-message-warning-bg`	`--ch-warning` 8%	Hintergrund der Warnmeldung
`--ch-message-warning-border`	`--ch-warning` 20%	Rahmen für Warnmeldung
`--ch-message-danger-bg`	`--ch-Gefahr` 8%	Hintergrund der Gefahrenmeldung
`--ch-message-danger-border`	`--ch-Gefahr` 20%	Rahmen für Gefahrenmeldung

Kopf- und Fußzeile

Variable	Abgeleitet von	Beschreibung
`--ch-header-bg`	`--ch-bg`	Hintergrund der Kopfzeile
`--ch-on-header-bg`	`--ch-header-bg`	Automatische Anpassung der Kopfzeilentextfarbe (hell/dunkel)
`--ch-on-header-bg-secondary`	`--ch-on-header-bg` 65%	Text der sekundären Überschrift
`--ch-footer-bg`	`--ch-bg`	Hintergrund der Fußzeile
`--ch-on-footer-bg`	`--ch-footer-bg`	Automatische Anpassung der Fußzeilentextfarbe (hell/dunkel)
`--ch-on-footer-bg-secondary`	`--ch-on-footer-bg` 65%	Text in der sekundären Fußzeile

Karte & Countdown

Variable	Abgeleitet von	Beschreibung
`--ch-card-radius`	`--ch-border-radius` * 2	Eckenradius der Karte
`--ch-card-shadow`	`--ch-brand-primary` getönt	Kartonschatten
`--ch-countdown-shadow`	`--ch-brand-primary` getönt	Schatten der Countdown-Einheit

Fußzeilen-Hilfsfunktionen

Variable	Abgeleitet von	Beschreibung
`--ch-token-bg`	`--ch-on-bg` 4%	Hintergrund des Token-Ausweises
`--ch-token-hover-bg`	`--ch-on-bg` 8%	Hover-Effekt für Token-Badge
`--ch-poll-bg`	`--ch-on-bg` 4%	Ablaufzeit der Umfrage
`--ch-poll-gradient`	Fortschritt dunkel + Farbe	Poll-Timer-Füllgradient

Übersicht über wichtige CSS-Klassen

Klasse	Zweck
`ch-Karte`	Hauptkartenbehälter
`ch-queue-states`	Wrapper für Countdown + Inhalte der aktiven Warteschlange
`ch-state-message`	Statusmeldungscontainer (blockiert / Raum voll)
`ch-state-message.ch-state-danger`	Blockierter Zustand (rot)
`ch-state-message.ch-state-warning`	Raum voll (gelb)
`ch-message-box`	Textfeld über der Karte
`ch-form-section`	Formularbereich mit Trennlinie am oberen Rand
`ch-priority-section`	Formular für den Prioritätscode (Hintergrund mit Einblendung)
`ch-E-Mail-Abschnitt`	E-Mail-Formular (außerhalb der Karte)
`ch-E-Mail-Übermittlung`	Spinner-Element beim Absenden einer E-Mail
`ch-Eingabegruppe`	Flex-Zeile für Eingabefeld + Schaltfläche(n)
`ch-Eingabe`	Eingabefeld für Text/E-Mail
`ch-btn`	Hauptschaltfläche
`ch-btn-sm`	Variante mit kleinem Knopf
`ch-btn-secondary`	Sekundäre Schaltfläche (umrandet)
`ch-btn-change`	Abstand zwischen den E-Mail-Schaltflächen ändern
`ch-form-feedback`	Zeile mit Rückmeldungsmeldung
`ch-form-feedback.ch-success`	Erfolgsrückmeldung
`ch-form-feedback.ch-error`	Fehlermeldung
`ch-stock-badge`	Aktienindikator
`ch-Lagerbestand`	Artikelnummer Pille
`ch-Lagerbestand-Abzeichen.ch-Lagerbestand-niedrig`	Lagerbestand niedrig
`ch-stock-badge.ch-stock-zero`	Ausverkaufter Zustand
`ch-progress-container`	Progress-Bar-Wrapper (mit Begrenzung der maximalen Breite)
`ch-fortschrittsbalken`	Spur (Hintergrundleiste)
`ch-progress-fill`	Füllbalken (animierter Farbverlauf)
`ch-progress-bar.ch-progress-mid`	Leuchten in der Mitte des Fortschritts
`ch-progress-bar.ch-progress-high`	Stärkeres Leuchten bei hohem Fortschritt
`ch-progress-bar.ch-progress-almost`	Das pulsierende Leuchten steht kurz vor der Vollendung
`ch-fortschrittsinfo`	Kostenvoranschlag und voraussichtliche Ankunftszeit unterhalb der Leiste
`ch-spinner`	Lade-Spinner
`ch-text-shimmer`	Text-Schimmer-Animation
`ch-session-info`	Text mit Informationen zur Sitzung

Erforderliche CSS-Klassen

Ihre Vorlage muss folgende Strukturklassen enthalten:

/* Screen reader only */
.ch-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Hidden until loaded */
#crowdhandler-template {
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

#crowdhandler-template.active {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  opacity: 1;
}

Eingangsanimationen

Elemente verwenden versetzte Einblendanimationen über ch-enter und ch-stagger-N Klassen. Jede Versatzstufe fügt eine Verzögerung von 0,1 s hinzu.

<div class="ch-logo ch-enter ch-stagger-1">...</div>
<div class="ch-header-row ch-enter ch-stagger-4">...</div>
<div class="ch-footer ch-enter ch-stagger-5">...</div>
<div class="ch-message-box ch-enter ch-stagger-6">...</div>

Styling#

CSS-Architektur#

Themen-Eingabevariablen#

Progressive Verbesserung#

Referenz zu abgeleiteten Variablen#

Typografie#

Text#

Hintergründe#

Grenzen#

Akzent#

Statusfarben#

Schaltflächen#

Fortschrittsanzeige#

Positionsnähe#

Meldungsfelder#

Kopf- und Fußzeile#

Karte & Countdown#

Fußzeilen-Hilfsfunktionen#

Übersicht über wichtige CSS-Klassen#

Erforderliche CSS-Klassen#

Eingangsanimationen#