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.

gtk: Tweak opacity duration of ripple effect

by roundabout, Friday, 11 May 2018, 20:18:15 (1526069895), pushed by roundabout, Sunday, 11 May 2025, 13:22:23 (1746969743)

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

7385b6b117b1bbab91678b95631e8845cc45507d

src/_sass/gtk/_common-3.20.scss

@@ -2267,7 +2267,7 @@ radio:not(:checked) {

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                              & {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                transition: $longer_transition,
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                            background-size $ripple_duration $deceleration_curve,
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                        background-image $ripple_duration * 2 $deceleration_curve,
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                        background-image $ripple_opacity_duration $deceleration_curve,
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                            -gtk-icon-transform 0;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                              }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -2754,7 +2754,7 @@ row {

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                              &.activatable {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                transition: $row_transition,
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                            background-size $ripple_duration $deceleration_curve,
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                        background-image $ripple_duration * 2 $deceleration_curve;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                        background-image $ripple_opacity_duration $deceleration_curve;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                box-shadow: inset 0 0 0 9999px transparent;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                background-image: radial-gradient(circle farthest-corner at center,
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                                                  transparent 10%,
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -2767,7 +2767,7 @@ row {

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                  transition: $row_transition,
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                              box-shadow 0,
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                              background-size $ripple_duration $deceleration_curve,
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                          background-image $ripple_duration * 2 $deceleration_curve;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                          background-image $ripple_opacity_duration $deceleration_curve;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                  box-shadow: inset 0 0 0 9999px $row_fill_color;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

src/_sass/gtk/_drawing-3.20.scss

@@ -88,7 +88,7 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                transition: $longer_transition,
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                            $shadow_transition,
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                            background-size $ripple_duration $deceleration_curve,
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                        background-image $ripple_duration * 2 $deceleration_curve;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                        background-image $ripple_opacity_duration $deceleration_curve;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                box-shadow: $shadow_1, inset 0 0 0 9999px transparent;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                background-color: $c;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                background-image: radial-gradient(circle farthest-corner at center,
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -137,7 +137,7 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                              @if $t == flat-normal {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                transition: $longer_transition,
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                            background-size $ripple_duration $deceleration_curve,
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                        background-image $ripple_duration * 2 $deceleration_curve;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                        background-image $ripple_opacity_duration $deceleration_curve;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                box-shadow: inset 0 0 0 9999px transparent;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                background-color: transparent;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                background-image: radial-gradient(circle farthest-corner at center,
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

src/_sass/gtk/_variables.scss

@@ -28,6 +28,7 @@ $circular_radius: 9999px;

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            $shorter_duration: 150ms;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            $longer_duration: 250ms;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            $ripple_duration: 350ms;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        $ripple_opacity_duration: 1000ms;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            // timing functions
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            $standard_curve: cubic-bezier(0.4, 0.0, 0.2, 1);