В плагине OmniVideo мы постарались внедрить как можно больше CSS-переменных для удобства кастомизации плагина.
Задать новые переменные можно в Внешний вид > Настроить > Дополнительные стили.
Сначала вы указываете селектор, к которому будут применены CSS-переменные, а потом сами переменные. Например:
/* Сначала указываем селектор */
.omnivideo-block {
/* А здесь все CSS переменные */
}Сам список переменных с их описанием будет ниже. Они разбиты на 4 части, это стилизация общего блока, заголовка блока, кнопок с ссылками на видео и постера с иконкой. Готовый пример использования будет под ними.
- Переменные соответствуют CSS-свойствам. Если переменная заканчивается на
padding, это и есть свойство padding у элемента. - Не забывайте указывать единицы измерения px, em и т.д.
- Подробнее про CSS-свойства можно посмотреть в нашем справочнике.
- В примерах ниже приведены стандартные значения плагина.
Общий блок
/**
* Общий блок
*/
--omnivideo-block-margin: 20px auto; /* Внешний отступ */
--omnivideo-block-padding: 0; /* Внутренний отступ */
--omnivideo-block-border: none; /* Рамка */
--omnivideo-block-border-radius: 0; /* Скругление углов */
--omnivideo-block-color: inherit; /* Цвет текста */
--omnivideo-block-background: none; /* Фоновый цвет */
--omnivideo-block-box-shadow: none; /* Тень */Заголовок блока
/**
* Заголовок блока
*/
--omnivideo-header-font-size: 1.3em; /* Размер шрифта */
--omnivideo-header-font-weight: bold; /* Жирность */
--omnivideo-header-color: inherit; /* Цвет */Кнопки с ссылками
/**
* Кнопки с ссылками
*/
--omnivideo-link-width: auto; /* Ширина */
--omnivideo-link-height: auto; /* Высота */
--omnivideo-link-padding: 4px 8px; /* Внутренний отступ */
--omnivideo-link-icon-size: clamp(24px,4vw,36px); /* Размер шрифта иконок */
--omnivideo-link-color: inherit; /* Цвет текста */
--omnivideo-link-background-color: hsla(0,0%,96%,.3); /* Фоновый цвет */
--omnivideo-link-hover-background-color: hsla(0,0%,88%,.49); /* Фоновый цвет при наведении */
--omnivideo-link-box-shadow: inset 0 0 0 1px rgba(63,63,63,.11); /* Тень */
--omnivideo-link-border-radius: 8px; /* Скругление углов */Постер c иконкой
/**
* Постер с иконкой
*/
--omnivideo-player-icon-size: clamp(40px,10vw,64px); /* Размер иконки постера */
--omnivideo-embed-border-radius: 8px; /* Скругление углов постера */
--omnivideo-icon-data: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg id='MzczNTQzOA==;'/%3E%3C/g%3E%3C/svg%3E%0A"; /* Иконка постера */Пример использования
В этом примере мы применяем стили для общего блока: указываем новый фоновый цвет, цвет текста и изменяем скругление углов.
.omnivideo-block {
--omnivideo-block-background: #f3f3f3; /* Фоновый цвет блока */
--omnivideo-block-color: #428bca; /* Цвет текста блока */
--omnivideo-block-border-radius: 20px; /* Скругление углов блока */
}