• Information

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.

Tweak the switch to make it closer to the guidelines

  • Remove the checked animation not in the guidelines

  • Adjust the knob colors

  • Make the focus ring style the same as the guidelines

by roundabout, Saturday, 10 March 2018, 07:05:16 (1520665516), pushed by roundabout, Sunday, 11 May 2025, 13:22:20 (1746969740)

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

e3eb7c090123c279ae2ee1dd411730dd5169fbdd

src/_sass/gtk/_common-3.20.scss

@@ -33,7 +33,6 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                              -gtk-secondary-caret-color: $primary_color;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        switch:focus slider,
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            notebook:focus tab,
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            *:focus { outline-color: $fill_color; }

@@ -2038,28 +2037,29 @@ switch {

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                              }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                              slider {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            transition: $longer_transition, $shadow_transition;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            transition: $shorter_transition, $shadow_transition;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                min-width: 20px;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                min-height: 20px;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                margin: -3px -2px;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                border-radius: $circular_radius;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            outline-width: 0;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            outline-color: $divider_color;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            outline-offset: 0;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                -gtk-outline-radius: $circular_radius;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                box-shadow: $shadow_1;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            background-color: $base_color;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            background-color: $lighter_bg_color;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                              }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          &:focus slider { outline-width: (48px - 20px) / 2; }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                              &:hover slider { box-shadow: $shadow_2; }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                              &:checked slider {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            transition: $longer_transition, $shadow_transition, background-image 0, background-color 0.00001s $longer_duration;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            animation: needs_attention $longer_duration $deceleration_curve;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                background-color: $accent_color;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            color: $inverse_fg_color;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            outline-color: rgba($accent_color, 0.2);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                              }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          &:disabled slider { background-color: $alt_base_color; }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          &:checked:disabled slider { animation: none; }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          &:disabled slider { background-color: $bg_color; }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                              row:selected & {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                              }

  • Add comment