Floating tabs like Firefox/Brave

[saschadiercks]

I've created a small CSS-file, that turns the current tabs into rounded tabs and make them float, like they do in Firefox or Brave.
If you are interested in the custimisation, you can get it here:
https://github.com/saschadiercks/vivaldi-ui-mods

It works with horizontal scrolling enabled or disabled.
I'm also using a chrome-like theme in addition. It then looks like this:

It has some nice transitions and turns your cursor into a pointer to give proper feedback when hovering tabs:

In addition it highlights background-tabs with playing audio and makes them look like and active tab (sort of), while repsecting the color scheme:

(There are also some details on how to apply the modification - in case you don't already know.)

Hope, you like it

[saschadiercks]

@saschadiercks

Update 30.03.24 // Flat icon for macOS
Since a flat icon gives a cleaner look, I took the Vivaldi-icon from Wikimedia and put it in a shape, so that it matches the macOS-shape of Sonoma.

[saschadiercks]

@saschadiercks
Update 31.03.24 // Highlight of Audio in Background
The mod now also supports highlighting of tabs, that are not active, but play some audio in the background:

[barbudo2005]

@saschadiercks

We seem to have the same taste for tabs: Detached and Floating:

[saschadiercks]

@barbudo2005 Yes, I became a fan of it, when I first encountered it in Firefox and then later in the beta version of Brave.

[saschadiercks]

Update: 05.04.24
Added a pointer-cursor, when interacting with the dials in the speeddial, to give some feedback.

[saschadiercks]

Update: 16.04.2024
Added some drop shadows to highlight the active tab even more. It also adds a nice transition, when changing the active tab.
Non active tabs with background audio will also get the dropshadow, since they are also kind of active.

It looks like this:

[saschadiercks]

Update 20.04.24 // improved Transitions and background-audio highlight

This is new:

• optimized transition-speed (.3s)
• cursor turns into pointer when hovering tabs
• tabs get highlighted when hovering over them
• added a theme-file to import

[paulbazinet]

Hi, is this for Mac only? I followed all the steps on Windows but nothing happened. After I add the downloaded mod folder to the 'custom UI modifications' field and restart the browser, is there an additional step I need to do?

Thanks!

[mib2berlin]

@paulbazinet
Hi, I tested on Linux and it work.
You have to choose the folder Brave from the downloaded mod folder, there is the ui-mod.css.

If you want to add more mods later it is maybe better to create a folder of your choice and copy the file there.
Then choose this folder.
I have a folder vivaldi_scripts with all my .css mods files.

Cheers, mib

[paulbazinet]

That did it! Thanks for your help.

[LilaUraraka]

I love this, but it seems to break the rounding of the address bar, if someone has a solution to this, that would be appreciated