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

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

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

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

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

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

vivaldi с системной рамкой окна
vivaldi с системной рамкой окна

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

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

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

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

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

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

Прочтите:  Как установить рабочий стол KDE Plasma на Linux Mint 20
2022 02 07 09.01.43 vivaldi 0fa9177669d0
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;
}

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

snimok ekrana ot 2022 02 07 09 04 54
snimok ekrana ot 2022 02 07 09 04 54

Где вы увидите новый пункт “Свои файлы настройки UI”, выберите директорию куда сохранили файл style.css, и перезапустите браузер

gtk theme vivaldi
gtk theme vivaldi

И наслаждайтесь новым видом Vivaldi.

Оцените?
+1
2
+1
+1
+1
+1
+1
+1
Поделитесь с друзьями
Стандартное изображение
Admin

Люблю Linux

Статей: 431
Подписаться
Уведомить о
guest
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии