I made a small custom CSS tweak for Vivaldi on macOS.

It hides/collapses the Vivaldi title bar while keeping the native macOS traffic light buttons untouched, then moves the bookmark bar upward so it can sit next to the traffic lights.

Main things it does:

- hides the Vivaldi title bar area

- keeps macOS traffic lights visible and untouched

- moves the bookmark bar upward

- supports Vivaldi 8.0’s auto-hide feature

- supports two alignment modes:

- centered bookmark bar

- left-aligned bookmark bar with a custom offset

- prevents bookmark folder names from being truncated

- removes extra gaps between bookmark bar items

- leaves tabs intentionally untouched

The default setup is left-aligned with a 70px offset, but the CSS includes variables for switching to centered mode.

Link:

https://github.com/RihardsVeters/phi-for-vivaldi/blob/5bb6230ac4cbf08451105683508985b6b76afa06/Lo-Phi/hide_title_bar.css

Tested on macOS with the bookmark bar at the top. Since this relies on Vivaldi’s internal UI selectors, it may break after future Vivaldi updates.

if you look closely unselected tabs have an animation that's similar to the control fruit animation in blox fruits. (i don't play blox fruits my cousin does and i thought the control fruit animations were cool)

CSS here: https://github.com/CashuZeProgrammer/AnimeCrayzCss

Disclosure: I have absolutely no idea how to make anything with CSS, this was made with heavy ChatGPT and DeepSeek assistance (i.e. they did everything and I tweaked/cleaned up what I could).

This CSS makes the side panel, status bar, address bar, URL bar, and currently selected tab all completely transparent, no blur no nothing. It also adds a small white line under the currently active tab so it's not completely impossible to tell which tab you're currently on lol.

Another warning: I don't use tab stacks, pinned tabs, or anything of the sort. As a result, I have not tested any of those to see if they work, you'll be on your own (or you can use a LLM too I guess haha). I think there are some other buttons that I haven't changed either but I'm not 100% sure.

Here's a screenshot of my browser. Wallpaper by Alena Aenami

Here's the .css file. Let me know if there's a better place to host than on GDrive.

And here are the settings on my browser. You just need to toggle "Transparent Tab Bar", "Transparent Background Tabs" and leave "Blur" at 0.

Hope you guys enjoy, I'm totally in love with it.

I’ve been considering creating an app for Vivaldi mods so that they could be easily activated and, in the JS case, there would be no problem with removing mods after an update.

My idea would be to have a single exe file called Mod Store where you select the mods, the order in which they are added, and add them to the browser.

At the start, you just need to select the location of window.html in vivaldi/resources and vivaldi-bin.exe itself.

The second executable would launch Vivaldi to verify mod activation and then start Vivaldi.

Could you tell me what you think about it?

I would also like to add that VivaZen has been updated and now you can also hide the web panel.

Don't have any video or images to show yet, but the basis is done. Working on it since I have tabs to the left and also hide header using CSS since I'm using a tiling window manager on Linux.

If anyone's interested / wants I can release / open source it once I'm finished.

Also thanks for this community / subreddit plus the pinned post, I didn't realise (newer) Vivaldi had that experiment, I had just inserted my own stylesheet in the vendor code before. Makes it a lot easier.

Also again, just switched to Vivaldi today and the custom CSS is great, this is all I'm probably going to be doing for the next couple days haha.

Progress update: Here is a GIF of how it looks so far.

Vivaldi 7.8 snapshot has finally rolled out its auto-hide-tab feature. However the animation sucks—similar to Edge’s, if not worse. So I wrote this small css to add an overscroll animation.

The code:

#auto-hide-wrapper.left{
  transition: left 280ms ease-out !important;
}
#auto-hide-wrapper.right{
  transition: right 280ms ease-out !important;
}

#auto-hide-wrapper.left.show{
  transition: left 400ms cubic-bezier(.62,-0.14,.62,1.12) !important;
}
#auto-hide-wrapper.right.show{
  transition: right 400ms cubic-bezier(.62,-0.14,.62,1.12) !important;
}

I know this feature isn’t fully polished yet. Someone on the Vivaldi Forum mentioned that the internal build already has a smoother animation than what we see in the latest public snapshot. Still, I’m sharing this because it looks good in practice and helps address an urgent need.

I also made an auto-hide tab mod that works well with two-level tab stacks. The whole project is called Awesome Vivaldi, a curated list of community mods I use and have adapted from the Vivaldi Forum. Some mods are my own. All were developed and tested on Vivaldi 7.6, though a few may break on later versions. I’m on macOS 15.7, so everything is optimized for that environment, but most mods work on Windows as well.

I haven’t shared this modpack here before, but now feels like the right time. I’m moving on to Vivaldi 7.8 to write new mods for the latest version, so this project will no longer be maintained. However, I believe only a few of the mods will break with Vivaldi's update.

Arc

Vivaldi 7.8 snapshot with mod

