gtk: Add more Chrome/Chromium specific styles (fix #180, fix #249)

src/_sass/gtk/apps/_misc.scss

@@ -37,6 +37,34 @@ window.background > box.vertical > scrolledwindow > widget toolbar {

                                
                                
                                
                            
                                
                                    
                                        
                                            37  
                                            /************
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            38  
                                             * Chromium *
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            39  
                                             ************/
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        40 +
                                        window.background.chromium {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        41 +
                                          background-color: if($variant == 'light', $bg_color, $popup_bg_color);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        42 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        43 +
                                          // FIXME: no way to change the toolbar button colors only
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        44 +
                                          // toolbar button { color: $secondary_fg_color; }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        45 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        46 +
                                          // toolbar's border-bottom refers to button's border
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        47 +
                                          entry,
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        48 +
                                          > button:not(.suggested-action):not(.destructive-action) { border: 1px solid $alt_border_color; }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        49 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        50 +
                                          > button {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        51 +
                                            box-shadow: none;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        52 +
                                            background-size: auto;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        53 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        54 +
                                            &:hover { background-image: image($row_fill_color); }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        55 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        56 +
                                            &:active { background-image: image($semi_fill_color); }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        57 +
                                          }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        58 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        59 +
                                          // workaround for headerbar's non-animatable buttons
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        60 +
                                          headerbar button:active { background-size: 1000% 1000%; }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        61 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        62 +
                                          spinner { color: $primary_color; }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        63 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        64 +
                                          // entry uses this as well
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        65 +
                                          textview { background-color: $popup_bg_color; }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        66 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        67 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            68  
                                            tooltip.background.chromium { background-color: rgba($tooltip_bg_color, 1); }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            69  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            70  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -73,9 +101,9 @@ window.background:not(.csd) {

                                
                                
                                
                            
                                
                                    
                                        
                                            101  
                                                  background-size: auto;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            102  
                                                  // color: $fg_color;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            103  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        76 -
                                              &:hover { background-image: image(gtkalpha(currentColor, 0.1 / 2)); }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        104 +
                                              &:hover { background-image: image($row_fill_color); }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            105  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        78 -
                                              &:active { background-image: image(gtkalpha(currentColor, 0.1)); }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        106 +
                                              &:active { background-image: image($semi_fill_color); }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            107  
                                                }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            108  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            109  
                                                // use 16px assets for hard-coded sizing