Das Widget mit CSS stylen
Das Widget rendert in einer offenen Shadow Root und gibt dir zwei Wege, es von deiner eigenen Seite zu stylen: Shadow-Parts (ein Element mit ::part() anvisieren) und CSS-Custom-Properties (eine Farbe mit --cpt-skin-* überschreiben). Für Farben und Wortlaut bevorzug White-Labeling (es ist dafür gebaut und reist mit jeder Einbettung); greif hier zur CSS-Fläche, wenn du eine seitenlokale Optimierung willst oder etwas, das White-Labeling nicht abdeckt.
Das ist nur die Widget-Hülle. Das Spiel läuft in einem separaten gesandboxten Frame, den du von der Seite nicht stylen kannst.
Einen Part anvisieren
Wähl einen Part auf dem Element mit ::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);
}Ein paar praktische Hinweise:
- Die Shadow Root ist offen, also funktioniert
::part()von deiner Seite in jedem modernen Browser. - Einige strukturelle Parts (der Checkbox-Container, der Spiel-Frame) tragen Basis-Layout-Styles, die inline am Element angewendet werden. Um eine dieser Eigenschaften zu überschreiben, brauchst du eventuell
!important, da ein Inline-Style eine normale::part()-Regel überrangt. Text- und Marken-Parts stylen sich sauber ohne ihn. - Parts sind die Styling-Fläche; das Widget stellt seine internen Klassennamen nicht bereit, und sie können sich ändern. Style per Part, nicht durch Graben im Shadow-Tree.
Parts auf dem Checkbox-Widget
Diese erscheinen auf <caputchin-widget> (und auf dem Pre-Game-Overlay von <caputchin-game>, das denselben Markenblock wiederverwendet).
| Part | Was es ist |
|---|---|
simple-checkbox | Der äußere Checkbox-Container (Rand, Hintergrund, Padding). |
simple-shield-box | Der Schild-Indikator, der den Verifizierungszustand zeigt. |
simple-shield-spinner | Der Spinner-Bogen im Schild während der Verifizierung. |
simple-checkbox-label | Der Zustandstext (Verify, Verifying, Verified, Failed). |
simple-brand | Der Markenblock (Logo, Name und Tag zusammen). |
simple-brand-home | Der Link, der Logo und Name umschließt und auf den Home-Link zeigt. |
simple-brand-logo | Das Markenlogo-Bild. |
simple-brand-name | Der Marken-Wordmark-Text. |
simple-brand-tag | Die Marken-Tagline, ein Link, der auf den Rechtslink zeigt. |
Parts auf dem Spiel-Widget
Diese erscheinen auf <caputchin-game>, um den gesandboxten Spiel-Frame herum.
| Part | Was es ist |
|---|---|
game-frame | Der Chrome-Frame um das Spiel. |
game-iframe-slot | Der Slot, der den gesandboxten Iframe des Spiels hält. |
game-slot | Der Projektions-Container, in den das Spiel rendert. |
game-badge-slot | Das Marken-Badge, das unter dem Spiel gezeigt wird. |
game-overlay-host | Der Host des Pre-Game-Overlays (gezeigt, bevor das Spiel startet). |
game-overlay-checkbox | Die Checkbox in diesem Overlay. |
game-overlay-dialog | Der Overlay-Dialog, in Modal- und Fullscreen-Layouts. |
game-overlay-close | Der Overlay-Schließen-Button, nur in Modal- und Fullscreen-Layouts. |
Farb-Variablen
Das Widget schreibt seine aufgelösten Hüllen-Farben auf das Host-Element als CSS-Custom-Properties namens --cpt-skin-<token>, und seine eigenen Styles lesen sie. Du kannst eine einzelne Farbe aus deinem Stylesheet überschreiben, indem du die Eigenschaft auf dem Element setzt:
caputchin-widget {
--cpt-skin-primary: #7c3aed !important;
--cpt-skin-surface_bg: #faf5ff !important;
}Das !important zählt: das Widget setzt diese Eigenschaften inline am Host, während es den Skin auflöst, und ein Inline-Wert überrangt eine normale Stylesheet-Regel, sodass ein schlichter Override ignoriert wird. Das sind nur die Farben der Hülle; sie erreichen das Spiel im Frame nicht.
Das ist die seitenlokale Notausgang. Um Farben über jede Einbettung zu ändern, setz stattdessen einen Skin im White-Labeling; es nutzt dieselben Token-Namen.
| Variable | Was es färbt |
|---|---|
--cpt-skin-primary | Die primäre Aktionsfarbe: das aktive Schild, der Fokusring und der Verifiziert-Zustand. |
--cpt-skin-primary_hover | Die Hover-Variante der Primärfarbe. |
--cpt-skin-surface_bg | Der Hintergrund des Widgets. |
--cpt-skin-text_primary | Der Haupttext. |
--cpt-skin-text_label | Der Zustandslabel-Text (Verify, Verifying und so weiter). |
--cpt-skin-text_muted | Sekundärtext, einschließlich des Marken-Tags. |
--cpt-skin-text_passive | Der Schild-Umriss, während das Widget wartet. |
--cpt-skin-separator | Der Trenner zwischen Marken-Teilen im kompakten Layout. |
--cpt-skin-border | Der Rand des Widgets. |
--cpt-skin-glyph | Das Häkchen- oder Warn-Glyph, das im Schild gezeichnet wird. |
--cpt-skin-error | Die Fehlerzustands-Farbe. |
--cpt-skin-shadow | Der Schlagschatten des Widgets. |
--cpt-skin-modal_backdrop | Der Hintergrund hinter dem Spiel-Overlay im Modal-Layout. |
--cpt-skin-fullscreen_backdrop | Der Hintergrund hinter dem Spiel-Overlay im Fullscreen-Layout. |
--cpt-skin-close_btn_bg | Der Hintergrund des Schließen-Buttons im Fullscreen-Overlay. |
--cpt-skin-brand_text | Die Textfarbe des Marken-Links. |
--cpt-skin-brand_text_hover | Die Farbe des Marken-Links beim Hover. |
Das Markenlogo ist ein separater Skin-Token (ein Bild, keine Farbe), also wird es per White-Labeling getauscht, nicht per CSS. Dieselben Token-Namen und ihre hellen und dunklen Standards sind in der Schema-Referenz.
Diese --cpt-skin-*-Variablen tragen nur den Skin der Widget-Hülle. Ein Spiel empfängt seinen eigenen Skin als Werte, die an seinen Code gereicht werden (nicht als CSS-Variablen, und du kannst ein Spiel nicht von deiner Seite stylen); sieh dir Den Skin eines Spiels anpassen an.
Siehe auch
- Das Widget per White-Label anpassen: Wortlaut, Farben und Links auf dem unterstützten Weg ändern.
- Wie das Widget seine Sprache und seinen Skin auflöst: was die Hülle rendert, bevor du sie stylst.
- Unsere Philosophie: warum diese Styling-Fläche offen und in jedem Tarif kostenlos ist.