[gnome-themes-standard/wip/sass] Added $noshadow to button drawing function to not draw the bottom hilight. Fixed the vertical spinbu

[Lapo Calamandrei <lapo src gnome org>]

commit 0c34fb74a6860ed3620cbbea1155c4808e7fae67
Author: Lapo Calamandrei <calamandrei gmail com>
Date:   Mon May 26 18:01:33 2014 +0200

    Added $noshadow to button drawing function to not draw the bottom hilight.
    Fixed the vertical spinbutton superfluous outsets and backdrop insensitive
    state.

 themes/Adwaita/gtk-3.0/_common.scss           |   22 +++--
 themes/Adwaita/gtk-3.0/_drawing.scss          |   64 +++++++++---
 themes/Adwaita/gtk-3.0/gtk-contained-dark.css |  137 +++++++++++++++++--------
 themes/Adwaita/gtk-3.0/gtk-contained.css      |  137 +++++++++++++++++--------
 4 files changed, 248 insertions(+), 112 deletions(-)
---
diff --git a/themes/Adwaita/gtk-3.0/_common.scss b/themes/Adwaita/gtk-3.0/_common.scss
index 704d06a..78ea095 100644
--- a/themes/Adwaita/gtk-3.0/_common.scss
+++ b/themes/Adwaita/gtk-3.0/_common.scss
@@ -376,13 +376,21 @@ GtkColorButton.button { // Uniform padding on the GtkColorButton.button
   &.vertical {
     .button {
       //FIXME box-shadow outset needs to be removed
-      @include button(normal);
-      &:first-child { border-radius: 3px 3px 0 0; }
-      &:last-child { border-radius: 0 0 3px 3px; }
-      &:active { @include button(active); }
-      &:insensitive { @include button(insensitive); }
-      &:backdrop { @include button(backdrop); }
-      &:hover { @include button(hover); }
+      @include button(normal,$bg_color,$fg_color,true);
+      &:first-child { border-radius: 3px 3px 0 0;
+        &:active { @include button(active,$bg_color,$fg_color,true); }
+        &:insensitive { @include button(insensitive,$bg_color,$fg_color,true); }
+        &:hover { @include button(hover,$bg_color,$fg_color,true); }
+        &:backdrop { @include button(backdrop); }
+        &:backdrop:insensitive { @include button(backdrop-insensitive); }
+      }
+      &:last-child { border-radius: 0 0 3px 3px;
+        &:active { @include button(active); }
+        &:insensitive { @include button(insensitive); }
+        &:hover { @include button(hover); }
+        &:backdrop { @include button(backdrop); }
+        &:backdrop:insensitive { @include button(backdrop-insensitive); }
+      }
     }
     &.entry { border-radius: 0; border-width: 0 1px 0 1px;}
   }
diff --git a/themes/Adwaita/gtk-3.0/_drawing.scss b/themes/Adwaita/gtk-3.0/_drawing.scss
index e53f856..efe6dd7 100644
--- a/themes/Adwaita/gtk-3.0/_drawing.scss
+++ b/themes/Adwaita/gtk-3.0/_drawing.scss
@@ -42,7 +42,7 @@ $widget_bottom_hilight: 0 1px $borders_edge; //outer hilight "used" on
   }
 }
 
