Как изменить системную рамку окна в Vivaldi, чтобы она соответствовала теме GTK Linux

Я очень люблю браузер Vivaldi, но когда дело доходит до системной рамки окна, там где расположены кнопки закрыть, свернуть, развернуть, мне становится очень грустно.

Chromium в Linux (а также другие браузеры такие как: brave, firefox, google chrome) имеет прекрасную функцию, с помощью которой вы можете использовать собственную тему окна GTK, поэтому вы получаете те же кнопки управления окном в Chromium, что и в любом другом приложении, даже с отключенным системным заголовком. Это выглядит очень красиво.

Давайте посмотрим на стандартную рамку окна Vivaldi с отключенным заголовком окна

стандартные кнопки заголовка окна без системной рамки vivaldi

У Vivaldi есть возможность либо «включить собственное окно», которое дает управление собственным окном, но за счет отображения строки заголовка, либо отключить его, что дает хорошее окно без строки заголовка, но с управлением окном на стороне клиента. Было бы замечательно, если бы Vivaldi мог взять лучшее из обоих миров в этом отношении, как и Chromium.

Если вы посмотрите на скриншот выше, то увидите что кнопки соответствуют теме системы, но системная рамка выходит за пределы браузера, и выглядит это не комильфо.

В браузере Вивальди, каждый день добавляются новые функции, он уже настолько перегружен, что хочется сказать “хватит уже”, но все же не хватает одной функции, а именно – поддержки GTK тем системы.

К счастью для нас, браузер vivaldi на 99% поставляется с открытым исходным кодом, которые можно изменить под свои нужды.

По адресу – /opt/vivaldi/resources/vivaldi/style есть файлик со стилями внешнего вида common.css, в котором и прописаны все стили.

Но также, в этом браузере есть поддержка сторонних файлов со стилями, но по умолчанию она скрыта.

Чтобы включить поддержку собственных стилей в Vivaldi, откройте новую вкладку и перейдите по адресу – vivaldi://experiments/

Прочтите: Как мгновенно выйти из Ubuntu через терминал

2022 02 07 09.01.43 vivaldi 0fa9177669d0

И включите – Allow for using CSS modification, и перезапустите браузер

Создайте файл css, в любом удобном для вас месте, например

sudo gedit /usr/share/style/style.css

и вставьте следующее содержимое

#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;
}

Теперь откройте настройки – Внешний вид