How Do I Make the Min/Max/Restore/Close Buttons Match my System UI



  • How can I get the tabs in the title bar, similar to brave or chrome.

    Right now it looks like this
    0_1538781398326_5bfdf762-22e3-4408-b946-298b96765227-image.png

    I want to keep "Use native UI" enabled, because Vivaldi min/max/close buttons do not match the rest of my system UI.

    In Brave, the tabs are in the title bar like this:
    alt text


  • Moderator

    Settings, Appearance, and disable "Use Native Window"

    Then do Settings, Tabs, Tab Display, and enable "Remove Tab Spacing in Maximized Windows."



  • @pesala As I said in my post, I want to keep Native UI Enabled, because Vivaldi does not match the rest of my system UI.


  • Moderator

    @jenoki I suggest renaming your thread to something like:

    How Do I Make the Min/Max/Restore/Close Buttons Match my System UI

    I moved your thread to the modding forum where you might find someone who can help with this.



  • aha, so you would like the window controls to be dots?

    I'm getting a little thrown off about what your OS is... Windows 10 with some stuff injected into the DLL?

    A mod could be made to do this.



  • @lonm I wonder, could be an option to just exchange the buttons in non-native window. There are already mods out there that do just that if I remember correctly.



  • @luetage Maybe... I haven't come across those before.



  • @jenoki If you're happy to mod the browser, you could try the following:

    .window-minimize svg path {
        d: path("M 9.7217725,0.46551385 C 9.7217757,3.1193029 7.5704552,5.2706255 4.9166661,5.2706248 2.2628775,5.2706249 0.1115576,3.1193025 0.1115608,0.46551385 c 5.81e-5,-2.65374525 2.15136,-4.80500005 4.8051053,-4.80500005 2.6537457,-6e-7 4.8050483,2.1512543 4.8051064,4.80500005 z");
    }
    
    .window-minimize svg {
        height: 10px;
    }
    
    .window-maximize svg path,
    .window-close svg path {
        d: path("M 9.8194288,4.9088733 C 9.819432,7.5626623 7.6681115,9.7139849 5.0143224,9.7139842 2.3605338,9.7139843 0.20921385,7.5626619 0.20921705,4.9088733 0.20927515,2.255128 2.3605771,0.1038732 5.0143224,0.1038732 c 2.6537457,-6e-7 4.8050483,2.1512543 4.8051064,4.8050001 z");
    }
    
    .window-maximize svg path,
    .window-minimize svg path {
        fill:#2b2b2b;
    }
    
    .window-close svg path {
        fill: #f25e5e;
    }
    
    button.window-maximize,
    button.window-minimize,
    button.window-close {
        width: 36px !important;
        padding: 0px !important;
    }
    
    
    button.window-maximize:hover,
    button.window-minimize:hover,
    button.window-close:hover {
        background: transparent;
    }
    
    .win10 #tabs-container.top {
        padding-right: 110px;
    }
    




  • @luetage Ah, it takes an approach to manually replace the icons. Similar to what I thought about doing.



  • @LonM's code looks like what you want but if you are not on Windows 10, you will have to add this to remove the red background Vivaldi adds to the close button to replicate the look of Win 7 and 8,

    #browser.win .window-buttongroup button.window-close, #browser.win:not(.win10) .window-buttongroup .window-close {background-color: transparent !important}
    


  • @lonm Thank you for your effort! It looks almost great. However, the way the mouse interacts with it is also different.

    System UI
    0_1538864723143_minemaxclose.gif

    Vivaldi Custom CSS
    0_1538864741028_minemaxclosevivaldi.gif

    Also, there is a strange orange pixel just above the close button. It looks as if Vivaldi is not covering my system UI completly, and some random orange pixel is peaking behind it
    0_1538864845837_951c03d3-a337-4e5f-944f-dd28adfcb9d4-image.png



  • @jenoki Hi. I added in what @sjudenim suggested above, as well as some animation support if you have animations turned on already in vivaldi settings:

    .window-minimize svg path {
        d: path("M 9.7217725,0.46551385 C 9.7217757,3.1193029 7.5704552,5.2706255 4.9166661,5.2706248 2.2628775,5.2706249 0.1115576,3.1193025 0.1115608,0.46551385 c 5.81e-5,-2.65374525 2.15136,-4.80500005 4.8051053,-4.80500005 2.6537457,-6e-7 4.8050483,2.1512543 4.8051064,4.80500005 z");
    }
    
    .window-minimize svg {
        height: 10px;
    }
    
    .window-maximize svg path,
    .window-close svg path {
        d: path("M 9.8194288,4.9088733 C 9.819432,7.5626623 7.6681115,9.7139849 5.0143224,9.7139842 2.3605338,9.7139843 0.20921385,7.5626619 0.20921705,4.9088733 0.20927515,2.255128 2.3605771,0.1038732 5.0143224,0.1038732 c 2.6537457,-6e-7 4.8050483,2.1512543 4.8051064,4.8050001 z");
    }
    
    .window-maximize svg path,
    .window-minimize svg path,
    .window-close svg path {
        fill:#2b2b2b;
        transition: fill 0.2s ease ;
    }
    
    #browser:hover .window-close svg path {
        fill: #f25e5e;
    }
    
    button.window-maximize,
    button.window-minimize,
    button.window-close {
        width: 36px !important;
        padding: 0px !important;
    }
    
    
    button.window-maximize:hover,
    button.window-minimize:hover,
    button.window-close:hover {
        background: transparent !important;
    }
    
    button.window-maximize:hover svg path,
    button.window-minimize:hover svg path,
    button.window-close:hover svg path {
        fill: #f25e5e;
    }
    
    .win10 #tabs-container.top {
        padding-right: 110px;
    }
    
    

    Unfortunately, I can't help you with the random orange pixel, I've no idea where that's coming from. I don't see it on my browser, so without having access to your system I'm not sure how to solve it.



  • @lonm Thank you very much! This looks great!!

    I guess I can live with the little pixel. I wonder why is it chrome and brave can use the Native UI and have tabs in the title bar, but vivaldi has to have it custom drawn?

    Anyway, thanks again for taking the time to do this 🙂



  • @jenoki I suspect its to do with the fact that the other browsers use a native UI, whereas vivaldi draws everything in a custom manner (as a webpage).


 

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