I really love the Vivaldi browser, but when it comes to the system window frame, where the close, minimize, maximize buttons are located, I get very sad.
Chromium on Linux (and other browsers like: brave, firefox, google chrome) has a nice feature where you can use your own GTK window theme, so you get the same window control buttons in Chromium as in any other application, even with the system header disabled. It looks very nice.
Let’s have a look at the standard Vivaldi window frame with the window title bar disabled
Vivaldi has the possibility to either “enable your own window” which gives you control of your own window but at the cost of displaying a title bar, or to disable it which gives a nice window without title bar but with client side control of the window. It would be great if Vivaldi could take the best of both worlds in this regard, as would Chromium.
If you look at the screenshot above, you’ll see that the buttons match the system theme, but the system frame extends beyond the browser, and it doesn’t look comical.
The Vivaldi browser, every day new features are added, it’s so overloaded I want to say “enough is enough”, but it still lacks one feature, and that is the GTK system theme support.
Luckily for us the vivaldi browser comes with 99% open source code which you can modify to suit your needs.
At – /opt/vivaldi/resources/vivaldi/style there is a file with common.css appearance styles, where all the styles are prescribed.
But also, this browser has support for third party style files, but by default it is hidden.
To enable your own styles in Vivaldi, open a new tab and go to – vivaldi://experiments/
And turn on – Allow for using CSS modification, and restart your browser
Create a css file, in any convenient place, for example
sudo gedit /usr/share/style/style.cssAnd paste in the following content
#browser .window-buttongroup {
height: 13px !important;
margin-top: 3px !important;
margin-right: 0px !important;
}
#browser .window-buttongroup button {
height:14px !important;
width: 14px !important;
margin-left: 10px !important;
}
#browser.linux .window-buttongroup button.window-minimize svg path,
#browser.linux .window-buttongroup button.window-maximize svg path,
#browser.linux .window-buttongroup button.window-restore svg path,
#browser.linux .window-buttongroup button.window-close svg path {
display: none;
}
#browser.linux .window-buttongroup button.window-minimize {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAFLSURBVCiRldLLTsJQEAbg6fRoL5ZW2hQTJK5An4juSmTFmvAe8AZKuiONTwQrA8YALfQKxZ7WjVWiCZZ/NYv5JjPJMHCUmSXVGOAGvHDVJoS9zQEgpXSeRJGdM8mw2QmXRS9TFNOxYsjXqqVoGoeIx/MgyzLYOk4SbFyz1fXsbzgdK4Z2U59IcgVOJfQDcN7fjFbXs5mZJdUqsv5a1XXupPrKZr3a+87qDhngBoqmlUIAAIqq8ki4PvKC2P5906kgsiCIooHk8qJeWhWYkAZCnp/rgAHIkX6ki3MhTdMF7uLYzrKsPKIU4iieYM4kw63jJGWh77o7uj+MsNkJl8HGNUM/+BeFng/e1jUfesH65+WelbZcVS1FU3lE9s96vuvuvK1r3j96LwBHvwoAMH2SdCRcXxBFgyWkAQBA03QeR/GE7g+jh16wLno/AcqIi30NcnDFAAAAAElFTkSuQmCC);
}
#browser.linux .window-buttongroup button.window-restore,
#browser.linux .window-buttongroup button.window-maximize {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAFNSURBVCiRldJPboJQEAbw4QEVQtEI+CfWsPEYxiYeQnYcwngPvYM7Q3oI23gMFzVqq8CjgAVBnq8bbU3TWPxWs5jfJJN8DFykNmtV6ZEORFnq8Rz/AEDhkGXLfRhagNjhpj3fnneZ86BMdUNV1XFZrRRYlr28B4QQwK6dYM81cWdhfUNlqhuNRnMil0pwLYHvw9v70sCdhcXUZq1qsVRcaNV64ao6xd5u9ju81hE90kFZreRCAACKqgkUCX0kylLv90/XwrIsiNK9ge44vpFbncLxfBMB0FsdADAUpSRb3cqyQ7pC+yC0CCG5ESEE4uhzggCxQ+zaSV6IHTuO0mSENu35FnuuGfj+vyjwPwB72Ay7a+enci96TylrY0XVhD8r59gx9rCJH1+fAC66CgBQf65XKBL6oiQbHM81AQCyQ7aMo90kSpNR2F07590vU3WO9Ck4kIQAAAAASUVORK5CYII=);
}
#browser.linux .window-buttongroup button.window-close {
width: 14px !important;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAFVSURBVCiRldK/asJQFAbwz5s/aho1NmrBShcLDhakFBffw2w+hPge+g5uEvoaTs3gIFSLS9FCxUQjSaNJ7rWLFmnB6jed4fwOHPgiOMqgWMsJYtiKy1Kd4/lbAKAhnXqOqwc+365M+vPDbuQwDEtVLaGmuklViRKOHN8Dowy2udo65rJRHhn6DxyWqpqaz/aklIxTcW0H1senVh4ZemRQrOXSN9K7kruOnlT7rObWZjs374gghq2kqpyFACCZUWJMFJskLkv13z+dCiEEohzXCC8I+bPVPhzPF8gOu0sdAOwIC+jsUkXDcEa+HFdnlJ2NGGXwnU2PBD7fts3V9ly4NpcewqBDKpP+3DGXDdd2/kWu7WBt2Y3S2FgcVe6pnlDT3WRGiRHyt3Jrc+mtLbvx8PryDBx1FQDe7h+zTBSb4pWkcQJXAAAa0Knvej2EQac0NhaH3W/G/YzflelUUAAAAABJRU5ErkJggg==);
}
#browser.linux .window-buttongroup button {
background-color: transparent !important;
transition: all 0.1s ease;
}
#browser.linux .window-buttongroup button:hover {
background-color: transparent !important;
}
#browser.linux .window-buttongroup button.window-minimize:hover {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAFiSURBVCiRjZLLTsJQFEV3L1dLy6PSBkwQTTBFvojOIDJiTPgP+AMlzAjxiyAxUSAGaekbir2tE1GiCXaNzuCs80g2hyNmo2yJA99LC5kGpamrGEDI2DzwvEnMBX215a4OvdyhmA4lLX8hjyRF4Qkhx/MQRRFMXQ+cjdGsta3JtzgdSppyWR5n8zmcwrUd6G9Lrda2JtxslC3l8sWXQrHIn7S+2Kzfd7b+fkM48D1JURJJACDJcppQvkvSgtj4/dMpCElBEEWN0vOzMgA8zzwsX7cnpfK1gKqaAaG0QhDHibcd4ICYso9wAeC2qmZQVTOJRBaGC7L1/UkURYm3Mcbge/6YxFzQN3U9SCrahrFlu/2AqC135WyMpms7/0quZcMyjWa946x/IvcoNfIFeSQpcpqQ1J/zbMPYWqbRvLu3noCjrALA9CFbJJTvCqKopSitAAALw7nv+WO22w/qHWd96P0EH8CSQwqXvO8AAAAASUVORK5CYII=);
}
#browser.linux .window-buttongroup button.window-restore:hover,
#browser.linux .window-buttongroup button.window-maximize:hover {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAHKSURBVCiRhZLLTttQEIZ/30iCsRPbseMmxhRFYtFKsOqqAqlSn6DF3vEQiPdo34FdavEQFGXVVSuxpBIhN+fiJJg4wdhxF5FjU6J2VufMme/XzJyfQCpK9aoSLaKzHMcaDM1UgAhPQdCcu64Fkvpiv7/pxbVEfBAvdVOSpHNBkjMURaX1EIYhnGH/0RkNT5zDhrUCxUvdLJe1GpfP419xP5mg022azmHDIkr1qsLn+UZRUTNxwfi6i2lrvAIiEFDebWND2ES/Z88fnLZOR4voTJDkTFqZ35Mx/NXG9C6BCZJA5eMeRKmYdcfOKZnjWCOeaXTdxcIPQDIUdo8PwG4XErVFBACgKAo5dsskN2imHL95rQl+Wz8T2DjA1o7wYlaaYTQSiJ4ln8E0hdef99fARET6YdD6W/EF/GkfrJZsPHjyW+T83rXCMFxmSGI9zFAovFEBLP905k1rRKleVbg835AVNeOPPPR+3IFItb9ZKUB4q67ufbs7swe2vjTAlW68UrVv/H8NMEan0z52jm4vEstd6YYoFM9FqZhda7lBf+aMnBPn6PYCSHkVANTvqhyR2dMcy5k0Q2vLRQTNmfdQ8/zHr+6H9iCu/QMd7ceCKyvI5wAAAABJRU5ErkJggg==);
}
#browser.linux .window-buttongroup button.window-close:hover {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAHbSURBVCiRjVLLbtpQED1cLgYcYhuc2BKmhJZILBKpat1s+I7iXT4iyn+0/5AdRfmNZlGIxCJS0iZKSnArUAzYMrXjZxfUhLao6qxGc+fMPXPmpLAS/XpTyjDBcb7AttKUKgAQBuHQsecd36PvXt58HCe9qSS5aBxomyJ/wolClqTJ6jxEYQTTmD3axvRw76rXWQIvGgeaWN5us3wB/4q5aWPybaTtXfU6qX69KRVldiBIpazpuHC9APIfA0aWjTxDweVymI0n7uPYqJIMExxzopAFANcPcHYzwP3EXILuJybOrgdwvAAAwG0JuYhhjmi+wLaSnWSugDfPFXRvdcQxQAjQu9PxekeBzC1YEELAFPIapZlMeZVWpcgjjhcAAFBrCp6V+N+opymt0BjxWiHWV5+eaeSHOoAXSWU4NdG706HuKCAES9pV8enXMAh08sOed6IwWqr36VaHWlNQFXlUijzUmoLzrzpGlg1gcVPPdtupfr0pCTI7KEqlrOW6cLxgKcT6cxiO8zCr/jKA2iqV5Q8b/2EA4/v47f5l93TFcmprUyyecFtCjpC/LWcZU8eamIf7l91TYMWrAPBl99V2xDBHzAarpTPpCgCEfjj05k4bgf++8bn3kPT+BMU3yyEpe1kKAAAAAElFTkSuQmCC) !important;
}Now open the settings – Appearance
Where you will see a new item “Your UI customization files”, select the directory where you saved the style.css file, and restart your browser
And enjoy the new look of Vivaldi.
