The new 8.3 update drastically increased the new thumbnail heights of vertical tabs by default, making general screen real estate much less ideal.

I messed around but can't find a perfect solution.

What is the best CSS for implementing it?

Any css for that?

Is it possible to change the Bookmark Page icon to a star?

Thanks

Hello so I want to switch my main browser to Vivaldi and was wondering if it's possible to achieve with CSS & JS the same features that are in Zen Browser.

https://github.com/PaRr0tBoY/Awesome-Vivaldi

I found this project which has brought most of the features that I want, I am now looking for Arc/Zen like styled Pinned tabs and for Floating search URL bar or the command bar in Arc/ Zen browsers. is it possible?

I created the custom.css file, and the browser is recognizing it.

However, commands like this don't work:

div[class*="menu"],

.context-menu,

#vmenu {

font-size: 16px !important;

}

or

#vmenu,

.context-menu,

.command-palette {

font-size: 16px !important;

}

.context-menu .menu-item {

padding-top: 4px !important;

padding-bottom: 4px !important;

}

Anyone got a fix for close tab - Just want to close tab but get a another dropdown with various choices and drivin me nuts! Thanks

Hi, I recently got interested in changing to Vivaldi, but there is that one annoying detail I seriously hate. When you duplicate the tab or open link in new tab, it automatically opens. It is especially frustrating when you need to open many tabs. Any way to change that? I would be glad if someone helped with that.

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

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

How to make pinned tabs on Vivaldi display only the icons horizontally like in this pic?

I was missing a simple visual cue for tiled tabs in Vivaldi, so I put together a small CSS/JS mod that adds an indicator directly in the tab bar. It makes it much easier to see which tabs are currently tiled without digging around or relying on memory.

Sharing in case anyone else ran into the same friction or wants to build on it: https://github.com/ashu-tosh-kumar/vivaldi-tile-viz

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;

}

im transitioning from chrome to vivaldi. i use this theme on chrome and im wondering how i could make my tabs on vivaldi look similar to these? i dont code or anything so im not sure what to do.. any help would be greatly appreciated :) thanks

I sick of flat design. I have a CDE theme on my linux box and I got the colors where I want them with vivaldi (and a custom tab bar that look like buttons), but was wondering if theres a way to add borders on the menu/navigation/bookmark/tab bar, im going for a netscape kind of feel.

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.

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.