CSS-переменные

Все размеры и цвета квиза выведены в CSS-переменные с префиксом --elder-quiz-. Меняйте их в «Дополнительном CSS» (настройки → Внешний вид) или в стилях темы — без правки файлов плагина.

Пример использования

/* Все квизы сайта */
.elder-quiz {
    --elder-quiz-radius: 16px;
    --elder-quiz-font-size: 18px;
}

/* Только квиз с ID 7 */
.elder-quiz--7 {
    --elder-quiz-primary-color: #0f766e;
}

Цвета

Переменная	Назначение
`--elder-quiz-primary-color`	Акцент: кнопки, выбранные элементы, прогресс.
`--elder-quiz-primary-color-text`	Текст на акцентном фоне.
`--elder-quiz-background`	Фон контейнера квиза.
`--elder-quiz-background-1` / `--elder-quiz-background-2`	Вспомогательные фоны (карточки ответов, поля) — по умолчанию выводятся из основного фона.
`--elder-quiz-text-color` / `--elder-quiz-text-color-muted`	Основной и приглушённый текст.
`--elder-quiz-success-color` / `--elder-quiz-success-background`	Верные ответы, сообщения об успехе.
`--elder-quiz-error-color` / `--elder-quiz-error-background`	Ошибки, неверные ответы.
`--elder-quiz-shadow-color`	Цвет теней.
`--elder-quiz-answer-border-color` / `--elder-quiz-answer-border-color-checked`	Рамка варианта ответа — обычная и выбранная.
`--elder-quiz-form-border-color` / `--elder-quiz-form-border-focus-color`	Рамки полей формы.

Размеры и отступы

Переменная	Назначение
`--elder-quiz-font-size` / `--elder-quiz-header-font-size`	Базовый шрифт и шрифт заголовков.
`--elder-quiz-max-width`	Максимальная ширина квиза.
`--elder-quiz-height`	Минимальная высота (настройка «Высота» квиза).
`--elder-quiz-footer-height`	Высота нижней панели с навигацией.
`--elder-quiz-container-padding` / `--elder-quiz-space` / `--elder-quiz-screen-gap`	Внутренние отступы и расстояния между блоками.
`--elder-quiz-container-radius` / `--elder-quiz-radius` / `--elder-quiz-image-radius` / `--elder-quiz-form-radius`	Скругления: контейнер, элементы, картинки, поля.
`--elder-quiz-form-border-width` / `--elder-quiz-form-padding`	Рамка и отступы полей формы.
`--elder-quiz-checkbox-size`	Размер чекбоксов и радио-маркеров.
`--elder-quiz-button-padding`	Отступы кнопок.

Селекторы-хелперы. Корневой элемент каждого квиза имеет классы .elder-quiz и .elder-quiz--ID — переменные можно задавать точечно. Классы разметки стабильны и документированы: .elder-quiz-question__title, .elder-quiz-answer и т.д.