[gnome-themes-standard/wip/sass] some more button refactoring

From: Lapo Calamandrei <lapo src gnome org>
To: commits-list gnome org
Cc:
Subject: [gnome-themes-standard/wip/sass] some more button refactoring
Date: Sat, 17 May 2014 10:29:53 +0000 (UTC)
commit 8c191dc6b9280d62114691e46747e77c276c2223
Author: Lapo Calamandrei <calamandrei gmail com>
Date:   Sat May 17 12:29:43 2014 +0200

    some more button refactoring

 themes/Adwaita/gtk-3.0/_common.scss           |   49 ++---
 themes/Adwaita/gtk-3.0/_drawing.scss          |   85 +++++----
 themes/Adwaita/gtk-3.0/gtk-contained-dark.css |    6 +-
 themes/Adwaita/gtk-3.0/gtk-contained.css      |  281 +++++++++++--------------
 4 files changed, 194 insertions(+), 227 deletions(-)
---
diff --git a/themes/Adwaita/gtk-3.0/_common.scss b/themes/Adwaita/gtk-3.0/_common.scss
index 6ed6c18..4d71714 100644
--- a/themes/Adwaita/gtk-3.0/_common.scss
+++ b/themes/Adwaita/gtk-3.0/_common.scss
@@ -303,22 +303,6 @@ GtkGrid:insensitive {
   }
 }
 
