Estila el widget con CSS
El widget se renderiza en un shadow root abierto y te da dos formas de estilarlo desde tu propia página: shadow parts (apunta a un elemento con ::part()) y CSS custom properties (sobrescribe un color con --cpt-skin-*). Para colores y texto, prefiere white-labeling (está hecho para eso y viaja con cada incrustación); echa mano de la superficie CSS de aquí cuando quieras un retoque local a la página o algo que el white-labeling no cubre.
Esto es solo el shell del widget. El juego corre en un marco en sandbox separado que no puedes estilar desde la página.
Apuntar a un part
Selecciona un part en el elemento con ::part(name):
caputchin-widget::part(simple-checkbox) {
border-radius: 1rem;
}
caputchin-game::part(game-frame) {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}Unas notas prácticas:
- El shadow root es abierto, así que
::part()desde tu página funciona en todo navegador moderno. - Algunos parts estructurales (el contenedor de la checkbox, el marco del juego) llevan estilos de layout base aplicados inline en el elemento. Para sobrescribir una de esas propiedades puede que necesites
!important, ya que un estilo inline gana a una regla::part()normal. Los parts de texto y de marca se estilan limpiamente sin él. - Los parts son la superficie de estilado; el widget no expone sus nombres de clase internos, y pueden cambiar. Estila por part, no escarbando en el árbol de shadow.
Parts en el widget de checkbox
Estos aparecen en <caputchin-widget> (y en el overlay previo al juego de <caputchin-game>, que reutiliza el mismo bloque de marca).
| Part | Qué es |
|---|---|
simple-checkbox | El contenedor exterior de la checkbox (borde, fondo, padding). |
simple-shield-box | El indicador de escudo que muestra el estado de verificación. |
simple-shield-spinner | El arco del spinner dentro del escudo mientras verifica. |
simple-checkbox-label | El texto de estado (Verify, Verifying, Verified, Failed). |
simple-brand | El bloque de marca (logo, nombre y tag juntos). |
simple-brand-home | El enlace que envuelve el logo y el nombre, apuntando al enlace de inicio. |
simple-brand-logo | La imagen del logo de marca. |
simple-brand-name | El texto del wordmark de marca. |
simple-brand-tag | La tag line de marca, un enlace que apunta al enlace legal. |
Parts en el widget de juego
Estos aparecen en <caputchin-game>, alrededor del marco del juego en sandbox.
| Part | Qué es |
|---|---|
game-frame | El marco de chrome alrededor del juego. |
game-iframe-slot | El slot que sostiene el iframe en sandbox del juego. |
game-slot | El contenedor de proyección en el que se renderiza el juego. |
game-badge-slot | La insignia de marca mostrada bajo el juego. |
game-overlay-host | El host del overlay previo al juego (mostrado antes de que el juego empiece). |
game-overlay-checkbox | La checkbox en ese overlay. |
game-overlay-dialog | El diálogo del overlay, en los layouts modal y fullscreen. |
game-overlay-close | El botón de cierre del overlay, solo en los layouts modal y fullscreen. |
Variables de color
El widget escribe sus colores de shell resueltos en el elemento host como CSS custom properties llamadas --cpt-skin-<token>, y sus propios estilos las leen. Puedes sobrescribir un solo color desde tu hoja de estilos fijando la propiedad en el elemento:
caputchin-widget {
--cpt-skin-primary: #7c3aed !important;
--cpt-skin-surface_bg: #faf5ff !important;
}El !important importa: el widget fija estas propiedades inline en el host al resolver el skin, y un valor inline gana a una regla de hoja de estilos normal, así que un override a secas se ignora. Estos son solo los colores del shell; no llegan al juego dentro del marco.
Esta es la escotilla de escape local a la página. Para cambiar colores en cada incrustación, fija un skin en white-labeling en su lugar; usa los mismos nombres de token.
| Variable | Qué colorea |
|---|---|
--cpt-skin-primary | El color de acción primario: el escudo activo, el anillo de foco, y el estado verificado. |
--cpt-skin-primary_hover | La variante hover del color primario. |
--cpt-skin-surface_bg | El fondo del widget. |
--cpt-skin-text_primary | El texto principal. |
--cpt-skin-text_label | El texto de la etiqueta de estado (Verify, Verifying, etcétera). |
--cpt-skin-text_muted | Texto secundario, incluida la tag de marca. |
--cpt-skin-text_passive | El contorno del escudo mientras el widget espera. |
--cpt-skin-separator | El separador entre piezas de marca en el layout compacto. |
--cpt-skin-border | El borde del widget. |
--cpt-skin-glyph | El glifo de check o de alerta dibujado dentro del escudo. |
--cpt-skin-error | El color del estado de error. |
--cpt-skin-shadow | La sombra del widget. |
--cpt-skin-modal_backdrop | El fondo tras el overlay de juego de layout modal. |
--cpt-skin-fullscreen_backdrop | El fondo tras el overlay de juego de layout fullscreen. |
--cpt-skin-close_btn_bg | El fondo del botón de cierre del overlay fullscreen. |
--cpt-skin-brand_text | El color del texto del enlace de marca. |
--cpt-skin-brand_text_hover | El color del enlace de marca en hover. |
El logo de marca es un token de skin aparte (una imagen, no un color), así que se cambia mediante white-labeling, no CSS. Los mismos nombres de token y sus valores por defecto de claro y oscuro están en la referencia de esquema.
Estas variables --cpt-skin-* llevan solo el skin del shell del widget. Un juego recibe su propio skin como valores entregados a su código (no como variables CSS, y no puedes estilar un juego desde tu página); mira Personaliza el skin de un juego.
Véase también
- White-label del widget: cambia texto, colores y enlaces por la vía soportada.
- Cómo el widget resuelve su idioma y skin: qué renderiza el shell antes de que lo estiles.
- Nuestra filosofía: por qué esta superficie de estilado es abierta y gratis en cada plan.