Window buttons mod for macOS + Windows



  • This is a mod exclusively for macOS (correction: and Windows, look at @raed's version further down), changing/styling the shape of the window buttons.

    Background: I recently tested the desktop email client Mailspring, which is an Electron app available for all operating systems. One of its themes features this kind of window buttons and I wanted to bring the look to Vivaldi, because I think it's interesting. Initially I tried just to copy the CSS, but this turned out badly, so I had to recreate it on my own, which was kinda painful furious . But turns out it was all worth it bigsmile

    type no hover hover
    blue 0_1546808292595_Screenshot 2019-01-06 21.39.47.png 0_1546808350137_Screenshot 2019-01-06 21.40.01.png
    graphite 0_1546808377840_Screenshot 2019-01-06 21.38.37.png 0_1546808391647_Screenshot 2019-01-06 21.39.14.png
    no tabs 0_1546949469495_Screenshot 2019-01-08 13.10.07.png 0_1546949487111_Screenshot 2019-01-08 13.10.35.png
    fullscreen 0_1546949191658_Screenshot 2019-01-08 13.03.35.png 0_1546949212555_Screenshot 2019-01-08 13.03.49.png

    This is a pure CSS mod. Code:

    /* window buttons */
    
    #browser.mac .window-buttongroup button svg {
        display: none;
    }
    #browser.mac #titlebar {
        height: 100%;
    }
    #browser.mac .window-buttongroup {
        height: 100%;
        margin: 0;
        padding: 14px 8px 0;
    }
    #browser.mac #titlebar.tabless .window-buttongroup {
        margin-top: 0px;
        padding-top: 5px;
    }
    .stacks-off.fullscreen#browser.mac .window-buttongroup, .tabs-at-edge#browser.mac .window-buttongroup {
        margin-top: 0px;
        padding-top: 9px;
    }
    #browser.mac .window-buttongroup button {
        margin-top: 3px;
        height: 6px;
        width: 12px;
        opacity: 0.2;
        background-color: var(--colorFg);
        border: 1px solid;
        border-color: rgba(0, 0, 0, 0.15);
        border-radius: 2px;
        transition-duration: 150ms;
        transition-property: margin, height, border-radius;
    }
    #browser.mac .window-buttongroup:hover button {
        margin-top: 0px;
        height: 12px;
        border-radius: 50%;
    }
    :not(.fullscreen).hasfocus#browser.mac .window-buttongroup.graphite button.window-minimize, .hasfocus#browser.mac .window-buttongroup.graphite button.window-maximize, .hasfocus#browser.mac .window-buttongroup.graphite button.window-close {
        opacity: 1;
        background-color: #8e8e93;
        border-color: #727277;
    }
    :not(.fullscreen).hasfocus#browser.mac .window-buttongroup:not(.graphite) button.window-minimize {
        opacity: 1;
        background-color: #f7bb3f;
        border-color: #dc9e34;
    }
    .hasfocus#browser.mac .window-buttongroup:not(.graphite) button.window-maximize {
        opacity: 1;
        background-color: #34c749;
        border-color: #1fa42d;
    }
    .hasfocus#browser.mac .window-buttongroup:not(.graphite) button.window-close {
        opacity: 1;
        background-color: #f8625e;
        border-color: #de4947;
    }
    


  • @luetage Just for information, it doesn't work if native window is enabled (at least on Sierra).



  • @hlehyaric I didn't think about this possibility, so thanks for pointing it out. But it's logical: the native window uses its own header, which isn't influenced by Vivaldi's stylesheets. Therefore I believe there is no way to change the window buttons on native windows. Are you using native windows?



  • @luetage Yes, that's why I noticed the mod didn't work. It seemed weird, I thought about native window, disabled it and now the mod works.



  • Ok, I should by a Mac now 😁



  • @Ornorm Yes, you should. Just think about it as an investment πŸ™‚
    (BTW, I'm pretty sure there are mods for window buttons on Windows)



  • @Ornorm No need to buy a mac, just build a hackintosh wizard. There's a slim chance you can install macOS on your current hardware with minor adjustments.

    Personally I think macs are overprized and give too few options for customization. But macOS is imo the best desktop operating system, therefore it makes sense looking at alternatives to get it running.



  • Small update, forgot to un-colour the buttons when the window has no focus.



  • @Ornorm said in Window buttons mod for macOS:

    Ok, I should by a Mac now 😁

    I think it could be used on Win, too, but we'd need few changes.

    @luetage graphite is something system, or you were just bored?

    Edit: is this wanted (focus on another window, hovering the blue one)
    Mac-like window buttons (no focus, hover)



  • @potmeklecbohdan Yeah, it's macOS specific. You can set the theming of window buttons to blue or graphite, blue is colored and graphite is monochrome. As you can see Vivaldi checks for it and adds a class.



  • @luetage

    Hello,
    Windows port of luetage's elegant Mac's eye candy:

    Buttons unhovered:
    0_1546780471752_oo.png

    Buttons with close button hovered:
    0_1546780499646_oooo.png

    Buttons with max-restore button hovered:
    0_1546781160754_rtrt.png

    Buttons with minimize button hovered:
    0_1546781272692_dhfj.png

    /***************************************************************Window control icons*******/
    
    #browser.win .window-buttongroup button.window-minimize {
        transform: translate(0px, 5px) !important;
    }
    
    #browser.win .window-buttongroup button.window-restore,
    #browser.win .window-buttongroup button.window-maximize {
        transform: translate(0px, 5px) !important;
    }
    
    #browser.win .window-buttongroup button.window-close {
        transform: translate(0px, 5px) !important;
    }
    
    #browser.win .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: 32px !important;
        width: 22px !important;
        margin-left: 2px !important;
     }
    
    #browser .window-buttongroup button {
    background-repeat: no-repeat;
     }
    
    #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:  url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjEuNWRHWFIAAABRSURBVDhPY/j//z9ZGKsgMRirIDEYqyAxGA6wSeLCYPBhlwc7EP8nEbOBNGKTIIgp0qiKLkgE5gD7E1sA4MNkaYJhrILEYKyCxGCsgoTxfwYAvW00gM/CYhIAAAAASUVORK5CYII=
    );
    }
    
    #browser.win .window-buttongroup button.window-restore,
    #browser.win .window-buttongroup button.window-maximize {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjEuNWRHWFIAAABVSURBVDhPY/j//z9ZGKsgMRirIDEYqyAxGAywSRDCDLEnffmA+D+JWAOkEZsEQUyRRk4g/ossSATmhoQOEGALAFyYZA3IGKsgMRirIDEYqyBh/J8BAL+TG8Nd93m7AAAAAElFTkSuQmCC
    );
    }
    
    #browser.win .window-buttongroup button.window-close {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjEuNWRHWFIAAABVSURBVDhPY/j//z9ZGKsgMRirIDEYqyAxGAywSeDDYPAiJoEZiP+TiHlBGrFJEMQUaWQC4rfIgkRgIYhHgQBbIODCJGtAxlgFicFYBYnBWAUJ4/8MADJKI0jL8ff1AAAAAElFTkSuQmCC
    );
    }
    
    #browser.win .window-buttongroup button {
        background-color: transparent !important;
        transition: all 0.2s ease;
    }
    
    #browser.win .window-buttongroup button:hover {
        background-color: transparent !important;
    }
    
    #browser.win .window-buttongroup button.window-close:hover {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjEuNWRHWFIAAADhSURBVDhPjZIxDsIwDEV7jpyqBwABigRHoBSpysCcslA4UXc4AAtLb2HygxM5aQQMv0q//RTHdkVEUdNirZys0+hELJzhKZkroZoTv6lOQBgIPPSWXsvNDICHGP97OJRHd72jU9fRbd8kMM7wEEMO+wog6qfnStO5bckYE+EAwUMMOQxagLEREh4ccC1D0AhQGj6hZxjq22MOec1AlDc0hwheuOw8LylVvsm6m2z25pAHJjan1Aj55gz2zfHjwJzQ8rwRAUZMzFIlC4A5lRoBT8zwswD4SPiH0pUT8J9LTtUb+Mr1mleylEAAAAAASUVORK5CYII=
    ) !important;
    }
    
    #browser.win .window-buttongroup button.window-minimize:hover {
        background-image:  url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjEuNWRHWFIAAABsSURBVDhPY/j//z8cf9jlIQXEfUB8DIj/QzGIDRKTQlaLrCkAqhAfDkDRCBJAU4APgzXDnIdNAT4sBdIIcj82SXy4D6QROSCIxcdAGrFJEMQUaSTbqWQHDnnRQXYCABEkaEZNckiaiUzk/xkA5bQv04uDNWUAAAAASUVORK5CYII=
    );
    }
    
    #browser.win .window-buttongroup button.window-restore:hover,
    #browser.win .window-buttongroup button.window-maximize:hover {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjEuNWRHWFIAAABsSURBVDhPY/j//z8cx570lQLiPiA+BsT/oRjEBolJIatF1hQAVYgPB6BoBAmgKcCHwZphzsOmAB+WAmkEuR+bJD7cB9KIHBDE4mMgjdgkCGKKNJLtVLIDh7zoIDsBgAgSNKMmOSTNRCby/wwATzPacAZmre4AAAAASUVORK5CYII=
    );
    
    

    to correct the placement of the buttons on your individual setup:
    change the three numeric values of the three instances at the beginning of the code of:

        transform: translate(4px, 7px) !important;
    

    The first value changes the position horizontally, the second value changes the position vertically

    Regards
    Raed



  • @raed Oh, you are faster…



  • @raed Please provide some pictures, I can't test it. And wouldn't it make more sense to code the button shapes directly with css, instead of using background images?

    Maybe I'm gonna switch it up too, currently I only code the rectangular buttons and use the default svgs for hover, because there is no other way to show the button glyphs for graphite. The advantage would be that the change from no hover / hover could be animated with transitions then, which would look a bit smoother.



  • @luetage said in Window buttons mod for macOS + Windows:

    @raed Please provide some pictures, I can't test it. And wouldn't it make more sense to code the button shapes directly with css, instead of using background images?

    Post updated with pictures.

    I find it easier to work with base64 pictures, especially when trying to be quicker than @potmeklecbohdan (saying the above saves me from admitting that I am lazy). 🀑

    Regards
    Raed



  • @raed Lol
    Depends on what you are better with, for me the coding would be faster. Looks good, the only thing I notice is that you change each button individually when hovered, while the original Mailspring version and my own version change all button backgrounds at the same time, when the element .window-buttongroup is hovered. You should try it out, I believe it looks better. The only thing you need to change is setting the :hover directly behind .window-buttongroup instead of button.



  • @luetage

    I do agree with you that it looks better when all buttons change on hover, the reason I opted for changing the individual buttons on hover is because it takes less concentration to know on which button one is hovering, but hey I am all for personal preferences.

    Regards
    Raed



  • @luetage said in Window buttons mod for macOS + Windows:

    @raed Lol
    Depends on what you are better with, for me the coding would be faster. Looks good, the only thing I notice is that you change each button individually when hovered, while the original Mailspring version and my own version change all button backgrounds at the same time, when the element .window-buttongroup is hovered. You should try it out, I believe it looks better. The only thing you need to change is setting the :hover directly behind .window-buttongroup instead of button.

    I have attempted to provide a version that changes all buttons on mouse over, but unable to figure out which line I need to change.

    Regards
    Raed



  • @raed

    #browser.win .window-buttongroup button.window-close:hover
    

    to

    #browser.win .window-buttongroup:hover button.window-close
    

    The same with all below (minimize, restore, maximize).

    Btw. it's strange .window-buttongroup is hovered only when hovering any of the buttons (not the area between them) even if z-index is changed to 1000.



  • @potmeklecbohdan That's not the case for the macOS version, there might be something else going on. Maybe it's fixable with css.



  • Another update. I got rid of the svgs entirely, coded the round buttons and added transitions. Looks much smoother now and displays correctly in all configurations (hopefully). OP has been edited accordingly.


 

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