Skip to content

Instantly share code, notes, and snippets.

@taiwbi
Last active March 6, 2025 07:45
Show Gist options
  • Save taiwbi/0c33fa7afaa65d2a593e2f77fb3d4af6 to your computer and use it in GitHub Desktop.
Save taiwbi/0c33fa7afaa65d2a593e2f77fb3d4af6 to your computer and use it in GitHub Desktop.
Make Gnome applications sidebar semi-transparent, and add blur with Blur My Shell Extension if you want to
/* Mohammad Mahdi Tayebi
*
* To apply transparent sidebar. copy this file into ~/.config/gtk-4.0/gtk.css and if
* you use adw-gtk3 theme you can add it to ~/.config/gtk-3.0/gtk.css as well
*
* Use blur my shell extension to add blur effect behind the transparent part of windows
*/
/* Transparent Sidebar */
window {
background: alpha(@window_bg_color, 0.8);
}
.sidebar-pane,
.sidebar,
.navigation-sidebar {
background: transparent;
}
.content-pane {
background: @view_bg_color;
}
/* Lollypop */
window>deck>grid>headerbar.titlebar>widget>widget>box>image {
margin-top: -1px;
}
window>deck>grid>headerbar.titlebar>box> :nth-child(1) {
margin-right: -40px;
opacity: 0;
}
window>deck>grid>headerbar.titlebar>box> :nth-child(2) {
margin-right: 27px;
}
window>deck>grid>headerbar.titlebar>box>.close {
margin-right: 0;
}
window>deck>grid>headerbar.titlebar {
background: linear-gradient(90deg,
transparent 0%,
transparent 197px,
@headerbar_shade_color 198px,
@headerbar_bg_color 198px,
@headerbar_bg_color 100%);
border-bottom: none;
}
/* Builder */
.org-gnome-Builder paneldockchild.center {
background: @window_bg_color;
}
.org-gnome-Builder.workspace paneldockchild.start {
background: transparent;
}
/* Speedtest (xyz.ketok.Speedtest) */
.horizontal>gauge.dl.horizontal>overlay>.background {
background: transparent;
}
.horizontal>gauge.up.horizontal>overlay>.background {
background: transparent;
}
/* Gnome Tweaks */
window>leaflet>box:last-child>scrolledwindow>viewport.frame {
background: @window_bg_color;
}
.tweak-titlebar-left {
background: alpha(@window_bg_color, 0.8);
}
/* Geary */
.geary-main-layout>leaflet>leaflet>box:first-child,
.geary-main-layout>leaflet>leaflet>box:first-child>headerbar {
background: transparent;
}
/* Rhythmbox */
window box:nth-child(2) paned:nth-child(3) paned:nth-child(3) box:nth-child(2) {
background: @window_bg_color;
}
window box:nth-child(2) paned:nth-child(3) box:first-child paned grid .sidebar-toolbar,
window box:nth-child(2) paned:nth-child(3) box:first-child paned grid .sidebar-toolbar button {
background: transparent;
}
window box toolbar {
background: transparent;
/* Comment this if you don't want transparency on rhythmbox topbar */
}
/* Disks */
window>deck>box>leaflet>box:nth-child(3)>stack>statuspage>scrolledwindow>viewport.frame,
window>deck>box>leaflet>box:nth-child(3)>stack>scrolledwindow>viewport.frame {
background: @window_bg_color;
}
window>deck>box>leaflet>box:nth-child(1)>scrolledwindow treeview.view {
background: transparent;
}
window>deck>box>leaflet>box:nth-child(1)>headerbar.titlebar.windowhandle {
background: transparent;
border-bottom: none;
}
@cccslater
Copy link

cccslater commented Jan 13, 2025

Thanks for this, looks beautiful on swayfx.
The only thing I don't like is when the nautilus window gets small and the sidebar is hidden, the whole window goes transparent. Is there any way to change this? I think it would be more consistent if the main section is always opaque and only the sidebar goes transparent.
I think it's because content-pane doesn't exist in this mode.

Any help appreciated :-)

Update: here is some CSS that works well for my use case. The only thing I can't work out is why the header goes transparent when not focused

.nautilus-window {
  background: transparent;
}

.content-pane, gridview {
  background: white;
}

.sidebar-pane {
  background: transparent;
}

.nautilus-window > dialog-host > widget > widget > widget > toastoverlay > overlay-split-view > widget > toolbarview > .top-bar > windowhandle > .collapse-spacing {
  background: alpha(white, 1);
}

.bottom-bar {
  background: alpha(white, 1);
}

Result:

  • Full size
    (see below)

  • Small size
    (see below)

  • Small size, not focused -- why is the header transparent?
    (see below)

@cccslater
Copy link

In fact this was all I needed:

.nautilus-window {
  background: transparent;
}

.content-pane, .undershoot-top.undershoot-bottom {
  background: white;
}

.sidebar-pane {
  background: transparent;
}

Now I have:
image
(using blur my shell for testing, it looks normal in real life)

And:
image

In my opinion this is more consistent :-)

@Usernamamama
Copy link

gnome browser?

or proyect is died?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment