Menu transparente da topbar do Gnome Shell pelo css

Que tal ter os menus da topbar transparentes ? se curte essa perfumaria leia essa matéria.

Menus transparente no topbar

Nessa matéria irei usar o tema padrão do Gnome Shell, caso queira fazer com outro tema é só você adaptar a ele.

No exemplo do tema do Ubuntu os menus são grafite opaco.

Calendário

Configurações

Aplicativos

Alteração

Antes de alterar o tema você precisa instalar o Gnome tweak e o user themes, para isso de o comando abaixo no terminal.

Para instalar de o comando abaixo correspondente a sua distribuição em seu terminal .

Para Arch Linux e Manjaro

sudo pacman -S gnome-shell-extensions gnome-tweak-tool

Para Debian e Ubuntu

sudo apt install gnome-shell-extensions gnome-tweak-tool

Para Fedora

sudo dnf install gnome-shell-extensions gnome-tweak-tool

Para openSUSE

sudo zypper install gnome-shell-extensions gnome-tweak-tool

Para deixar transparente iremos fazer uma cópia renomeada do tema padrão do sistema para o diretório de temas do seu usuário, assim mantemos o original sem alterações.

Crie o diretório de temas para o seu usuário com o comando no terminal como usuário comum, não user o root ou sudo.

mkdir -p ~/.local/share/themes/ubuntu-glass/gnome-shell

Copie o tema padrão para a sua pasta de temas.

cp -fr /usr/share/gnome-shell/theme/* ~/.local/share/themes/ubuntu-glass/gnome-shell

Abra o arquivo ~/.local/share/themes/ubuntu-glass/gnome-shell/gnome-shell.css com o seu editor de texto preferido.

No arquivo aberto busque por popovers/menu como abaixo.

Você deve substituir todo o código referente a menu, veja nesse caso todas as linhas que devem ser substituídas.

Você deve selecionar toda a área do menu e colar as linhas abaixo.


.popup-menu-boxpointer,
.candidate-popup-boxpointer {
  -arrow-background-color: rgba(0, 0, 0, 0.01);
  -arrow-border-width: 0;
  -arrow-border-color: transparent;
  -arrow-base: 64px;
  -arrow-rise: 0;
  -arrow-box-shadow: none;
  margin: 0.1em 0.3em 0.5em;
  border-radius: 2px;
  background-color: rgba(0, 0, 0, 0.85);
  box-shadow: 0 9px 12px rgba(0, 0, 0, 0.4), 0 5px 5px rgba(0, 0, 0, 0.32), 0 3px 3px rgba(0, 0, 0, 0.18);
}
.popup-menu {
  margin: 5px 9px;
  color: #dedede;
  border-radius: 3px;
  background-color: rgba(0, 0, 0, 0.25);
}
.popup-menu.panel-menu {
  -boxpointer-gap: 10px;
  margin: 0 10px 10px 0;
}
.popup-menu .popup-sub-menu {
  color: #dedede;
  background: none;
}
.popup-menu .popup-menu-content {
  background: none;
}
.popup-menu .popup-menu-item {
  background: none;
}
.popup-menu .popup-menu-item:hover {
  background-color: rgba(64, 64, 64, 0.85);
}
.popup-menu .popup-menu-item:selected,
.popup-menu .popup-menu-item:active {
  background-color: rgba(102, 102, 102, 0.85);
}
.popup-submenu-menu-item {
  background: none;
}
.popup-submenu-menu-item:open {
  background: none;
}
.popup-separator-menu-item {
  border-color: rgba(10, 10, 10, 0.35);
}
.background-menu {
  -boxpointer-gap: 4px;
  -arrow-rise: 0px;
}


Ficando assim o arquivo.

Note a terceira linha da alteração.

-arrow-background-color: rgba(0, 0, 0, 0.01);

O 0.01 é o valor da transparência, quanto maior mais opaco fica o menu.

Salve o arquivo  e feche, abra o gnome tweak e aplique o seu novo tema do shell 3.


Confira no vídeo abaixo o processo de alteração do css, aplicação do tema e alteração da transparência dos menus na linha -arrow-background-color: rgba(0, 0, 0, 0.01);

Cada vez que alterar o valor da transparência tecle Alt + f2 digite r e tecle Enter, isso é para recarregar o Shell 3 e a alteração ser reconhecida.