-// Window Close button
-.button.titlebutton {
-  padding: 9px;
-  border-width: 0;
-  background-image: none;
-  box-shadow: none;
-  &:hover {
-    padding: 8px;
-    @include button_normal($theme_bg_color);
-  }
-  &:active {
-    padding: 8px;
-    @include button_active($theme_bg_color);
-  }
-}
-
 .linked .button {
   @extend .button;
   padding: 6px;
@@ -345,9 +329,6 @@ GtkGrid:insensitive {
   &.image-button {
     padding: 8px; 
   }
-  &.titlebutton {
-    background-color: transparent; //we want the close button with no bg
-  }
 }
 
 /**************
@@ -491,8 +472,6 @@ GtkPopover {
   padding: 0;
   border-style: solid;
   border-color: $borders_color;
-  border-top: 1px solid $borders_color;
-
   background-color: $theme_base_color;
   -GtkNotebook-initial-gap: 10;
   -GtkNotebook-arrow-spacing: 5;
@@ -509,9 +488,9 @@ GtkPopover {
 
 .notebook.header {
   background-color: darken($theme_bg_color,5%);
-  box-shadow: inset 0 3px transparentize(black, 0.97), 
-              inset 0 2px transparentize(black, 0.97), 
-              inset 0 1px transparentize(black, 0.97);
+  box-shadow: inset 0 3px transparentize(black, 0.9), 
+              inset 0 2px transparentize(black, 0.9), 
+              inset 0 1px transparentize(black, 0.9);
   border-width: 0px;
 }
 
@@ -544,7 +523,7 @@ GtkPopover {
 .notebook tab { //tab indicator
 
   $tab_indicator_size: 2px;
-  $active_tab_indicator: red; //FIXME
+  $active_tab_indicator: $theme_selected_bg_color; //FIXME
   $prelight_tab_indicator: $borders_color; //FIXME
 
   &.top:hover { box-shadow: inset 0 (-$tab_indicator_size) $prelight_tab_indicator; };
@@ -580,3 +559,23 @@ GtkPopover {
     background-color: $theme_bg_color;
   }
 }
+
+// Window Close button
+.button.titlebutton {
+  padding: 8px;
+  border-color: transparent;
+  background-image: none;
+  box-shadow: none;
+  &:hover {
+    @include button_normal($theme_bg_color);
+  }
+  &:active {
+    @include button_active($theme_bg_color);
+  }
+  &:backdrop {
+    @include button_backdrop($theme_bg_color);
+    border-color: transparent;
+  }
+}
+
+
diff --git a/themes/Adwaita/gtk-3.0/_drawing.scss b/themes/Adwaita/gtk-3.0/_drawing.scss
index a318734..b6af836 100644
--- a/themes/Adwaita/gtk-3.0/_drawing.scss
+++ b/themes/Adwaita/gtk-3.0/_drawing.scss
@@ -9,73 +9,86 @@ $widget_bottom_hilight: 0 1px $borders_edge; //outer hilight "used" on
 
 // buttons
 
- mixin button_box_shadow($shadow1, $shadow2:false) {
+ mixin _button_borders ($c) {
+  border-width: 1px;
+  border-style: solid;
+  @if $variant=='light' {
+    border-color: darken($c,30%);
+  }
+  @else {
+    border-color: darken($c,10%);
+  }
+}
+
+ mixin _button_text_shadow ($c) {
+  @if $c==none { text-shadow: none; icon-shadow: none; }
+  @else {
+    text-shadow: 0 1px $c;
+    icon-shadow: 0 1px $c;
+  }
+}
+
+ mixin _button_box_shadow($shadow1, $shadow2:false) {
   //needed to stack box shadows
   @if $shadow2 {box-shadow: $shadow1, $shadow2;}
   @else { box-shadow: $shadow1; }
 }
 
 @mixin button_normal ($c) {
-  @if $variant=='light' {
-    border: 1px solid darken($c,30%);
-  }
-  @else {
-    border: 1px solid darken($c,10%);
-  }
-  background-color: $c;
   background-image: linear-gradient(to bottom,
                                       lighten($c,10%),
                                       $c 40%,
                                       darken($c,10%)
                                       );
-  @include button-box-shadow(inset 0 1px $borders_edge, 
-                             $widget_bottom_hilight);
-  text-shadow: 0 1px lighten($c,50%); //FIXME?
-  icon-shadow: 0 1px lighten($c,50%); //FIXME?
+  @include _button_borders($c);
+  @include _button-box-shadow(inset 0 1px $borders_edge, 
+                              $widget_bottom_hilight);
+  @include _button_text_shadow(lighten($c,50%));
 }
 
 @mixin button_hover ($c) {
-  @include button_normal($c);
   background-image: linear-gradient(to bottom,
                                       lighten($c,14%),
                                       lighten($c,4%) 40%,
                                       $c);
+  @include _button_borders($c);
+  @include _button-box-shadow(inset 0 1px $borders_edge, 
+                              $widget_bottom_hilight);
+  @include _button_text_shadow(lighten($c,50%));
 }
 
 @mixin button_active ($c) {
-  @include button_normal($c);
-  @include button_box_shadow (inset 0 1px 2px transparentize(black,0.8),
-                              //box shadow for the pushed effect
-                              $widget_bottom_hilight);
   background-image: linear-gradient(to bottom,
-                                      darken($c,20%),
-                                      darken($c,15%) 5%,
-                                      darken($c,10%));
-  text-shadow: 0 1px $c;
-  icon-shadow: 0 1px $c;
+                                    darken($c,20%),
+                                    darken($c,15%) 5%,
+                                    darken($c,10%));
+  @include _button_box_shadow (inset 0 1px 2px transparentize(black,0.8),
+                               //box shadow for the pushed effect
+                               $widget_bottom_hilight);
+  @include _button_borders($c);
+  @include _button_text_shadow($c);
 }
 
 @mixin button_backdrop ($c) {
-  @include button_normal($c);
-  background-image: none;
-  box-shadow: none;
-  text-shadow: none;
-  icon-shadow: none;
+  background-image: linear-gradient(to bottom, $c);
+  @include _button_borders($c);
+  @include _button_box_shadow(none);
+  @include _button_text_shadow(none);
 }
 
 @mixin button_insensitive ($c) {
-  @include button_normal ($c);
-  @include button_box_shadow ($widget_bottom_hilight);
-  background-color: transparentize($c,0.5);
-  background-image: none;
-  text-shadow: none;
-  icon-shadow: none;
+  background-image: linear-gradient(to bottom, transparentize($c,0.5));
+  @include _button_borders($c);
+  @include _button_box_shadow ($widget_bottom_hilight);
+  @include _button_text_shadow(none);
 }
 
 @mixin button_insensitive_active ($c) {
-  @include button_insensitive ($c);
-  @include button_box_shadow (inset 0 1px 2px transparentize(black,0.8),
-                             $widget_bottom_hilight);
+  background-image: linear-gradient(to bottom, transparentize($c,0.5));
+  @include _button_borders($c);
+  @include _button_box_shadow (inset 0 1px 2px transparentize(black,0.8),
+                               $widget_bottom_hilight);
+  @include _button_text_shadow(none);
 }
 
 @mixin border-rounded() {
diff --git a/themes/Adwaita/gtk-3.0/gtk-contained-dark.css b/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
index 26c44cc..694a01f 100644
--- a/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
+++ b/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
@@ -1,10 +1,10 @@
 /*
 Syntax error: Undefined variable: "$borders_color".
-        on line 493 of _common.scss
+        on line 474 of _common.scss
         from line 23 of ./gtk-contained-dark.scss
 
 Backtrace:
-_common.scss:493
+_common.scss:474
 ./gtk-contained-dark.scss:23
 /usr/local/share/gems/gems/sass-3.3.7/lib/sass/script/tree/variable.rb:49:in `_perform'
 /usr/local/share/gems/gems/sass-3.3.7/lib/sass/script/tree/node.rb:50:in `perform'
@@ -79,4 +79,4 @@ org/jruby/RubyProc.java:249:in `call'
 body:before {
   white-space: pre;
   font-family: monospace;
-  content: "Syntax error: Undefined variable: \"$borders_color\".\A         on line 493 of _common.scss\A    
     from line 23 of ./gtk-contained-dark.scss"; }
+  content: "Syntax error: Undefined variable: \"$borders_color\".\A         on line 474 of _common.scss\A    
     from line 23 of ./gtk-contained-dark.scss"; }
diff --git a/themes/Adwaita/gtk-3.0/gtk-contained.css b/themes/Adwaita/gtk-3.0/gtk-contained.css
index 7112fa4..aff86cc 100644
--- a/themes/Adwaita/gtk-3.0/gtk-contained.css
+++ b/themes/Adwaita/gtk-3.0/gtk-contained.css
@@ -164,9 +164,10 @@ GtkGrid:insensitive {
   transition: all 200ms ease-out;
   padding: 4px;
   background-color: transparent;
-  border: 1px solid #a1a1a1;
-  background-color: #ededed;
   background-image: linear-gradient(to bottom, white, #ededed 40%, lightgray);
+  border-width: 1px;
+  border-style: solid;
+  border-color: #a1a1a1;
   box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(255, 255, 255, 0.05);
   text-shadow: 0 1px white;
   icon-shadow: 0 1px white;
@@ -176,26 +177,23 @@ GtkGrid:insensitive {
   .toolbar .raised .button:hover,
   .toolbar GtkComboBox .button:hover,
   .spinbutton.vertical .button:hover {
-    border: 1px solid #a1a1a1;
-    background-color: #ededed;
-    background-image: linear-gradient(to bottom, white, #ededed 40%, lightgray);
+    background-image: linear-gradient(to bottom, white, #f7f7f7 40%, #ededed);
+    border-width: 1px;
+    border-style: solid;
+    border-color: #a1a1a1;
     box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(255, 255, 255, 0.05);
     text-shadow: 0 1px white;
-    icon-shadow: 0 1px white;
-    background-image: linear-gradient(to bottom, white, #f7f7f7 40%, #ededed); }
+    icon-shadow: 0 1px white; }
   .button:active,
   .toolbar .button.raised:active,
   .toolbar .raised .button:active,
   .toolbar GtkComboBox .button:active,
   .spinbutton.vertical .button:active {
-    border: 1px solid #a1a1a1;
-    background-color: #ededed;
-    background-image: linear-gradient(to bottom, white, #ededed 40%, lightgray);
-    box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(255, 255, 255, 0.05);
-    text-shadow: 0 1px white;
-    icon-shadow: 0 1px white;
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.05);
     background-image: linear-gradient(to bottom, #bababa, #c7c7c7 5%, lightgray);
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.05);
+    border-width: 1px;
+    border-style: solid;
+    border-color: #a1a1a1;
     text-shadow: 0 1px #ededed;
     icon-shadow: 0 1px #ededed; }
   .button:backdrop,
@@ -203,13 +201,10 @@ GtkGrid:insensitive {
   .toolbar .raised .button:backdrop,
   .toolbar GtkComboBox .button:backdrop,
   .spinbutton.vertical .button:backdrop {
-    border: 1px solid #a1a1a1;
-    background-color: #ededed;
-    background-image: linear-gradient(to bottom, white, #ededed 40%, lightgray);
-    box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(255, 255, 255, 0.05);
-    text-shadow: 0 1px white;
-    icon-shadow: 0 1px white;
-    background-image: none;
+    background-image: linear-gradient(to bottom, #ededed);
+    border-width: 1px;
+    border-style: solid;
+    border-color: #a1a1a1;
     box-shadow: none;
     text-shadow: none;
     icon-shadow: none;
@@ -219,13 +214,10 @@ GtkGrid:insensitive {
     .toolbar .raised .button:backdrop:active,
     .toolbar GtkComboBox .button:backdrop:active,
     .spinbutton.vertical .button:backdrop:active {
-      border: 1px solid #878787;
-      background-color: lightgray;
-      background-image: linear-gradient(to bottom, #ededed, lightgray 40%, #bababa);
-      box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(255, 255, 255, 0.05);
-      text-shadow: 0 1px white;
-      icon-shadow: 0 1px white;
-      background-image: none;
+      background-image: linear-gradient(to bottom, lightgray);
+      border-width: 1px;
+      border-style: solid;
+      border-color: #878787;
       box-shadow: none;
       text-shadow: none;
       icon-shadow: none;
@@ -237,15 +229,11 @@ GtkGrid:insensitive {
   .toolbar .raised .button:insensitive,
   .toolbar GtkComboBox .button:insensitive,
   .spinbutton.vertical .button:insensitive {
-    border: 1px solid #a1a1a1;
-    background-color: #ededed;
-    background-image: linear-gradient(to bottom, white, #ededed 40%, lightgray);
-    box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(255, 255, 255, 0.05);
-    text-shadow: 0 1px white;
-    icon-shadow: 0 1px white;
+    background-image: linear-gradient(to bottom, rgba(237, 237, 237, 0.5));
+    border-width: 1px;
+    border-style: solid;
+    border-color: #a1a1a1;
     box-shadow: 0 1px rgba(255, 255, 255, 0.05);
-    background-color: rgba(237, 237, 237, 0.5);
-    background-image: none;
     text-shadow: none;
     icon-shadow: none; }
     .button:insensitive:active,
@@ -253,32 +241,23 @@ GtkGrid:insensitive {
     .toolbar .raised .button:insensitive:active,
     .toolbar GtkComboBox .button:insensitive:active,
     .spinbutton.vertical .button:insensitive:active {
-      border: 1px solid #a1a1a1;
-      background-color: #ededed;
-      background-image: linear-gradient(to bottom, white, #ededed 40%, lightgray);
-      box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(255, 255, 255, 0.05);
-      text-shadow: 0 1px white;
-      icon-shadow: 0 1px white;
-      box-shadow: 0 1px rgba(255, 255, 255, 0.05);
-      background-color: rgba(237, 237, 237, 0.5);
-      background-image: none;
+      background-image: linear-gradient(to bottom, rgba(237, 237, 237, 0.5));
+      border-width: 1px;
+      border-style: solid;
+      border-color: #a1a1a1;
+      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.05);
       text-shadow: none;
-      icon-shadow: none;
-      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.05); }
+      icon-shadow: none; }
   .button:backdrop:insensitive,
   .toolbar .button.raised:backdrop:insensitive,
   .toolbar .raised .button:backdrop:insensitive,
   .toolbar GtkComboBox .button:backdrop:insensitive,
   .spinbutton.vertical .button:backdrop:insensitive {
-    border: 1px solid rgba(161, 161, 161, 0.5);
-    background-color: rgba(237, 237, 237, 0.5);
-    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(237, 237, 237, 0.5) 40%, 
rgba(211, 211, 211, 0.5));
-    box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(255, 255, 255, 0.05);
-    text-shadow: 0 1px rgba(255, 255, 255, 0.5);
-    icon-shadow: 0 1px rgba(255, 255, 255, 0.5);
+    background-image: linear-gradient(to bottom, rgba(237, 237, 237, 0));
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgba(161, 161, 161, 0.5);
     box-shadow: 0 1px rgba(255, 255, 255, 0.05);
-    background-color: rgba(237, 237, 237, 0);
-    background-image: none;
     text-shadow: none;
     icon-shadow: none; }
   .button.suggested-action,
@@ -286,9 +265,10 @@ GtkGrid:insensitive {
   .toolbar .raised .button.suggested-action,
   .toolbar GtkComboBox .suggested-action.button,
   .spinbutton.vertical .button.suggested-action {
-    border: 1px solid #2b537d;
-    background-color: #729fcf;
     background-image: linear-gradient(to bottom, #98b9dc, #729fcf 40%, #4c85c2);
+    border-width: 1px;
+    border-style: solid;
+    border-color: #2b537d;
     box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(255, 255, 255, 0.05);
     text-shadow: 0 1px white;
     icon-shadow: 0 1px white;
@@ -302,14 +282,11 @@ GtkGrid:insensitive {
     .toolbar GtkComboBox .suggested-action.button:hover:active,
     .spinbutton.vertical .button.suggested-action:active,
     .spinbutton.vertical .button.suggested-action:hover:active {
-      border: 1px solid #2b537d;
-      background-color: #729fcf;
-      background-image: linear-gradient(to bottom, #98b9dc, #729fcf 40%, #4c85c2);
-      box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(255, 255, 255, 0.05);
-      text-shadow: 0 1px white;
-      icon-shadow: 0 1px white;
-      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.05);
       background-image: linear-gradient(to bottom, #386ca3, #3e78b6 5%, #4c85c2);
+      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.05);
+      border-width: 1px;
+      border-style: solid;
+      border-color: #2b537d;
       text-shadow: 0 1px #729fcf;
       icon-shadow: 0 1px #729fcf; }
     .button.suggested-action:hover,
@@ -317,25 +294,22 @@ GtkGrid:insensitive {
     .toolbar .raised .button.suggested-action:hover,
     .toolbar GtkComboBox .suggested-action.button:hover,
     .spinbutton.vertical .button.suggested-action:hover {
-      border: 1px solid #2b537d;
-      background-color: #729fcf;
-      background-image: linear-gradient(to bottom, #98b9dc, #729fcf 40%, #4c85c2);
+      background-image: linear-gradient(to bottom, #a7c3e1, #81a9d4 40%, #729fcf);
+      border-width: 1px;
+      border-style: solid;
+      border-color: #2b537d;
       box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(255, 255, 255, 0.05);
       text-shadow: 0 1px white;
-      icon-shadow: 0 1px white;
-      background-image: linear-gradient(to bottom, #a7c3e1, #81a9d4 40%, #729fcf); }
+      icon-shadow: 0 1px white; }
     .button.suggested-action:backdrop,
     .toolbar .button.raised.suggested-action:backdrop,
     .toolbar .raised .button.suggested-action:backdrop,
     .toolbar GtkComboBox .suggested-action.button:backdrop,
     .spinbutton.vertical .button.suggested-action:backdrop {
-      border: 1px solid #2b537d;
-      background-color: #729fcf;
-      background-image: linear-gradient(to bottom, #98b9dc, #729fcf 40%, #4c85c2);
-      box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(255, 255, 255, 0.05);
-      text-shadow: 0 1px white;
-      icon-shadow: 0 1px white;
-      background-image: none;
+      background-image: linear-gradient(to bottom, #729fcf);
+      border-width: 1px;
+      border-style: solid;
+      border-color: #2b537d;
       box-shadow: none;
       text-shadow: none;
       icon-shadow: none; }
@@ -345,15 +319,11 @@ GtkGrid:insensitive {
     .toolbar GtkComboBox .suggested-action.button:insensitive,
     .spinbutton.vertical .button.suggested-action:insensitive {
       color: #748489;
-      border: 1px solid #a1a1a1;
-      background-color: #ededed;
-      background-image: linear-gradient(to bottom, white, #ededed 40%, lightgray);
-      box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(255, 255, 255, 0.05);
-      text-shadow: 0 1px white;
-      icon-shadow: 0 1px white;
+      background-image: linear-gradient(to bottom, rgba(237, 237, 237, 0.5));
+      border-width: 1px;
+      border-style: solid;
+      border-color: #a1a1a1;
       box-shadow: 0 1px rgba(255, 255, 255, 0.05);
-      background-color: rgba(237, 237, 237, 0.5);
-      background-image: none;
       text-shadow: none;
       icon-shadow: none; }
       .button.suggested-action:insensitive:backdrop,
@@ -361,15 +331,11 @@ GtkGrid:insensitive {
       .toolbar .raised .button.suggested-action:insensitive:backdrop,
       .toolbar GtkComboBox .suggested-action.button:insensitive:backdrop,
       .spinbutton.vertical .button.suggested-action:insensitive:backdrop {
-        border: 1px solid rgba(161, 161, 161, 0.5);
-        background-color: rgba(237, 237, 237, 0.5);
-        background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(237, 237, 237, 0.5) 40%, 
rgba(211, 211, 211, 0.5));
-        box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(255, 255, 255, 0.05);
-        text-shadow: 0 1px rgba(255, 255, 255, 0.5);
-        icon-shadow: 0 1px rgba(255, 255, 255, 0.5);
+        background-image: linear-gradient(to bottom, rgba(237, 237, 237, 0));
+        border-width: 1px;
+        border-style: solid;
+        border-color: rgba(161, 161, 161, 0.5);
         box-shadow: 0 1px rgba(255, 255, 255, 0.05);
-        background-color: rgba(237, 237, 237, 0);
-        background-image: none;
         text-shadow: none;
         icon-shadow: none; }
     .button.suggested-action GtkLabel:backdrop:insensitive,
@@ -383,9 +349,10 @@ GtkGrid:insensitive {
   .toolbar .raised .button.destructive-action,
   .toolbar GtkComboBox .destructive-action.button,
   .spinbutton.vertical .button.destructive-action {
-    border: 1px solid #760909;
-    background-color: #ef2929;
     background-image: linear-gradient(to bottom, #f35858, #ef2929 40%, #d51010);
+    border-width: 1px;
+    border-style: solid;
+    border-color: #760909;
     box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(255, 255, 255, 0.05);
     text-shadow: 0 1px white;
     icon-shadow: 0 1px white;
@@ -399,14 +366,11 @@ GtkGrid:insensitive {
     .toolbar GtkComboBox .destructive-action.button:hover:active,
     .spinbutton.vertical .button.destructive-action:active,
     .spinbutton.vertical .button.destructive-action:hover:active {
-      border: 1px solid #760909;
-      background-color: #ef2929;
-      background-image: linear-gradient(to bottom, #f35858, #ef2929 40%, #d51010);
-      box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(255, 255, 255, 0.05);
-      text-shadow: 0 1px white;
-      icon-shadow: 0 1px white;
-      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.05);
       background-image: linear-gradient(to bottom, #a60c0c, #bd0e0e 5%, #d51010);
+      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.05);
+      border-width: 1px;
+      border-style: solid;
+      border-color: #760909;
       text-shadow: 0 1px #ef2929;
       icon-shadow: 0 1px #ef2929; }
     .button.destructive-action:hover,
@@ -414,25 +378,22 @@ GtkGrid:insensitive {
     .toolbar .raised .button.destructive-action:hover,
     .toolbar GtkComboBox .destructive-action.button:hover,
     .spinbutton.vertical .button.destructive-action:hover {
-      border: 1px solid #760909;
-      background-color: #ef2929;
-      background-image: linear-gradient(to bottom, #f35858, #ef2929 40%, #d51010);
+      background-image: linear-gradient(to bottom, #f46b6b, #f03c3c 40%, #ef2929);
+      border-width: 1px;
+      border-style: solid;
+      border-color: #760909;
       box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(255, 255, 255, 0.05);
       text-shadow: 0 1px white;
-      icon-shadow: 0 1px white;
-      background-image: linear-gradient(to bottom, #f46b6b, #f03c3c 40%, #ef2929); }
+      icon-shadow: 0 1px white; }
     .button.destructive-action:backdrop,
     .toolbar .button.raised.destructive-action:backdrop,
     .toolbar .raised .button.destructive-action:backdrop,
     .toolbar GtkComboBox .destructive-action.button:backdrop,
     .spinbutton.vertical .button.destructive-action:backdrop {
-      border: 1px solid #760909;
-      background-color: #ef2929;
-      background-image: linear-gradient(to bottom, #f35858, #ef2929 40%, #d51010);
-      box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(255, 255, 255, 0.05);
-      text-shadow: 0 1px white;
-      icon-shadow: 0 1px white;
-      background-image: none;
+      background-image: linear-gradient(to bottom, #ef2929);
+      border-width: 1px;
+      border-style: solid;
+      border-color: #760909;
       box-shadow: none;
       text-shadow: none;
       icon-shadow: none; }
@@ -442,15 +403,11 @@ GtkGrid:insensitive {
     .toolbar GtkComboBox .destructive-action.button:insensitive,
     .spinbutton.vertical .button.destructive-action:insensitive {
       color: #748489;
-      border: 1px solid #a1a1a1;
-      background-color: #ededed;
-      background-image: linear-gradient(to bottom, white, #ededed 40%, lightgray);
-      box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(255, 255, 255, 0.05);
-      text-shadow: 0 1px white;
-      icon-shadow: 0 1px white;
+      background-image: linear-gradient(to bottom, rgba(237, 237, 237, 0.5));
+      border-width: 1px;
+      border-style: solid;
+      border-color: #a1a1a1;
       box-shadow: 0 1px rgba(255, 255, 255, 0.05);
-      background-color: rgba(237, 237, 237, 0.5);
-      background-image: none;
       text-shadow: none;
       icon-shadow: none; }
       .button.destructive-action:insensitive:backdrop,
@@ -458,15 +415,11 @@ GtkGrid:insensitive {
       .toolbar .raised .button.destructive-action:insensitive:backdrop,
       .toolbar GtkComboBox .destructive-action.button:insensitive:backdrop,
       .spinbutton.vertical .button.destructive-action:insensitive:backdrop {
-        border: 1px solid rgba(161, 161, 161, 0.5);
-        background-color: rgba(237, 237, 237, 0.5);
-        background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(237, 237, 237, 0.5) 40%, 
rgba(211, 211, 211, 0.5));
-        box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(255, 255, 255, 0.05);
-        text-shadow: 0 1px rgba(255, 255, 255, 0.5);
-        icon-shadow: 0 1px rgba(255, 255, 255, 0.5);
+        background-image: linear-gradient(to bottom, rgba(237, 237, 237, 0));
+        border-width: 1px;
+        border-style: solid;
+        border-color: rgba(161, 161, 161, 0.5);
         box-shadow: 0 1px rgba(255, 255, 255, 0.05);
-        background-color: rgba(237, 237, 237, 0);
-        background-image: none;
         text-shadow: none;
         icon-shadow: none; }
     .button.destructive-action GtkLabel:backdrop:insensitive,
@@ -494,32 +447,6 @@ GtkGrid:insensitive {
     border: none;
     box-shadow: none; }
 
-.button.titlebutton {
-  padding: 9px;
-  border-width: 0;
-  background-image: none;
-  box-shadow: none; }
-  .button.titlebutton:hover {
-    padding: 8px;
-    border: 1px solid #a1a1a1;
-    background-color: #ededed;
-    background-image: linear-gradient(to bottom, white, #ededed 40%, lightgray);
-    box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(255, 255, 255, 0.05);
-    text-shadow: 0 1px white;
-    icon-shadow: 0 1px white; }
-  .button.titlebutton:active {
-    padding: 8px;
-    border: 1px solid #a1a1a1;
-    background-color: #ededed;
-    background-image: linear-gradient(to bottom, white, #ededed 40%, lightgray);
-    box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(255, 255, 255, 0.05);
-    text-shadow: 0 1px white;
-    icon-shadow: 0 1px white;
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.05);
-    background-image: linear-gradient(to bottom, #bababa, #c7c7c7 5%, lightgray);
-    text-shadow: 0 1px #ededed;
-    icon-shadow: 0 1px #ededed; }
-
 .linked .button {
   padding: 6px;
   border-radius: 0;
@@ -539,8 +466,6 @@ GtkGrid:insensitive {
   /* due to font metrics the image buttons are 1px shorter */ }
 .header-bar .button.image-button {
   padding: 8px; }
