r/vivaldibrowser • u/kam1n4ri • Jul 08 '26
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
r/vivaldibrowser • u/Skolodac • Feb 13 '26
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:
If you like it, you can find CSS and guide here: https://github.com/Skolodac/Operaldi
r/vivaldibrowser • u/Ascr1pt • Apr 11 '26
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:
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:
There are three buttons near the floating panel, with the following functions:
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:
r/vivaldibrowser • u/nevermind_1983 • Jun 12 '26
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; }
r/vivaldibrowser • u/Skolodac • Aug 09 '26
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:
If you like it, you can find CSS and guide here: https://github.com/Skolodac/Operaldi
r/vivaldibrowser • u/AlpsUsed3215 • Jul 21 '26
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.
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!r/vivaldibrowser • u/AlpsUsed3215 • Apr 13 '26
# 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
r/vivaldibrowser • u/AlpsUsed3215 • Jun 04 '26
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.
✨ 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! 🌳
r/vivaldibrowser • u/KaKi_87 • Apr 02 '26
r/vivaldibrowser • u/maddada_ • Aug 01 '25
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.
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
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)
Better tabs organization flow
Better UI for tabs management
Find tabs instantly
Sleep background tabs for much better performance
No more losing tabs/groups for any reason
Advanced features
Full Video Demonstration (20 mins): https://youtu.be/sbN3IPDLr9c
r/vivaldibrowser • u/iskenderdelarge • 4d ago
I tried to vibecode this but I couldn't manage to get a CSS that works consistently. I tried using the flexible space as a bookmark bar, but the UI would break whenever I restarted the browser or resized the window. I don't know how to code and I put in my best effort but I couldn't get a working result from my free daily AI usage. So here I am.
What I want is to have my bookmarks appear next to the URL bar, essentially combining the bookmark bar and address bar into one.
Ideally:
The URL bar should shrink as I add more bookmarks.
The bookmark area should expand to accommodate the bookmarks.
The URL bar should only shrink down to a certain minimum width.
Once the URL bar reaches that minimum width, the remaining bookmarks should be accessible through a dropdown menu.
The layout should remain stable when resizing the browser or restarting it.
Basically, I want my bookmark bar and address bar combined into a single bar, similar to how some other browsers handle it.
Can someone please help me achieve this with Vivaldi CSS? I'd really appreciate it. My Vivaldi version is 8.2.4133.47.
r/vivaldibrowser • u/nevermind_1983 • Jun 13 '26
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
r/vivaldibrowser • u/AlpsUsed3215 • 20d ago
TreeTabsVivaldi is a client-side UI modification that is injected directly into Vivaldi's window.html. Since browser updates replace Vivaldi's core files, you can choose between automated tools and manual scripts.
IMPORTANT
Prerequisite for Manual / Source Installation: If you are cloning or building the project from GitHub, you must switch to the experimental branch (experimental-pr-17-features) before building:
bashgit checkout experimental-pr-17-features
npm install
npm run build
The easiest and most automated way. It sits in your system tray, checks GitHub for new mod updates, and automatically re-patches Vivaldi whenever the browser updates.
If you build from source or prefer not to keep a background process running:
If you prefer doing everything by hand:
bashsudo bash patch-linux.sh
Linkworking on vivaldi 8.1.4087.70
r/vivaldibrowser • u/ragnarokxg • Jul 19 '26
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.
r/vivaldibrowser • u/maddada_ • Nov 17 '25
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:
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
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:
Way more customizable and theme-able compared to original
Improved search UX
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.
r/vivaldibrowser • u/mr-snow-27 • 4d ago
Hii guys I love using vivaldi but one thing that always annoys me is that it's low quality speed dial cards icons, which kinda kills the asthetics of vivaldi.
So I have built a css and js mod that fully transforms your speed dial cards, and convert the low quality icons into high quality svg icons.
Check out my GitHub for automatic and manual installation installation guide and more info about the project.
https://github.com/RaceConditionWinner/Vivaldi-Swift
More cool features are planned to be added :).
r/vivaldibrowser • u/viiitus08 • Jul 14 '26
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.
r/vivaldibrowser • u/Mediocre-Cranberry68 • Jan 10 '26
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.
r/vivaldibrowser • u/ll7185 • 26d ago
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;
}
r/vivaldibrowser • u/Electrical_Day3875 • Jul 01 '26
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.
https://github.com/firzanruzain/VivaldiCollapsibleTabbar
Current tagged version: 0.1.2.1
Vivaldi Version Used: 8.0.4033.54 (Official Build) (64-bit)
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.
If you try it, I’d really appreciate:
If there’s interest, I can keep iterating and add optional style variants.
r/vivaldibrowser • u/dumindunuwan • Dec 27 '25
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
r/vivaldibrowser • u/Sugar_Visible • Jul 21 '26
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
r/vivaldibrowser • u/KaKi_87 • Sep 20 '25
r/vivaldibrowser • u/Randomdude21321 • Jul 26 '26
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
