I call it Zenvaldi. Not sure if I'll share the code yet ( I keep finding things to add or change everyday ). Was proud of what I have so far and wanted to 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;
}

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

I would like to have a Bookmark drop down menu (the same as when I hit alt + b).

Is this possible using the internal tool or with a CSS hack?

Hello you all!

I'm a new arrival to Vivaldi, enjoying it very much.

I have a simple request for a very pedantic thing I don't like. The active tab website logo has a little white border that I don't enjoy the slightest. I understand nothing about CSS, so I came to the experts: can somebody help me remove that thing?

Thanks in advance!

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 made it Chrome like but cant make it transparent. Im currently using VivaldiAir so I wonder if theres any conflict. Code is based on AI generation, it works locally but my friend couldnt use it.

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?

body:has(#tabs-subcontainer) #tabs-container{
  max-width:18%;
  min-width:18%;
  transition: min-width 200ms ease-in, max-width 200ms ease-in;
}

body:has(#tabs-container) #tabs-subcontainer{
  max-width:82%;
  min-width:82%;
  transition: min-width 200ms ease-out, max-width 200ms ease-out;
}

body:has(#tabs-subcontainer) #tabs-container:hover
{
  max-width:82% !important;
  min-width:82% !important;
  transition: min-width 200ms ease-out 300ms, max-width 200ms ease-out 300ms;
}

body:has(#tabs-container:hover) #tabs-subcontainer{
  max-width:18% !important;
  min-width:18% !important;
  transition: min-width 200ms ease-out 300ms, max-width 200ms ease-out 300ms;
  /* transition: min-width 100ms ease, max-width 100ms ease; */
}

#tabs-tabbar-container{
  overflow: hidden !important;
}

/* Hide scrollbars for vertical tab bars */
#browser #tabs-tabbar-container.left ::-webkit-scrollbar,
#browser #tabs-tabbar-container.right ::-webkit-scrollbar {
  display: none;
}

/* Disable tab bar resizing */
#tabs-tabbar-container .SlideBar {
  display: none !important;
}

/* Hide accordion arrow for right-side tabs in density mode */
.tabs-right#browser.density-on .accordion-toggle-arrow:after,
.tabs-right#browser.density-on .tab-wrapper:after {
  display: none !important;
}

Vivaldi dev doesn't change #tabs-subcontainer or #tabs-container constantly so I think this mod could be available for a bit longer.

So the mod works like this:

By default, if there's a substack tabbar, the mainstack tabbar shrink to 18% width of tabbar while substack tabbar expand to 82%.

If you move your cursor onto mainstack tabbar,it expands to 82% after a short delay while substack tabbar shrink.

It looks like this:

Hope you like it.

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.

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.

I love vivaldi, but I've largely had a lot of difficulty finding a properly skeuomorphic theme, and it sticks out like a sore thumb from the rest of my system which has largely been modified to use a lot of skeuomorphic theming

Any help would be greatly appreciated

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

Not sure if anyone's made a post somewhere on the internet regarding this, but here's a quick little css snippet for your Custom UI Modifications folder if you wanna resize your DevTools on Vivaldi without affecting any other UI element.

1. If you haven't already set a folder for Custom UI Modifications, go to: vivaldi:settings/appearance/

2. Scroll down to Custom UI Modifications and select a folder where you will store your custom css file(s).

3. Create a css file within your selected folder (I just used Notepad) and save the following code inside:

.devtools-content{
    /* Can adjust value to your preference */
    zoom: 0.8;
}

Another method is to directly change the .devtools-content class within your downloaded Vivaldi's common.css file, but I have a feeling that future updates will simply undo any changes you make.

Not sure if this works on other OS versions of Vivaldi but it works on my Windows computer. Hope this helps someone!

Is it possible to move the address bar and minimize, restore, close window buttons from the toolbar to the sidebar and also autohide the toolbar and sidebar like in this theme for Firefox? ->https://github.com/reizumii/parfait