V2 Template Styling & CSS Variables

This feature is currently in beta. Documentation for Version 1 templates is here

Styling & CSS Variables — How to theme the waiting room with CSS custom properties.

See also: Template Markup & Structure | Vue State & Methods

Styling

Theme Input Variables

Override these in a stylesheet loaded after the ch-wait.css link. The theme derives all other colours automatically.

<link rel="stylesheet" >
<style>
:root {
  --ch-brand-primary:    #424242;  /* Title, accent, stock pill */
  --ch-brand-secondary:  #4b4b4b;  /* Buttons, focus rings */
  --ch-bg:               #FFFFFF;  /* Page background */
  --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 */
}
</style>

You can also add overrides in a stylesheet loaded after the main crowdhandler styles:

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

Derived Variables Reference

All derived variables can be individually overridden. In browsers supporting oklch(from ...) they are calculated automatically from the inputs above; otherwise they use static hex fallbacks.

Typography

Text

Backgrounds

Borders

Accent

Status Colours

Buttons

Progress Bar

Message Boxes

Header & Footer

Card & Countdown

Footer Utilities

Key CSS Classes Reference

Required CSS Classes

Your template must include these structural classes:

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

Entrance Animations

Elements use staggered entrance animations via ch-enter et ch-stagger-N classes. Each stagger level adds a 0.1s delay.

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