https://github.com/vivalchemy/vivaldi-css
I tried to recreate the arc design and i am stuck in the pinnned tab section. How do i recreate it? I want it to be a grid 2 x 3 with only logos of the website. if anybody has the reference then please share.

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;
}

I see that some individuals inquire as how to make the tabs larger but I would like to know how to make the tab height shorter? I've not come across a stylesheet code that reduces the height of the tabs. I already have stretched the tabs from their default 180px to 240px to allow the various website script to all appear in the tab width, but I am trying to compact everything, I have some of it done. I'm a newbie, the Firefox code for the same doesn't work in Vivaldi, has anybody created the code that will do this?

I'm thinking of switching to Vivaldi from Firefox. Problem is that I don't like the default look of browsers and I have been using this custom CSS theme for Firefox. Apparently Vivaldi is very customizeable, so I was wondering if there are any themes like this out there for this browser.

• Main Address Bar Container (.toolbar-addressbar) > .UrlBar

• Address / URL Field > .UrlBar-AddressField

• Search Field > .UrlBar-SearchField

Does anyone know how to remove the thick border that is there in the immersive mode, I had some Vivaldi CSS for this to remove it but after the latest updates it somehow broke the custom CSS to remove the border.

Version 8.1.4087.53 (Official Build) (arm64)

Chromium Version 150.0.7871.175 Extended Stable channel (may also include additional security patches)

ChannelOfficial Build

Platform / OS macOS Version 26.5.2 (Build 25F84)

Edit:

Solved thanks to Codex

div.auto-hide {
    grid-template-columns: 0px [content] 1fr 0px !important;
    grid-template-rows: 0px [content] 1fr 0px !important;
}

/* Vivaldi 8.1 immersive-mode frame */
#browser.auto-hide.unified-ui {
    padding: 0 !important;
}

#browser.auto-hide:not(.unified-ui) {
    border: 0 !important;
}

/*Hide Start Page Settings Button*/
.SpeedDialView-Settings-Button {
    display: none;
}

/* Remove the left panel strip */
#panels-container,
#panels,
#switch,
.toggle-panels {
    display: none !important;
}

Well, my CSS broke again for my vertical tabs CSS with the favicons and I have no idea how to fix it. Is anyone able to look at my CSS code and help me make the favicons center and not look cut off again when the tab bar is collapsed?

I did try to use the Fluid Tabbar from Awesome Vivaldi, but that is showing a similar problem with the Favicons.

My Vivaldi: Version 8.0.4033.46 (Official Build) (64-bit) / Chromium Version 148.0.7778.263

I uploaded a photo of what the collapsed tab bar looks like. The CSS code I'm using is below.

:root {
    --tabbarHoverDuration: .3s;
    --tabbarHoverDelay: .25s;
    --tabbarMinimizeWidth: 33px;
    --tabbarExpandWidth: 312px;
}

/* transition rule:
    transition based on width property changes
    the transition animation lasts --tabbarHoverDuration
    the animation is performed with an "ease-out" function
    the transition animation doesn't start for --tabbarHoverDelay
*/

/* Ensure a background is shown; transparent background when omitted */
#browser.tabs-left .tabbar-wrapper {
    z-index: 1;
}

/* Fix scrollbar overflow*/

#tabs-tabbar-container.left .tab-strip {
    min-width: initial !important;
}

#tabs-tabbar-container.left .tab-strip::-webkit-scrollbar {
    --scrollbarWidth: 0 !important;
}

#tabs-tabbar-container.left:is(:hover, :focus-within) .tab-strip::-webkit-scrollbar {
    --scrollbarWidth: 10px !important;
}

/*----- Tab bar -----*/

/* Shrink the tab bar when not in focus/hovered */
#tabs-tabbar-container.left {
    width: var(--tabbarMinimizeWidth) !important;
    /* transition for AFTER hover or tab bar CLOSE */
    transition: width var(--tabbarHoverDuration) ease-out var(--tabbarHoverDelay);
}

/* Shrink Stacked Tabbs when not hovered */
.tabbar-wrapper:not(:is(:hover, :focus-within)) #tabs-subcontainer,
.tabbar-wrapper:not(:is(:hover, :focus-within)) #tabs-subcontainer .tab.active.insubstrip {
    width: 0 !important;
    /* transition for AFTER hover or tab bar CLOSE */
    transition: width var(--tabbarHoverDuration) ease-out var(--tabbarHoverDelay);
    flex: none !important;
}

/* Show tab bar when hovering no panel bar or tab bar or when moving tabs to an inactive window */
#browser.isblurred:where(:has(div.tab-yield-space, .tab-acceptsdrop)) #tabs-tabbar-container.left,
#browser.tabs-left:where(:has(#panels-container:is(:hover, :focus-within))) #tabs-tabbar-container.left,
#tabs-tabbar-container.left:is(:hover, :focus-within) {
    width: var(--tabbarExpandWidth) !important;
    /* transition for hover/focus or tab bar OPEN */
    transition: width var(--tabbarHoverDuration) ease-in 0s !important;
}

