phi-for-vivaldi

Phi (/faɪ/)

The ultimate vertical experience mod for Vivaldi, made with attention to details.

:sparkles: Features

• Supported Vivaldi features : UI on left & right sides, theming from themes.vivaldi.net, toggle UI, panels, popups, split tabs ;
• Enhanced Vivaldi features :
  • Stacked tabs : displayed inline with titles ;
  • Pinned tabs : displayed as icon-only grid ;
• Unique Phi features :
  • Address bar : expandable on focus, optional, enabled by default ;
  • Compact mode : icon-only sidebar, implemented under the “panel toggle” command, keyboard shortcut assignable.

:camera_flash: More screenshots​

Address bar expands on focus (optional)	Stacked tabs inline	Pinned tabs icon-only
Panels at the bottom	Right side UI supported	Themes supported
Compact mode as “panel toggle”	Auto-compact mode

:gear: Installation (video)

1. (If going through onboarding) At the “Choose a style” step, select “Classic” ;
2. Create a folder to download the mod into ;
3. Download the mod by right-clicking here then “Save Link As…” to the folder created in step 1 ;
4. Go to vivaldi:flags and next to “Allow CSS modifications”, switch “Default” to “Enabled” ;
5. Open Vivaldi settings ;
   • Under “General” ➔ “Startup” ➔ “Default Browser”, uncheck “Check on Startup” ;
   • (If not gone through onboarding) Under “Appearance” ➔ “Layout Presets”, select “Classic” ;
   • (Optionally, recommended on Mac) Under “Appearance” ➔ “Window Appearance”, check “Use Native Window” ;
   • Under “Appearance” ➔ “Window Appearance” ➔ “Status Bar”, select “Status Info Overlay” or “Hide Status Bar” ;
   • Under “Appearance” ➔ “Custom UI Modifications”, open the folder created in step 1 ;
   • Under “Tabs” ➔ “Tabs” ➔ “Tab Bar Position”, select “Left” or “Right” ;
   • Under “Tabs” ➔ “Tab Display” ➔ “Tab Options”, uncheck “Show Popup Thumbnails” ;
   • Under “Tabs” ➔ “Tab Features” ➔ “Tab Stacking”, select “Compact” ;
   • (Optionally) Under “Panel” ➔ “Panel Position”, select “Left” or “Right” ;
   • Under “Panel” ➔ “Panels” ➔ “Panel Options”, check “Floating Panel” ;
   • (Optionally) Under “Address Bar” ➔ “Extension Visibility”, check “Expand Hidden Extensions to Drop-Down Menu” ;
   • (Optionally) Under “Keyboard” ➔ “View” ➔ “Panel Toggle”, set a shortcut for compact mode ;
6. Quit and relaunch Vivaldi ;
7. Start tweaking the UI ;
   • Right-click in the blank above the URL bar then “Customize Toolbar…” ;
   • Right-click the space items then “Remove from Toolbar” : left to the “Back” button, below the URL bar, below the panel buttons at the bottom ;
   • Then add, move and remove whatever you want, before clicking “Done” ;
8. (Optionally) Star the GitHub repo ;
9. Subscribe to Theo.

:hammer_and_wrench: Customization

While the mod aims to be compatible with as many native customization features as possible (especially sidebar position, side panel position & width, themes, etc.), some had to be moved (e.g. sidebar width), but more were also added, these are located in the file you downloaded, above the source code :

Name	Description	Value(s)	Default
sidebar-width	Amount of horizontal space for the area containing the whole UI.(1)	Any number (in pixels)	210
compact-sidebar-width	Amount of horizontal space for the area containing the whole UI in compact mode.(1, 2)	Any number (in pixels)	50
is-auto-compact-mode	Whether to automatically enable compact mode when not hovering the sidebar.	1 = enable 0 = disable	0
is-phi-menu-icon	Whether to show Phi’s logo in place of Vivaldi’s as menu button.	1 = enable 0 = disable	1
toolbar-column-count	Number of toolbar buttons above the URL bar.(3)	Any quantity	5
address-bar-focused-width-increase	Enlarge the URL bar over the page content when focused.	Any number (in pixels) 0 = disable	200
address-bar-font-size-decrease	Lower the character size of the URL to see more of it.	Any number (in pixels) 0 = disable	1
is-address-bar-focused-height-increase	Whether to enlarge the URL bar over the extensions row below it when focused.	1 = enable 0 = disable	1
is-address-bar-unfocused-partial	Whether to hide “unimportant”(4) parts of the URL when the bar is not focused.	1 = enable 0 = disable	0
is-address-bar-unfocused-hide-icons	Whether to hide icons(5) in the URL bar when not focused to see more of the URL.	1 = enable 0 = disable	1
is-address-bar-focused-hide-icons	Whether to hide icons(5) in the URL bar when focused to see more of the URL.	1 = enable 0 = disable	0
pinned-column-count	Number of pinned tabs per row.	Any quantity	4
webview-border	Amount of space around the page content.(6)	Any number (in pixels) 0 = disable	0
webview-border-radius	Round the corners of the page content.(7)	Any quantity 0 = disable	0
webview-shadow-size	Amount of shadow around the page content.(8)	Any number (in pixels) 0 = disable	0
webview-shadow-color	Color of shadow around the page content.	Comma-separated RGBA values	0, 0, 0, 0.25

