Stile e variabili CSS — Come personalizzare l'aspetto della sala d'attesa con le proprietà personalizzate CSS.
Vedi anche: Markup e struttura dei template | Stato e metodi di Vue
Styling#
Architettura CSS#
Gli stili sono suddivisi in due livelli:
- Tema (
_ch-theme-auto.scss) — Colori, caratteri, ombre, effetti. Deriva automaticamente una tavolozza completa da 6 variabili di input. Ecco cosa puoi personalizzare.
- Base (
_ch-base.scss) — Layout, dimensioni, posizionamento, animazioni. Raramente richiede personalizzazioni.
Variabili di input del tema#
È possibile sovrascriverli in un foglio di stile caricato dopo il bundle principale. Il tema ricava automaticamente tutti gli altri colori.
: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 */
}
Aggiungi le tue modifiche in un foglio di stile dopo gli stili principali:
<link rel="stylesheet" href="crowdhandler-styles.css">
<link rel="stylesheet" href="my-overrides.css">
Miglioramento progressivo#
Il tema adotta un approccio su due livelli:
- Soluzioni alternative statiche — Valori esadecimali precalcolati che funzionano su tutti i browser.
- Derivazione dinamica — Nei browser che supportano
oklch (da ...) (Chrome 119 e versioni successive, Firefox 128 e versioni successive, Safari 16.4 e versioni successive), tutti i colori derivati vengono calcolati automaticamente in base ai dati inseriti.
È comunque possibile sovrascrivere singolarmente qualsiasi variabile derivata.
Riferimento alle variabili derivate#
Tutte le variabili derivate possono essere sovrascritte singolarmente. Nei browser che supportano oklch (da ...) vengono calcolati automaticamente in base ai dati inseriti sopra; in caso contrario, utilizzano valori esadecimali predefiniti.
Tipografia#
| Variabile |
Predefinito |
Descrizione |
--ch-font-primary |
Plus Jakarta Sans |
Carattere del corpo del testo e dell'intestazione |
--ch-font-secondary |
JetBrains Mono |
Numero della posizione e cifre del conto alla rovescia |
Testo#
| Variabile |
Tratto da |
Descrizione |
--ch-text-primary |
--ch-text |
Testo principale |
--ch-text-secondary |
--ch-text 80% |
Testo secondario |
--ch-text-muted |
--ch-text 70% |
Testo in grigio / testo di aiuto |
--ch-on-bg |
--ch-bg |
Adattamento automatico della luminosità del testo in base allo sfondo della pagina |
--ch-on-bg-secondary |
--ch-on-bg 65% |
Testo secondario sullo sfondo della pagina |
--ch-on-surface |
--superficie-ch |
Testo chiaro/scuro automatico su scheda/pannello |
--ch-on-surface-secondary |
--ch-on-surface 65% |
Testo secondario su cartoncino/pannello |
--ch-on-surface-muted |
--ch-on-surface 52% |
Testo in colore tenue su cartoncino/pannello |
Contesti#
| Variabile |
Tratto da |
Descrizione |
--ch-bg-page |
--ch-bg |
Sfondo della pagina |
--ch-bg-card |
--superficie-ch |
Sfondo della carta |
--ch-bg-inset |
--superficie-ch oscurato |
Sfondo del riquadro inserito |
--ch-bg-input |
--superficie-ch |
Sfondo del campo di immissione |
--ch-bg-surface |
--superficie-ch + --ch-bg 50/50 |
Superficie intermedia |
Confini#
| Variabile |
Tratto da |
Descrizione |
--ch-border |
--ch-on-bg 12% |
Colore predefinito del bordo |
--ch-border-focus |
--ch-brand-secondary |
Colore della ghiera di messa a fuoco |
Accento#
| Variabile |
Tratto da |
Descrizione |
--accento-ch |
--ch-brand-primary |
Colore di risalto (titoli, pillola di testo) |
--ch-accent-hover |
--accento-ch oscurato |
Stato al passaggio del mouse su "Accent" |
--ch-accent-glow |
--ch-brand-primary Opacità al 25% |
Effetto luminoso accentuato |
--ch-on-accent |
--accento-ch |
Testo chiaro/scuro automatico sull'elemento di risalto |
Colori di stato#
| Variabile |
Tratto da |
Descrizione |
--ch-status-green |
Input |
Segnale di stato verde (acceso) |
--ch-status-amber |
Input |
Ingresso stato ambra (luminoso) |
--ch-status-red |
Input |
Ingresso stato rosso (acceso) |
--ch-success |
--ch-status-green oscurato |
Testo verde AA-safe |
--ch-avviso |
--ch-status-amber oscurato |
Testo in ambra AA-safe |
--ch-pericolo |
--ch-status-red oscurato |
Testo rosso AA-safe |
--ch-success-glow |
--ch-status-green Opacità del 30% |
Bagliore verde |
--ch-warning-glow |
--ch-status-amber Opacità del 20% |
Bagliore ambrato |
--ch-pericolo-bagliore |
--ch-status-red Opacità del 20% |
Bagliore rosso |
Pulsanti#
| Variabile |
Tratto da |
Descrizione |
--ch-btn-bg |
--ch-brand-secondary |
Sfondo del pulsante principale |
--ch-btn-text |
--ch-btn-bg |
Testo del pulsante "Chiaro/Scuro" automatico |
--ch-btn-hover |
--ch-btn-bg oscurato |
Effetto al passaggio del mouse sul pulsante principale |
--ch-btn-disabled-bg |
--ch-btn-bg alleggerito |
Sfondo del pulsante disabilitato |
--ch-btn-secondary-bg |
trasparente |
Sfondo del pulsante secondario |
--ch-btn-testo-secondario |
--ch-text-secondary |
Testo del pulsante secondario |
--ch-btn-secondary-border |
--ch-border |
Bordo del pulsante secondario |
--ch-btn-secondary-hover-bg |
--ch-on-bg 4% |
Passaggio del mouse sul pulsante secondario |
Barra di avanzamento#
| Variabile |
Tratto da |
Descrizione |
--ch-progress-bg |
--ch-on-bg 8% |
Contesto della traccia |
--ch-progress-dark |
--ch-progress-color oscurato |
Filtro scuro a gradiente |
--ch-progress-light |
--ch-progress-color alleggerito |
Filtro graduato |
--ch-progress-gradient |
stop scuri + chiari |
Sfumatura animata |
Posizione e prossimità#
| Variabile |
Tratto da |
Descrizione |
--ch-position-far |
--ch-text-primary |
Colore del numero di posizione (lontano) |
--ch-position-mid |
--ch-text-secondary |
Colore del numero di posizione (centrale) |
--ch-position-near |
--ch-brand-primary |
Colore del numero di posizione (vicino) |
--ch-position-soon |
--ch-success |
Colore del numero di posizione (ci siamo quasi) |
Finestre di messaggio#
| Variabile |
Tratto da |
Descrizione |
--ch-message-warning-bg |
--ch-avviso 8% |
Sfondo del messaggio di avviso |
--ch-message-warning-border |
--ch-avviso 20% |
Bordo del messaggio di avviso |
--ch-message-danger-bg |
--ch-pericolo 8% |
Sfondo del messaggio di pericolo |
--ch-message-danger-border |
--ch-pericolo 20% |
Bordo del messaggio di pericolo |
Intestazione e piè di pagina
| Variabile |
Tratto da |
Descrizione |
--ch-header-bg |
--ch-bg |
Sfondo dell'intestazione |
--ch-on-header-bg |
--ch-header-bg |
Testo dell'intestazione con regolazione automatica della luminosità (chiaro/scuro) |
--ch-on-header-bg-secondary |
--ch-on-header-bg 65% |
Testo dell'intestazione secondaria |
--ch-footer-bg |
--ch-bg |
Sfondo del piè di pagina |
--ch-on-footer-bg |
--ch-footer-bg |
Testo del piè di pagina con regolazione automatica della luminosità |
--ch-on-footer-bg-secondary |
--ch-on-footer-bg 65% |
Testo del piè di pagina secondario |
Scheda e conto alla rovescia#
| Variabile |
Tratto da |
Descrizione |
--ch-card-radius |
--ch-border-radius * 2 |
Raggio dell'angolo della carta |
--ch-card-shadow |
--ch-brand-primary colorato |
Ombra della scatola di cartoncino |
--ch-countdown-shadow |
--ch-brand-primary colorato |
Ombra dell'unità di conto alla rovescia |
Funzioni del piè di pagina
| Variabile |
Tratto da |
Descrizione |
--ch-token-bg |
--ch-on-bg 4% |
Sfondo del badge simbolico |
--ch-token-hover-bg |
--ch-on-bg 8% |
Effetto al passaggio del mouse sul badge token |
--ch-poll-bg |
--ch-on-bg 4% |
Monitoraggio del timer del sondaggio |
--ch-poll-gradient |
progresso scuro + colore |
Timer del sondaggio: riempimento con sfumatura |
Riferimento alle classi CSS principali#
| Classe |
Scopo |
ch-card |
Contenitore principale per schede |
stati della coda ch |
Wrapper per il conto alla rovescia + contenuti della coda attiva |
ch-stato-messaggio |
Contenitore dei messaggi di stato (bloccato / sala piena) |
ch-stato-messaggio.ch-stato-pericolo |
Stato bloccato (rosso) |
ch-stato-messaggio.ch-stato-avviso |
Stato "stanza piena" (ambra) |
ch-message-box |
Pannello dei messaggi sopra la scheda |
ch-form-section |
Area del modulo con separatore superiore |
sezione-priorità-ch |
Modulo per il codice di priorità (sfondo in inserto) |
ch-sezione-e-mail |
Modulo e-mail (fuori dal biglietto) |
ch-invio-e-mail |
Finestrella rotante durante l'invio dell'e-mail |
ch-gruppo-di-input |
Riga flessibile per campo di immissione + pulsante/i |
ch-input |
Campo di inserimento testo/e-mail |
ch-btn |
Pulsante principale |
ch-btn-sm |
Variante con bottone piccolo |
ch-btn-secondario |
Pulsante secondario (contornato) |
ch-btn-change |
Modifica la spaziatura dei pulsanti e-mail |
ch-form-feedback |
Riga del messaggio di feedback |
ch-form-feedback.ch-success |
Feedback sul successo |
ch-form-feedback.ch-error |
Segnalazione di errori |
ch-stock-badge |
Indicatore di borsa |
ch-numero-di-azioni |
Pillola con numero di matricola |
ch-stock-badge.ch-stock-low |
Stato di scorte insufficienti |
ch-stock-badge.ch-stock-zero |
Stato di esaurimento delle scorte |
ch-progress-container |
Container per barra di avanzamento (con larghezza massima limitata) |
ch-barra-di-avanzamento |
Traccia (barra in primo piano) |
ch-progress-fill |
Barra di riempimento (sfumatura animata) |
ch-progress-bar.ch-progress-mid |
Luminescenza a metà del processo |
ch-progress-bar.ch-progress-high |
Luminosità maggiore a stadi avanzati |
ch-progress-bar.ch-progress-almost |
Il bagliore pulsante è quasi al termine |
ch-progress-info |
Testo relativo al preventivo e all'ora di arrivo prevista sotto la barra |
ch-spinner |
Indicatore di caricamento |
ch-text-shimmer |
Animazione con effetto luccicante del testo |
ch-session-info |
Testo informativo sulla sessione |
Classi CSS obbligatorie#
Il modello deve includere le seguenti classi strutturali:
/* 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;
}
Animazioni di ingresso#
Gli elementi utilizzano animazioni di ingresso sfalsate tramite ch-Invio e ch-stagger-N classi. Ogni livello di sfalsamento aggiunge un ritardo di 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>