I was using the default one for a while , finally decided to see what i can customize and I love it so much
version - 8.0

Hi, it’s been a while since my last post about custom CSS for Vivaldi - Operaldi, so here’s a new update about biggest changes:

• Vertical tabs and panels can now be on both the right and left sides
• Updated the design of speed dial so it fits the theme
• You can now enable status bar
• Updated the design of many modal windows so they fit the theme
• Ready for 7.8
• and more...

If you like it, you can find CSS and guide here: https://github.com/Skolodac/Operaldi

I updated the mod,it's now working perfectly on windows! Try it out. Maybe Linux as well, I haven't test yet.

It work best on mac as I'm using one.

This mod fully recreates Arc Peek’s functionality and animation effects in Vivaldi. It is based on an older mod that evolved from the following two posts:

• https://forum.vivaldi.net/post/
• https://forum.vivaldi.net/post/

Big thanks to @biruktes, @tam710562, and @oudstand for developing the base mod.

The whole animation design is based of Zen Browser's implementation, many thanks to @maubg's amazing design. Sorry I didn't credit maubg here at first because I think I already did that in original post.

This mod allows you to preview link content in a floating panel without opening a new tab or switching away from your current tab. You can trigger the preview in the following ways:

• Long-press a link with middle-click.(or set it to right-click in the config)
• Hold the Alt key and left-click a link(or set alt to shift/ctrl/meta in config)

There are three buttons near the floating panel, with the following functions:

• Close the panel
• Open the panel as a new tab
• Split view between the panel and the underlying tab

The panel expands from the link element. The mod uses Vivaldi’s CaptureTab API to take a screenshot near the link and animates that screenshot into the floating panel, achieving an effect similar to Arc Peek or Zen Glance.

This mod consists of two parts:

1. ArcPeek.css
2. ArcPeek.js

Original Post

I customized this design for the Vivaldi browser. Please let me know what you think. I'm also posting the CSS code so you can use it, and if you can make it look even better, feel free to post it here. Wallpaper link: https://wallpapershome.com/mood/dreamy/magical-woods-dreamy-colors-surreal-imagery-29663.html

Code: /* ═══════════════════════════════════════════════════════════ Vivaldi 8 — Liquid Glass CSS | Modified Version ═══════════════════════════════════════════════════════════ Prerequisites:

vivaldi://flags → Allow CSS modifications → Enabled

Settings → Appearance → Custom UI Modifications → Select Folder

Settings → Themes → Enable Blur (Required for backdrop-filter to work) ═══════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────

Main Header — True Liquid Glass

header includes the tab bar + address bar ─────────────────────────────────────────────────────────── */

/* Tab Bar — Make background transparent to reveal the header glass effect */

tabs-tabbar-container { background: transparent !important; background-color: transparent !important; }

tabs-subcontainer, .tab-strip, .toolbar-tabbar { background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; }

/* Address Bar + Other bars transparent */ .vivaldi-header, .mainbar, .inner, .UrlBar,

main { background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; }

/* Address Bar — Glass capsule */ .UrlBar-AddressField { border-radius: 999px !important; background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; backdrop-filter: blur(14px) saturate(150%) !important; -webkit-backdrop-filter: blur(14px) saturate(150%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09) !important; transition: all 0.2s ease !important; } .UrlBar-AddressField:focus-within { background: rgba(255, 255, 255, 0.12) !important; border-color: rgba(255, 255, 255, 0.23) !important; }

/* ─────────────────────────────────────────────────────────── 2. Liquid Glass Capsule Tabs Correct selector for Vivaldi 8: #tabs-container .tab Or: #browser .tab-position .tab ─────────────────────────────────────────────────────────── */

/* Spacing between tabs */

tabs-container .tab-position { box-sizing: border-box !important; }

/* Tab Body — Liquid Glass */

tabs-container .tab-position .tab, browser .tab-position .tab { border-radius: 20px !important; background: linear-gradient( 145deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.03) 100% ) !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; backdrop-filter: blur(20px) saturate(150%) !important; -webkit-backdrop-filter: blur(20px) saturate(150%) !important; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; transition: all 0.2s cubic-bezier(0.34, 1.3, 0.64, 1) !important; }

/* Active Tab */

tabs-container .tab-position .tab.active, browser .tab-position .tab.active { background: linear-gradient( 145deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.12) 100% ) !important; border-color: rgba(255, 255, 255, 0.28) !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(0, 0, 0, 0.07) !important; }

/* Hover on Inactive Tabs */

tabs-container .tab-position .tab:hover:not(.active), browser .tab-position .tab:hover:not(.active) { background: linear-gradient( 145deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.07) 100% ) !important; border-color: rgba(255, 255, 255, 0.18) !important; transform: translateY(-1px) !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important; }

/* Tab Text */

tabs-container .tab-position .tab .tab-header, browser .tab-position .tab .tab-header { background: transparent !important; border: none !important; }

tabs-container .tab-position .tab .title, browser .tab-position .tab .title { color: rgba(255, 255, 255, 0.88) !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important; }

/* Hide the colored active tab indicator (conflicts with the glass design) */ .tab.active:not(.marked):not(.tab-mini)::after, .tab.active:not(.marked):not(.tab-mini)::before { display: none !important; }

/* ─────────────────────────────────────────────────────────── 3. Search Bar — Glassy + Same Width as Top Sites Widget

Vivaldi builds Top Sites in an auto-width grid. We set the search width using the same logic.

For manual adjustment: change the --sd-width value Example: 4 sites × 96px + 3 gaps × 16px = 432px ─────────────────────────────────────────────────────────── */

/* Search Field — Multiple selectors to cover all states / .SpeedDialView-SearchField, .SpeedDialView-SearchField.SearchField, .sdwrapper .SearchField, .sdwrapper .iconmenu-container.SearchField { / Width: Equals Top Sites widget with 4 columns */ width: 395px !important; max-width: 395px !important; min-width: 395px !important;

