[Code] Windows 10 Window Controls for Linux (Non-Native)



  • Hi all,

    I recently installed OpenSuse Leap, and wanted to see if I could replicate Windows 10 windows control icons in Vivaldi. I was successful, so I want to share the code with you. This is setup for a 4k monitor, so if you have a lower resolution, you may need to adjust your margins.

    Also, I had to send the trash button into outer space (hidden) so that my minimize button would work. Feel free to adjust accordingly. Code is here:

    
    .sync-and-trash-container {
        margin-top: 80px !important;
    }
    
    
    #browser.linux .window-buttongroup button.window-close:hover {
        background-color: pink !important;
    }
    #browser.linux .window-buttongroup button.window-minimize:hover {
        background-color: lightgray !important;
    }
    #browser.linux .window-buttongroup button.window-restore:hover,
    #browser.linux .window-buttongroup button.window-maximize:hover {
        background-color: lightgray !important;
    }
    
    #browser.linux .window-buttongroup button {
    
    background-color: transparent !important;
    width: 40px !important;
    
    }
    
    #browser.linux .window-buttongroup {
    top: 10px !important;
    right: 10px !important;
    background-color: transparent !important;
    }
    
    
    #browser.linux .window-buttongroup .window-minimize svg path {
      d: path("M0 5H10V6H0V5Z");
    }
    #browser.linux .window-buttongroup .window-maximize svg .window-maximize-glyph path {
      d: path("M9 1v8H1V1h8m1-1H0v10h10V0z");
    }
    #browser.linux .window-buttongroup .window-maximize svg .window-restore-glyph path {
      d: path("M3 0H2v2H0v8h8V8h2V0H3zm4 9H1V3h6v6zm2-2H8V2H3V1h6v6z");
    }
    #browser.linux .window-buttongroup .window-close svg path {
      d: path("M10.2.5l-.7-.7L5 4.3.5-.2l-.7.7L4.3 5-.2 9.5l.7.7L5 5.7l4.5 4.5.7-.7L5.7 5");
    }
    

Log in to reply
 

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