Стилизуй виджет через CSS
Виджет рендерится в открытом shadow root и даёт тебе два способа стилизовать его со своей собственной страницы: shadow parts (нацель элемент через ::part()) и пользовательские свойства CSS (переопредели цвет через --cpt-skin-*). Для цветов и формулировок предпочитай white-label (он сделан для этого и путешествует с каждым встраиванием); тянись к CSS-поверхности здесь, когда хочешь пер-страничную правку или то, что white-label не покрывает.
Это только оболочка виджета. Игра работает в отдельном кадре-песочнице, который ты не можешь стилизовать со страницы.
Нацеливание на часть
Выбери часть на элементе через ::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);
}Несколько практических заметок:
- 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>, и его собственные стили их читают. Ты можешь переопределить один цвет из своей таблицы стилей, задав свойство на элементе:
caputchin-widget {
--cpt-skin-primary: #7c3aed !important;
--cpt-skin-surface_bg: #faf5ff !important;
}!important имеет значение: виджет задаёт эти свойства инлайн на хосте, пока разрешает скин, а инлайновое значение перебивает обычное правило таблицы стилей, так что простое переопределение игнорируется. Это только цвета оболочки; они не доходят до игры внутри кадра.
Это пер-страничный аварийный люк. Чтобы поменять цвета на каждом встраивании, задай вместо этого скин в 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, а не CSS. Те же имена токенов и их светлые и тёмные умолчания в справочнике схемы.
Эти переменные --cpt-skin-* несут скин только оболочки виджета. Игра получает свой собственный скин как значения, вручённые её коду (не как переменные CSS, и ты не можешь стилизовать игру со своей страницы); смотри Настрой скин игры.
См. также
- White-label виджета: меняй формулировки, цвета и ссылки поддерживаемым способом.
- Как виджет разрешает свой язык и скин: что рендерит оболочка до того, как ты её стилизуешь.
- Наша философия: почему эта поверхность стилизации открыта и бесплатна на каждом тарифе.