Mise en forme des modèles

Mise en forme et variables CSS — Comment personnaliser l'apparence de la page d'attente à l'aide des propriétés CSS personnalisées.

Voir aussi : Balisage et structure des modèles | État et méthodes Vue

Coiffure

Architecture CSS

Les styles sont répartis en deux niveaux :

Thème (_ch-theme-auto.scss) — Couleurs, polices, ombres, effets. Génère automatiquement une palette complète à partir de 6 variables d'entrée. C'est ce que vous pouvez personnaliser.
Base (_ch-base.scss) — Mise en page, dimensions, positionnement, animations. Ne nécessite que rarement une personnalisation.

Variables d'entrée du thème

Vous pouvez les remplacer dans une feuille de style chargée après le bundle principal. Le thème détermine automatiquement toutes les autres couleurs.

: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 */
}

Ajoutez vos modifications dans une feuille de style après les styles principaux :

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

Amélioration progressive

Ce thème repose sur une approche à deux niveaux :

Solutions de secours statiques — Valeurs hexadécimales précalculées qui fonctionnent dans tous les navigateurs.
Dérivation dynamique — Dans les navigateurs prenant en charge oklch (de ...) (Chrome 119 et versions ultérieures, Firefox 128 et versions ultérieures, Safari 16.4 et versions ultérieures), toutes les couleurs dérivées sont calculées automatiquement à partir de vos saisies.

Toute variable dérivée peut toujours être redéfinie individuellement.

Référence sur les variables dérivées

Toutes les variables dérivées peuvent être redéfinies individuellement. Dans les navigateurs prenant en charge oklch (de ...) elles sont calculées automatiquement à partir des données saisies ci-dessus ; sinon, elles utilisent des valeurs hexadécimales prédéfinies.

Typographie

Variable	Par défaut	Description
`--ch-font-primary`	Plus Jakarta Sans	Police du corps du texte et des titres
`--ch-font-secondary`	JetBrains Mono	Numéro de position et chiffres du compte à rebours

Texte

Variable	Tiré de	Description
`--ch-text-primary`	`--ch-text`	Corps du texte
`--ch-text-secondary`	`--ch-text` 80%	Texte secondaire
`--ch-text-muted`	`--ch-text` 70%	Texte masqué / texte d'aide
`--ch-on-bg`	`--ch-bg`	Adaptation automatique de la couleur du texte (clair/foncé) en fonction de l'arrière-plan de la page
`--ch-on-bg-secondaire`	`--ch-on-bg` 65%	Texte secondaire sur l'arrière-plan de la page
`--ch-sur-surface`	`--ch-surface`	Affichage automatique du texte en clair ou en foncé sur la carte/le panneau
`--ch-sur-surface-secondaire`	`--ch-sur-surface` 65%	Texte secondaire sur la carte/le panneau
`--ch-on-surface-muted`	`--ch-sur-surface` 52%	Texte en gris sur la carte/le panneau

Contexte

Variable	Tiré de	Description
`--ch-bg-page`	`--ch-bg`	Arrière-plan de la page
`--ch-bg-card`	`--ch-surface`	Arrière-plan de la carte
`--ch-bg-inset`	`--ch-surface` assombri	Arrière-plan de l'encart
`--ch-bg-input`	`--ch-surface`	Arrière-plan du champ de saisie
`--ch-bg-surface`	`--ch-surface` + `--ch-bg` 50/50	Surface intermédiaire

Frontières

Variable	Tiré de	Description
`--ch-border`	`--ch-on-bg` 12%	Couleur par défaut de la bordure
`--ch-border-focus`	`--ch-marque-secondaire`	Couleur de la bague de mise au point

Accent

Variable	Tiré de	Description
`--ch-accent`	`--ch-brand-primary`	Couleur d'accent (titres, pastille de contenu)
`--ch-accent-hover`	`--ch-accent` assombri	État de survol de l'accent
`--ch-accent-glow`	`--ch-brand-primary` Opacité de 25 %	Effet lumineux d'accentuation
`--ch-on-accent`	`--ch-accent`	Affichage automatique du texte en clair ou en foncé selon la couleur d'accentuation

