[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
    0_1499623062558_2017-07-09_452.png



  • 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).0_1499694465481_Screenshot_20170710_154611.png


Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.