A fork of the Materia GTK theme.

Important information: Google announced that, from September 2026, Android devices will require ALL apps to be signed by Google, effectively leading to an iOS situation. Value your right to a computer that does what you want; do not tolerate this monopolistic practice! Contact me if you don't understand why it is bad. Click to learn more.

gnome-shell: Complete _ripple-box.scss

by roundabout, Thursday, 27 February 2020, 16:53:15 (1582822395), pushed by roundabout, Sunday, 11 May 2025, 13:22:49 (1746969769)

Author identity: nana-4 <hnmaigo@gmail.com>

c4f7901ee317b1aafce82b4ed831ae1b3d3b0813

src/_sass/gnome-shell/_common-3.26.scss

@@ -23,21 +23,6 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                border-radius: 0;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                              }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        //Activities Ripples
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        .ripple-box {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          width: 48px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          height: 48px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          border-radius: 0 0 48px 0;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          background-color: on(dark, stroke);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          background-image: none;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          background-size: auto;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        .ripple-box:rtl {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          border-radius: 0 0 0 48px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          background-image: none;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            //close buttons
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            .window-close {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

src/_sass/gnome-shell/_common-3.28.scss

@@ -23,21 +23,6 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                border-radius: 0;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                              }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        //Activities Ripples
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        .ripple-box {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          width: 48px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          height: 48px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          border-radius: 0 0 48px 0;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          background-color: on(dark, stroke);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          background-image: none;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          background-size: auto;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        .ripple-box:rtl {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          border-radius: 0 0 0 48px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          background-image: none;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            //close buttons
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            .window-close {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

src/_sass/gnome-shell/_common-3.30.scss

@@ -23,21 +23,6 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                border-radius: 0;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                              }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        //Activities Ripples
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        .ripple-box {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          width: 48px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          height: 48px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          border-radius: 0 0 48px 0;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          background-color: on(dark, stroke);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          background-image: none;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          background-size: auto;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        .ripple-box:rtl {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          border-radius: 0 0 0 48px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          background-image: none;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            //close buttons
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            .window-close {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

src/_sass/gnome-shell/_common-3.32.scss

@@ -28,22 +28,6 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                max-width: 27.25em;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                              }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        // Activities Ripples
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        .ripple-box {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          width: 48px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          height: 48px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          border-radius: 0 0 48px 0; // radius the size of the box give us the curve
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          background-color: on(dark, stroke);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          background-image: none;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          background-size: auto;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          box-shadow: none;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        .ripple-box:rtl {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          border-radius: 0 0 0 48px; // just a simple change to the border radius position
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          background-image: none;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            // Rubberband for select-area screenshots
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            .select-area-rubberband {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                              background-color: rgba(on(dark, primary), 0.3);
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

src/_sass/gnome-shell/_common-3.34.scss

@@ -36,22 +36,6 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                max-width: 27.25em;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                              }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        // Activities Ripples
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        .ripple-box {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          width: 48px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          height: 48px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          border-radius: 0 0 48px 0; // radius the size of the box give us the curve
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          background-color: on(dark, stroke);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          background-image: none;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          background-size: auto;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          box-shadow: none;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        .ripple-box:rtl {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          border-radius: 0 0 0 48px; // just a simple change to the border radius position
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          background-image: none;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            // Rubberband for select-area screenshots
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            .select-area-rubberband {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                              background-color: rgba(on(dark, primary), 0.3);
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

src/_sass/gnome-shell/_components.scss

@@ -29,7 +29,7 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            @import 'components/osd/workspace-switcher';
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            // Panel
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            @import 'components/panel/panel';
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        // @import 'components/panel/ripple-box';
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        @import 'components/panel/ripple-box';
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            // Overview
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            // @import 'components/overview/overview';
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            // @import 'components/overview/window-picker';
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

src/_sass/gnome-shell/components/panel/_ripple-box.scss

@@ -1,15 +1,17 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            /* Activities Ripple */
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        $ripple_size: 50px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            .ripple-box {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          background-color: lighten(transparentize($selected_bg_color, 0.7), 40%);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          box-shadow: 0 0 2px 2px lighten($selected_bg_color, 20%);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          // plus + 2px for the border (box-shadow)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          width: $ripple_size + 2px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          height: $ripple_size + 2px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          border-radius: 0 0 $ripple_size + 2px 0; // radius equals the size of the box to give us the curve
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          width: 48px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          height: 48px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          border-radius: 0 0 48px 0; // radius equals the size of the box to give us the curve
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          box-shadow: none;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          background-color: on(dark, stroke);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          background-image: none;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          background-size: auto;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                              // just a simple change to the border radius position
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          &:rtl { border-radius: 0 0 0 $ripple_size + 2px; }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          &:rtl {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            border-radius: 0 0 0 48px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            background-image: none;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            }