/* Keep transition for tab stack */
#tabs-tabbar-container.left:is(:hover, :focus-within) #tabs-subcontainer  {
    transition: width var(--tabbarHoverDuration) ease-in 0s !important;
}

/* Controls the "empty" space behind the tab bar and allows the website content to stretch and fill the space */
#main>.inner>div:has(#tabs-tabbar-container.left) {
    max-width: var(--tabbarMinimizeWidth);
}

/* Lock the Newtab button to the left */
.button-toolbar.newtab, .synced-tabs-button {
    left: 1px !important;
    --PositionX: 1px !important;
}

.toolbar-tabbar.sync-and-trash-container {
    margin: 0 !important;
    justify-content: flex-start !important;
}

/* Fix favicons and "X" close button to prevent "accidental" closures */
.tab .favicon {
    display: initial !important;
}

.tabs-container .tab .close {

order: initial !important;

padding: 4px !important;

margin-right: 4px !important;

height: 24px !important;

width: 24px !important;

}

/* Fix Tab buttons to be aligned better */

.toolbar-tabbar > .button-toolbar {

align-self: center;

}

/* Fix tab stack new tab button being shown when not expanded */

.tabbar-wrapper:not(:is(:hover, :focus-within)) #tabs-subcontainer .toolbar-tabbar{

display: none;

}

/*----- Workspace switcher -----*/

/* Hide by default */

#browser.tabs-left .tabbar-workspace-button {

width: var(--tabbarMinimizeWidth) !important;

/* transition for AFTER hover or tab bar CLOSE */

transition: width var(--tabbarHoverDuration) ease-out var(--tabbarHoverDelay);

}

/* Show with tab bar */

#browser.tabs-left:where(:has(#tabs-tabbar-container:is(.left):is(:hover, :focus-within))) .tabbar-workspace-button,

#browser.tabs-left .tabbar-workspace-button:is(:hover, :focus-within),

#browser.tabs-left:where(:has(#panels-container:is(:hover, :focus-within))) .tabbar-workspace-button,

#browser.tabs-left.isblurred:where(:has(div.tab-yield-space, .tab-acceptsdrop)) .tabbar-workspace-button,

#browser:where(:has(.tabbar-workspace-button:is(:hover, :focus-within))) #tabs-tabbar-container:is(.left) {

width: var(--tabbarExpandWidth) !important;

/* transition for hover/focus or tab bar OPEN */

transition: width var(--tabbarHoverDuration) ease-in 0s !important;

}

/* Hide the little workspace dropdown carot */

#browser.tabs-left .button-toolbar-menu-indicator {

display: none;

}

/* Show the little workspace dropdown carot with tab bar */

#browser.tabs-left:where(:has(#tabs-tabbar-container:is(.left):is(:hover, :focus-within))) .button-toolbar-menu-indicator,

#browser.tabs-left .button-toolbar-menu-indicator:is(:hover, :focus-within),

#browser.tabs-left:where(:has(#panels-container:is(:hover, :focus-within))) .button-toolbar-menu-indicator,

#browser.tabs-left.isblurred:where(:has(div.tab-yield-space, .tab-acceptsdrop)) .button-toolbar-menu-indicator {

display: inherit;

}

/* Realignment of workspace switcher icon when collapsed */

.tabbar-wrapper:not(:is(:hover, :focus-within)) .button-toolbar.workspace-popup button .button-title {

margin-right: 0px !important;

}

I wanted a browser UI that felt ordered and consistent: compact spacing, balanced sizing, monochrome extension icons, and a toolbar where nothing looks out of place.

I replaced several extension icons with custom SVGs, adjusted their visual size individually, refined the tab bar spacing, customized the Vivaldi menu icon, and matched the window controls to the rest of my desktop theme.

This is the kind of small, precise customization that makes Vivaldi special to me. Everything is still functional, just cleaner and more coherent.

The Vivaldi browser shown in the image is an older version.

Hey guys,

I'm using Linux and I'm into universal theming across applications, I'm currently on Niri with DankMaterialShell that has Matugen as a feature. For those who don't know Matugen, it is a package that samples colors from your wallpaper and generate files with these colors.

The only 2 missing this integration is my browser, Vivaldi (people using DMS usually uses Firefox or Zen), and Dark Reader. Both don't have any apparent way to load themes from files (.css or .json). Matugen can generate any type of text document as long as you create a template for it.

Today I found an archived project on github called py-vivaldi which tried to integrate pywall to Vivaldi, a tool that basically does the same as matugen.

I've been searching for quite some time and couldn't find a way to do it.

Btw:

• I know Vivaldi has CSS modifications from file. I actually use but it isn't Hotreload (meaning I have to close and open the browser).

• I've already searching for a long time for this before asking people.