Couleurs d'état

Variable	Tiré de	Description
`--ch-status-green`	Saisie	Entrée d'état vert (allumée)
`--ch-status-amber`	Saisie	Entrée d'état « ambre » (lumineuse)
`--ch-status-red`	Saisie	Entrée d'état rouge (allumée)
`--ch-success`	`--ch-status-green` assombri	Texte vert « AA-safe »
`--ch-avertissement`	`--ch-status-amber` assombri	Texte en ambre « AA-safe »
`--ch-danger`	`--ch-status-red` assombri	Texte rouge « AA-safe »
`--ch-success-glow`	`--ch-status-green` Opacité de 30 %	Lueur verte
`--ch-warning-glow`	`--ch-status-amber` Opacité de 20 %	Lueur ambrée
`--ch-danger-glow`	`--ch-status-red` Opacité de 20 %	Lueur rouge

Boutons

Variable	Tiré de	Description
`--ch-btn-bg`	`--ch-marque-secondaire`	Arrière-plan du bouton principal
`--ch-btn-text`	`--ch-btn-bg`	Texte du bouton « Clair/Foncé » (réglage automatique)
`--ch-btn-hover`	`--ch-btn-bg` assombri	Survol du bouton principal
`--ch-btn-disabled-bg`	`--ch-btn-bg` allégé	Arrière-plan du bouton désactivé
`--ch-btn-secondary-bg`	transparent	Arrière-plan du bouton secondaire
`--ch-btn-text-secondaire`	`--ch-text-secondary`	Texte du bouton secondaire
`--ch-btn-secondary-border`	`--ch-border`	Bordure du bouton secondaire
`--ch-btn-secondary-hover-bg`	`--ch-on-bg` 4%	Survol du bouton secondaire

Barre de progression

Variable	Tiré de	Description
`--ch-progress-bg`	`--ch-on-bg` 8%	Contexte de la piste
`--ch-progress-dark`	`--ch-progress-color` assombri	Filtre gradué foncé
`--ch-progress-light`	`--ch-progress-color` allégé	Filtre de lumière à dégradé
`--ch-progress-gradient`	contrastes entre l'obscurité et la lumière	Dégradé de remplissage animé

Proximité de position

Variable	Tiré de	Description
`--ch-position-far`	`--ch-text-primary`	Couleur du numéro de position (au loin)
`--ch-position-mid`	`--ch-text-secondary`	Couleur du numéro de position (au milieu)
`--ch-position-near`	`--ch-brand-primary`	Couleur du numéro de position (à proximité)
`--ch-position-soon`	`--ch-success`	Couleur du numéro de position (on y est presque)

Boîtes de message

Variable	Tiré de	Description
`--ch-message-warning-bg`	`--ch-avertissement` 8%	Arrière-plan du message d'avertissement
`--ch-message-warning-border`	`--ch-avertissement` 20%	En-tête du message d'avertissement
`--ch-message-danger-bg`	`--ch-danger` 8%	Arrière-plan du message d'alerte
`--ch-message-danger-border`	`--ch-danger` 20%	En-tête de message d'alerte

En-tête et pied de page

Variable	Tiré de	Description
`--ch-header-bg`	`--ch-bg`	Arrière-plan de l'en-tête
`--ch-on-header-bg`	`--ch-header-bg`	Texte d'en-tête clair/foncé automatique
`--ch-on-header-bg-secondary`	`--ch-on-header-bg` 65%	Texte de l'en-tête secondaire
`--ch-footer-bg`	`--ch-bg`	Arrière-plan du pied de page
`--ch-on-footer-bg`	`--ch-footer-bg`	Texte du pied de page : clair/foncé (réglage automatique)
`--ch-on-footer-bg-secondary`	`--ch-on-footer-bg` 65%	Texte du pied de page secondaire

Carte et compte à rebours

