component:modernizator
Дополняет стандартную тему сайта: плавные анимации интерфейса, кастомный скроллбар, переработанные строка поиска и меню пользователя, линейный градиент шапки, оформление контента (код, таблицы, цитаты, разделители) и доступность. Эта страница сама подключает компонент — всё можно посмотреть вживую.
Чтобы подключить компонент, вставьте код в начало своей страницы:
[[include component:modernizator]]
Анимации интерфейса
Кнопки управления страницей плавно увеличиваются и приподнимаются тенью при наведении. Контент страницы мягко появляется при загрузке. Ссылки в сайдбаре меняют цвет.
Строка поиска
Кнопка отправки при наведении масштабируется и становится ярче, при нажатии возвращается в исходное состояние. Поле ввода меняет цвет при наведении и нажатии.
Меню пользователя
Ссылки плавно масштабируются при наведении, выпадающий блок аккаунта — со скруглёнными краями и акцентной рамкой.
Табы
Активный таб обозначен обводкой акцентного цвета; при наведении на неактивный появляется акцентная полоса сверху и лёгкое увеличение.
Шапка и фон
Круговой градиент шапки заменён линейным (сверху вниз), высота шапки увеличена. Иконки соцсетей в сайдбаре увеличиваются при наведении.
Скроллбар, выделение, скролл
Скроллбар окрашен в цвета темы (WebKit и Firefox). Выделение текста подсвечивается акцентом. Переходы по якорям — плавные.
Оформление контента
- Ссылки — плавная смена цвета и подчёркивания при наведении.
- Блоки кода — фон, акцентная полоса слева, моноширинный шрифт, тень при наведении.
- Таблицы — скругления, полосатые строки, подсветка строки и акцентная шапка.
- Разделители (
-----) — градиентная линия. - Цитаты (
>) — акцентная граница слева и фон. - Заголовки (
++) — тонкое акцентное подчёркивание.
Доступность
Элементы получают аккуратную рамку при фокусе с клавиатуры (focus-visible). При системной настройке «уменьшить движение» (prefers-reduced-motion) все анимации и плавный скролл отключаются.
Заголовок страницы
Modernizator не стилизует заголовок (#page-title) и подзаголовок — этим занимаются отдельные компоненты, чтобы не конфликтовать:
Спасибо всем, кто помогал тестировать компонент.