-.header-bar .button.titlebutton {
-  background-color: transparent; }
 
 /**************
  * ComboBoxes *
@@ -642,7 +567,6 @@ GtkPopover {
   padding: 0;
   border-style: solid;
   border-color: #a1a1a1;
-  border-top: 1px solid #a1a1a1;
   background-color: white;
   -GtkNotebook-initial-gap: 10;
   -GtkNotebook-arrow-spacing: 5;
@@ -657,7 +581,7 @@ GtkPopover {
 
 .notebook.header {
   background-color: #e0e0e0;
-  box-shadow: inset 0 3px rgba(0, 0, 0, 0.03), inset 0 2px rgba(0, 0, 0, 0.03), inset 0 1px rgba(0, 0, 0, 
0.03);
+  box-shadow: inset 0 3px rgba(0, 0, 0, 0.1), inset 0 2px rgba(0, 0, 0, 0.1), inset 0 1px rgba(0, 0, 0, 0.1);
   border-width: 0px; }
 
 .notebook.header.frame {
@@ -693,19 +617,19 @@ GtkPopover {
 .notebook tab.top:hover {
   box-shadow: inset 0 -2px #a1a1a1; }
 .notebook tab.top:active {
-  box-shadow: inset 0 -2px red; }
+  box-shadow: inset 0 -2px #729fcf; }
 .notebook tab.bottom:hover {
   box-shadow: inset 0 2px #a1a1a1; }
 .notebook tab.bottom:active {
-  box-shadow: inset 0 2px red; }
+  box-shadow: inset 0 2px #729fcf; }
 .notebook tab.right:hover {
   box-shadow: inset 2px 0 #a1a1a1; }
 .notebook tab.right:active {
-  box-shadow: inset 2px 0 red; }
+  box-shadow: inset 2px 0 #729fcf; }
 .notebook tab.left:hover {
   box-shadow: inset -2px 0 #a1a1a1; }
 .notebook tab.left:active {
-  box-shadow: inset -2px 0 red; }
+  box-shadow: inset -2px 0 #729fcf; }
 
 /***************
  * WM Stuff    *
@@ -722,3 +646,34 @@ GtkPopover {
   .window-frame.tiled {
     border-radius: 0;
     background-color: #ededed; }
+
+.button.titlebutton {
+  padding: 8px;
+  border-color: transparent;
+  background-image: none;
+  box-shadow: none; }
+  .button.titlebutton:hover {
+    background-image: linear-gradient(to bottom, white, #ededed 40%, lightgray);
+    border-width: 1px;
+    border-style: solid;
+    border-color: #a1a1a1;
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(255, 255, 255, 0.05);
+    text-shadow: 0 1px white;
+    icon-shadow: 0 1px white; }
+  .button.titlebutton:active {
+    background-image: linear-gradient(to bottom, #bababa, #c7c7c7 5%, lightgray);
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.05);
+    border-width: 1px;
+    border-style: solid;
+    border-color: #a1a1a1;
+    text-shadow: 0 1px #ededed;
+    icon-shadow: 0 1px #ededed; }
+  .button.titlebutton:backdrop {
+    background-image: linear-gradient(to bottom, #ededed);
+    border-width: 1px;
+    border-style: solid;
+    border-color: #a1a1a1;
+    box-shadow: none;
+    text-shadow: none;
+    icon-shadow: none;
+    border-color: transparent; }
[Date Prev][Date Next] [Thread Prev][Thread Next] [Thread Index] [Date Index] [Author Index]