Window buttons mod for macOS + Windows



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

    Another update.

    Funny how when something good happens the mind starts working on making it better.

    I have updated the windows version as well, with slightly larger buttons and I have included markers inside of the new icons to break up the splash of colour.

    0_1546884759163_Webp.net-gifmaker.gif (animated gif)

    /***************************************************************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,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABh0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMS41ZEdYUgAAAIpJREFUOE+VktENgDAIBZ2jE/nZkTqBAzlA53ED5GE10CLWjzMK7xKCLET0cOxrYjamMtTAO2pJZ7WUWzAiGxGFLhAh8j2eF4hIEDG/14zYIOpFzFIhykcpRVBNQ98fRE/2emZUL+DVGBnVLEcHNTrDyHKG3/EhgfR6AIF0HQAeP67HnpySJ4+clhMfniNbJsm1QgAAAABJRU5ErkJggg==
    );
    }
    
    #browser.win .window-buttongroup button.window-restore:hover,
    #browser.win .window-buttongroup button.window-maximize:hover {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABh0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMS41ZEdYUgAAAHpJREFUOE+lktEJwCAMBZ3DnQou0F2cwLGETpXmiYoJRkr6cSIvOQiaQEST+7kiU5jKUAd3ZHHtXaXUG08kISJQDZRzbuicafIYTxSHdJAjRMw/Q91syAXifAijaZdXiFZRoOu/RPeo7sfxfYd7AXBY8ga5cov8cckpvCd23ERbkj7EAAAAAElFTkSuQmCC
    );
    }
    

    Regards
    Raed



  • 3d effect buttons:

    0_1547036119702_Webp.net-gifmaker.gif (animated gif)

    /***************************************************************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,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAD1SURBVDhPnZAxS0JRGIbv5GY/IPwNTkFBg5JL47WWnMQWRaSSIDWqIUR09mcIDS6uwnXR7JRDFy1pql+Qg3CGx3Pvse1gBz94lud9XzgcB9gKo7TBKG0wShvCMwWbCK/lJiNPp7uMa3uIx0NEPYFoHCGax5pGSjuVPatOPxullU7uOB03xk/7ALwzGJ7DSwFeizC5hLcLECXl8jDKwSDDd3ufTjqG413FWXZP9CAov1/DtAKfNc2sCr5yQaY6y66LV47r9y4GBaR/g5zdIj/ukPMH5Nea+b12QeZX+FXdXjMbCYemD9jEVqM/jNIGo7TBKP8HZwUKeDRXTH/SXAAAAABJRU5ErkJggg==
    );
    }
    
    #browser.win .window-buttongroup button.window-restore,
    #browser.win .window-buttongroup button.window-maximize {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACYSURBVDhPY/j//z9ZGKsgMRirIDEYqyAxGAywSeDDYOCzTp/Le5Pef1JwaKU7I4PPSgOskviw7xKj/wx+awz/V20J/t+yL+p/x8GY/z2H4/5PPJr4f+rxFCBOBrO7D8X9bz8Q8795b9T/ys3B/33WGvxnqJ+TxwTSSAqunZPHBfYntgDAh8nSBMNYBYnBWAWJwVgFCeP/DAD6EhYr1DAHMgAAAABJRU5ErkJggg==
    );
    }
    
    #browser.win .window-buttongroup button.window-close {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADjSURBVDhPndDNSgJRGMbxmeuZVFIYRkichgzJD0xqoE05UmgpEelCcCW4EBe1CG8huo02wuxm28a8BN0mx386YKuDHX3htzjP4eG8HA3YizRUIQ1VSEMV4cgutvmbwDpgF2FpbBrhYZaOIE4OIWtC4QjOnZVjKKbgzEJk4sztGEEygm8aQvu0ouLLTrAo2nCZhZsyPFTg+R7aDWhWoerCVY6fksMkk8Rfv/peu9O/8w7L64tVwYPOEwx68PYCo1cY9qHbgsdblp7LtHTKR72mh+vKPmCbvUob0lCFNFQhDf+H9guJDBtOgdtBoQAAAABJRU5ErkJggg==
    );
    }
    
    #browser.win .window-buttongroup button {
        background-color: transparent !important;
        transition: all 0.9s 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,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAJ4SURBVDhPVZLLS1RhGIfPP9Cii9VisMtoCqOJZqJlaeboTF6yaIIg8pI6peOYt5pmshKFdLAjaZaevMaQUpGaljUVKdVZ5MZaSpbhpguRITKljE/njGS1+H28vL/n2Xy8ArCcyspKjTU/XzTr9fLxgI2oMesTZXWndv+yy0OJ1WrK1AVhWbeSqjAdjalGrqQYuLBVR6HfStROZf4Ti4uKTEdXr6DGfy0D+ngmmhrxTE/jmZpiouEy/XvjqFa6o2tWoLI+0WG3a7JCdIgb/Hi5bQuTyXF8dZzB82IUz+hzvtjKeJcUy4uIQET/Naisw+HQCJa8PNGxfhVj4QF8jNzEtx1BzGUkMn+ugl/2cub2Jyi7QF83Fq5FZS25uaJQajTIA6GbmY4KYDZGy8JOLcQFQ1IkJG+H3cHKbjOzO7Q+5r7ClhuNslATEsx4dAgzcaF4E8PBEAVpsXAgQckeSN8F+6Lx6iP4ER/GeEwo1bpgBCl6O5N7o1hIjweTATIPQkEWlJ6E8kKw5EDOYTiSwnxGAu/1MUgxkQi3zHnyh9QEFo8dUoRssJ2C2ipoEqG5AZw14CgDay6L2YeZykii94RZFjqddeJ4hhGK8+H8aRBroUOCOz1L6WqHK/Vw8SyUFfDmUBqdTqco3JAkjdtyku+2kiWpU5Hu3YbhIXj0APruQncbNNYzY6/AbS1EdXwH4JJaTa9tytdfb4JeFwwNwNPH8MwNDwfhdg9z0jXG7DZckrR0AOqjpretzfTKeYlPrpv8HOzH6x7G++QxHmX+3ONCrq9DZf7wy6Ka7q4uTV9rizjS3Ci/7WjjbUc7I81X5b6WFlHt/rIIvwFX+PKz6d7vwwAAAABJRU5ErkJggg==
    ) !important;
    }
    
    #browser.win .window-buttongroup button.window-close:active {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAJgSURBVDhPVZJbTxNBGIZHAgKhihZLW7pysBokMTFykLYCpchJa1dUKonQYAlFFNZyMo0QNBYERboYIagXclO5JKI13HiIEbMhVUj5/tDrTBtRL57NzPc+7ySzGUZEe7S1tUkuu111mEzaWcYgcJiMmpiJ7F93b9HocnnLuejktKcxBIok9BZacHUfQx2fiUw4/xUb6uu9p3nQwZk25WGtL4D4xgbisRjWem5iKl+P6zwTjnCTRdnjkSr4wM95uZ9hvUCPr/JFxJeXEF96gS/uZrwz52I5I+UIV5ZliTltNlXmm5V0ho+ZDN8OMGxZjdi+3IpfnhZsHTMkZyITjnCd1dUqa5Is2jTfbGQzaDqGnYMMpOeYM0EFWaDDqZnGy8J5zN0WSdKYuFc0h2GTywljOsiSDSrOBR03cI6ASg6BjuYgYcrAj7w0RPnh4r5MycnCen42dkryQCctoPIToNoKUFMNqKUO5KwCVZWBThVi22rAe5MOii4T7L7Dpn0oMmD3TCkvVILc50Gd7aA+P6i/B+TrAMnNIFc1divLELOaMXHOobERX5catUqgBjvoygWQvxM0rIAejKcYHQL1doOuXQI11+JtaTFGfD6V3VUUKeKswXd3Y6o0wkuPJkFzs6BnT0Dhh6CxICjQjU1PKyKuOohO8gGElEHvGzf/9Xf6QBMh0Ow0aGEe9DwCejoDmhzHlnIbKx43QoqSegDiI5gIBr2vfDfwKXQPP2emkIjMIaHOI87Xn8dDeN3dBeH88feKgrHRUSk8OKAu9ge01eEgVoeHsNh/SwsPDKgi++sS+w2xdI4hgj6+DwAAAABJRU5ErkJggg==
    ) !important;
    }
    
    #browser.win .window-buttongroup button.window-minimize:hover {
        background-image:  url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAJLSURBVDhPVZJLSFRhGIYP0S5aRasORS4ihDTCLMqFXRYVQWMwpBB5CW9hmpdBZ3QyzUohz0ZCyjFnvIyhQTUVQdDFznQgw0t4KSstTc1pka0yM3j6/rFEFy/n4/2e97+dTwOW5HaX6YWZ6Ybr6H6rInoDFdE6qlae6i1nl4rC3LN2Z+xmaiNXcfPQFtpTDuNPPSL1VozI1ThjI1DMimBBTo7dHbEGb5xGX/E2fjwo509ogIXQELMPK+l3bqdJeopRbDhYWurSS3ZspGmvxkT5OmjeA48d8KkLJkx4UiJenPTWhxlXzCZURnOkpxmNMRqDDgm1x8C9g/A0BfqvimrhWZp4B8I9xTTu1HBknDa0Glu89Tx5LQu398nqNnhxAqxT0J0tOiN1MnSJJ73fwii2JiHe0jptOlN1u8FMhFeyek8W9EngTZ7smAu9OeJlyiKpEExism4XnQk6mnkuil+B44sBBQ8Vwrti+OBc1IjccVg81RPmV8CGmR+F9qg62Zq9Kw81kC+QgB/dMF4BU5UwKRq/AKPiqd5gAd/v2FEZzV9fY4y2HoO30hg9L6DA05cg9E/TVfK64o2Vy0mcjLXZ8NdXG5qn4YZuek7ys6dIfoHaRcCZy/BNSYKqnpLv+EXmeosICtsgmfAAtPuu27ubE5kbdElQoK9XRCqkatGXKuaGSnndkoRilyZHqaPVYw+2ZDDzMpf5kTL4LPeUY8+/LyNk5RFsy6KzzbNy5P7L5/XqAf81w7zltIbvZzMcyMbscFnK8/m8y4Yc7S+j0SIxM6lmDgAAAABJRU5ErkJggg==
    );
    }
    
    #browser.win .window-buttongroup button.window-minimize:active {
        background-image:  url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAJCSURBVDhPVZLrS1NhHMcfi7AL5Qu7vGgRNANJIZoaXhZrpnPobi1PVg6yNxJSztzUbeGCahVBhy52lpDhJdxWVrNmzlwvMjjQNIPfP/Tt98wa+uLL+Z3v9/N9nnN5BBEV5fG4DbbGetV59IDeuU1ASs7Sk9lmtjjYrGcVxy6BHiFw67BApMaAcO2RwnyNPZlJZkux1WJRPBwGygSm2wV+PvTiT24W67kkVh4pmHFsxyBnkpFsoehyOQ0dOwQG9wkseAVoaC/oiR30eQy0oIGedrBXVsgk4ywVkB1hr69TB/gmYedSpBR0/xDoWQ1o5iqrB/S8jr2DhUwyAzsF7A2nVeEzlusvTALrd/bz6kbQyxOg8VOgCTPrDM8m0Bh7nP1mRrK+inJdRI0C2d49IK0K9JpXn2wCTXPhbTPvaAVNWdhr5EVqQfFqLPbuRrRCQGjnSrAaO75RkHDSBnrfDvro2NAcv2OKPZkxsxozQmspgXjcbdJX7lWCZlsYYvCTB5TpBGUV0CIrcwGUZk9miVb8uFsJ2RHhPp+aHjkGesdB+jyDDC9dAuX+aamLvy57815+EgfmQ0aE+7pV4e+/adD8J/Frso1/gdyFweXLoO9SXJRzlq+Zi8hPtSHObD93CgcgEryhTAxVIZ9wcpGhb1dYsiRn1tcu5JMuvBmuhmSLJ0dqdMSvxIcbsPzKirU5N+gLvyc/9toHN3LjzYiHmhAN+bceuf8KBgKGWPi6qt126KkHZqRiZmijTl16wWBg0yEn8RdJIL2zDKmj1QAAAABJRU5ErkJggg==
    );
    }
    
    #browser.win .window-buttongroup button.window-restore:hover,
    #browser.win .window-buttongroup button.window-maximize:hover {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAKTSURBVDhPVZJdT1IBGMfPV2iu2pKLLlxLmCO7auuiNcCXLE0d2IBsw4AEoRREReCoCWbm8QWnqeDLUEszNfEtNV8aHrVSmak5sQ1NsvJD/DuHLaqL//bseX6/5+LZQwCIxGq1cNQaFXVDkkDzky6Cn3QByWIRrWJ6Fmb2LxspdHqdOD6Bh7iM87hjSkEx9RCGGg3S8gWIvR2NeBEXeob5T8zT5Ymjr55CnOwcpI8F6Jiqx+FJALshP6ghC9JtV8CVnsU5hmHZsGguNXP4Qi64stO4aY+DpjsZze9IrAUX4dubQPW4Hjnu60ip5IEnP4NLwliwDqHMvU/FSKOQ6uBD2XsNeYOJsE3K4VquQIvPgpIxMbSvROEZy8TIoqDSKikiVZVIi8p40DGCaSoVpbMZKFuQoMqXDcd7Och5Ccwz6SicuBVeKirjIk2VRBMCw2U86BGCnMvCkyU5qJVsOD8p8HxDGU4jU9eu3oPDJ2MYCdQeIQTGeBDZ9Qkwj2Wi7oMCLRtqdH7WYuBLPkYDJrwJFKJ/Nx/uTS2a11XMUgWKvZm4WycCQbr0dMVbGVx+Lfp2CjCyX4TZAxJLRw74juyYCdowxCzx7DxCq18DckIKK+MQTnctVfo6C73bRgwHSjBzUI7l79Xw/2yA/1cDlkPVmA6SGNovQc9WAcyDEjQyDtHW3sZx9OcyV9Rh/KsNi4d2fDyuw+ZJExMnU9di4Zsd3n0rWpe0sL9Ug3XCD9DZ4xLXDOdgYL0IC8EqrIZqsfHDifXjBqyEnmH+wIH+NROeDivAspHPYeN50SVuGjWgjzZicrscc3uOcMa3yHCvacQAlvnDR0Q23d1dHM9gO+X2VtId04VwTxvR4bXTbI+d/WVB/AZ9pvOqh2vtmgAAAABJRU5ErkJggg==
    );
    }
    
    #browser.win .window-buttongroup button.window-restore:active,
    #browser.win .window-buttongroup button.window-maximize:active {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAJ5SURBVDhPVZLtT5JhFIfvmX1q60NriEqWpk5sSrZhQIJQCqIi8CjJY2b4htNU8GWopZma+JaP+dIwtVKZqTmxDU2y8uPzB/AP/bpvWlQfftvZOdd17u3eIdFoNB6bzSrTaNXCNXmymJBKwCLLkYpq2rPS2b9svNAb9I7EZAKSRXDLnIaKxvswNmiRUSIBuUmQKCUwUOY/sVhf7CCXqZRPkPdQgp65Zpych3AQCaJxzIpM+yWQPDqnDGNjoqXKIktI+i1ddxJo+2Vof8NhM7yCwOEM6qcNKPReRVotZRQEFyjLHKIquiuwbel8AlSDV1A8mgL7rAKeNQc6AlZUTuVA90IamzGGPaDWqQSSrk4RpdUEeiqY59JRtZCF6mU56gIF4N8qwC3JYREyUTZzI7aUsRnqVJFIjBdxbyAJ3GIuHq0q0LheAPdHJZ5uq2JppbVr4w74QD5l5ND4kiAxJYIUNCfDMpWNpvdKdGxr0PtJh5HPJZgMmfEqVIbhgxJ4d3Ro31LTpUpU+LNxu0kKwnkMouN1PjxBHYb2SzFxVI6FYw6rpzwCp04IYTvG6BLf/gN0BrXgZvJgow5xe11C1ctcDO6ZMB6qhHBcg7Vv9Qj+aEHwZwvWIvWYD3MYO6rEwG4pLKNytFKHdHV3yfjhIvqLekx/sWPlxIkPZ03YOW+jcdPaheWvTviPbOhc1cH5XAPmxA6gd8DjaBgvxMhWOZbDddiIuLD93Y2tsxasR55g6ZjH8KYZj8eVYGz8clh8z/ocbZNGDL0zYXavBouHfCzTu1ys1zZhBGP+8HGRpb+/T+Yb7Ra8/lqxZ74M3nkTevxOkfXY7C8bJb8ARZWNk6pUJ04AAAAASUVORK5CYII=
    );
    }
    

    Regards
    Raed



  • Above code updated with an on click image and adjusted the transition timing.



  • I made another update too, expanding the titlebar and the window buttongroup to full height. The hover triggers earlier and more consistent - it behaves just like on Mailspring now, down to the millisecond. Additionally I forgot to disable the coloring of the minimize button in fullscreen mode on graphite. What I noticed is that proper Vivaldi just makes the background of the minimize button transparent in fullscreen, which always bugged me. There is a slight outline, but it looks like there's a gaping hole between the buttons. In the mod it shows the isblurred color now (same as window not in focus), which looks better in my opinion. Anyway, OP has been edited. I'm pretty happy with it now. If someone should notice any inconsistency or problem, please let me know.



  • A faithful Windows operating system carbon copy of @luetage Mac version, down to the animation timing:

    0_1547211031085_Webp.net-gifmaker (1).gif (animated gif)

    /***************************************************************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,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAD1SURBVDhPnZAxS0JRGIbv5GY/IPwNTkFBg5JL47WWnMQWRaSSIDWqIUR09mcIDS6uwnXR7JRDFy1pql+Qg3CGx3Pvse1gBz94lud9XzgcB9gKo7TBKG0wShvCMwWbCK/lJiNPp7uMa3uIx0NEPYFoHCGax5pGSjuVPatOPxullU7uOB03xk/7ALwzGJ7DSwFeizC5hLcLECXl8jDKwSDDd3ufTjqG413FWXZP9CAov1/DtAKfNc2sCr5yQaY6y66LV47r9y4GBaR/g5zdIj/ukPMH5Nea+b12QeZX+FXdXjMbCYemD9jEVqM/jNIGo7TBKP8HZwUKeDRXTH/SXAAAAABJRU5ErkJggg==
    );
    }
    
    #browser.win .window-buttongroup button.window-restore,
    #browser.win .window-buttongroup button.window-maximize {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACYSURBVDhPY/j//z9ZGKsgMRirIDEYqyAxGAywSeDDYOCzTp/Le5Pef1JwaKU7I4PPSgOskviw7xKj/wx+awz/V20J/t+yL+p/x8GY/z2H4/5PPJr4f+rxFCBOBrO7D8X9bz8Q8795b9T/ys3B/33WGvxnqJ+TxwTSSAqunZPHBfYntgDAh8nSBMNYBYnBWAWJwVgFCeP/DAD6EhYr1DAHMgAAAABJRU5ErkJggg==
    );
    }
    
    #browser.win .window-buttongroup button.window-close {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADjSURBVDhPndDNSgJRGMbxmeuZVFIYRkichgzJD0xqoE05UmgpEelCcCW4EBe1CG8huo02wuxm28a8BN0mx386YKuDHX3htzjP4eG8HA3YizRUIQ1VSEMV4cgutvmbwDpgF2FpbBrhYZaOIE4OIWtC4QjOnZVjKKbgzEJk4sztGEEygm8aQvu0ouLLTrAo2nCZhZsyPFTg+R7aDWhWoerCVY6fksMkk8Rfv/peu9O/8w7L64tVwYPOEwx68PYCo1cY9qHbgsdblp7LtHTKR72mh+vKPmCbvUob0lCFNFQhDf+H9guJDBtOgdtBoQAAAABJRU5ErkJggg==
    );
    }
    
    #browser.win .window-buttongroup button {
        background-color: transparent !important;
        transition: all 150ms ease;
    }
    
    #browser.win .window-buttongroup button:hover {
        background-color: transparent !important;
    }
    
    #browser.win .window-buttongroup:hover button.window-close {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAJ4SURBVDhPVZLLS1RhGIfPP9Cii9VisMtoCqOJZqJlaeboTF6yaIIg8pI6peOYt5pmshKFdLAjaZaevMaQUpGaljUVKdVZ5MZaSpbhpguRITKljE/njGS1+H28vL/n2Xy8ArCcyspKjTU/XzTr9fLxgI2oMesTZXWndv+yy0OJ1WrK1AVhWbeSqjAdjalGrqQYuLBVR6HfStROZf4Ti4uKTEdXr6DGfy0D+ngmmhrxTE/jmZpiouEy/XvjqFa6o2tWoLI+0WG3a7JCdIgb/Hi5bQuTyXF8dZzB82IUz+hzvtjKeJcUy4uIQET/Naisw+HQCJa8PNGxfhVj4QF8jNzEtx1BzGUkMn+ugl/2cub2Jyi7QF83Fq5FZS25uaJQajTIA6GbmY4KYDZGy8JOLcQFQ1IkJG+H3cHKbjOzO7Q+5r7ClhuNslATEsx4dAgzcaF4E8PBEAVpsXAgQckeSN8F+6Lx6iP4ER/GeEwo1bpgBCl6O5N7o1hIjweTATIPQkEWlJ6E8kKw5EDOYTiSwnxGAu/1MUgxkQi3zHnyh9QEFo8dUoRssJ2C2ipoEqG5AZw14CgDay6L2YeZykii94RZFjqddeJ4hhGK8+H8aRBroUOCOz1L6WqHK/Vw8SyUFfDmUBqdTqco3JAkjdtyku+2kiWpU5Hu3YbhIXj0APruQncbNNYzY6/AbS1EdXwH4JJaTa9tytdfb4JeFwwNwNPH8MwNDwfhdg9z0jXG7DZckrR0AOqjpretzfTKeYlPrpv8HOzH6x7G++QxHmX+3ONCrq9DZf7wy6Ka7q4uTV9rizjS3Ci/7WjjbUc7I81X5b6WFlHt/rIIvwFX+PKz6d7vwwAAAABJRU5ErkJggg==
    ) !important;
    }
    
    #browser.win .window-buttongroup button.window-close:active {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAJgSURBVDhPVZJbTxNBGIZHAgKhihZLW7pysBokMTFykLYCpchJa1dUKonQYAlFFNZyMo0QNBYERboYIagXclO5JKI13HiIEbMhVUj5/tDrTBtRL57NzPc+7ySzGUZEe7S1tUkuu111mEzaWcYgcJiMmpiJ7F93b9HocnnLuejktKcxBIok9BZacHUfQx2fiUw4/xUb6uu9p3nQwZk25WGtL4D4xgbisRjWem5iKl+P6zwTjnCTRdnjkSr4wM95uZ9hvUCPr/JFxJeXEF96gS/uZrwz52I5I+UIV5ZliTltNlXmm5V0ho+ZDN8OMGxZjdi+3IpfnhZsHTMkZyITjnCd1dUqa5Is2jTfbGQzaDqGnYMMpOeYM0EFWaDDqZnGy8J5zN0WSdKYuFc0h2GTywljOsiSDSrOBR03cI6ASg6BjuYgYcrAj7w0RPnh4r5MycnCen42dkryQCctoPIToNoKUFMNqKUO5KwCVZWBThVi22rAe5MOii4T7L7Dpn0oMmD3TCkvVILc50Gd7aA+P6i/B+TrAMnNIFc1divLELOaMXHOobERX5catUqgBjvoygWQvxM0rIAejKcYHQL1doOuXQI11+JtaTFGfD6V3VUUKeKswXd3Y6o0wkuPJkFzs6BnT0Dhh6CxICjQjU1PKyKuOohO8gGElEHvGzf/9Xf6QBMh0Ow0aGEe9DwCejoDmhzHlnIbKx43QoqSegDiI5gIBr2vfDfwKXQPP2emkIjMIaHOI87Xn8dDeN3dBeH88feKgrHRUSk8OKAu9ge01eEgVoeHsNh/SwsPDKgi++sS+w2xdI4hgj6+DwAAAABJRU5ErkJggg==
    ) !important;
    }
    
    #browser.win .window-buttongroup:hover button.window-minimize {
        background-image:  url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAJLSURBVDhPVZJLSFRhGIYP0S5aRasORS4ihDTCLMqFXRYVQWMwpBB5CW9hmpdBZ3QyzUohz0ZCyjFnvIyhQTUVQdDFznQgw0t4KSstTc1pka0yM3j6/rFEFy/n4/2e97+dTwOW5HaX6YWZ6Ybr6H6rInoDFdE6qlae6i1nl4rC3LN2Z+xmaiNXcfPQFtpTDuNPPSL1VozI1ThjI1DMimBBTo7dHbEGb5xGX/E2fjwo509ogIXQELMPK+l3bqdJeopRbDhYWurSS3ZspGmvxkT5OmjeA48d8KkLJkx4UiJenPTWhxlXzCZURnOkpxmNMRqDDgm1x8C9g/A0BfqvimrhWZp4B8I9xTTu1HBknDa0Glu89Tx5LQu398nqNnhxAqxT0J0tOiN1MnSJJ73fwii2JiHe0jptOlN1u8FMhFeyek8W9EngTZ7smAu9OeJlyiKpEExism4XnQk6mnkuil+B44sBBQ8Vwrti+OBc1IjccVg81RPmV8CGmR+F9qg62Zq9Kw81kC+QgB/dMF4BU5UwKRq/AKPiqd5gAd/v2FEZzV9fY4y2HoO30hg9L6DA05cg9E/TVfK64o2Vy0mcjLXZ8NdXG5qn4YZuek7ys6dIfoHaRcCZy/BNSYKqnpLv+EXmeosICtsgmfAAtPuu27ubE5kbdElQoK9XRCqkatGXKuaGSnndkoRilyZHqaPVYw+2ZDDzMpf5kTL4LPeUY8+/LyNk5RFsy6KzzbNy5P7L5/XqAf81w7zltIbvZzMcyMbscFnK8/m8y4Yc7S+j0SIxM6lmDgAAAABJRU5ErkJggg==
    );
    }
    
    #browser.win .window-buttongroup button.window-minimize:active {
        background-image:  url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAJCSURBVDhPVZLrS1NhHMcfi7AL5Qu7vGgRNANJIZoaXhZrpnPobi1PVg6yNxJSztzUbeGCahVBhy52lpDhJdxWVrNmzlwvMjjQNIPfP/Tt98wa+uLL+Z3v9/N9nnN5BBEV5fG4DbbGetV59IDeuU1ASs7Sk9lmtjjYrGcVxy6BHiFw67BApMaAcO2RwnyNPZlJZkux1WJRPBwGygSm2wV+PvTiT24W67kkVh4pmHFsxyBnkpFsoehyOQ0dOwQG9wkseAVoaC/oiR30eQy0oIGedrBXVsgk4ywVkB1hr69TB/gmYedSpBR0/xDoWQ1o5iqrB/S8jr2DhUwyAzsF7A2nVeEzlusvTALrd/bz6kbQyxOg8VOgCTPrDM8m0Bh7nP1mRrK+inJdRI0C2d49IK0K9JpXn2wCTXPhbTPvaAVNWdhr5EVqQfFqLPbuRrRCQGjnSrAaO75RkHDSBnrfDvro2NAcv2OKPZkxsxozQmspgXjcbdJX7lWCZlsYYvCTB5TpBGUV0CIrcwGUZk9miVb8uFsJ2RHhPp+aHjkGesdB+jyDDC9dAuX+aamLvy57815+EgfmQ0aE+7pV4e+/adD8J/Frso1/gdyFweXLoO9SXJRzlq+Zi8hPtSHObD93CgcgEryhTAxVIZ9wcpGhb1dYsiRn1tcu5JMuvBmuhmSLJ0dqdMSvxIcbsPzKirU5N+gLvyc/9toHN3LjzYiHmhAN+bceuf8KBgKGWPi6qt126KkHZqRiZmijTl16wWBg0yEn8RdJIL2zDKmj1QAAAABJRU5ErkJggg==
    );
    }
    
    #browser.win .window-buttongroup:hover button.window-restore,
    #browser.win .window-buttongroup:hover button.window-maximize {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAKTSURBVDhPVZJdT1IBGMfPV2iu2pKLLlxLmCO7auuiNcCXLE0d2IBsw4AEoRREReCoCWbm8QWnqeDLUEszNfEtNV8aHrVSmak5sQ1NsvJD/DuHLaqL//bseX6/5+LZQwCIxGq1cNQaFXVDkkDzky6Cn3QByWIRrWJ6Fmb2LxspdHqdOD6Bh7iM87hjSkEx9RCGGg3S8gWIvR2NeBEXeob5T8zT5Ymjr55CnOwcpI8F6Jiqx+FJALshP6ghC9JtV8CVnsU5hmHZsGguNXP4Qi64stO4aY+DpjsZze9IrAUX4dubQPW4Hjnu60ip5IEnP4NLwliwDqHMvU/FSKOQ6uBD2XsNeYOJsE3K4VquQIvPgpIxMbSvROEZy8TIoqDSKikiVZVIi8p40DGCaSoVpbMZKFuQoMqXDcd7Och5Ccwz6SicuBVeKirjIk2VRBMCw2U86BGCnMvCkyU5qJVsOD8p8HxDGU4jU9eu3oPDJ2MYCdQeIQTGeBDZ9Qkwj2Wi7oMCLRtqdH7WYuBLPkYDJrwJFKJ/Nx/uTS2a11XMUgWKvZm4WycCQbr0dMVbGVx+Lfp2CjCyX4TZAxJLRw74juyYCdowxCzx7DxCq18DckIKK+MQTnctVfo6C73bRgwHSjBzUI7l79Xw/2yA/1cDlkPVmA6SGNovQc9WAcyDEjQyDtHW3sZx9OcyV9Rh/KsNi4d2fDyuw+ZJExMnU9di4Zsd3n0rWpe0sL9Ug3XCD9DZ4xLXDOdgYL0IC8EqrIZqsfHDifXjBqyEnmH+wIH+NROeDivAspHPYeN50SVuGjWgjzZicrscc3uOcMa3yHCvacQAlvnDR0Q23d1dHM9gO+X2VtId04VwTxvR4bXTbI+d/WVB/AZ9pvOqh2vtmgAAAABJRU5ErkJggg==
    );
    }
    
    #browser.win .window-buttongroup button.window-restore:active,
    #browser.win .window-buttongroup button.window-maximize:active {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAJ5SURBVDhPVZLtT5JhFIfvmX1q60NriEqWpk5sSrZhQIJQCqIi8CjJY2b4htNU8GWopZma+JaP+dIwtVKZqTmxDU2y8uPzB/AP/bpvWlQfftvZOdd17u3eIdFoNB6bzSrTaNXCNXmymJBKwCLLkYpq2rPS2b9svNAb9I7EZAKSRXDLnIaKxvswNmiRUSIBuUmQKCUwUOY/sVhf7CCXqZRPkPdQgp65Zpych3AQCaJxzIpM+yWQPDqnDGNjoqXKIktI+i1ddxJo+2Vof8NhM7yCwOEM6qcNKPReRVotZRQEFyjLHKIquiuwbel8AlSDV1A8mgL7rAKeNQc6AlZUTuVA90IamzGGPaDWqQSSrk4RpdUEeiqY59JRtZCF6mU56gIF4N8qwC3JYREyUTZzI7aUsRnqVJFIjBdxbyAJ3GIuHq0q0LheAPdHJZ5uq2JppbVr4w74QD5l5ND4kiAxJYIUNCfDMpWNpvdKdGxr0PtJh5HPJZgMmfEqVIbhgxJ4d3Ro31LTpUpU+LNxu0kKwnkMouN1PjxBHYb2SzFxVI6FYw6rpzwCp04IYTvG6BLf/gN0BrXgZvJgow5xe11C1ctcDO6ZMB6qhHBcg7Vv9Qj+aEHwZwvWIvWYD3MYO6rEwG4pLKNytFKHdHV3yfjhIvqLekx/sWPlxIkPZ03YOW+jcdPaheWvTviPbOhc1cH5XAPmxA6gd8DjaBgvxMhWOZbDddiIuLD93Y2tsxasR55g6ZjH8KYZj8eVYGz8clh8z/ocbZNGDL0zYXavBouHfCzTu1ys1zZhBGP+8HGRpb+/T+Yb7Ra8/lqxZ74M3nkTevxOkfXY7C8bJb8ARZWNk6pUJ04AAAAASUVORK5CYII=
    );
    }
    

    Regards
    Raed



  • Recently I'm trying to get rid of all fixed colors in Vivaldi. The macOS window buttons have a fixed color, therefore I made a new version of this mod which uses the foreground and accent foreground colors for all window buttons instead. That's the same color as the new tab / trash button and makes the tab bar look more consistent and it has the advantage that the buttons are always visible, even on very colorful themes and all accents from currently active tabs.

    /* 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 rgba(0, 0, 0, 0.15);
        border-radius: 2px;
        transition-duration: 150ms;
        transition-property: margin, height, border-radius;
    }
    .color-behind-tabs-on#browser.mac .window-buttongroup button {
        background-color: var(--colorAccentFg);
    }
    #browser.mac .window-buttongroup:hover button {
        margin-top: 0px;
        height: 12px;
        border-radius: 50%;
    }
    :not(.fullscreen).hasfocus#browser.mac .window-buttongroup button.window-minimize, .hasfocus#browser.mac .window-buttongroup button.window-maximize, .hasfocus#browser.mac .window-buttongroup button.window-close {
        background-color: var(--colorFgFaded);
        border-color: var(--colorFgFadedMore);
        opacity: 1;
    }
    :not(.fullscreen).color-behind-tabs-on.hasfocus#browser.mac .window-buttongroup button.window-minimize, .color-behind-tabs-on.hasfocus#browser.mac .window-buttongroup button.window-maximize, .color-behind-tabs-on.hasfocus#browser.mac .window-buttongroup button.window-close {
        background-color: var(--colorAccentFgFaded);
        border-color: var(--colorAccentFgAlpha);
    }
    
    
    

 

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