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: Code cosmetics

by roundabout, Friday, 20 March 2020, 03:10:14 (1584673814), pushed by roundabout, Sunday, 11 May 2025, 13:22:50 (1746969770)

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

ac13172148f59995d9a7781761475b7ccd57a7e8

src/_sass/_colors.scss

@@ -23,7 +23,8 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                              }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        // Determine whether to use dark or light color on top of given color to meet accessibility standards for contrast.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        // Determine whether to use dark or light color on top of given color
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        // to meet accessibility standards for contrast.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            @function on($color, $type: text) {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                              $contrast-tone: if(tone($color) == "dark", "light", "dark");
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

src/_sass/_colors.scss.template

@@ -23,7 +23,8 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                              }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        // Determine whether to use dark or light color on top of given color to meet accessibility standards for contrast.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        // Determine whether to use dark or light color on top of given color
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        // to meet accessibility standards for contrast.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            @function on($color, $type: text) {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                              $contrast-tone: if(tone($color) == "dark", "light", "dark");
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

src/_sass/_variables.scss

@@ -52,10 +52,10 @@ $transition-shadow: box-shadow $duration $ease-out;

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            // Values are based on:
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            // https://github.com/material-components/material-components-web/blob/master/packages/mdc-elevation/_variables.scss
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        // NOTE: box-shadow blur less than 2px doesn't work properly, see
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        // NOTE: GTK 3 shadow blur less than 2px doesn't work properly, see
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            // https://gitlab.gnome.org/GNOME/gtk/issues/511
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        // NOTE 2: Compared to rendering on the Web, GTK seems to have a bigger blur.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        // NOTE 2: Compared to the Web rendering, GTK seems to have a bigger blur.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            $shadow-z1:
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                              // 0 2px (1px * .6) -1px rgba(black, .2),
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

src/_sass/gtk/_common-3.20.scss

@@ -172,10 +172,6 @@ label {

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                              &:disabled {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                color: $text-disabled;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            selection {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                              // @extend %selected_items:disabled;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                headerbar &,
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                menuitem &,
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                tab &,
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

src/_sass/gtk/_drawing-3.20.scss

@@ -1,14 +1,19 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            // generic drawing of more complex things
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        // ripple effect animations
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        //
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        // Ripple keyframes
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        //
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            @keyframes ripple {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          to { background-size: 1000% 1000%; }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          to {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            background-size: 1000% 1000%;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            @keyframes ripple-on-slider {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          to { background-size: auto, 1000% 1000%; }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          to {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            background-size: auto, 1000% 1000%;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            @keyframes ripple-on-headerbar {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -32,10 +37,12 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                              @if $t == normal {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                transition: $transition, border-image $ripple-fade-in-duration $ease-out;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                                          $fc 0%,
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                                          transparent 0%)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                                          0 0 0 / 0 0 0px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            border-image:
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                              radial-gradient(
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                circle closest-corner at center calc(100% - 1px),
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                $fc 0%,
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                transparent 0%
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                              ) 2 / 0 0 0px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                box-shadow: inset 0 0 0 9999px transparent, inset 0 -1px if($fc == $primary, $stroke, $fc);
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                background-color: $entry-fill;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                color: $text;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -50,10 +57,12 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                              }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                              @if $t == checked {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                                          $fc 100%,
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                                          transparent 0%)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                                          0 0 2 / 0 0 2px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            border-image:
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                              radial-gradient(
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                circle closest-corner at center calc(100% - 1px),
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                $fc 100%,
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                transparent 0%
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                              ) 2 / 0 0 2px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                              }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                              @if $t == disabled {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

src/_sass/gtk/apps/_budgie.scss

@@ -298,18 +298,22 @@ $underscores-list:

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                              @each $pos, $b_pos, $b_wid in $underscores-list {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                .#{$pos} & {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                  & {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                border-image: radial-gradient(circle closest-corner at #{$b_pos},
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                                              currentColor 0%,
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                                              transparent 0%)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                                              0 0 0 0 / 0 0 0 0;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                border-image:
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                  radial-gradient(
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                    circle closest-corner at #{$b_pos},
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                    currentColor 0%,
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                    transparent 0%
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                  ) 0 0 0 0 / 0 0 0 0;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                  }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                  @at-root %underscores-checked,
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                  &:checked {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                border-image: radial-gradient(circle closest-corner at #{$b_pos},
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                                              currentColor 100%,
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                                              transparent 0%)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                                              #{$b_wid};
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                border-image:
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                  radial-gradient(
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                    circle closest-corner at #{$b_pos},
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                    currentColor 100%,
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                    transparent 0%
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                  ) #{$b_wid};
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                  }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                              }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

src/_sass/gtk/apps/_gnome-3.22.scss

@@ -28,7 +28,9 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            // Toolbar
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            @keyframes nautilus-operations-button-needs-attention {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          to { background-color: $overlay-focus; }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          to {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            background-color: $overlay-focus;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                          }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            .nautilus-operations-button-needs-attention {