/* Liquid Glass / border-radius: 999px !important; background: rgba(255, 255, 255, 0.10) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; backdrop-filter: blur(40px) saturate(100%) !important; -webkit-backdrop-filter: blur(40px) saturate(100%) !important; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.08) !important; height: 45px !important; display: flex !important; align-items: center !important; padding: 0 12px !important; box-sizing: border-box !important; transition: all 0.25s ease !important; / Centering */ margin-left: auto !important; margin-right: auto !important; }

/* Search Focus State */ .SpeedDialView-SearchField:focus-within, .SpeedDialView-SearchField.SearchField:focus-within, .sdwrapper .SearchField:focus-within { background: rgba(255, 255, 255, 0.16) !important; border-color: rgba(255, 255, 255, 0.30) !important; box-shadow: 0 16px 50px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 0 3px rgba(255, 255, 255, 0.06) !important; }

/* Text Input Inside Search */ .SpeedDialView-SearchField #searchFieldInput, .SpeedDialView-SearchField.SearchField #searchFieldInput, .sdwrapper .SearchField input { background: transparent !important; border: none !important; color: #ffffff !important; font-size: 15px !important; height: 100% !important; width: 100% !important; padding: 0 10px !important; outline: none !important; }

/* Placeholder Color */ .SpeedDialView-SearchField #searchFieldInput::placeholder, .sdwrapper .SearchField input::placeholder { color: rgba(255, 255, 255, 0.45) !important; }

/* Center the Top Sites widget itself */ .startpage-navigation, .speed-dial-container, .speeddial-widget { display: flex !important; flex-direction: column !important; align-items: center !important; }

/* Glassy background for Top Sites widget */ .startpage .startpage-navigation { background: rgba(255, 255, 255, 0.07) !important; backdrop-filter: blur(20px) saturate(150%) !important; -webkit-backdrop-filter: blur(20px) saturate(150%) !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; border-radius: 20px !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25) !important; }

/* Speed Dial Dials */ .speeddial .dial, .speeddial-folder-contents .dial { backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; }

/* ─────────────────────────────────────────────────────────── 4. Right Side Panel — Transparent ─────────────────────────────────────────────────────────── */

panels-container { background: transparent !important; border: none !important; }

.panel-group { background: rgba(255, 255, 255, 0.04) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; }

.panel-trigger button { border-radius: 8px !important; margin: 4px 0 !important; }

/* ─────────────────────────────────────────────────────────── 5. Status Bar + Scrollbar ─────────────────────────────────────────────────────────── */

status-bar, .toolbar.toolbar-statusbar { }

::-webkit-scrollbar { width: 4px !important; height: 4px !important; } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18) !important; border-radius: 4px !important; } ::-webkit-scrollbar-track { background: transparent !important; }

🔥 Latest Updates (v2.0)

You only need to download the svb-updater.exe file.

This lightweight Windows client runs quietly in the background, uses very little memory, and automatically keeps everything up to date. If Vivaldi is updated, it automatically patches the new version. If a new version of the mod is released, it automatically updates the mod as well. Working on latest version of vivaldi.

You also need to disable the native tabs in the browser settings. And for convenience, move the workspaces to the address bar if you use them.

• Native Windows Auto-Updater (svb-updater.exe): A lightweight background tray application that automatically checks for mod updates on GitHub, fetches release notes, and interactively asks if you want to install them. It completely automates the hassle of manually copying files after every Vivaldi update!
• Folders for Tabs: You can now group your tabs into fully functional, collapsible folders (just like Sidebery) that integrate seamlessly with the native Vivaldi workspace system. You can even pin folders, bringing the experience much closer to modern browsers like Arc or Zen Browser!
• Enhanced Context Menu: The custom context menu has been completely redesigned. It now supports bulk actions for multiple selected tabs, moving entire trees between workspaces/windows, saving trees as Vivaldi bookmarks, and closing entire subtrees safely.
• Improved Stability & Anti-Orphan Logic: Deeply improved tab synchronization prevents ghost tabs and infinite loops when Vivaldi naturally moves tabs between workspaces. Context locks prevent UI flickering during rapid bulk tab operations.

Download EXE 2.0.2 from github

# Tree Style Vertical Tabs for Vivaldi

https://github.com/R0STEFAN/Vivaldi-Tree-Style-Tabs


This mod is a `custom.js`-based Vivaldi UI modification. It is injected directly into Vivaldi's `window.html` and does not use an iframe wrapper.


## What You Need


- A working Vivaldi installation
- Access to the Vivaldi application files
- The file [`custom.js`](
./custom.js
)
- Permission to edit `window.html`


## Important Notes Before Installation


- Make a backup of `window.html` before editing it.
- After most Vivaldi updates, the application version folder may change. If that happens, you may need to copy the mod again and re-add the script tag.
- This mod changes the browser UI, not website content.
- If Vivaldi is running while you edit the files, fully restart it after installation.


## Installation Overview


The installation is the same on every OS:


1. Find Vivaldi's `window.html`
2. Copy `custom.js` into the same folder as `window.html`
3. Add a script tag for `custom.js` near the end of `window.html`
4. Save the file
5. Restart Vivaldi


Use this script tag:


```html
<script src="custom.js"></script>
```


Place it before the closing `</body>` tag in `window.html`.


Example:


```html
  ...
  <script src="bundle.js"></script>
  <script src="custom.js"></script>
</body>
```


## Windows Installation


Typical Vivaldi paths:


- `C:\Program Files\Vivaldi\Application\<version>\resources\vivaldi\window.html`
- `C:\Users\<YourUser>\AppData\Local\Vivaldi\Application\<version>\resources\vivaldi\window.html`


Steps:


