Переопределение CSS переменных

Driver.js использует CSS-переменные для управления стилями элементов подсветки и оверлеев, что делает его гибким и легко настраиваемым. Все основные стили, такие как цвета фона, рамок, шрифты и размеры подсказок, задаются через переменные, что позволяет переопределять их без изменения исходного CSS библиотеки.

Пример базовой структуры переменных:

:root {
  --driver-background: rgba(0, 0, 0, 0.8);
  --driver-border-radius: 4px;
  --driver-highlight-color: #fff;
  --driver-padding: 10px 15px;
  --driver-font-family: 'Arial, sans-serif';
  --driver-font-size: 14px;
}

Значения этих переменных можно переопределять как глобально для всей страницы, так и локально для отдельных компонентов.

Глобальное переопределение CSS переменных

Для глобального изменения стилей Driver.js достаточно определить новые значения переменных в секции :root или в основном CSS-файле:

:root {
  --driver-background: rgba(50, 50, 50, 0.9);
  --driver-border-radius: 8px;
  --driver-highlight-color: #ffd700;
  --driver-padding: 15px 20px;
  --driver-font-family: 'Roboto, sans-serif';
  --driver-font-size: 16px;
}

Особенности глобального переопределения:

  • Все создаваемые шаги туров будут использовать эти значения.
  • Можно комбинировать с медиа-запросами для адаптивного дизайна:
@media (max-width: 768px) {
  :root {
    --driver-font-size: 12px;
    --driver-padding: 8px 10px;
  }
}
  • Переопределение через :root позволяет избежать дублирования кода и повышает читаемость стилей.

Локальное переопределение CSS переменных для отдельных шагов

Driver.js поддерживает возможность задать индивидуальные стили для конкретного шага через свойство stageBackground и style при инициализации шага:

const driver = new Driver();

driver.defineSteps([
  {
    element: '#button1',
    popover: {
      title: 'Нажмите здесь',
      description: 'Это кнопка запуска',
      position: 'bottom'
    },
    stageBackground: 'rgba(255, 0, 0, 0.5)',
    style: {
      '--driver-border-radius': '12px',
      '--driver-padding': '20px 25px'
    }
  }
]);

driver.start();

Особенности локального переопределения:

  • Свойство style позволяет задавать CSS-переменные для конкретного шага без влияния на остальные шаги.
  • stageBackground изменяет цвет оверлея только для выделенной области шага.
  • При использовании локальных переменных они имеют приоритет над глобальными.

Динамическое изменение переменных через JavaScript

CSS-переменные могут изменяться динамически после инициализации Driver.js:

document.documentElement.style.setProperty('--driver-background', 'rgba(0, 128, 0, 0.7)');
document.documentElement.style.setProperty('--driver-font-size', '18px');

Также можно применять изменения к конкретному шагу при его открытии:

driver.highlight('#button2');
document.querySelector('.driver-popover').style.setProperty('--driver-padding', '30px 40px');

Преимущества динамического изменения:

  • Позволяет создавать адаптивные туры с разными стилями в зависимости от состояния приложения.
  • Можно комбинировать с темной/светлой темой сайта.
  • Обеспечивает гибкость без изменения CSS-файлов.

Расширенные возможности кастомизации

Driver.js поддерживает полный набор переменных, которые можно использовать для точной настройки:

  • --driver-background — фон оверлея.
  • --driver-border-radius — радиус скругления подсвечиваемой области.
  • --driver-highlight-color — цвет рамки и подсветки элемента.
  • --driver-padding — внутренние отступы поповера.
  • --driver-font-family — шрифт текста.
  • --driver-font-size — размер текста.
  • --driver-z-index — слой для оверлея и поповера.

Дополнительно можно использовать анимации и переходы через CSS:

.driver-highlighted {
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

Это позволяет создавать плавные визуальные эффекты при наведении и переключении шагов тура.

Практические советы

  • Для больших проектов рекомендуется создавать отдельный файл driver-overrides.css, где будут все переопределения переменных.
  • Использование локальных переменных удобно при создании контекстных подсказок для отдельных страниц или компонентов.
  • Совмещение глобальных и локальных переменных позволяет добиться максимальной гибкости: глобальные отвечают за общий стиль, локальные — за уникальные визуальные эффекты отдельных шагов.

Грамотно настроенные CSS-переменные в Driver.js позволяют создавать профессионально выглядящие, адаптивные и легко поддерживаемые интерактивные туры для веб-приложений.

Оглавление