Information

[BigCityCat]

Hello I was able to get the same effect a different way and I wanted to share it with you in case you can use some of the idea. It creates the exact same effect.

I use this with a theme I created here. https://www.opendesktop.org/s/Gnome/p/1277725

I change the gnome-shell.css file code for the Top bar to the following:

panel {

background-color: #000000; height: 30px; transition-duration: 250ms; }

Then I download the extension "Transparent Top Bar" from here.

https://github.com/zhanghai/gnome-shell-extension-transparent-top-bar

I open the extension stylesheet.css file and I modify it to the following.

panel.transparent-top-bar {

background-color: transparent;
box-shadow: none;

}

panel.transparent-top-bar.unlock-screen,

panel.transparent-top-bar.login-screen,

panel.transparent-top-bar:overview {

background-color: transparent;

}

panel.transparent-top-bar .panel-button {

color: rgba(225, 237, 245, 0.75);
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);

}

panel.transparent-top-bar .system-status-icon,

panel.transparent-top-bar .app-menu-icon > StIcon,

panel.transparent-top-bar .popup-menu-arrow {

icon-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);

}

panel.transparent-top-bar:hover {

text-shadow: 0px 1px 6px rgba(0, 0, 0, 0.2);

}

panel.transparent-top-bar:hover .system-status-icon,

panel.transparent-top-bar:hover .app-menu-icon > StIcon,

panel.transparent-top-bar:hover .popup-menu-arrow {

icon-shadow: 0px 1px 6px rgba(0, 0, 0, 0.2);

}

panel.transparent-top-bar:active .system-status-icon,

panel.transparent-top-bar:overview .system-status-icon,

panel.transparent-top-bar:focus .system-status-icon,

panel.transparent-top-bar:checked .system-status-icon {

icon-shadow: black 0 1px 1px;

}