Блог → CSS-твики для браузера Vivaldi

Мини-инструкция о том, как вносить свои коррективы в интерфейс браузера Vivaldi. Сегодня мне захотелось изменить цвет активной вкладки на более заметный.

1) Открываем страницу vivaldi://inspect/

Переходим на вкладку Apps.
Находим строчку, заканчивающуюся на browser.html, нажимаем Inspect.

2) Да, это инструменты разработчика, применённые к самому интерфейсу браузера! Находим активную вкладку и видим, что это просто тег <div> с классами tab и active.

3) Прямо в инспекторе добавляем нехитрое CSS-правило, переопределяющее цвета фона и текста активной вкладки. Я использовал не конкретные значения, а переменные из темы, чтобы впоследствии менять цвет в настройках.

4) Создаём отдельный каталог для твиков, в моём случае это c:\software\vivaldi-tweaks\css, но можно и любой другой. Заводим там отдельный CSS-файл, например active-tab-highlight.css, копируем в него код нашего правила.

5) Открываем страницу vivaldi://experiments. Включаем первый чекбокс.

Перезагружаем браузер, заходим в настройки (раздел Appearance / Внешний вид) и обнаруживаем, что теперь можем задать путь к CSS-модификациям. Указываем там ранее созданный каталог, снова перезагружаем браузер.

Всё готово. Теперь активная вкладка подсвечивается цветом «Highlight» из настроек темы. Кстати, его можно изменить, не отходя от кассы, прямо в настройках – см. второй скриншот.