Замена цвета и дополнительные переменные
Last updated
Last updated
Заменить цвет набора можно в переменных, которые мы добавили во вкладку CSS настроек темы:
Фоновые цвета менять не рекомендую. Если только вы точно знаете, что делаете и что хотите получить в результате.
Цвета, которые вы можете самостоятельно заменить, находятся в первом блоке переменных — Основные акцентные цвета.
--primary-color — основной цвет школы. В него красятся тренинги при наведении, выделяются активные пункты меню, кнопки, ссылки и т. д.
--secondary-color — дополнительный или вторичный цвет. В него красятся, например, звёзды в блоке оценки качества урока.
--success-color — цвет «успеха». Используется в кнопках, уведомлениях платформы.
--alert-color — акцентный цвет для предупреждений и иконок уведомлений. Как правило красный или близкий к красному.
Если у вас есть фирменный стиль, вы можете заменить стандартные цвета на свои из гайдбука. Просто скопируйте HEX-коды и вставьте в нужные переменные.
Если фирменного стиля нет, но очень хочется использовать другие цвета, воспользуйтесь онлайн-инструментами подбора палитр:
Не используйте слишком светлые оттенки. Иначе текст в блоках со светлым фоном может с ним слиться и стать неразличимым. Старайтесь использовать насыщенные и не слишком яркие цвета.
--link-color — переменная отвечает за цвет ссылок в текстовых блоках и в таблицах. По умолчанию задан тёмно-серый, почти чёрный цвет. Можете задать здесь основной акцентный цвет школы, но помните, что на страницах с большим количеством ссылок, может получиться довольно пёстро.
--r1 и --r2 — это радиусы скругления. Уменьшая их значения, углы в некоторых блоках станут прямее. Если задать «0», скругления уберутся полностью. Не задавайте слишком большие значения. Не рекомендую делать их больше 30px.
Переменная --base-btn-radius отвечает за скругление углов кнопок. Если хотите, чтобы края кнопок стали максимально скруглёнными, задайте значение 99px.
--training-cols — количество колонок в списке тренингов. По умолчанию 2. Если не используете боковую колонку, можно установить значение 3. Если хотите, чтобы тренинги были друг под другом, без разделения на колонки, установите значение 1. Применяется как на главной странице, так и для подтренингов.
--training-min-height — минимальная высота плашки тренинга. Например, если вы хотите добавить фоновые изображения для плашек тренингов, вам может потребоваться больше места на плашке. Эта переменная позволит увеличить высоту по всей школе. Или наоборот — уменьшить.
Установите значение auto, чтобы высота плашки тренинга подстраивалась под размер содержимого.
Начиная с версии 1.1 в наборе появились переменные, позволяющие задать цвет фона, обводки и текста тренингов, а также цвет при наведении. Эти переменные находятся в том же файле и могут быть изменены вами по желанию. В файле добавлены комментарии перед каждой переменной для удобства.
