[Solved] Changing the button on Linux to look like Windows 10

helloimrandom

Hello!
I've been using Vivaldi on both Linux and Windows and I find the close/minimize/maximize buttons to be much more aesthetic in the latter. Basically, afaik normally on Linux I have the choice between this or this and I'm looking for a modification that would make the buttons look like this (upper right corner).
Thank you!

LonM

The appearance of these is set according the the class "win" being present in the body (and not "win10"), from what I can see.

I think the following is the code used to style the window buttons that is specifically relevant to windows. You could try adding this as a custom style, and experimenting a little until you get something you like.

.maximized#browser.win .window-buttongroup, .fullscreen#browser.win .window-buttongroup {
    right: 0;
}
#browser.win .window-buttongroup {
    position: absolute;
    right: 7px;
    top: 0;
}

#browser.win.tabs-top #header #titlebar .window-buttongroup button {
    height: 20px;
}
#browser.win .window-buttongroup button {
    margin-left: 1px;
    transition: background 0.3s;
    border-radius: 0;
}
.maximized:not(.win10)#browser.win .window-buttongroup button.window-close, .fullscreen:not(.win10)#browser.win .window-buttongroup button.window-close {
    width: 50px;
    padding-right: 5px;
    background-clip: content-box;
}
#browser.win:not(.win10) .window-buttongroup .window-close {
    fill: #fff;
}
#browser.win .window-buttongroup button.window-close {
    width: 46px;
    border: 0;
    padding: 0;
    fill: #fff;
    background-color: #c94f4d;
    padding-right: 1px;
    margin-right: -1px;
}
#browser.win .window-buttongroup button {
    margin-left: 1px;
    transition: background 0.3s;
    border-radius: 0;
}

sjudenim

You can create your own images and either use an absolute path to point to them or embed an image using this
https://websemantics.uk/tools/image-to-data-uri-converter/

This is what I am using (minus the background-image: because this forum is choking on that bit of code so I've left it blank). Also, since you are on linux, the #browser.win bits will need to be changed. For mac it would be #browser.mac but I'm not sure for linux, try #browser.linux or #browser.native.linux

.window-buttongroup {
     z-index: 2;
}
#browser .window-buttongroup {
    height: 32px !important;
    margin-top: 2px !important;
}
#browser .window-buttongroup button {
    height: 32px !important;
    width: 46px !important;
 }
#browser.win .window-buttongroup button.window-minimize svg path,
#browser.win .window-buttongroup button.window-maximize svg path,
#browser.win .window-buttongroup button.window-restore svg path,
#browser.win .window-buttongroup button.window-close svg path {
    display: none;
}
#browser.win .window-buttongroup button.window-minimize {
    background-image: 
}
#browser.win .window-buttongroup button.window-maximize,
#browser.win .window-buttongroup button.window-restore {
    background-image: 
}
#browser.win .window-buttongroup button.window-close {
    background-image: 
    background-color: transparent;
    margin-right: -2px !important;
}
#browser.win .window-buttongroup button {
    opacity: .7;
}
#browser.win .window-buttongroup button:hover {
    background-color: rgba(255,255,255,0.1) !important;
    opacity: 1 !important;
}
#browser.win .window-buttongroup button.window-close:hover {
    background-color: var(--colorHighlightBg) !important;
}

This code is for images that are 46px x 32px, so you will have to adjust to the size of yours.

Also, I've merged mine onto the toolbar using that z-index: bit of code which you might not need at all.

End result

helloimrandom

Thanks for the answers! @sjudenim I fiddled with the code you provided and embedded the images. In the end I decided to do with KDE style buttons rather than Windows, as that's the DE that I'm using. Anyway, the following code is what I was after.

#browser.linux .window-buttongroup {
    right: 0px !important;
    top: 0px !important;
}
#browser .window-buttongroup {
    height: 32px !important;
    margin-top: 0px !important;
    margin-right: 0px !important;
}
#browser .window-buttongroup button {
    height: 30px !important;
    width: 22px !important;
    margin-left: 2px !important;

 }
#browser.linux .window-buttongroup button.window-minimize svg path,
#browser.linux .window-buttongroup button.window-maximize svg path,
#browser.linux .window-buttongroup button.window-restore svg path,
#browser.linux .window-buttongroup button.window-close svg path {
    display: none;
}
#browser.linux .window-buttongroup button.window-minimize {
    background-image:  url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAeCAYAAAAo5+5WAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QcKDQAyDF6cIAAAAGFJREFUSMft0DEOgCAQRFHkJBxEE+LxvYkUzOAJbCwsgESWxmReu8sPWedERAwABMuObz5Y/AEgdqLx2QmffpzztYLlJLlXZltrNhw3R2vxadH3PcGSwJJ6dx+Pz46KyF/cX4ViFFfojUAAAAAASUVORK5CYII=);
}
#browser.linux .window-buttongroup button.window-restore,
#browser.linux .window-buttongroup button.window-maximize {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAeCAYAAAAo5+5WAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QcKDQAPVDbQMQAAAHhJREFUSMftkzEOgCAMRYtR3Iin85AusnguWkaX76KLMYCRyNI3FQpv4BciRVG+A8ACsKXn+1Ipx7ic9WyM2XN3zBvpxeRckTwlHQLzyiwbgPG+riLN7RcHFUR8EPFPgeX6RERdi/Gq/xQ1wmszbm/C+u1LK4qS4ABvwbZO5x7asgAAAABJRU5ErkJggg==);
}
#browser.linux .window-buttongroup button.window-close {
    width: 26px !important;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAeCAYAAAAy2w7YAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QcKDQ8OpKn8aAAAAcdJREFUSMftVj1PG0EQfTO3dAm3vppIrvITgMJYfIiaKEQ29M5/QkKpiS2B+AF8GK7Jf0ikIEV0iLvYlHczKUhgfb4vKxFK4dedZnfe7ryZtwfMMcdLg8qCcRxvK9BR0BoBS783/BBQyJCBtfbsr4hGo9HbVOQQoHb5dr1ioo++73+dmSiKxm2QnAJo1DxspEI7QbAY1iZ6vIl+mYHkD+6ZsOL7/reiBex+pIKDDMlNSXI3Fojqp7KTsCs8oBtuIuPxMkDDnEIMH2MuGbXjON6qJFKgm4k1E5ET41EXoAun2KHxqJuk+hlA090g4E4RkXkmotZUZyhaicix8Xg3SXEE0gXD/CFJ9QjQzelTa7uyGaL45xjAq4JlQ+NRBwCSVAeArhfke2hY/3VlM/wDSB2Nbgvu/KRJrmaT5bmtJCJomEviavKkGe3nkQnougYR+tk5Mcy7Sar9CeEVrSTVvvFoLztnDBnUcoYoHp1nuukm28LFMb1qWLteyxkI0gNw585SifDNSQuiXi1nAABr7XcVeg/gfhafU6F3ZT6X295BsBgyYTXfeqYqf8mElSrnrvPwbQm4w9A1Bd5kHr6+tfZi/u8wx/+LX7NLs1lUKeLSAAAAAElFTkSuQmCC);
}
#browser.linux .window-buttongroup button {
    background-color: transparent !important;
    transition: all 0.2s ease;
}
#browser.linux .window-buttongroup button:hover {
    background-color: transparent !important;
}
#browser.linux .window-buttongroup button.window-close:hover {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAeCAYAAAAy2w7YAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QcKDREEkD0qqQAAAeRJREFUSMftlbFrE3EUxz/vZ3IgDpJVFydxcjURjGAXu0gpqJVIcwQKxiWTWfwPumWJQktIC6VVIYNLs1RIBFPnbi510TVksNKL/p5Dk3DXXHKnYHXIm+7uvXuf33vf3+/9YGYzO2uT4UM6q+J3LC9jit7OHaT/ADSLcAkA5StIG02+fuEsvdvcxPr/22+LTgX5TdfqV7FmDSUbscw2xq7IivspfkXMJQA6lfxNHN4iXIzVE6WHx71MaeMDwD57P6ZX5FxIaqVyBXE+AqnflKCLejekVPqM960fFmBGFXlpRZz1EURtC7XNiamt7qK2NXhLIc562kvrpPARqFN9fBt8mqgc5Z65S1jbGIfYRq6cfwR8933NDnJMB4E8DHpkfmu1XsuV3UIAZm0jV3YLW6v1GmLuBoU4dz8aZMytca9ZDMD8EGMWQxSfWFHCF3SZsA6fwLj+3H2q3aQ9qE6ADHNEty5iF3eTVlJ986eTIeE7D1+Aa+HCu4WDar0GMGgdoVWd5IioSGlNgow0Oa3ZePz7GKCfb4Krs81Q4QMw3T1V0qtYI6jzMr83OktqW6gcYWQ+XDTbBM4jZrjT2pknG3P/1wjKFLcPOWYBpRcbofQ4ZiFT3D6cNoL+wTXxly++mc3s7O0Xfmj228sDsgkAAAAASUVORK5CYII=) !important;
}
#browser.linux .window-buttongroup button.window-minimize:hover {
    background-image:  url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAeCAYAAAAo5+5WAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QcKDQg5U1XPoAAAAZhJREFUSMftlb1OG0EQx3+zdzW3XBsiUZE3AAqwnKDUiSJkKz28ExKiBltKlAdICOSavEMiJVKUDtkn097NUJiP87EcZ2j9L2dnftrZ+VhYaKG6pOkwz/O3Bj1DtgVWrgP+KZI5dOi9/zoXeDKZrJWqhyCd5nvZuRPZT5Lk16Pg8fiyg+gXYLll1mNTeZemS9mD4OlN7ecc0BuNnLCRJMnvG4OrnpbKwROgAKmaHVUNrloosNfP6INOnuc798AG/Zrn3xa0GR/F9QJg2aoGxJFbBzlruOHZ1OcO7rDOPbDAi0rUaqH6OY6kD3IaaNIsjqRflHYCrFayXgkWb7ZF2SpUP8WRfJyBC1ns3G5R2jHYm1qUht74/6PwZihSYcR3RstAXgXhpQ3iSHogFKUNwbqhJBX5EXrjQcPodovShk3QKUyHwckb55NvoRTbyc6Xve8GiyfoHnDxBOrIiewFJw/Ae//HVD4Ao3mgpvK+uieC7ZamS5kTNpuH4zbH707YqG+2Not+R3E9h20bvKwt+oH3/nTxVy7UXldJsKN5pS/poQAAAABJRU5ErkJggg==);
}
#browser.linux .window-buttongroup button.window-restore:hover,
#browser.linux .window-buttongroup button.window-maximize:hover {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAeCAYAAAAo5+5WAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QcKDR4hXKHiIQAAAZdJREFUSMftlbtKA0EYhc8ZSOzccbFTCxtfIRYmeMHaC7h5At9JEB8gEdQH8J5GfAUFC7E1Q6yMOMfCVcbNbIxgmdMszOWb+c/8/7/AWGMVxWGTzrl1AZnAOoHZfMOjBzsGvm2tPf0TuNfrLbx7vw+wMfxeujLkbpIkd7+Cu92XBuhPAEyNGHVXnhtpOtkpBX/eVDcl0H7+rUbmng1RS5Lk/mvAhLPvHnulUDGDmAUHhEq9dBAOmPChAK2UQr9tLYOz4ZxbGwALaEagbxCbMnoD1QJ1CIAitgC8Fhd7mCwC5lIEmsmoT+EIwASACqg2PasitotwAzUGwARmCuHvABCF4xz6pQqoFj0rEJuhLcpzfeDx/kE+5vFTsKA6xM+fvgfpx4ARWKFO4fSYnzHfg+vyOuZxKxLaTz/Lfc9hvh2tvK7rnQFaHZrLVDtefbqasnY5CnbOzQu8BTD9ryVtrX2Q5zaA58jmahlUnpshNJpuaTrZMcQiwMsR2vmFIWrFzjZKo1/zMJmB6gLmCo2+Za09H/8rxxpdH5XputBimUTAAAAAAElFTkSuQmCC);
}

And it makes Vivaldi look like this (corner rounding must be <=1 or closing won't work properly).

Sadi58

@helloimrandom
I've just re-invented this solution following a different path here!
I might be able to improve it thanks to the Breeze-style code above.
Actually, just landed here while searching for a way to incorporate two different images for maximize and unmaximize/restore button.
Splitting the combination here into two classes doesn't work either.
So I'm still looking for it.
Any ideas?