Styliser le widget avec CSS
Le widget se rend dans une racine shadow ouverte et te donne deux façons de le styliser depuis ta propre page : les parts du shadow (cibler un élément avec ::part()) et les propriétés CSS personnalisées (surcharger une couleur avec --cpt-skin-*). Pour les couleurs et la formulation, préfère la marque blanche (elle est faite pour ça et voyage avec chaque embed) ; tends la main vers la surface CSS ici quand tu veux un ajustement local à la page ou quelque chose que la marque blanche ne couvre pas.
C'est le shell du widget seul. Le jeu tourne dans un cadre en bac à sable distinct que tu ne peux pas styliser depuis la page.
Cibler une part
Sélectionne une part sur l'élément avec ::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);
}Quelques notes pratiques :
- La racine shadow est ouverte, donc
::part()depuis ta page fonctionne dans chaque navigateur moderne. - Certaines parts structurelles (le conteneur de la case à cocher, le cadre du jeu) portent des styles de mise en page de base appliqués en ligne sur l'élément. Pour surcharger l'une de ces propriétés, tu peux avoir besoin de
!important, puisqu'un style en ligne surclasse une règle::part()normale. Les parts de texte et de marque se stylisent proprement sans lui. - Les parts sont la surface de stylisation ; le widget n'expose pas ses noms de classe internes, et ils peuvent changer. Stylise par part, pas en fouillant dans l'arbre shadow.
Parts sur le widget à case à cocher
Celles-ci apparaissent sur <caputchin-widget> (et sur la surcouche d'avant-jeu de <caputchin-game>, qui réutilise le même bloc de marque).
| Part | Ce que c'est |
|---|---|
simple-checkbox | Le conteneur externe de la case à cocher (bordure, fond, marge interne). |
simple-shield-box | L'indicateur en bouclier qui montre l'état de vérification. |
simple-shield-spinner | L'arc du spinner dans le bouclier pendant la vérification. |
simple-checkbox-label | Le texte d'état (Vérifier, Vérification, Vérifié, Échec). |
simple-brand | Le bloc de marque (logo, nom et tag ensemble). |
simple-brand-home | Le lien qui enveloppe le logo et le nom, pointant vers le lien d'accueil. |
simple-brand-logo | L'image du logo de marque. |
simple-brand-name | Le texte du wordmark de marque. |
simple-brand-tag | La ligne de tag de marque, un lien pointant vers le lien légal. |
Parts sur le widget de jeu
Celles-ci apparaissent sur <caputchin-game>, autour du cadre de jeu en bac à sable.
| Part | Ce que c'est |
|---|---|
game-frame | Le cadre de chrome autour du jeu. |
game-iframe-slot | Le slot qui contient l'iframe en bac à sable du jeu. |
game-slot | Le conteneur de projection dans lequel le jeu se rend. |
game-badge-slot | Le badge de marque montré sous le jeu. |
game-overlay-host | L'hôte de la surcouche d'avant-jeu (montrée avant le démarrage du jeu). |
game-overlay-checkbox | La case à cocher dans cette surcouche. |
game-overlay-dialog | La boîte de dialogue de surcouche, dans les dispositions modale et plein écran. |
game-overlay-close | Le bouton de fermeture de la surcouche, dans les dispositions modale et plein écran uniquement. |
Variables de couleur
Le widget écrit ses couleurs de shell résolues sur l'élément hôte comme propriétés CSS personnalisées nommées --cpt-skin-<token>, et ses propres styles les lisent. Tu peux surcharger une seule couleur depuis ta feuille de style en réglant la propriété sur l'élément :
caputchin-widget {
--cpt-skin-primary: #7c3aed !important;
--cpt-skin-surface_bg: #faf5ff !important;
}Le !important compte : le widget règle ces propriétés en ligne sur l'hôte au moment où il résout le skin, et une valeur en ligne surclasse une règle de feuille de style normale, donc une surcharge simple est ignorée. Ce sont les couleurs du shell seul ; elles n'atteignent pas le jeu dans le cadre.
C'est l'échappatoire locale à la page. Pour changer les couleurs sur chaque embed, règle plutôt un skin dans la marque blanche ; il utilise les mêmes noms de token.
| Variable | Ce qu'elle colore |
|---|---|
--cpt-skin-primary | La couleur d'action primaire : le bouclier actif, l'anneau de focus et l'état vérifié. |
--cpt-skin-primary_hover | La variante au survol de la couleur primaire. |
--cpt-skin-surface_bg | Le fond du widget. |
--cpt-skin-text_primary | Le texte principal. |
--cpt-skin-text_label | Le texte du libellé d'état (Vérifier, Vérification, etc.). |
--cpt-skin-text_muted | Le texte secondaire, y compris le tag de marque. |
--cpt-skin-text_passive | Le contour du bouclier pendant que le widget attend. |
--cpt-skin-separator | Le séparateur entre les morceaux de marque dans la disposition compacte. |
--cpt-skin-border | La bordure du widget. |
--cpt-skin-glyph | Le glyphe de coche ou d'alerte dessiné dans le bouclier. |
--cpt-skin-error | La couleur de l'état d'erreur. |
--cpt-skin-shadow | L'ombre portée du widget. |
--cpt-skin-modal_backdrop | Le fond derrière la surcouche de jeu en disposition modale. |
--cpt-skin-fullscreen_backdrop | Le fond derrière la surcouche de jeu en disposition plein écran. |
--cpt-skin-close_btn_bg | Le fond du bouton de fermeture de la surcouche plein écran. |
--cpt-skin-brand_text | La couleur du texte du lien de marque. |
--cpt-skin-brand_text_hover | La couleur du lien de marque au survol. |
Le logo de marque est un token de skin distinct (une image, pas une couleur), donc il est échangé via la marque blanche, pas le CSS. Les mêmes noms de token et leurs défauts clair et sombre sont dans la référence du schéma.
Ces variables --cpt-skin-* portent le skin du shell du widget seul. Un jeu reçoit son propre skin comme valeurs remises à son code (pas comme variables CSS, et tu ne peux pas styliser un jeu depuis ta page) ; vois Personnaliser le skin d'un jeu.
Voir aussi
- Marque blanche du widget : changer la formulation, les couleurs et les liens de la façon prise en charge.
- Comment le widget résout sa langue et son skin : ce que le shell rend avant que tu ne le stylises.
- Notre philosophie : pourquoi cette surface de stylisation est ouverte et gratuite sur chaque offre.