Skip to content

Instantly share code, notes, and snippets.

@taiwbi
Last active November 13, 2024 09:49
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;
}
@taiwbi
Copy link
Author

taiwbi commented May 28, 2024

@Karol739 DONE!
1716873020

@4ndril
Copy link

4ndril commented Jun 15, 2024

very good work and something Nautilus should adopt - thank you

@darthpale
Copy link

Outstanding! You made Gnome 10x prettier.

@SVTA-OP
Copy link

SVTA-OP commented Sep 4, 2024

Outstanding! You made Gnome 10x prettier.

Yeah but the frame rate drops when 5 windows are open and on top of each other

@taiwbi
Copy link
Author

taiwbi commented Sep 4, 2024

Outstanding! You made Gnome 10x prettier.

Yeah but the frame rate drops when 5 windows are open and on top of each other

If you want blur on GNOME, that's what you should pay for because mutter does not support background blur.

@xcenai
Copy link

xcenai commented Oct 20, 2024

Rounded corners extension doesn't work when I set "Enabled all default"

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