- mixin _button_box_shadow($shadow1, $shadow2:false, $shadow3:false, $shadow4:false) {
+ mixin _shadows($shadow1, $shadow2:false, $shadow3:false, $shadow4:false) {
 //
 // Helper function to stack up to 4 box-shadows;
 //
@@ -52,17 +52,18 @@ $widget_bottom_hilight: 0 1px $borders_edge; //outer hilight "used" on
   @else { box-shadow: $shadow1; }
 }
 
- mixin button($t, $c:$bg_color, $tc:$fg_color, $colored_button:false ) {
+ mixin button($t, $c:$bg_color, $tc:$fg_color, $noshadow:false ) {
 //
 // Button drawing function
 // 
 // $t:  button type,  
 // $c:  base button color for colored* types
 // $tc: optional text color for colored* types
+// $noshadow: set to true not to draw the bottom hilight
 //  
 // possible $t values:
 // normal, hover, active, insensitive, insensitive-active,
-// backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active,
+// backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active
 // 
   border-width: 1px;
   border-style: solid;
@@ -91,8 +92,10 @@ $widget_bottom_hilight: 0 1px $borders_edge; //outer hilight "used" on
     @else { border-color: $borders_color; }
 
     @include _button_text_shadow($tc,$c);
-    @include _button_box_shadow(inset 0 1px $_top_hilight, 
-                                $widget_bottom_hilight);
+    @if $noshadow { box-shadow: inset 0 1px $_top_hilight; }
+    @else { 
+      @include _shadows(inset 0 1px $_top_hilight, $widget_bottom_hilight);
+    }
   }
 
   @else if $t==hover { // hovered button
@@ -104,8 +107,10 @@ $widget_bottom_hilight: 0 1px $borders_edge; //outer hilight "used" on
                                       $c);
 
     @include _button_text_shadow($tc,lighten($c,4%));
-    @include _button_box_shadow(inset 0 1px $_top_hilight,
-                                $widget_bottom_hilight);
+    @if $noshadow { box-shadow: inset 0 1px $_top_hilight; }
+    @else {
+      @include _shadows(inset 0 1px $_top_hilight, $widget_bottom_hilight);
+    }
   }
 
   @else if $t==active { // pushed button
@@ -124,8 +129,13 @@ $widget_bottom_hilight: 0 1px $borders_edge; //outer hilight "used" on
                                         darken($c,5%) 3%);
     }
     @include _button_text_shadow($tc,darken($c,10%));
-    @include _button_box_shadow(inset 0 2px 3px -1px transparentize(black,0.7),
-                                $widget_bottom_hilight);
+    @if $noshadow { 
+      box-shadow: inset 0 2px 3px -1px transparentize(black,0.7);
+    }
+    @else { 
+      @include _shadows(inset 0 2px 3px -1px transparentize(black,0.7),
+                        $widget_bottom_hilight);
+    }
   }
   @else if $t==insensitive { 
   //
@@ -136,8 +146,15 @@ $widget_bottom_hilight: 0 1px $borders_edge; //outer hilight "used" on
     background-image: none;
     text-shadow: none;
     icon-shadow: none;
-    @include _button_box_shadow(inset 0 1px transparentize(white,1),
-                                $widget_bottom_hilight);
+    @if $noshadow { 
+      // white with 0 alpha to avoid an ugly transition, since no color means
+      // black with 0 alpha
+      box-shadow: inset 0 1px transparentize(white,1); 
+    }
+    @else { 
+      @include _shadows(inset 0 1px transparentize(white,1), 
+                        $widget_bottom_hilight);
+    }
   }
   @else if $t==insensitive-active {
   //
@@ -145,8 +162,18 @@ $widget_bottom_hilight: 0 1px $borders_edge; //outer hilight "used" on
   //
     color: $_insensitive_fg_color;
     border-color: $_insensitive_borders_color;
-    @include _button_box_shadow($widget_bottom_hilight);
-    background-image: linear-gradient(to bottom, transparentize($_insensitive_borders_color,.8)); //FIXME? 
better to use mix() probably
+    background-image: linear-gradient(to bottom, 
+                        transparentize($_insensitive_borders_color,.8)); 
+                        //FIXME? better to use mix() probably
+    @if $noshadow { 
+      // white with 0 alpha to avoid an ugly transition, since no color means
+      // black with 0 alpha
+      box-shadow: inset 0 1px transparentize(white,1); 
+    }
+    @else { 
+      @include _shadows(inset 0 1px transparentize(white,1), 
+                        $widget_bottom_hilight);
+    }
   }
 
   @else if $t==backdrop { // backdrop button
@@ -161,20 +188,23 @@ $widget_bottom_hilight: 0 1px $borders_edge; //outer hilight "used" on
   @else if $t==backdrop-active { // backdrop pushed button
     color: $_backdrop_fg_color;
     border-color: $_backdrop_borders_color;
-    background-image: linear-gradient(to bottom, transparentize($_backdrop_borders_color,.7));
+    background-image: linear-gradient(to bottom, 
+                        transparentize($_backdrop_borders_color,.7));
+    box-shadow: inset 0 1px transparentize(white,1);
   }
 
   @else if $t==backdrop-insensitive { // backdrop insensitive button
     color: $_backdrop_insensitive_color;
     border-color: $_backdrop_borders_color;
-    box-shadow: none;
+    box-shadow: inset 0 1px transparentize(white,1);
   }
 
   @else if $t==backdrop-insensitive-active { // backdrop insensitive 
                                              // pushed button
     color: $_backdrop_insensitive_color;
     border-color: $_backdrop_borders_color;
-    background-image: linear-gradient(to bottom, transparentize($_backdrop_borders_color,.9));
-    box-shadow: none;
+    background-image: linear-gradient(to bottom,
+                        transparentize($_backdrop_borders_color,.9));
+    box-shadow: inset 0 1px transparentize(white,1);
   }
 }
