Skip to content

JoyHak/Vivaldi-CSS-mods

Repository files navigation

This is a collection of my and other authors' useful CSS mods to improve and clean up the interface of Vivaldi browser.

Quick Start

To change Vivaldi UI via css modifications you need to enable CSS flag:

  1. Open chrome://flags/#vivaldi-css-mods.
  2. Check Allow CSS modifications.
css
  1. Open Appearance section in Settings.
  2. Under "Custom UI Modifications" choose the folder you want to use.
  3. Download mods and place .css files inside this folder.

Two main mods (clear and hide UI) can change some colors to #191919 and main font to iMWritingQuat. If you want UI consistency, you can download this font and Breeze Dark theme.

Then you can import Breeze dark on Themes tab. Downloaded font can be applied on Webpages tab. theme font

Files Index

  1. hide_UI:

    Make horizontal tabs more compact; auto-hide address bar. To show it, move your mouse at the Vivaldi window top or assign shortcut to Focus Address Field action.

    Each tab becomes smaller, therefore it can display longer text.

    tabs
  2. clear_UI:

    Applies iMWritingQuat font to UI elements.

    Removes some UI elements
    • scrollbar (enable turn on vivaldi://flags/#overlay-scrollbars)
    • expand, minimize, close window buttons (top right corner)
    • Vivaldi logo (top left corner)
    • Vivaldi settings window title
    • tabs in "toggle UI" mode (Settings > Keyboard > View > Toggle UI)
    • some distracting borders and shadows
    Changes background color to dark gray

    Applies 191919 (hex) or 25, 25, 25 (rgb) dark gray color to:

    • some borders to hide them
    • popup elements
    • main window
    • settings
    • address bar and url field
  3. svg_extensions_icons:

    monochrome svg icons for extensions. Resets when the contents of the toolbar are changed.

    If you want powerful icons customization: https://github.com/JoyHak/customize-vivaldi-buttons

  4. hide_tabs by supra107, R0STEFAN:

    auto-hide the tab bar and display on mouseover.

  5. minimize_tabs by nirin, masashinogawa, nafumofu:

    minimizes the tab bar into rows.

  6. expand_bookmarks by nafumofu:

    expands and collapses folders in a list, such as bookmarks, with a single click

Don't forget to visit the other repositories as well:

  1. https://github.com/quartz1216/vivaldi-gutter
  2. https://github.com/luetage/vivaldi_modding
  3. https://github.com/shaneburns/vivaldi-mods

About

This is a collection of my and other authors' useful CSS mods to improve and clean up the interface of Vivaldi browser.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages