[Solved] Changing the button on Linux to look like Windows 10
-
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!
-
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; }
-
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
-
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).