Make Gnome applications sidebar semi-transparent, and add blur with Blur My Shell Extension if you want to

gnome-transparent-sidebar.css

/* 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;
}

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)

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:

(using blur my shell for testing, it looks normal in real life)

And:

In my opinion this is more consistent :-)

gnome browser?

or proyect is died?

Is it possible to blur Gnome Text Editor?