Estilo y variables CSS: cómo personalizar el aspecto de la sala de espera con propiedades personalizadas de CSS.
Véase también: Marcado y estructura de las plantillas | Estado y métodos de Vue
Estilo#
Arquitectura CSS#
Los estilos se dividen en dos capas:
- Tema (
_ch-theme-auto.scss) — Colores, tipografías, sombras, efectos. Genera automáticamente una paleta completa a partir de 6 variables de entrada. Esto es lo que puedes personalizar.
- Base (
_ch-base.scss) — Diseño, tamaño, ubicación, animaciones. Rara vez requiere personalización.
Variables de entrada del tema#
Sobrescribe estos valores en una hoja de estilo que se cargue después del paquete principal. El tema deduce automáticamente el resto de colores.
: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 */
}
Añade tus modificaciones en una hoja de estilos después de los estilos principales:
<link rel="stylesheet" href="crowdhandler-styles.css">
<link rel="stylesheet" href="my-overrides.css">
Mejora progresiva#
El tema adopta un enfoque de dos niveles:
- Soluciones alternativas estáticas: valores hexadecimales precalculados que funcionan en todos los navegadores.
- Derivación dinámica — En los navegadores que admiten
oklch (de ...) (Chrome 119 o superior, Firefox 128 o superior, Safari 16.4 o superior), todos los colores derivados se calculan automáticamente a partir de los datos que introduzcas.
Cualquier variable derivada puede seguir sobrescribiéndose individualmente.
Referencia sobre variables derivadas#
Todas las variables derivadas se pueden sobrescribir de forma individual. En los navegadores que admiten oklch (de ...) Se calculan automáticamente a partir de los datos introducidos anteriormente; en caso contrario, se utilizan valores hexadecimales estáticos como alternativa.
Tipografía#
| Variable |
Por defecto |
Descripción |
--ch-font-primary |
Plus Jakarta Sans |
Fuente del cuerpo del texto y de los encabezados |
--ch-font-secondary |
JetBrains Mono |
Número de posición y dígitos de la cuenta atrás |
Texto#
| Variable |
Derivado de |
Descripción |
--ch-text-primary |
--ch-text |
Texto principal |
--ch-text-secondary |
--ch-text 80% |
Texto secundario |
--ch-text-silenciado |
--ch-text 70% |
Texto oculto / texto de ayuda |
--ch-on-bg |
--ch-bg |
Ajustar automáticamente el color del texto (claro/oscuro) según el fondo de la página |
--ch-on-bg-secondary |
--ch-on-bg 65% |
Texto secundario en el fondo de la página |
--ch-on-surface |
--ch-superficie |
Ajuste automático de texto claro/oscuro en la tarjeta/el panel |
--ch-en-la-superficie-secundaria |
--ch-on-surface 65% |
Texto secundario en la tarjeta/panel |
--ch-on-surface-muted |
--ch-on-surface 52% |
Texto en color apagado en la tarjeta o el panel |
Antecedentes#
| Variable |
Derivado de |
Descripción |
--ch-bg-page |
--ch-bg |
Fondo de la página |
--ch-bg-card |
--ch-superficie |
Fondo de la tarjeta |
--ch-bg-inset |
--ch-superficie oscurecido |
Fondo del recuadro |
--ch-bg-input |
--ch-superficie |
Fondo del campo de entrada |
--ch-bg-surface |
--ch-superficie + --ch-bg 50/50 |
Superficie intermedia |
Fronteras#
| Variable |
Derivado de |
Descripción |
--ch-border |
--ch-on-bg 12% |
Color predeterminado del borde |
--ch-border-focus |
--ch-marca-secundaria |
Color del anillo de enfoque |
Acentuación#
| Variable |
Derivado de |
Descripción |
--ch-acento |
--ch-marca-principal |
Color de contraste (títulos, pastilla de stock) |
--ch-accent-hover |
--ch-acento oscurecido |
Estado de desplazamiento del cursor sobre el acento |
--ch-accent-glow |
--ch-marca-principal 25 % de opacidad |
Efecto de resplandor decorativo |
--ch-on-accent |
--ch-acento |
Ajuste automático de texto claro/oscuro en el texto de contraste |
Colores de estado#
| Variable |
Derivado de |
Descripción |
--ch-status-green |
Entrada |
Entrada de estado verde (encendida) |
--ch-status-amber |
Entrada |
Entrada de estado ámbar (brillante) |
--ch-status-red |
Entrada |
Entrada de estado rojo (encendida) |
--ch-éxito |
--ch-status-green oscurecido |
Texto verde «AA-safe» |
--ch-advertencia |
--ch-status-amber oscurecido |
Texto en color ámbar «AA-safe» |
--ch-peligro |
--ch-status-red oscurecido |
Texto en rojo «AA-safe» |
--ch-success-glow |
--ch-status-green 30 % de opacidad |
Resplandor verde |
--ch-warning-glow |
--ch-status-amber 20 % de opacidad |
Resplandor ámbar |
--ch-peligro-brillo |
--ch-status-red 20 % de opacidad |
Resplandor rojo |
Botones#
| Variable |
Derivado de |
Descripción |
--ch-btn-bg |
--ch-marca-secundaria |
Fondo del botón principal |
--ch-btn-text |
--ch-btn-bg |
Texto del botón «Claro/Oscuro» automático |
--ch-btn-hover |
--ch-btn-bg oscurecido |
Efecto al pasar el cursor por el botón principal |
--ch-btn-disabled-bg |
--ch-btn-bg aligerado |
Fondo del botón desactivado |
--ch-btn-secondary-bg |
transparente |
Fondo del botón secundario |
--ch-btn-text-secundario-- |
--ch-text-secondary |
Texto del botón secundario |
--ch-btn-secondary-border |
--ch-border |
Borde del botón secundario |
--ch-btn-secondary-hover-bg |
--ch-on-bg 4% |
Efecto al pasar el cursor por el botón secundario |
Barra de progreso#
| Variable |
Derivado de |
Descripción |
--ch-progress-bg |
--ch-on-bg 8% |
Antecedentes de la pista |
--ch-progress-dark |
--ch-progress-color oscurecido |
Filtro degradado oscuro |
--ch-progress-light |
--ch-progress-color aligerado |
Filtro de luz degradado |
--ch-progress-gradient |
paradas oscuras + claras |
Degradado de relleno animado |
Proximidad de la posición#
| Variable |
Derivado de |
Descripción |
--ch-position-far |
--ch-text-primary |
Color del número de posición (lejos) |
--ch-position-mid |
--ch-text-secondary |
Color del número de posición (centro) |
--ch-position-near |
--ch-marca-principal |
Color del número de posición (cercano) |
--ch-position-soon |
--ch-éxito |
Color del número de posición (ya casi está) |
Cuadros de mensaje#
| Variable |
Derivado de |
Descripción |
--ch-message-warning-bg |
--ch-advertencia 8% |
Fondo del mensaje de advertencia |
--ch-message-warning-border |
--ch-advertencia 20% |
Marco del mensaje de advertencia |
--ch-message-danger-bg |
--ch-peligro 8% |
Fondo del mensaje de peligro |
--ch-mensaje-peligro-borde |
--ch-peligro 20% |
Marco de mensaje de peligro |
Encabezado y pie de página
| Variable |
Derivado de |
Descripción |
--ch-header-bg |
--ch-bg |
Fondo del encabezado |
--ch-on-header-bg |
--ch-header-bg |
Texto automático de la cabecera (claro/oscuro) |
--ch-on-header-bg-secondary |
--ch-on-header-bg 65% |
Texto del encabezado secundario |
--ch-footer-bg |
--ch-bg |
Fondo del pie de página |
--ch-on-footer-bg |
--ch-footer-bg |
Texto del pie de página con ajuste automático de claro/oscuro |
--ch-on-footer-bg-secondary |
--ch-on-footer-bg 65% |
Texto del pie de página secundario |
Tarjeta y cuenta atrás#
| Variable |
Derivado de |
Descripción |
--ch-card-radius |
--ch-border-radius * 2 |
Radio de la esquina de la tarjeta |
--ch-card-shadow |
--ch-marca-principal tintado |
Sombra de la caja de cartón |
--ch-countdown-shadow |
--ch-marca-principal tintado |
Sombra de la unidad de cuenta atrás |
Herramientas del pie de página
| Variable |
Derivado de |
Descripción |
--ch-token-bg |
--ch-on-bg 4% |
Fondo de la insignia de token |
--ch-token-hover-bg |
--ch-on-bg 8% |
Efecto al pasar el cursor por la insignia de token |
--ch-poll-bg |
--ch-on-bg 4% |
Seguimiento del temporizador de la encuesta |
--ch-poll-gradient |
progreso oscuro + color |
Relleno con degradado del temporizador de la encuesta |
Referencia de clases CSS clave#
| Clase |
Objetivo |
tarjeta ch-card |
Estuche para tarjetas principales |
estados-de-la-cola-ch |
Envolvente para la cuenta atrás y el contenido de la cola activa |
ch-estado-mensaje |
Contenedor de mensajes de estado (bloqueado / sala llena) |
ch-estado-mensaje.ch-estado-peligro |
Estado bloqueado (rojo) |
ch-estado-mensaje.ch-estado-advertencia |
Estado de «sala llena» (ámbar) |
ch-cuadro-de-mensaje |
Panel de mensajes situado encima de la tarjeta |
ch-form-section |
Área de formulario con separador en el borde superior |
ch-prioridad-sección |
Formulario de código de prioridad (fondo superpuesto) |
ch-sección-de-correo-electrónico |
Formulario de correo electrónico (fuera de la tarjeta) |
ch-envío-de-correo-electrónico |
Control «Spinner» durante el envío de un correo electrónico |
ch-grupo-de-entrada |
Fila flexible para el campo de entrada + botón(es) |
ch-entrada |
Campo de introducción de texto o correo electrónico |
ch-btn |
Botón principal |
ch-btn-sm |
Variante con botones pequeños |
ch-btn-secundario |
Botón secundario (con contorno) |
ch-btn-change |
Modificar el espaciado entre los botones de correo electrónico |
ch-form-feedback |
Fila de mensajes de comentarios |
ch-form-feedback.ch-success |
Comentarios sobre el éxito |
ch-form-feedback.ch-error |
Notificación de error |
ch-stock-badge |
Indicador bursátil |
ch-recuento-de-existencias |
Pastilla con número de referencia |
ch-stock-badge.ch-stock-low |
Estado de existencias bajas |
ch-stock-badge.ch-stock-zero |
Estado de agotamiento de existencias |
ch-progress-container |
Envoltura de la barra de progreso (con restricción de ancho máximo) |
ch-barra-de-progreso |
Pista (barra de fondo) |
ch-progress-fill |
Barra de relleno (degradado animado) |
ch-progress-bar.ch-progress-mid |
Brillo a mitad del proceso |
ch-progress-bar.ch-progress-high |
Un brillo más intenso a medida que avanza el proceso |
ch-progress-bar.ch-progress-almost |
El resplandor intermitente está a punto de desaparecer |
ch-información-sobre-el-progreso |
Texto con el presupuesto y la hora estimada de llegada debajo de la barra |
ch-spinner |
Icono de carga |
ch-text-shimmer |
Animación de brillo del texto |
ch-información-de-sesión |
Texto informativo de la sesión |
Clases CSS obligatorias#
Tu plantilla debe incluir estas clases estructurales:
/* 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;
}
Animaciones de entrada#
Los elementos utilizan animaciones de entrada escalonadas mediante ch-enter y ch-stagger-N clases. Cada nivel de escalonamiento añade un retraso 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>