⁽¹⁾ Unfortunately, the sidebar cannot be resized by drag-and-drop.
⁽²⁾ On Mac, recommended value is 90 when using non-native window controls on left side.
⁽³⁾ Unfortunately, the toolbar cannot have more than one row (unless hard-coded to do so, trust me I tried hard).
⁽⁴⁾ Path and query parameters.
⁽⁵⁾ Except the following indicators : (in)valid HTTP(S), obfuscated domain name, loading.
⁽⁶⁾ Reduces page content area. When enabled, recommended value is 10. A lower value will reveal an unavoidable page content width inconsistency between normal & split tabs.
⁽⁷⁾ When enabled, recommended value is 5.
⁽⁸⁾ To copy Zen Browser, set value to 10.

Applying modifications requires restarting Vivaldi.

:wrench: Troubleshooting

• Double check Vivaldi settings as per installation step 4 ;
• Find potentially incompatible settings by comparing with an empty profile ;
• You may disable Phi by setting the tab bar position to top or bottom or toggling the tab bar off ;
• Simultaneously using Phi with another CSS mod is not supported.

EXPERIMENTAL auto-hide support (screenshot & feedback)

Auto-hide support is experimental. The following bugs are known and will be worked on in the future (help is welcome) :

• Side panels must be closed by clicking the active panel’s icon (close button remains hidden even if enabled) ;
• Toggling auto-hide may activate a side panel (that must be closed by clicking its icon) ;
• After closing a side panel, the UI may not auto-hide until another sidebar action is made (e.g. : opening/closing the Vivaldi menu or an extension or the the workspaces dropdown) ;
• Right side panels aren’t supported (though right side tabs work) ;
• When Use Native Window is disabled, UI visibility is inconsistent when moving the cursor around the top section (window controls, toolbar, URL bar, extensions) ;
• Browser shortcuts sometimes stop working until auto-hide is toggled off and back on again ;
• That’s all I found so far, but there’s likely more, feel free to report !

However, animating the sidebar’s visibility and making the sidebar float instead of changing the webview size, will likely never be possible.

:handshake: Feedback & Support

• Issues
• GitHub Issues
• Discord
• Reddit
• Vivaldi forum

🛜 Why “Phi” ?

Phi (φ) is a greek letter, used (among other things) to designate angles, like (for example) sextant () & compass () measurements for navigation.

:busts_in_silhouette: They use Phi

Are you using Phi ? You’re welcome to star the GitHub repo, submit your feedback with (optionally) a screenshot to showcase your setup here !

@Rohit685 — Stargazer	@sohamsarkar1993 — Stargazer	@MaxedPC08 — Stargazer
@TwilightGarden — Forum commenter	@furui1 / @NoProfilePicture — Discord & Reddit community member	@tobusy / @ARobertDev — Discord community member

:link: Related projects

• ImMainTheme/ArchyVivaldi
• tovifun/VivalArc
• (Address Bar + Title Bar + Status Bar) = Docked to side | Vivaldi Forum
• HKayn/vivaldi-vh

:heart: Vivaldi’s progress

Recent changes in Vivaldi’s native feature are getting it closer and closer to making Phi outlive its usefulness (I would like nothing more) :

• In Vivaldi 7.6, the URL bar can now be moved from the title bar to the sidebar ;
• In Vivaldi 7.9, the title bar can be auto-hidden.

Resulting in the following :

7.6	7.9

Native Vivaldi can now display a fully vertical UI, despite not being complete yet, while freeing from come Phi constraints like the incompatibility with the accordion tab stacking mode.

Although, it still doesn’t implement some exclusive Phi features like window controls in the sidebar, icon-only pinned tabs, and proper compact UI density support for this layout.

Detailed comparison table to be added.

:technologist: Development notes

Guide : Customizing Vivaldi’s UI with CSS mods - gabevilela.vivaldi.net

DevTools URL : vivaldi://inspect/#apps

DOM structure :

#browser.linux.win.mac.minimal-ui.fullscreen.tabs-left.tabs-right
├─ [aria-label="Address"]
│  ├─ .vivaldi
│  ├─ .button-toolbar
│  ├─ .UrlBar-AddressField
│  └─ .toolbar-extensions
├─ [aria-label="Panels"]
│  └─ .button-toolbar.button-toolbar-webpanel
├─ .panel-group
├─ [name="WorkspaceButton"]
├─ #tabs-container
│  └─ .tab-strip
│     ├─ .tab-position.is-pinned
│     │  └─ .tab-wrapper.active.group
│     │     ├─ .tab.pinned.active.tab-group
│     │     │  └─ .tab-header
│     │     │     ├─ .favicon
│     │     │     ├─ .title
│     │     │     └─ .close
│     │     └─ .tab-group-indicator
│     │        └── .tab-indicator.active
│     ├─ .separator
│     └─ .newtab
└─ #webview-container

---

© 2025 — KaKi87
Released under the MIT license.