Variable	Tiré de	Description
`--ch-card-radius`	`--ch-border-radius` * 2	Rayon d'angle de la carte
`--ch-card-shadow`	`--ch-brand-primary` teinté	Ombre de la boîte à cartes
`--ch-countdown-shadow`	`--ch-brand-primary` teinté	Ombre de l'unité de compte à rebours

Outils de pied de page

Variable	Tiré de	Description
`--ch-token-bg`	`--ch-on-bg` 4%	Arrière-plan du badge symbolique
`--ch-token-hover-bg`	`--ch-on-bg` 8%	Effet au survol du badge de jeton
`--ch-poll-bg`	`--ch-on-bg` 4%	Suivi de la durée du sondage
`--ch-poll-gradient`	progression sombre + couleur	Remplissage du dégradé du minuteur de sondage

Référence des principales classes CSS

Classe	Objectif
`ch-card`	Boîtier principal pour cartes
`états-de-file-d'attente-ch`	Conteneur pour le compte à rebours et le contenu de la file d'attente active
`ch-état-message`	Conteneur de messages d'état (bloqué / salle pleine)
`ch-état-message.ch-état-danger`	État bloqué (rouge)
`ch-état-message.ch-état-avertissement`	État « Salle pleine » (orange)
`ch-boîte-de-message`	Panneau de message au-dessus de la carte
`ch-form-section`	Zone de formulaire avec séparateur de bordure supérieure
`ch-priorité-section`	Formulaire de code de priorité (fond en arrière-plan)
`ch-section-e-mail`	Formulaire de contact par e-mail (hors carte)
`ch-envoi-par-e-mail`	Barre de défilement lors de l'envoi d'un e-mail
`ch-groupe-d'entrée`	Ligne Flex pour le champ de saisie + bouton(s)
`ch-entrée`	Champ de saisie de texte/e-mail
`ch-btn`	Bouton principal
`ch-btn-sm`	Version avec petit bouton
`ch-btn-secondaire`	Bouton secondaire (contouré)
`ch-btn-change`	Modifier l'espacement entre les boutons d'e-mail
`ch-form-feedback`	Ligne de message de retour d'information
`ch-form-feedback.ch-success`	Retour d'expérience positif
`ch-form-feedback.ch-error`	Signalement d'erreur
`ch-stock-badge`	Indicateur boursier
`ch-nombre-d'actions`	Comprimé de référence
`ch-stock-badge.ch-stock-low`	Stock faible
`ch-stock-badge.ch-stock-zero`	État en rupture de stock
`ch-progress-container`	Conteneur pour barre de progression (largeur maximale limitée)
`ch-barre-de-progression`	Piste (barre d'arrière-plan)
`ch-progress-fill`	Barre de remplissage (dégradé animé)
`ch-progress-bar.ch-progress-mid`	Lueur à mi-parcours
`ch-barre-de-progression.ch-barre-de-progression-haute`	Une lueur plus intense à mesure que l'on avance
`ch-barre-de-progression.ch-progression-presque-terminée`	Lueur pulsatoire en voie d'achèvement
`ch-progression-info`	Texte concernant le devis et l'heure d'arrivée prévue sous la barre
`ch-spinner`	Icône de chargement
`ch-text-shimmer`	Animation de texte scintillant
`ch-session-info`	Texte d'information sur la session

Classes CSS obligatoires

Votre modèle doit inclure les classes structurelles suivantes :

/* 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;
}

Animations d'entrée

Les éléments utilisent des animations d'entrée décalées via ch-enter et ch-stagger-N classes. Chaque niveau de décalage ajoute un délai de 0,1 s.

<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>

Coiffure#

Architecture CSS#

Variables d'entrée du thème#

Amélioration progressive#

Référence sur les variables dérivées#

Typographie#

Texte#

Contexte#

Frontières#

Accent#

Couleurs d'état#

Boutons#

Barre de progression#

Proximité de position#

Boîtes de message#

En-tête et pied de page#

Carte et compte à rebours#

Outils de pied de page#

Référence des principales classes CSS#

Classes CSS obligatoires#

Animations d'entrée#