diff --git a/themes/Adwaita/gtk-3.0/gtk-contained-dark.css b/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
index 752149e..e17d1ec 100644
--- a/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
+++ b/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
@@ -203,20 +203,21 @@ GtkGrid:insensitive {
       border-style: solid;
       color: #eeeeec;
       border-color: #1c1f1f;
-      background-image: linear-gradient(to bottom, rgba(28, 31, 31, 0.3)); }
+      background-image: linear-gradient(to bottom, rgba(28, 31, 31, 0.3));
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
     .button:backdrop:insensitive {
       border-width: 1px;
       border-style: solid;
       color: white;
       border-color: #1c1f1f;
-      box-shadow: none; }
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
     .button:backdrop:insensitive:active {
       border-width: 1px;
       border-style: solid;
       color: white;
       border-color: #1c1f1f;
       background-image: linear-gradient(to bottom, rgba(28, 31, 31, 0.1));
-      box-shadow: none; }
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
   .button:insensitive {
     border-width: 1px;
     border-style: solid;
@@ -231,8 +232,8 @@ GtkGrid:insensitive {
       border-style: solid;
       color: white;
       border-color: #1c1f1f;
-      box-shadow: 0 1px rgba(238, 238, 236, 0.1);
-      background-image: linear-gradient(to bottom, rgba(28, 31, 31, 0.2)); }
+      background-image: linear-gradient(to bottom, rgba(28, 31, 31, 0.2));
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0.1); }
   .button.suggested-action {
     border-width: 1px;
     border-style: solid;
@@ -274,7 +275,7 @@ GtkGrid:insensitive {
         border-style: solid;
         color: white;
         border-color: #1c1f1f;
-        box-shadow: none; }
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
     .button.suggested-action:insensitive {
       border-width: 1px;
       border-style: solid;
@@ -325,7 +326,7 @@ GtkGrid:insensitive {
         border-style: solid;
         color: white;
         border-color: #1c1f1f;
-        box-shadow: none; }
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
     .button.destructive-action:insensitive {
       border-width: 1px;
       border-style: solid;
@@ -402,47 +403,95 @@ GtkColorButton.button {
     border-color: #1c1f1f;
     text-shadow: 0 -1px rgba(0, 0, 0, 0.81176);
     icon-shadow: 0 -1px rgba(0, 0, 0, 0.81176);
-    box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px rgba(238, 238, 236, 0.1); }
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); }
     .spinbutton.vertical .button:first-child {
       border-radius: 3px 3px 0 0; }
+      .spinbutton.vertical .button:first-child:active {
+        border-width: 1px;
+        border-style: solid;
+        color: #eeeeec;
+        border-color: #1c1f1f;
+        background-image: linear-gradient(to bottom, #212424, #2d3232 3%);
+        text-shadow: 0 -1px rgba(0, 0, 0, 0.89176);
+        icon-shadow: 0 -1px rgba(0, 0, 0, 0.89176);
+        box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.3); }
+      .spinbutton.vertical .button:first-child:insensitive {
+        border-width: 1px;
+        border-style: solid;
+        color: white;
+        border-color: #1c1f1f;
+        background-image: none;
+        text-shadow: none;
+        icon-shadow: none;
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+      .spinbutton.vertical .button:first-child:hover {
+        border-width: 1px;
+        border-style: solid;
+        color: #eeeeec;
+        border-color: #212424;
+        background-image: linear-gradient(to bottom, #5b6464, #434a4a 40%, #393f3f);
+        text-shadow: 0 -1px rgba(0, 0, 0, 0.77976);
+        icon-shadow: 0 -1px rgba(0, 0, 0, 0.77976);
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); }
+      .spinbutton.vertical .button:first-child:backdrop {
+        border-width: 1px;
+        border-style: solid;
+        color: #eeeeec;
+        border-color: #1c1f1f;
+        background-image: none;
+        text-shadow: none;
+        icon-shadow: none;
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+      .spinbutton.vertical .button:first-child:backdrop:insensitive {
+        border-width: 1px;
+        border-style: solid;
+        color: white;
+        border-color: #1c1f1f;
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
     .spinbutton.vertical .button:last-child {
       border-radius: 0 0 3px 3px; }
-    .spinbutton.vertical .button:active {
-      border-width: 1px;
-      border-style: solid;
-      color: #eeeeec;
-      border-color: #1c1f1f;
-      background-image: linear-gradient(to bottom, #212424, #2d3232 3%);
-      text-shadow: 0 -1px rgba(0, 0, 0, 0.89176);
-      icon-shadow: 0 -1px rgba(0, 0, 0, 0.89176);
-      box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.3), 0 1px rgba(238, 238, 236, 0.1); }
-    .spinbutton.vertical .button:insensitive {
-      border-width: 1px;
-      border-style: solid;
-      color: white;
-      border-color: #1c1f1f;
-      background-image: none;
-      text-shadow: none;
-      icon-shadow: none;
-      box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0.1); }
-    .spinbutton.vertical .button:backdrop {
-      border-width: 1px;
-      border-style: solid;
-      color: #eeeeec;
-      border-color: #1c1f1f;
-      background-image: none;
-      text-shadow: none;
-      icon-shadow: none;
-      box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
-    .spinbutton.vertical .button:hover {
-      border-width: 1px;
-      border-style: solid;
-      color: #eeeeec;
-      border-color: #212424;
-      background-image: linear-gradient(to bottom, #5b6464, #434a4a 40%, #393f3f);
-      text-shadow: 0 -1px rgba(0, 0, 0, 0.77976);
-      icon-shadow: 0 -1px rgba(0, 0, 0, 0.77976);
-      box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px rgba(238, 238, 236, 0.1); }
+      .spinbutton.vertical .button:last-child:active {
+        border-width: 1px;
+        border-style: solid;
+        color: #eeeeec;
+        border-color: #1c1f1f;
+        background-image: linear-gradient(to bottom, #212424, #2d3232 3%);
+        text-shadow: 0 -1px rgba(0, 0, 0, 0.89176);
+        icon-shadow: 0 -1px rgba(0, 0, 0, 0.89176);
+        box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.3), 0 1px rgba(238, 238, 236, 0.1); }
+      .spinbutton.vertical .button:last-child:insensitive {
+        border-width: 1px;
+        border-style: solid;
+        color: white;
+        border-color: #1c1f1f;
+        background-image: none;
+        text-shadow: none;
+        icon-shadow: none;
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0.1); }
+      .spinbutton.vertical .button:last-child:hover {
+        border-width: 1px;
+        border-style: solid;
+        color: #eeeeec;
+        border-color: #212424;
+        background-image: linear-gradient(to bottom, #5b6464, #434a4a 40%, #393f3f);
+        text-shadow: 0 -1px rgba(0, 0, 0, 0.77976);
+        icon-shadow: 0 -1px rgba(0, 0, 0, 0.77976);
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px rgba(238, 238, 236, 0.1); }
+      .spinbutton.vertical .button:last-child:backdrop {
+        border-width: 1px;
+        border-style: solid;
+        color: #eeeeec;
+        border-color: #1c1f1f;
+        background-image: none;
+        text-shadow: none;
+        icon-shadow: none;
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+      .spinbutton.vertical .button:last-child:backdrop:insensitive {
+        border-width: 1px;
+        border-style: solid;
+        color: white;
+        border-color: #1c1f1f;
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
   .spinbutton.vertical.entry {
     border-radius: 0;
     border-width: 0 1px 0 1px; }
diff --git a/themes/Adwaita/gtk-3.0/gtk-contained.css b/themes/Adwaita/gtk-3.0/gtk-contained.css
index 646b458..1ceba50 100644
--- a/themes/Adwaita/gtk-3.0/gtk-contained.css
+++ b/themes/Adwaita/gtk-3.0/gtk-contained.css
@@ -203,20 +203,21 @@ GtkGrid:insensitive {
       border-style: solid;
       color: #454f52;
       border-color: #a1a1a1;
-      background-image: linear-gradient(to bottom, rgba(161, 161, 161, 0.3)); }
+      background-image: linear-gradient(to bottom, rgba(161, 161, 161, 0.3));
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
     .button:backdrop:insensitive {
       border-width: 1px;
       border-style: solid;
       color: #c7c7c7;
       border-color: #a1a1a1;
-      box-shadow: none; }
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
     .button:backdrop:insensitive:active {
       border-width: 1px;
       border-style: solid;
       color: #c7c7c7;
       border-color: #a1a1a1;
       background-image: linear-gradient(to bottom, rgba(161, 161, 161, 0.1));
-      box-shadow: none; }
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
   .button:insensitive {
     border-width: 1px;
     border-style: solid;
@@ -231,8 +232,8 @@ GtkGrid:insensitive {
       border-style: solid;
       color: #748489;
       border-color: #a1a1a1;
-      box-shadow: 0 1px white;
-      background-image: linear-gradient(to bottom, rgba(161, 161, 161, 0.2)); }
+      background-image: linear-gradient(to bottom, rgba(161, 161, 161, 0.2));
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px white; }
   .button.suggested-action {
     border-width: 1px;
     border-style: solid;
@@ -274,7 +275,7 @@ GtkGrid:insensitive {
         border-style: solid;
         color: #c7c7c7;
         border-color: #a1a1a1;
-        box-shadow: none; }
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
     .button.suggested-action:insensitive {
       border-width: 1px;
       border-style: solid;
@@ -325,7 +326,7 @@ GtkGrid:insensitive {
         border-style: solid;
         color: #c7c7c7;
         border-color: #a1a1a1;
-        box-shadow: none; }
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
     .button.destructive-action:insensitive {
       border-width: 1px;
       border-style: solid;
@@ -402,47 +403,95 @@ GtkColorButton.button {
     border-color: #a1a1a1;
     text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
     icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
-    box-shadow: inset 0 1px white, 0 1px white; }
+    box-shadow: inset 0 1px white; }
     .spinbutton.vertical .button:first-child {
       border-radius: 3px 3px 0 0; }
+      .spinbutton.vertical .button:first-child:active {
+        border-width: 1px;
+        border-style: solid;
+        color: #2e3436;
+        border-color: #a1a1a1;
+        background-image: linear-gradient(to bottom, #c7c7c7, #d1d1d1 3%, lightgray);
+        text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
+        icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
+        box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.3); }
+      .spinbutton.vertical .button:first-child:insensitive {
+        border-width: 1px;
+        border-style: solid;
+        color: #748489;
+        border-color: #a1a1a1;
+        background-image: none;
+        text-shadow: none;
+        icon-shadow: none;
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+      .spinbutton.vertical .button:first-child:hover {
+        border-width: 1px;
+        border-style: solid;
+        color: #2e3436;
+        border-color: #a1a1a1;
+        background-image: linear-gradient(to bottom, white, #f7f7f7 40%, #ededed);
+        text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
+        icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
+        box-shadow: inset 0 1px white; }
+      .spinbutton.vertical .button:first-child:backdrop {
+        border-width: 1px;
+        border-style: solid;
+        color: #454f52;
+        border-color: #a1a1a1;
+        background-image: none;
+        text-shadow: none;
+        icon-shadow: none;
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+      .spinbutton.vertical .button:first-child:backdrop:insensitive {
+        border-width: 1px;
+        border-style: solid;
+        color: #c7c7c7;
+        border-color: #a1a1a1;
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
     .spinbutton.vertical .button:last-child {
       border-radius: 0 0 3px 3px; }
-    .spinbutton.vertical .button:active {
-      border-width: 1px;
-      border-style: solid;
-      color: #2e3436;
-      border-color: #a1a1a1;
-      background-image: linear-gradient(to bottom, #c7c7c7, #d1d1d1 3%, lightgray);
-      text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
-      icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
-      box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.3), 0 1px white; }
-    .spinbutton.vertical .button:insensitive {
-      border-width: 1px;
-      border-style: solid;
-      color: #748489;
-      border-color: #a1a1a1;
-      background-image: none;
-      text-shadow: none;
-      icon-shadow: none;
-      box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px white; }
-    .spinbutton.vertical .button:backdrop {
-      border-width: 1px;
-      border-style: solid;
-      color: #454f52;
-      border-color: #a1a1a1;
-      background-image: none;
-      text-shadow: none;
-      icon-shadow: none;
-      box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
-    .spinbutton.vertical .button:hover {
-      border-width: 1px;
-      border-style: solid;
-      color: #2e3436;
-      border-color: #a1a1a1;
-      background-image: linear-gradient(to bottom, white, #f7f7f7 40%, #ededed);
-      text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
-      icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
-      box-shadow: inset 0 1px white, 0 1px white; }
+      .spinbutton.vertical .button:last-child:active {
+        border-width: 1px;
+        border-style: solid;
+        color: #2e3436;
+        border-color: #a1a1a1;
+        background-image: linear-gradient(to bottom, #c7c7c7, #d1d1d1 3%, lightgray);
+        text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
+        icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
+        box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.3), 0 1px white; }
+      .spinbutton.vertical .button:last-child:insensitive {
+        border-width: 1px;
+        border-style: solid;
+        color: #748489;
+        border-color: #a1a1a1;
+        background-image: none;
+        text-shadow: none;
+        icon-shadow: none;
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px white; }
+      .spinbutton.vertical .button:last-child:hover {
+        border-width: 1px;
+        border-style: solid;
+        color: #2e3436;
+        border-color: #a1a1a1;
+        background-image: linear-gradient(to bottom, white, #f7f7f7 40%, #ededed);
+        text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
+        icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
+        box-shadow: inset 0 1px white, 0 1px white; }
+      .spinbutton.vertical .button:last-child:backdrop {
+        border-width: 1px;
+        border-style: solid;
+        color: #454f52;
+        border-color: #a1a1a1;
+        background-image: none;
+        text-shadow: none;
+        icon-shadow: none;
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+      .spinbutton.vertical .button:last-child:backdrop:insensitive {
+        border-width: 1px;
+        border-style: solid;
+        color: #c7c7c7;
+        border-color: #a1a1a1;
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
   .spinbutton.vertical.entry {
     border-radius: 0;
     border-width: 0 1px 0 1px; }