Документация разработчика
В процессе создания пользовательских блоков с помощью HTML, вы можете применить визуальное оформление текущего дизайна страницы. Это достигается с использованием CSS-переменных.
Возьмем в качестве примера простую кнопку, где фон и цвет заимствованы из активной темы оформления:
<div style="background: var(--theme-link-background);color: var(--theme-link-title-color);padding:1rem"> Моя ссылка </div>
Все переменные глобального уровня определяются в классе .main-theme, но также могут быть переопределены в секциях.
| Переменная | Пример | Описание |
| --theme-font-family | Arial | Шрифт |
| --theme-font-weight | 300 | Начертание текста |
| --theme-font-weight-bold | 600 | Начертание жирного текста |
| --theme-heading-color | #000 | Цвет заголовка |
| --theme-heading-font-family | Arial | Шрифт заголовка |
| --theme-heading-font-weight | 300 | Начертание заголовка текста |
| --theme-heading-font-weight-bold | 600 | Начертание жирного заголовка |
| --theme-heading-text-transform | uppercase | Регистр заголовка |
| --theme-text-size-{size} | 14px | Размер шрифта |
| --theme-text-lineheight-{size} | 20px | Межстрочный интервал |
| --theme-text-letterspacing-{size} | 1px | Межзнаковый интервал |
| --theme-text-color | #000 | Цвет текста |
| --theme-text-color-digs | 0,0,0 | Цвет текста в наборе цифр <R>, <G>, <B> |
| --theme-text-color-contrast | #FFF | Контрастный цвет к основному цвету, белый или черный |
{size} необходимо заменить размером. sm, md, lg — маленький, средний и большой текст. h3, h2, h1— маленький, средний и большой заголовок.
| Переменная | Пример | Описание |
| --theme-link-title-color | #000 | Цвет заголовка |
| --theme-link-title-font-family | Arial | Шрифт заголовка |
| --theme-link-title-fontsize | 14px | Размер шрифта заголовка |
| --theme-link-title-lineheight | 20px | Межстрочный интервал заголовка |
| --theme-link-title-letterspacing | -1px | Межзнаковый интервал заголовка |
| --theme-link-title-transform | uppercase | Регистр заголовка |
| --theme-link-title-font-weight | 300 | Начертание заголовка |
| --theme-link-subtitle-color | #000 | Цвет подзаголовка |
| --theme-link-subtitle-font-family | Arial | Шрифт подзаголовка |
| --theme-link-subtitle-fontsize | 14px | Размер шрифта подзаголовка |
| --theme-link-subtitle-lineheight | 20px | Межстрочный интервал подзаголовка |
| --theme-link-subtitle-letterspacing | -1px | Межзнаковый интервал подзаголовка |
| --theme-link-background | #000 | Цвет фона |
| --theme-link-background-digs | 0,0,0 | Цвет фона без прозрачности в наборе цифр <R>, <G>, <B> |
| ---theme-link-contrast-color | #FFF | Контрастный цвет к фону, белый для темного фона и черный для светлого. |
| --theme-link-offset | 40px | Системная переменная. Отступ для центрирования текста с использованием миниатюры |
| --theme-link-border-color | #000 | Цвет обводки |
| --theme-link-border-width | 2px | Толщина обводки |
| --theme-link-border-width-offset | 2px | Системная переменная. Отступ бордюра для подсчета центрирования текста заголовка. |
| --theme-link-border-radius | 3px | Радиус скругления ссылки |
| --theme-link-shadow-params | 0px 6px 10px 0px | Параметры тени: <сдвиг по x> <сдвиг по y> <радиус размытия> <растяжение> |
| --theme-link-shadow-color | #000 | Цвет тени |
| --theme-link-backdrop-filter | saturate(120%) blur(3px); | backdrop-filter эффект фона |
| Переменная | Пример | Описание |
| --theme-input-radius | 2px | Радиус скругления полей ввода |
| --theme-input-border-color | #00000020 | Цвет обводки поля ввода |
| --theme-input-border-focused-color | #1FB6FF | Цвет обводки активного поля ввода |
| --theme-input-text-color | #000 | Цвет текст поля ввода |
| --theme-input-background | #FFF | Цвет фона поля ввода |
| --theme-checkbox-background | #FFF | Цвет фона галочки |
| --theme-checkbox-border-color | #00000020 | Цвет бордюра галочки |
| --theme-checkbox-checked-background | #1FB6FF | Цвет фона активной галочки |
| --theme-checkbox-checked-color | #1FB6FF | Цвет активной галочки |
| --theme-input-placeholder-color | #00000080 | Цвет подсказки (placeholder) |
CSS переменные можно использовать не только для создания своих пользовательских блоков, но и для переопределения внешнего вида стандартных блоков.
<style>
/* Определяем цвета поверх текущей темы */
.main-theme {
--theme-input-background: #2e3239;
--theme-input-text-color: #FFF;
--theme-input-border-color: #525966;
--theme-input-placeholder-color: #777;
--theme-checkbox-background: #2e3239;
--theme-checkbox-border-color: #525966;
}
/* Так как цвет активных полей зависит из текущего цвета кнопки, то переписываем их поверх текущей темы и поверх всех секций */
.blocks-section {
--theme-checkbox-checked-background: #525966;
--theme-input-border-focused-color: #525966;
}
</style>
Если требуется задать свойства у всех блоков на странице используйте класс .block-item
| Переменная | Пример | Описание |
| --section-padding-top | 1rem | Внутренний отступ сверху |
| --section-padding-bottom | 1rem | Внутренний отступ снизу |
| --section-padding-left | 0px | Внутренний отступ слева |
| --section-padding-right | 0px | Внутренний отступ справа |
| Переменная | Пример | Описание |
| --section-border-width | 0px | Толщина рамки |
| --section-border-color | #000 | Цвет рамки |
| --section-border-style | solid | Стиль рамки |
| --section-border-radius | 20px | Радиус скругления секции |
| --section-shadow-params | 0px 6px 10px 0px | Параметры тени: <сдвиг по x> <сдвиг по y> <радиус размытия> <растяжение> |
| --section-shadow-color | #000 | Цвет тени |
| --section-outline-width | 2px | Толщина внешней рамки |
| --section-outline-style | solid | Стиль внешней рамки |
| --section-outline-color | #FFF | Цвет внешней рамки |
| --section-outline-offset | -10px | Отступ внешней рамки |
| --section-backdrop-filter | saturate(120%) blur(10px); | backdrop-filter эффект фона |
<style>
.s-{ID} {
--section-shadow-params: 0 4px 8px 0;
--section-shadow-color: #bf235d80;
}
</style> Где {ID} — идентификатор секции. Если требуется задать свойства у всех секций на странице используйте класс .blocks-section