---
type: reference
title: Стилизуй виджет через CSS
summary: Стилизуй оболочку виджета из своей собственной таблицы стилей, с селекторами ::part() и пользовательскими свойствами --cpt-skin, плюс справочник каждой части и переменной.
---

Виджет рендерится в открытом shadow root и даёт тебе два способа стилизовать его со своей собственной страницы: **shadow parts** (нацель элемент через `::part()`) и **пользовательские свойства CSS** (переопредели цвет через `--cpt-skin-*`). Для цветов и формулировок предпочитай [white-label](/docs/widget-customization/white-label) (он сделан для этого и путешествует с каждым встраиванием); тянись к CSS-поверхности здесь, когда хочешь пер-страничную правку или то, что white-label не покрывает.

Это только оболочка виджета. Игра работает в отдельном кадре-песочнице, который ты не можешь стилизовать со страницы.

## Нацеливание на часть

Выбери часть на элементе через `::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);
}
```

Несколько практических заметок:

- Shadow root открыт, так что `::part()` со твоей страницы работает в каждом современном браузере.
- Некоторые структурные части (контейнер галочки, кадр игры) несут базовые стили раскладки, применённые инлайн на элементе. Чтобы переопределить одно из этих свойств, тебе может понадобиться `!important`, поскольку инлайновый стиль перебивает обычное правило `::part()`. Текстовые и брендовые части стилизуются чисто без него.
- Части это поверхность стилизации; виджет не выставляет свои внутренние имена классов, и они могут меняться. Стилизуй по части, а не копаясь в shadow-дереве.

## Части на галочном виджете

Они появляются на `<caputchin-widget>` (и на пред-игровом оверлее `<caputchin-game>`, который переиспользует тот же брендовый блок).

| Часть | Что это |
|---|---|
| `simple-checkbox` | Внешний контейнер галочки (рамка, фон, отступы). |
| `simple-shield-box` | Индикатор-щит, показывающий состояние проверки. |
| `simple-shield-spinner` | Дуга-спиннер внутри щита во время проверки. |
| `simple-checkbox-label` | Текст состояния (проверить, идёт проверка, проверено, сбой). |
| `simple-brand` | Брендовый блок (логотип, имя и тег вместе). |
| `simple-brand-home` | Ссылка, оборачивающая логотип и имя, указывающая на домашнюю ссылку. |
| `simple-brand-logo` | Изображение логотипа бренда. |
| `simple-brand-name` | Текст словесного знака бренда. |
| `simple-brand-tag` | Строка-тег бренда, ссылка, указывающая на правовую ссылку. |

## Части на игровом виджете

Они появляются на `<caputchin-game>`, вокруг кадра игры в песочнице.

| Часть | Что это |
|---|---|
| `game-frame` | Хром-кадр вокруг игры. |
| `game-iframe-slot` | Слот, который держит iframe игры в песочнице. |
| `game-slot` | Контейнер проекции, в который рендерится игра. |
| `game-badge-slot` | Брендовый значок, показываемый под игрой. |
| `game-overlay-host` | Хост пред-игрового оверлея (показывается до старта игры). |
| `game-overlay-checkbox` | Галочка в этом оверлее. |
| `game-overlay-dialog` | Диалог оверлея, в модальной и полноэкранной раскладках. |
| `game-overlay-close` | Кнопка закрытия оверлея, только в модальной и полноэкранной раскладках. |

## Цветовые переменные

Виджет пишет свои разрешённые цвета оболочки на хост-элемент как пользовательские свойства CSS с именами `--cpt-skin-<token>`, и его собственные стили их читают. Ты можешь переопределить один цвет из своей таблицы стилей, задав свойство на элементе:

```css
caputchin-widget {
  --cpt-skin-primary: #7c3aed !important;
  --cpt-skin-surface_bg: #faf5ff !important;
}
```

`!important` имеет значение: виджет задаёт эти свойства инлайн на хосте, пока разрешает скин, а инлайновое значение перебивает обычное правило таблицы стилей, так что простое переопределение игнорируется. Это только цвета оболочки; они не доходят до игры внутри кадра.

Это пер-страничный аварийный люк. Чтобы поменять цвета на каждом встраивании, задай вместо этого [скин в white-label](/docs/widget-customization/white-label); он использует те же имена токенов.

| Переменная | Что она красит |
|---|---|
| `--cpt-skin-primary` | Основной цвет действия: активный щит, кольцо фокуса и состояние «проверено». |
| `--cpt-skin-primary_hover` | Вариант основного цвета при наведении. |
| `--cpt-skin-surface_bg` | Фон виджета. |
| `--cpt-skin-text_primary` | Основной текст. |
| `--cpt-skin-text_label` | Текст метки состояния (проверить, идёт проверка и так далее). |
| `--cpt-skin-text_muted` | Вторичный текст, включая тег бренда. |
| `--cpt-skin-text_passive` | Контур щита, пока виджет ждёт. |
| `--cpt-skin-separator` | Разделитель между частями бренда в компактной раскладке. |
| `--cpt-skin-border` | Рамка виджета. |
| `--cpt-skin-glyph` | Глиф галочки или предупреждения, рисуемый внутри щита. |
| `--cpt-skin-error` | Цвет состояния ошибки. |
| `--cpt-skin-shadow` | Падающая тень виджета. |
| `--cpt-skin-modal_backdrop` | Затемнение за игровым оверлеем в модальной раскладке. |
| `--cpt-skin-fullscreen_backdrop` | Затемнение за игровым оверлеем в полноэкранной раскладке. |
| `--cpt-skin-close_btn_bg` | Фон кнопки закрытия полноэкранного оверлея. |
| `--cpt-skin-brand_text` | Цвет текста брендовой ссылки. |
| `--cpt-skin-brand_text_hover` | Цвет брендовой ссылки при наведении. |

Логотип бренда это отдельный токен скина (изображение, а не цвет), так что он меняется через [white-label](/docs/widget-customization/white-label), а не CSS. Те же имена токенов и их светлые и тёмные умолчания в [справочнике схемы](/docs/references/customization-schema).

Эти переменные `--cpt-skin-*` несут скин только **оболочки виджета**. **Игра** получает свой собственный скин как значения, вручённые её коду (не как переменные CSS, и ты не можешь стилизовать игру со своей страницы); смотри [Настрой скин игры](/docs/game-customization/skin#how-a-skin-value-reaches-the-game).

## См. также

- [White-label виджета](/docs/widget-customization/white-label): меняй формулировки, цвета и ссылки поддерживаемым способом.
- [Как виджет разрешает свой язык и скин](/docs/widget-customization/resolution): что рендерит оболочка до того, как ты её стилизуешь.
- [Наша философия](/docs/understanding-caputchin/philosophy): почему эта поверхность стилизации открыта и бесплатна на каждом тарифе.