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


 

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