---
type: reference
title: Estilize o widget com CSS
summary: Estilize o shell do widget a partir da sua própria folha de estilo, com seletores ::part() e as propriedades personalizadas --cpt-skin, mais uma referência de cada part e variável.
---

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](/docs/widget-customization/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)`:

```css
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:

```css
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](/docs/widget-customization/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](/docs/widget-customization/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](/docs/references/customization-schema).

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](/docs/game-customization/skin#how-a-skin-value-reaches-the-game).

## Veja também

- [White-label do widget](/docs/widget-customization/white-label): mude o texto, as cores e os links da forma suportada.
- [Como o widget resolve seu idioma e skin](/docs/widget-customization/resolution): o que o shell renderiza antes de você estilizá-lo.
- [Nossa filosofia](/docs/understanding-caputchin/philosophy): por que esta superfície de estilização é aberta e grátis em todo plano.