Estilize o widget com CSS
O widget renderiza em uma shadow root aberta e te dá duas formas de estilizá-lo a partir da sua própria página: shadow parts (mire um elemento com ::part()) e propriedades CSS personalizadas (sobrescreva uma cor com --cpt-skin-*). Para cores e texto, prefira o white-label (ele é feito para isso e viaja com cada embed); recorra à superfície CSS aqui quando quiser um ajuste local da página ou algo que o white-label não cobre.
Isto é só o shell do widget. O jogo roda em um frame em sandbox separado que você não consegue estilizar a partir da página.
Mirando um part
Selecione um part no elemento com ::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);
}Algumas notas práticas:
- A shadow root é aberta, então
::part()a partir da sua página funciona em todo navegador moderno. - Alguns parts estruturais (o contêiner da checkbox, o frame do jogo) carregam estilos base de layout aplicados inline no elemento. Para sobrescrever uma dessas propriedades você pode precisar de
!important, já que um estilo inline supera uma regra::part()normal. Parts de texto e marca estilizam de forma limpa sem ele. - Os parts são a superfície de estilização; o widget não expõe seus nomes de classe internos, e eles podem mudar. Estilize por part, não fuçando na shadow tree.
Parts na checkbox do widget
Estes aparecem no <caputchin-widget> (e na sobreposição pré-jogo do <caputchin-game>, que reutiliza o mesmo bloco de marca).
| Part | O que é |
|---|---|
simple-checkbox | O contêiner externo da checkbox (borda, fundo, padding). |
simple-shield-box | O indicador de escudo que mostra o estado da verificação. |
simple-shield-spinner | O arco do spinner dentro do escudo enquanto verifica. |
simple-checkbox-label | O texto de estado (Verify, Verifying, Verified, Failed). |
simple-brand | O bloco de marca (logo, nome e tag juntos). |
simple-brand-home | O link que envolve o logo e o nome, apontando para o link de início. |
simple-brand-logo | A imagem do logo da marca. |
simple-brand-name | O texto do wordmark da marca. |
simple-brand-tag | A linha de tag da marca, um link apontando para o link legal. |
Parts no widget de jogo
Estes aparecem no <caputchin-game>, ao redor do frame do jogo em sandbox.
| Part | O que é |
|---|---|
game-frame | A moldura ao redor do jogo. |
game-iframe-slot | O slot que segura o iframe em sandbox do jogo. |
game-slot | O contêiner de projeção no qual o jogo renderiza. |
game-badge-slot | O selo de marca mostrado abaixo do jogo. |
game-overlay-host | O host da sobreposição pré-jogo (mostrada antes de o jogo começar). |
game-overlay-checkbox | A checkbox nessa sobreposição. |
game-overlay-dialog | O diálogo da sobreposição, nos layouts modal e fullscreen. |
game-overlay-close | O botão de fechar da sobreposição, só nos layouts modal e fullscreen. |
Variáveis de cor
O widget escreve suas cores de shell resolvidas no elemento host como propriedades CSS personalizadas chamadas --cpt-skin-<token>, e seus próprios estilos as leem. Você pode sobrescrever uma única cor a partir da sua folha de estilo definindo a propriedade no elemento:
caputchin-widget {
--cpt-skin-primary: #7c3aed !important;
--cpt-skin-surface_bg: #faf5ff !important;
}O !important importa: o widget define essas propriedades inline no host à medida que resolve o skin, e um valor inline supera uma regra de folha de estilo normal, então uma sobrescrita simples é ignorada. Estas são só as cores do shell; elas não chegam ao jogo dentro do frame.
Esta é a saída de emergência local da página. Para mudar as cores em cada embed, defina um skin no white-label em vez disso; ele usa os mesmos nomes de token.
| Variável | O que ela colore |
|---|---|
--cpt-skin-primary | A cor de ação primária: o escudo ativo, o anel de foco e o estado verificado. |
--cpt-skin-primary_hover | A variante de hover da cor primária. |
--cpt-skin-surface_bg | O fundo do widget. |
--cpt-skin-text_primary | O texto principal. |
--cpt-skin-text_label | O texto do rótulo de estado (Verify, Verifying e assim por diante). |
--cpt-skin-text_muted | Texto secundário, incluindo a tag da marca. |
--cpt-skin-text_passive | O contorno do escudo enquanto o widget espera. |
--cpt-skin-separator | O separador entre as peças de marca no layout compacto. |
--cpt-skin-border | A borda do widget. |
--cpt-skin-glyph | O glifo de check ou alerta desenhado dentro do escudo. |
--cpt-skin-error | A cor do estado de erro. |
--cpt-skin-shadow | A sombra projetada do widget. |
--cpt-skin-modal_backdrop | O fundo atrás da sobreposição de jogo no layout modal. |
--cpt-skin-fullscreen_backdrop | O fundo atrás da sobreposição de jogo no layout fullscreen. |
--cpt-skin-close_btn_bg | O fundo do botão de fechar da sobreposição fullscreen. |
--cpt-skin-brand_text | A cor do texto do link de marca. |
--cpt-skin-brand_text_hover | A cor do link de marca no hover. |
O logo da marca é um token de skin separado (uma imagem, não uma cor), então ele é trocado pelo white-label, não por CSS. Os mesmos nomes de token e seus padrões claro e escuro estão na referência de esquema.
Estas variáveis --cpt-skin-* carregam só o skin do shell do widget. Um jogo recebe seu próprio skin como valores entregues ao seu código (não como variáveis CSS, e você não consegue estilizar um jogo a partir da sua página); veja Personalize o skin de um jogo.
Veja também
- White-label do widget: mude o texto, as cores e os links da forma suportada.
- Como o widget resolve seu idioma e skin: o que o shell renderiza antes de você estilizá-lo.
- Nossa filosofia: por que esta superfície de estilização é aberta e grátis em todo plano.