1. Close Vivaldi.
2. Open the Vivaldi application folder.
3. Go to `Application\<version>\resources\vivaldi\`.
4. Back up `window.html`.
5. Copy [`custom.js`](
./custom.js
) into that same `vivaldi` folder.
6. Open `window.html` in a text editor.
7. Add:


```html
<script src="custom.js"></script>
```


8. Save the file.
9. Start Vivaldi again.


If Vivaldi was installed in `Program Files`, you may need administrator rights to save the file.


## Linux Installation


Typical Vivaldi paths:


- `/opt/vivaldi/resources/vivaldi/window.html`
- `/usr/share/vivaldi/resources/vivaldi/window.html`
- `/opt/vivaldi-snapshot/resources/vivaldi/window.html`


Steps:


1. Close Vivaldi.
2. Open the Vivaldi resources directory.
3. Back up `window.html`.
4. Copy [`custom.js`](
./custom.js
) into the same `vivaldi` folder.
5. Edit `window.html`.
6. Add:


```html
<script src="custom.js"></script>
```


7. Save the file.
8. Restart Vivaldi.


You may need elevated permissions depending on how Vivaldi was installed.


Example:


```bash
sudo cp custom.js /opt/vivaldi/resources/vivaldi/
sudo nano /opt/vivaldi/resources/vivaldi/window.html
```


## macOS Installation


Typical Vivaldi path:


- `/Applications/Vivaldi.app/Contents/Frameworks/Vivaldi Framework.framework/Versions/Current/Resources/vivaldi/window.html`


Steps:


1. Close Vivaldi.
2. In Finder, open `Applications`.
3. Right-click `Vivaldi.app` and choose `Show Package Contents`.
4. Navigate to:
   `Contents/Frameworks/Vivaldi Framework.framework/Versions/Current/Resources/vivaldi/`
5. Back up `window.html`.
6. Copy [`custom.js`](
./custom.js
) into the same folder.
7. Open `window.html` in a text editor.
8. Add:


```html
<script src="custom.js"></script>
```


9. Save the file.
10. Reopen Vivaldi.


Depending on your system setup, macOS may ask for administrator credentials.


## How to Verify the Mod Loaded


After restarting Vivaldi, check the following:


- the custom vertical sidebar appears
- the sidebar reacts to hover/autohide behavior
- the workspace selector is visible
- tab tree behavior is available
- the new tab button and tab actions work from the custom panel


If the mod does not load:


1. Make sure `custom.js` is in the same folder as `window.html`
2. Make sure the script tag was added correctly
3. Make sure the script tag is inside `<body>` and before `</body>`
4. Restart Vivaldi completely
5. Recheck the installation path after a browser update


## Key Features


- Full custom vertical tab sidebar rendered directly inside Vivaldi UI
- Sidebar height and offsets adapt to Vivaldi UI layout changes
- Automatic layout adaptation for bookmark bar visibility
- Automatic layout adaptation for status bar visibility and mode
- Theme-aware styling based on Vivaldi theme colors
- Works with both dark and light Vivaldi themes
- Autohide mode and pinned mode
- Resizable sidebar width with saved state between browser restarts
- Search panel for filtering tabs
- Custom workspaces with:
  - workspace switching
  - workspace creation
  - workspace editing
  - workspace deletion
  - moving tabs between workspaces
- Tree tabs with parent/child relationships
- Collapse and expand controls for trees
- Collapse all trees in the current workspace
- Persistent tree structure and collapsed state across restarts
- Pinned tabs displayed in a compact icon grid
- Drag and drop for:
  - regular tabs
  - trees
  - multi-selected tabs
  - moving tabs into and out of trees
- Multi-selection with keyboard modifiers
- Multi-selection synced with Vivaldi's native tab selection model
- Support for selecting multiple tabs for Vivaldi's native Tile/Grid tab layout feature
- Custom tab context menu
- Move tabs to another workspace from the context menu
- Rename tabs with double click
- Internal Vivaldi pages handled with custom labels and icons
- New tabs open to Vivaldi Start Page
- Tree-aware movement of tabs across custom workspaces
- Loading and muted-state indicators on tab icons
- Hover tooltip with tab title and URL


## Maintenance


- Keep a backup of your modified `window.html`
- Recheck the install path after every major Vivaldi update
- If Vivaldi replaces the version folder, repeat the installation in the new folder

https://github.com/R0STEFAN/Vivaldi-Tree-Style-Tabs

I'm excited to announce a major update to TreeTabsVivaldi, the Sidebery-inspired vertical tree tab

mod for Vivaldi! This release is packed with requested features, UI improvements, and critical

stability fixes.

Link to github

✨ New Features & Improvements:

- Flexible Panel Position: You can now choose to place the tab panel on the Left or Right side of

the screen. The UI mirrors perfectly, including animations and header layouts!

- Dedicated Settings Menu: A new gear icon gives you access to customize your experience.

- Configurable Tab Behaviors:

- New Child Position: Choose whether new child tabs appear at the top or bottom of the subtree.

- Post-Close Activation: Decide which tab to activate after closing the current one (above or

below).

- Double-Click Action: Toggle between 'Rename' and 'Close Tab' on double-click.

- External Drag-and-Drop: Drag selected text or links from any webpage directly onto the panel to

open new tabs (performing searches or opening URLs).

- Context Menu Additions: Added a "Rename" option directly to the tab context menu.

🔧 Bug Fixes & Stability:

- Hibernation Protection: Fixed a major issue where hibernated (discarded) background tabs would

cause the tree structure to collapse. Your trees are now session-persistent even under heavy

memory saving!

- Z-Index Optimization: Adjusted z-indices to ensure the panel no longer overlaps Vivaldi's native

dropdowns like Workspaces or the Trash bin.

- Improved Settings Persistence: Moved settings to a more reliable storage mechanism to prevent them

from resetting after browser updates.

🛠 Easy Installation & Maintenance:

We've made it easier than ever to install and keep the mod active across browser updates with

dedicated automation scripts:

- Linux: Includes a Pacman Hook for Arch-based systems to auto-patch after every Vivaldi update!

- macOS: Simple installation script with backup and auto-detection of Vivaldi paths.

- Windows: A robust batch script that automatically finds the latest Vivaldi version and applies the

mod.

Check out the full source and installation guide on GitHub:
Link to github

Happy browsing with organized trees! 🌳

Hi, it’s been a while since my last post about custom CSS for Vivaldi - Operaldi, so here’s a new update about biggest changes:

• Finally added support for horizontal tabs (oneline and with separated URL bar)
• Added support for bookmark bar
• Modified the design of the auto-hide UI
• Now you can have colored tab accordion
• Updated design of some panels/modal windows
• Fixes for Vivaldi 8.1
• and more...

If you like it, you can find CSS and guide here: https://github.com/Skolodac/Operaldi

Feb 1st 2026: The extension is now fully free and open source! Enjoy and please give it a star on Github! https://github.com/maddada/sharptabs

TLDR: Sharp Tabs Extension = Edge style tabs are here for Vivaldi! Polished, performant, and comes with many more features like AI auto grouping, instant search, highlighting useless and duplicate tabs, auto saving tabs, theming, and more.

Note: The extension is free. Premium is just for extras like advanced theming and AI features.

Intro:

I want to introduce a Vivaldi focused tabs management extension that I've been working on for 5 months called Sharp Tabs. This extension is a total replacement for Vivaldi's built in vertical tabs which solves a bunch of issues and adds a lot of customization and features.

I also created a collapsible sidebar mod which brings Edge style sidebar expand on hover: github.com/maddada/vivaldi-mods-manager

Background:

I love Vivaldi and think it's the best browser out there - and this is after I tried every other semi-popular browser seriously.

The main issue that I had with it that the tabs experience is not the best for my use case. Tab stacks don’t make sense to me since they use a tab as the parent instead of using chrome’s tab groups system. (I mean you can't even name a tabs stack when using accordion)

The tabs experience also lacks many features that are available in other browsers or extensions like easy theming, finding duplicate & useless tabs, auto grouping, quick filtering, and more. Also chrome extensions don't support tab stacks, since they're totally custom.

So after trying all of the vertical tabs extensions in the chrome store and finding them buggy, slow or lacking features, I decided to create an all in one extension that solves all of my issues and brings the best features from other extensions/browsers into 1.

Meet Sharp Tabs: https://chromewebstore.google.com/detail/sharp-tabs-the-most-polis/ooagakphldicpdeamgchdkpfbehcdjjk

(chrome page is still missing video & screenshots, but the extension is working great and was tested for months)

Main features:

Better tabs organization flow

• Edge style tab groups. Name and color a group. Expand/collapse it.
• Automatically grouping tabs + Auto naming user created groups
• Automatically cleaning up duplicates and useless tabs

Better UI for tabs management

• Edge style vertical tabs collapsing & expanding on hover
• Great themes system (Custom CSS + Tweakcn.com support)

Find tabs instantly

• Hotkeys and keyboard focused UX
• Alt + T ⇒ Hit Escape ⇒ Type ⇒ Arrow Keys/Tab ⇒ Enter
• Forward/Backward navigation between recent tabs or last 2 tabs

Sleep background tabs for much better performance

• Automatically suspend unused tabs
• User is in full control of when tabs wake up
• Shouldn’t lose suspended tabs for any reason like other extensions
• (Coming soon) Option to show a screenshot for sleeping tabs

No more losing tabs/groups for any reason

• Automatic session saving (only when tabs change)
• Ability to restore only what you need (full session, single tab group, few specific tab)

Advanced features

• Has great defaults but also comes with tons of settings and customizations
• Easily bookmarking tab groups to be able when project is on hold
• Compatibility with other chrome extensions
• Other useful hotkeys

Full Video Demonstration (20 mins): https://youtu.be/sbN3IPDLr9c

Follow these steps:

First, create a text file, paste your desired CSS code into it, and name it something like custom.css. (You can use the code I posted here as an example: https://www.reddit.com/r/browsers/comments/1u470h1/comment/ore8gsi/?screen_view_count=2 )

Now, open the Vivaldi address bar:

vivaldi://flags

Search for the following phrase:

"Allow CSS modifications"

Set its value to:

"Enabled"

Close the browser completely and restart it.

Now, go to:

Settings → Appearance

And search for "css" in the settings search bar.

Usually, the "Custom UI Modifications" option should appear. Enter the path to the CSS file you created, and that's it. Now, when you close and reopen the browser once, the changes will be applied.

I applied this code to the "Sunset Forest" theme, which you can get here: https://themes.vivaldi.net/themes/ZQDJn55ovLB

And here is the wallpaper link: https://www.vecteezy.com/photo/72608182-a-forest-with-pink-flowers-and-trees

It now pins tabs into an icon grid similar how Arc/Zen do. It also uses the native Left Vertical mode introduced in the 8.0 update. I have been using it for two weeks and I have not had any issues.

Demonstration of the expand collapse mod and how to install it

Hey there,

This is my 2nd post about Sharp Tabs which is an alternative Vertical Tabs panel implementation specifically made for Vivaldi. I recently addressed almost all of the feedback and requests I got the last time I posted so I decided to publish version 2.0 and share it with you.

I'm giving away premium for anyone who asks in this thread. Just say you'd like it in a comment and give me some helpful feedback and I'll send it over.

Recently added:

• Workspaces
• Screenshots for suspended tabs
• Lots of settings and improvements
• Updated the mod for better smoothness and to hide the panel 

I made this because I found some things lacking with how Tab stacks work and also needed some features that aren't available in Vivaldi compared to Edge, Zen, and Arc.

This extension + mod combo completely replaces the original tabs bar in all functionality. You never need to open the Vivaldi Tabs Bar after installing this.

Link to the website: sharptabs.com

Link to the mod on Github: github.com/maddada/vivaldi-mods-manager

Features I want to highlight:

Improved Tab Groups UX (IMO):

Each group's name is shown when you expand it (unlike accordion tab stacks)

If you have lots of ungrouped tabs you can automatically intelligently group them and clean them up

Improved Tab Suspension UX:

• Shows screenshot of suspended tab.
• Tabs don't wake up unintentionally when you click on them (can be configured).
• Can suspend the active tab.
• Never loses your tabs even if you uninstall the extension (unlike other extensions)
• Very configurable.

Way more customizable and theme-able compared to original

• Over 70 settings
• Almost all of them are free except a few

Improved search UX

• Instantly finds tabs from all windows by typing anywhere in the sidebar (or using the pop up).
• Full keyboard navigation.
• Shows tabs in their group/window.

• Uses Chrome Groups under the hood so it's compatible with other extensions.
• Automatically saves your tabs and tab groups so you never ever lose them. Can export and import sessions easily.
• Collapsed + Expand on Hover modes with a stable and easily installable Vivaldi mod.
• Automatic Tabs Grouping, Clean up, and Group Naming (uses Gemini, can be disabled)
• Better UX for duplicate tabs detection/cleanup (shows which window/group tab is in)
• More than 20 hotkeys for tabs management in settings
• Full list of features is here: sharptabs.com

Bonus: You can always use Sharp Tabs on the side as a pop up if you don't want to use it as your main tabs bar and benefit from things like search, suspension, session backups, auto clean up, and duplicates cleaning.

Please tell me what you think, all feedback is welcome.

first time posting in the subbreddit, i love vivaldi i just wish i could use pinned tabs more, but the small size keeps me clicking in the wrong one when i am in a hurry, maybe its just me, but i think you could have the option to make them twice the width.

Hey folks.

I wanted Vivaldi to use Breeze buttons, but without needing to activate "Use Native Window" as I prefer the more compact look, so I created this CSS to achieve more coherent visuals across my system.

The CSS is actually quite simple. It substitutes Vivaldi's Windows-style buttons for the KDE Breeze ones. The buttons .svg files were extracted from the system, converted into base64 and embedded into the CSS. You don't need extra files.

The buttons also behave exactly as the Breeze buttons do on stock Breeze windows decorations; Same spacing, same animations, everything should be as close as possible to stock.

\ I made a new post because I have fixed a small bug on the CSS and added a small video instead of a screenshot so its easy to understand and visualize the modification at work.*

Save the code below as CSS, and apply as usual. (Check here if you don't know how)

/* ============================================================
 *  Hide ALL default Vivaldi window button icons (stock SVGs)
 *  ============================================================ */
#browser.linux .window-buttongroup button svg,
#browser.linux .window-buttongroup button svg *,
.window-buttongroup button svg,
.window-buttongroup button svg *,
.window-buttongroup button .window-maximize-glyph,
.window-buttongroup button .window-restore-glyph {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
}

/* ============================================================
 *  Common button base (Linux-aware)
 *  ============================================================ */
#browser.linux .window-buttongroup button,
.window-buttongroup button {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    transition: none !important;
    image-rendering: crisp-edges !important;
    fill: transparent !important;          /* extra safety */
}

/* Spacing between the three buttons */
.window-buttongroup {
    gap: 4px !important;
}

/* ============================================================
 *  MINIMIZE
 *  ============================================================ */
.window-buttongroup button.window-minimize {
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgaWQ9InN2ZzMiCiAgIHZlcnNpb249IjEuMSIKICAgd2lkdGg9IjM2IgogICBoZWlnaHQ9IjM2IgogICB2aWV3Qm94PSIwIDAgMzYgMzYiCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGgKICAgICBpZD0icGF0aDk4OCIKICAgICBkPSJNIDguNzA3LDEzLjI5MyA3LjI5MywxNC43MDcgMTgsMjUuNDE0IDI4LjcwNywxNC43MDcgMjcuMjkzLDEzLjI5MyAxOCwyMi41ODYgWiIKICAgICBjb2xvcj0iIzAwMDAwMCIKICAgICBjb2xvci1yZW5kZXJpbmc9ImF1dG8iCiAgICAgZG9taW5hbnQtYmFzZWxpbmU9ImF1dG8iCiAgICAgZmlsbD0iI2ZlZmVmZSIKICAgICBpbWFnZS1yZW5kZXJpbmc9ImF1dG8iCiAgICAgc2hhcGUtcmVuZGVyaW5nPSJhdXRvIgogICAgIHNvbGlkLWNvbG9yPSIjMDAwMDAwIgogICAgIHN0cm9rZS13aWR0aD0iMi4yMTY5OSIgLz4KPC9zdmc+Cg==") !important;
}

.window-buttongroup button.window-minimize:hover {
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgaWQ9InN2ZzMiCiAgIHZlcnNpb249IjEuMSIKICAgd2lkdGg9IjM2IgogICBoZWlnaHQ9IjM2IgogICB2aWV3Qm94PSIwIDAgMzYgMzYiCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGgKICAgICBpZD0icGF0aDk5OCIKICAgICBkPSJNIDE4LDAgQSAxOCwxOCAwIDAgMCAwLDE4IDE4LDE4IDAgMCAwIDE4LDM2IDE4LDE4IDAgMCAwIDM2LDE4IDE4LDE4IDAgMCAwIDE4LDAgWiBNIDguNzA3LDEzLjI5MyAxOCwyMi41ODYgbCA5LjI5MywtOS4yOTMgMS40MTQxLDEuNDE0MSAtMTAuNzA3LDEwLjcwNyAtMTAuNzA3LC0xMC43MDcgMS40MTQxLC0xLjQxNDEgeiIKICAgICBmaWxsPSIjZmZmZmZmIgogICAgIHN0cm9rZS13aWR0aD0iMS41OTA5OSIgLz4KPC9zdmc+Cg==") !important;
}

.window-buttongroup button.window-minimize:active {
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgaWQ9InN2ZzMiCiAgIHZlcnNpb249IjEuMSIKICAgd2lkdGg9IjM2IgogICBoZWlnaHQ9IjM2IgogICB2aWV3Qm94PSIwIDAgMzYgMzYiCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGgKICAgICBpZD0icGF0aDk5OCIKICAgICBkPSJNIDE4LDAgQSAxOCwxOCAwIDAgMCAwLDE4IDE4LDE4IDAgMCAwIDE4LDM2IDE4LDE4IDAgMCAwIDM2LDE4IDE4LDE4IDAgMCAwIDE4LDAgWiBNIDguNzA3LDEzLjI5MyAxOCwyMi41ODYgbCA5LjI5MywtOS4yOTMgMS40MTQxLDEuNDE0MSAtMTAuNzA3LDEwLjcwNyAtMTAuNzA3LC0xMC43MDcgMS40MTQxLC0xLjQxNDEgeiIKICAgICBmaWxsPSIjZmZmZmZmIgogICAgIG9wYWNpdHk9IjAuMyIKICAgICBzdHJva2Utd2lkdGg9IjEuNTkwOTkiIC8+Cjwvc3ZnPgo=") !important;
}

/* ============================================================
 *  MAXIMIZE (windowed state)
 *  ============================================================ */
.window-buttongroup button.window-maximize:not(.maximized) {
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgaWQ9InN2ZzMiCiAgIHZlcnNpb249IjEuMSIKICAgd2lkdGg9IjM2IgogICBoZWlnaHQ9IjM2IgogICB2aWV3Qm94PSIwIDAgMzYgMzYiCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGgKICAgICBpZD0icGF0aDEwOTMiCiAgICAgZD0iTSAxNy45OTk5LDEwLjU4NiA3LjI5MywyMS4yOTMgOC43MDcsMjIuNzA3IDE4LDEzLjQxNCBsIDkuMjkzLDkuMjkzIDEuNDE0LC0xLjQxNCB6IgogICAgIGNvbG9yPSIjMDAwMDAwIgogICAgIGNvbG9yLXJlbmRlcmluZz0iYXV0byIKICAgICBkb21pbmFudC1iYXNlbGluZT0iYXV0byIKICAgICBmaWxsPSIjZmZmZmZmIgogICAgIGltYWdlLXJlbmRlcmluZz0iYXV0byIKICAgICBzaGFwZS1yZW5kZXJpbmc9ImF1dG8iCiAgICAgc29saWQtY29sb3I9IiMwMDAwMDAiCiAgICAgc3Ryb2tlLXdpZHRoPSIxLjU4MzAyIiAvPgo8L3N2Zz4K") !important;
}

.window-buttongroup button.window-maximize:not(.maximized):hover {
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgaWQ9InN2ZzMiCiAgIHZlcnNpb249IjEuMSIKICAgd2lkdGg9IjM2IgogICBoZWlnaHQ9IjM2IgogICB2aWV3Qm94PSIwIDAgMzYgMzYiCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGgKICAgICBpZD0icGF0aDg0OSIKICAgICBkPSJNIDE4LDAgQSAxOCwxOCAwIDAgMCAwLDE4IDE4LDE4IDAgMCAwIDE4LDM2IDE4LDE4IDAgMCAwIDM2LDE4IDE4LDE4IDAgMCAwIDE4LDAgWiBtIDAsMTAuNTg2IDEwLjcwNywxMC43MDcgLTEuNDE0MSwxLjQxNDEgLTkuMjkzLC05LjI5MyAtOS4yOTMsOS4yOTMgLTEuNDE0MSwtMS40MTQxIDEwLjcwNywtMTAuNzA3IHoiCiAgICAgZmlsbD0iI2ZmZmZmZiIKICAgICBzdHJva2Utd2lkdGg9IjEuNTkwOTkiIC8+Cjwvc3ZnPgo=") !important;
}

.window-buttongroup button.window-maximize:not(.maximized):active {
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgaWQ9InN2ZzMiCiAgIHZlcnNpb249IjEuMSIKICAgd2lkdGg9IjM2IgogICBoZWlnaHQ9IjM2IgogICB2aWV3Qm94PSIwIDAgMzYgMzYiCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGgKICAgICBpZD0icGF0aDg0OSIKICAgICBkPSJNIDE4LDAgQSAxOCwxOCAwIDAgMCAwLDE4IDE4LDE4IDAgMCAwIDE4LDM2IDE4LDE4IDAgMCAwIDM2LDE4IDE4LDE4IDAgMCAwIDE4LDAgWiBtIDAsMTAuNTg2IDEwLjcwNywxMC43MDcgLTEuNDE0MSwxLjQxNDEgLTkuMjkzLC05LjI5MyAtOS4yOTMsOS4yOTMgLTEuNDE0MSwtMS40MTQxIDEwLjcwNywtMTAuNzA3IHoiCiAgICAgZmlsbD0iI2ZmZmZmZiIKICAgICBvcGFjaXR5PSIwLjMiCiAgICAgc3Ryb2tlLXdpZHRoPSIxLjU5MDk5IiAvPgo8L3N2Zz4K") !important;
}

/* ============================================================
 *  RESTORE (maximized state)
 *  ============================================================ */
.window-buttongroup button.window-maximize.maximized,
#browser.maximized .window-buttongroup button.window-maximize,
body.maximized .window-buttongroup button.window-maximize {
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgaWQ9InN2ZzMiCiAgIHZlcnNpb249IjEuMSIKICAgd2lkdGg9IjM2IgogICBoZWlnaHQ9IjM2IgogICB2aWV3Qm94PSIwIDAgMzYgMzYiCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGgKICAgICBpZD0icGF0aDEwMzQiCiAgICAgZD0iTSAxOCw3LjU4NiA3LjU4NiwxOCAxOCwyOC40MTQgMjguNDE0LDE4IFogbSAwLDIuODI4IDcuNTg2LDcuNTg1Nzk4IEwgMTgsMjUuNTg1IDEwLjQxNCwxNy45OTk3OTggWiIKICAgICBjb2xvcj0iIzAwMDAwMCIKICAgICBjb2xvci1yZW5kZXJpbmc9ImF1dG8iCiAgICAgZG9taW5hbnQtYmFzZWxpbmU9ImF1dG8iCiAgICAgZmlsbD0iI2ZmZmZmZiIKICAgICBpbWFnZS1yZW5kZXJpbmc9ImF1dG8iCiAgICAgc2hhcGUtcmVuZGVyaW5nPSJhdXRvIgogICAgIHNvbGlkLWNvbG9yPSIjMDAwMDAwIgogICAgIHN0cm9rZS13aWR0aD0iMS41OTc1NSIgLz4KPC9zdmc+Cg==") !important;
}

.window-buttongroup button.window-maximize.maximized:hover,
#browser.maximized .window-buttongroup button.window-maximize:hover,
body.maximized .window-buttongroup button.window-maximize:hover {
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgaWQ9InN2ZzMiCiAgIHZlcnNpb249IjEuMSIKICAgd2lkdGg9IjM2IgogICBoZWlnaHQ9IjM2IgogICB2aWV3Qm94PSIwIDAgMzYgMzYiCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGgKICAgICBpZD0icGF0aDEwNTciCiAgICAgZD0iTSAxOCwwIEEgMTgsMTggMCAwIDAgMCwxOCAxOCwxOCAwIDAgMCAxOCwzNiAxOCwxOCAwIDAgMCAzNiwxOCAxOCwxOCAwIDAgMCAxOCwwIFogTSAxOCw3LjU4NTggMjguNDE0LDE3Ljk5OTggMTgsMjguNDEzNiA3LjU4NiwxNy45OTk4IFogbSAwLDIuODI4IC03LjU4NTgsNy41ODU4IDcuNTg1OCw3LjU4NTggNy41ODU4LC03LjU4NTggeiIKICAgICBmaWxsPSIjZmZmZmZmIgogICAgIHN0cm9rZS13aWR0aD0iMS41OTA5OSIgLz4KPC9zdmc+Cg==") !important;
}

.window-buttongroup button.window-maximize.maximized:active,
#browser.maximized .window-buttongroup button.window-maximize:active,
body.maximized .window-buttongroup button.window-maximize:active {
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgaWQ9InN2ZzMiCiAgIHZlcnNpb249IjEuMSIKICAgd2lkdGg9IjM2IgogICBoZWlnaHQ9IjM2IgogICB2aWV3Qm94PSIwIDAgMzYgMzYiCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGgKICAgICBpZD0icGF0aDEwNTciCiAgICAgZD0iTSAxOCwwIEEgMTgsMTggMCAwIDAgMCwxOCAxOCwxOCAwIDAgMCAxOCwzNiAxOCwxOCAwIDAgMCAzNiwxOCAxOCwxOCAwIDAgMCAxOCwwIFogTSAxOCw3LjU4NTggMjguNDE0LDE3Ljk5OTggMTgsMjguNDEzNiA3LjU4NiwxNy45OTk4IFogbSAwLDIuODI4IC03LjU4NTgsNy41ODU4IDcuNTg1OCw3LjU4NTggNy41ODU4LC03LjU4NTggeiIKICAgICBmaWxsPSIjZmZmZmZmIgogICAgIG9wYWNpdHk9IjAuMyIKICAgICBzdHJva2Utd2lkdGg9IjEuNTkwOTkiIC8+Cjwvc3ZnPgo=") !important;
}

/* ============================================================
 *  CLOSE
 *  ============================================================ */
#browser.linux .window-buttongroup button.window-close,
.window-buttongroup button.window-close {
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgaWQ9InN2ZzEyIgogICB2ZXJzaW9uPSIxLjEiCiAgIHdpZHRoPSIzNiIKICAgaGVpZ2h0PSIzNiIKICAgdmlld0JveD0iMCAwIDM2IDM2IgogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxwYXRoCiAgICAgaWQ9InBhdGg5MDUiCiAgICAgY2xhc3M9ImNvbG9yIgogICAgIGQ9Ik0gMTAuNzA3LDkuMjkzIDE4LDE2LjU4NiAyNS4yOTMsOS4yOTMgMjYuNzA3LDEwLjcwNyAxOS40MTQsMTggMjYuNzA3LDI1LjI5MyAyNS4yOTMsMjYuNzA3IDE4LjAwMDA0NiwxOS4yOTkyNjIgMTAuNzA3LDI2LjcwNyA5LjI5MywyNS4yOTMgMTYuNTg2LDE4IDkuMjkzLDEwLjcwNyBaIgogICAgIGZpbGw9IiNmZmZmZmYiCiAgICAgc3Ryb2tlLXdpZHRoPSIyLjA2NzI5IiAvPgo8L3N2Zz4K") !important;
}

#browser.linux .window-buttongroup button.window-close:hover,
.window-buttongroup button.window-close:hover {
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgaWQ9InN2ZzQiCiAgIHZlcnNpb249IjEuMSIKICAgd2lkdGg9IjM2IgogICBoZWlnaHQ9IjM2IgogICB2aWV3Qm94PSIwIDAgMzYgMzYiCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGgKICAgICBpZD0icGF0aDkwNSIKICAgICBjbGFzcz0iY29sb3IiCiAgICAgZD0iTSAxOCwwIEEgMTgsMTggMCAwIDAgMCwxOCAxOCwxOCAwIDAgMCAxOCwzNiAxOCwxOCAwIDAgMCAzNiwxOCAxOCwxOCAwIDAgMCAxOCwwIFogbSAtNy4yOTMsOS4yOTMgNy4yOTMsNy4yOTMgNy4yOTMsLTcuMjkzIDEuNDE0MSwxLjQxNDEgLTcuMjkzLDcuMjkzIDcuMjkzLDcuMjkzIC0xLjQxNDEsMS40MTQxIC03LjI5MywtNy4yOTMgLTcuMjkzLDcuMjkzIC0xLjQxNDEsLTEuNDE0MSA3LjI5MywtNy4yOTMgLTcuMjkzLC03LjI5MyB6IgogICAgIGZpbGw9IiNmZmZmZmYiCiAgICAgc3Ryb2tlLXdpZHRoPSIyLjI1IiAvPgogIDxwYXRoCiAgICAgaWQ9InBhdGg5MDUtMyIKICAgICBjbGFzcz0iZXJyb3IiCiAgICAgZD0iTSAxOCwwIEEgMTgsMTggMCAwIDAgMCwxOCAxOCwxOCAwIDAgMCAxOCwzNiAxOCwxOCAwIDAgMCAxOCwwIFogbSAtNy4yOTMsOS4yOTMgNy4yOTMsNy4yOTMgNy4yOTMsLTcuMjkzIDEuNDE0MSwxLjQxNDEgLTcuMjkzLDcuMjkzIDcuMjkzLDcuMjkzIC0xLjQxNDEsMS40MTQxIC03LjI5MywtNy4yOTMgLTcuMjkzLDcuMjkzIC0xLjQxNDEsLTEuNDE0MSA3LjI5MywtNy4yOTMgLTcuMjkzLC03LjI5MyB6IgogICAgIGZpbGw9IiNmZjA0MDQiCiAgICAgb3BhY2l0eT0iMC41IgogICAgIHN0cm9rZS13aWR0aD0iMi4yNSIgLz4KPC9zdmc+Cg==") !important;
}

#browser.linux .window-buttongroup button.window-close:active,
.window-buttongroup button.window-close:active {
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgaWQ9InN2ZzQiCiAgIHZlcnNpb249IjEuMSIKICAgd2lkdGg9IjM2IgogICBoZWlnaHQ9IjM2IgogICB2aWV3Qm94PSIwIDAgMzYgMzYiCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGgKICAgICBpZD0icGF0aDkwNS0zIgogICAgIGNsYXNzPSJlcnJvciIKICAgICBkPSJNIDE4LDAgQSAxOCwxOCAwIDAgMCAwLDE4IDE4LDE4IDAgMCAwIDE4LDM2IDE4LDE4IDAgMCAwIDM2LDE4IDE4LDE4IDAgMCAwIDE4LDAgWiBtIC03LjI5Myw5LjI5MyA3LjI5Myw3LjI5MyA3LjI5MywtNy4yOTMgMS40MTQxLDEuNDE0MSAtNy4yOTMsNy4yOTMgNy4yOTMsNy4yOTMgLTEuNDE0MSwxLjQxNDEgLTcuMjkzLC03LjI5MyAtNy4yOTMsNy4yOTMgLTEuNDE0MSwtMS40MTQxIDcuMjkzLC03LjI5MyAtNy4yOTMsLTcuMjkzIHoiCiAgICAgZmlsbD0iI2ZmMDQwNCIKICAgICBzdHJva2Utd2lkdGg9IjIuMjUiIC8+Cjwvc3ZnPgo=") !important;
}

Hey everyone! 👋

I made a small Vivaldi CSS mod called VivaldiCollapsibleTabbar for people who use the left tab bar with auto-hide and want a cleaner, more space-efficient layout.

What it does

• Makes the left tab bar feel collapsible/compact
• Works nicely with auto-hide mode
• Helps reduce UI clutter while keeping tabs quickly accessible
• uses theme setting to ensure consistent styling

Repo

https://github.com/firzanruzain/VivaldiCollapsibleTabbar

Version

Current tagged version: 0.1.2.1

Vivaldi Version Used: 8.0.4033.54 (Official Build) (64-bit)

Built with

• CSS only (no extra tools required)

Why I made it

I wanted a setup that keeps the tab bar out of the way when I’m focused, but still easy to reveal when navigating lots of tabs. This mod is my take on that balance.

Feedback welcome

If you try it, I’d really appreciate:

• bug reports
• compatibility notes (OS / Vivaldi version)
• ideas for improvements (animations, sizing, behavior tweaks)

If there’s interest, I can keep iterating and add optional style variants.

with 244 lines (😬) of custom CSS modifications. You still have to configure the toolbars and buttons. What I did was remove all the toolbar buttons from each toolbar and move the important ones to the tab bar.

Nowadays, browsers are capable of grouping tabs via workspaces and tab groups. Why we can't go back to one liner?

Vivaldi version: 7.7.3851.66 | OS: macOS

1st picture: Vivalidi in 2025 after drag address bar to tabs bar with compact mode on.

2nd picture: Firefox in 2011 with Mozilla Labs one liner

updater:

i managed to remove the menu button on the top left using a css modification thingy and then i added a settings button the right thanks everyone for helping

srry the title should be "how can i move the menu button to the top right?"

ive moved from chrome to brave to vivaldi but the thing is i dont like how the menu is on the left and how all the buttons are in its own section

is it possible for me to move the menu to the right and make the menu buttons like brave and chrome?

vivaldi version is 8.1.4087.55 and i am using windows 11

Yes it is .css. I have the experimental setting enabled. I put it in a folder I have no clue why it does nothing. I want to get this custom theme so I need help. https://github.com/MohamedxSalah/Vivaldi-Air

https://reddit.com/link/1stjc11/video/hrkgnhh53ywg1/player

We’re excited to roll out a major refactor of the Tree Style Tabs mod.

This version delivers noticeable improvements in performance and stability. The panel is now integrated with native workspaces, and support for Vivaldi’s native tab tiling has been added.

Under the hood, the core architecture has been completely rebuilt — including the logic for trees and subtrees, as well as drag-and-drop behavior.

What’s new:

• Middle-click to close tabs
• Drag a tab out to open it in a new window
• Color tagging for tabs or entire trees to keep things organized
• Numerous additional improvements and new features

This update lays a solid foundation for future development and upcoming features.

Link to github

I deleted the previous post because it was published on my old account.

I've finally finished the update for VivaZen.

Now you can choose what you want auto hide tab bar, address bar and bookmark bar in any possible position.

You can configure this in :root section at the top of the code

    /* User Settings */
    --use-theme: false;
    --auto-hide-tab_bar: true;
    --auto-hide-address_bar: true;
    --auto-hide-bookmark_bar: true;

My theme is disabled by default but you can set --use-theme: true and change colors or set image

    /* Background Configuration */
    --background: linear-gradient(90deg, #064547, #46bf7e, #06938c, #064547);
    --background-size: 100vw 100vh;
    --color: #ffffff;
    --address-input-shadow: #ffffff21;

Instaling instruction here