Стили и темы¶
В PGHS предусмотрено управление стандартными стилями через кастомные CSS свойства.
Для их использования достаточно создать css файл и поместить в <head></head> или разместить в index.html (как глобальные свойства), или в поле «Встроенный CSS» в настройках страницы xrad builder (как локальные свойства).
Глобальные кастомные свойства PGHS применяются к псевдо-классу :root, локальные (в рамках страницы) применяются к классу .page-{ID}, где {ID} - идентификатор страницы.
Перечень кастомных CSS свойств PGHS и пример их использования:
:root {
/* Лайаут */
--primary-color: #1e2f74; /* Основной цвет. */
--header-color: #1e2f74; /* Цвет хедера. Наследуется от --primary-color */
--app-bg-color: white; /* Фоновый цвет страниц. */
/* Сайдбар (навигационное меню) */
--sidebar-bg: #f2f5f7; /* Фоновый цвет сайдбара. */
--sidebar-border: 1px solid #e5eaef; /* Бордер сайдбара. */
--nav-color: #393e42; /* Цвет текста элементов меню */
--nav-color-hover: #687179; /* Цвет текста элементов меню при наведении */
--nav-color-active: #008bcd; /* Цвет текста активных элементов меню */
/* Элементы формы*/
--disabled-items-color: #e9ecef; /* Фоновый цвет полей формы в состоянии :disabled. */
/* Кнопки */
--btn-color: #f8f9fa; /* Фоновый цвет стандартной кнопки. */
--btn-primary-color: #1e2f74; /* Фоновый цвет кнопки primary. Наследуется от --primary-color */
--btn-secondary-color: #1e2f74; /* Фоновый цвет кнопки secondary. Наследуется от --secondary-color */
--btn-success-color: #1e2f74; /* Фоновый цвет кнопки secondary. Наследуется от --success-color */
--btn-danger-color: #1e2f74; /* Фоновый цвет кнопки secondary. Наследуется от --danger-color */
--btn-warning-color: #1e2f74; /* Фоновый цвет кнопки warning. Наследуется от --warning-color */
--btn-info-color: #1e2f74; /* Фоновый цвет кнопки info. Наследуется от --info-color */
--btn-hot-color: #1e2f74; /* Фоновый цвет кнопки hot. Наследуется от --hot-color */
/* Регионы */
--region-header-color: #f8f9fa; /* Фоновый цвет хедера региона. */
--region-border-color: #e5eaef; /* Цвет бордера региона. */
/* Ссылки */
--link-color: #1e2f74; /* Цвет ссылки. Наследуется от --primary-color */
/* Индикатор состояния загрузки */
--loader-color: #1e2f74; /* Цвет индикатора состояния загрузки. Наследуется от --primary-color */
/* Таблица (Report) */
--table-color: #2e3031; /* Цвет текста таблицы */
--table-border-color: #f0f2f5; /* Цвет бордера таблицы */
--table-accent-bg: rgba(0,0,0,0.02); /* Фоновый цвет акцента строк (для всех нечетных строк таблицы) */
--table-hover-color: #2e3031; /* Цвет текста при наведении. Наследуется от --table-color */
--table-hover-bg: #d8e7ee; /* Фоновый цвет при наведении. */
}