From 8b1e52cbd6546161baeb286d6f1a7ce09f14b79e Mon Sep 17 00:00:00 2001
From: Lapo Calamandrei <calamandrei@gmail.com>
Date: Fri, 27 Jun 2014 14:24:53 +0200
Subject: [PATCH] Adwaita: initial flat entry styling.

---
 gtk/resources/theme/Adwaita/_common.scss      |  17 ++
 .../theme/Adwaita/gtk-contained-dark.css      | 250 ++++++++++--------
 gtk/resources/theme/Adwaita/gtk-contained.css | 242 +++++++++--------
 3 files changed, 285 insertions(+), 224 deletions(-)

diff --git a/gtk/resources/theme/Adwaita/_common.scss b/gtk/resources/theme/Adwaita/_common.scss
index 5ac4a7f050..7b7c3595a1 100644
--- a/gtk/resources/theme/Adwaita/_common.scss
+++ b/gtk/resources/theme/Adwaita/_common.scss
@@ -153,6 +153,12 @@
   border-radius: 3px;
   transition: all 200ms ease-out;
   @include entry(normal);
+  &.flat, &.flat:focus {
+    padding: 2px;
+    @include entry(normal, $noedge:true);
+    border: none;
+    border-radius: 0;
+  }
   &:focus { @include entry(focus); }
   &:insensitive { @include entry(insensitive); }
   &:backdrop { @include entry(backdrop); }
@@ -494,6 +500,17 @@ GtkColorButton.button { padding: 4px; } // Uniform padding on the GtkColorButton
       border-top-width: 0;
     }
   }
+/* This is to fix spinbuttons in entries, but I feel like hiding code issues
+ * hence it's commented atm.
+ *  GtkTreeView & {
+ *   &.entry, &.entry:focus {
+ *     padding: 1px;
+ *     border-width: 1px 0;
+ *     border-color: $selected_bg_color;
+ *     border-radius: 0;
+ *     box-shadow: none;
+ *   }
+ * } */
 }
 
 /**************
diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
index fbb4fe7de5..39ee8956e3 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
@@ -139,6 +139,16 @@
   background-image: linear-gradient(to bottom, #212121, #292929 90%);
   border-color: #1c1f1f;
   box-shadow: inset 0 2px 2px -2px #141414, 0 1px rgba(238, 238, 236, 0.1); }
+  .entry.flat, .entry.flat:focus {
+    padding: 2px;
+    background-color: transparent;
+    border-style: solid;
+    border-width: 1px;
+    background-image: linear-gradient(to bottom, #212121, #292929 90%);
+    border-color: #1c1f1f;
+    box-shadow: inset 0 2px 2px -2px #141414;
+    border: none;
+    border-radius: 0; }
   .entry:focus {
     background-color: transparent;
     border-style: solid;
@@ -499,136 +509,148 @@ GtkColorButton.button {
 /*****************
  * GtkSpinButton *
  *****************/
-.spinbutton .button {
-  background-image: none;
-  border-width: 0 0 0 1px;
-  border-color: rgba(28, 31, 31, 0.3);
-  color: #e4e4e2;
-  border-radius: 0;
-  box-shadow: none; }
-  .spinbutton .button:dir(rtl) {
-    border-width: 0 1px 0 0; }
-  .spinbutton .button:hover {
-    color: #eeeeec;
-    background-color: rgba(0, 0, 0, 0.05); }
-  .spinbutton .button:insensitive {
-    color: rgba(147, 150, 149, 0.3); }
-  .spinbutton .button:active {
-    box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.2);
-    background-color: rgba(0, 0, 0, 0.1); }
-  .spinbutton .button:backdrop {
-    border-color: rgba(30, 34, 34, 0.3); }
-  .spinbutton .button:backdrop:insensitive {
+.spinbutton {
+  /* This is to fix spinbuttons in entries, but I feel like hiding code issues
+   * hence it's commented atm.
+   *  GtkTreeView & {
+   *   &.entry, &.entry:focus {
+   *     padding: 1px;
+   *     border-width: 1px 0;
+   *     border-color: $selected_bg_color;
+   *     border-radius: 0;
+   *     box-shadow: none;
+   *   }
+   * } */ }
+  .spinbutton .button {
     background-image: none;
-    color: rgba(69, 76, 76, 0.3);
-    border-width: 0 0 0 1px; }
-    .spinbutton .button:backdrop:insensitive:dir(rtl) {
+    border-width: 0 0 0 1px;
+    border-color: rgba(28, 31, 31, 0.3);
+    color: #e4e4e2;
+    border-radius: 0;
+    box-shadow: none; }
+    .spinbutton .button:dir(rtl) {
       border-width: 0 1px 0 0; }
-.spinbutton.vertical .button:first-child {
-  border-width: 1px;
-  border-style: solid;
-  color: #eeeeec;
-  background-image: linear-gradient(to bottom, #454c4c, #393f3f 40%, #2d3232);
-  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); }
-  .spinbutton.vertical .button:first-child:active {
+    .spinbutton .button:hover {
+      color: #eeeeec;
+      background-color: rgba(0, 0, 0, 0.05); }
+    .spinbutton .button:insensitive {
+      color: rgba(147, 150, 149, 0.3); }
+    .spinbutton .button:active {
+      box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.2);
+      background-color: rgba(0, 0, 0, 0.1); }
+    .spinbutton .button:backdrop {
+      border-color: rgba(30, 34, 34, 0.3); }
+    .spinbutton .button:backdrop:insensitive {
+      background-image: none;
+      color: rgba(69, 76, 76, 0.3);
+      border-width: 0 0 0 1px; }
+      .spinbutton .button:backdrop:insensitive:dir(rtl) {
+        border-width: 0 1px 0 0; }
+  .spinbutton.vertical .button:first-child {
     border-width: 1px;
     border-style: solid;
     color: #eeeeec;
+    background-image: linear-gradient(to bottom, #454c4c, #393f3f 40%, #2d3232);
     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:hover {
-    border-width: 1px;
-    border-style: solid;
-    color: #eeeeec;
-    border-color: #1c1f1f;
-    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);
+    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); }
-  .spinbutton.vertical .button:first-child:insensitive {
-    border-width: 1px;
-    border-style: solid;
-    color: #939695;
-    border-color: #1c1f1f;
-    background-image: linear-gradient(to bottom, #323636);
-    text-shadow: none;
-    icon-shadow: none;
-    box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
-  .spinbutton.vertical .button:first-child:backdrop {
-    border-width: 1px;
-    border-style: solid;
-    color: #c9cbc9;
-    border-color: #1e2222;
-    background-image: linear-gradient(to bottom, #393f3f);
-    text-shadow: none;
-    icon-shadow: none;
-    box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
-.spinbutton.vertical .button:last-child {
-  border-width: 1px;
-  border-style: solid;
-  color: #eeeeec;
-  background-image: linear-gradient(to bottom, #454c4c, #393f3f 40%, #2d3232);
-  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); }
-  .spinbutton.vertical .button:last-child:active {
+    .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:hover {
+      border-width: 1px;
+      border-style: solid;
+      color: #eeeeec;
+      border-color: #1c1f1f;
+      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:insensitive {
+      border-width: 1px;
+      border-style: solid;
+      color: #939695;
+      border-color: #1c1f1f;
+      background-image: linear-gradient(to bottom, #323636);
+      text-shadow: none;
+      icon-shadow: none;
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+    .spinbutton.vertical .button:first-child:backdrop {
+      border-width: 1px;
+      border-style: solid;
+      color: #c9cbc9;
+      border-color: #1e2222;
+      background-image: linear-gradient(to bottom, #393f3f);
+      text-shadow: none;
+      icon-shadow: none;
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
+  .spinbutton.vertical .button:last-child {
     border-width: 1px;
     border-style: solid;
     color: #eeeeec;
+    background-image: linear-gradient(to bottom, #454c4c, #393f3f 40%, #2d3232);
     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:hover {
-    border-width: 1px;
-    border-style: solid;
-    color: #eeeeec;
-    border-color: #1c1f1f;
-    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);
+    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); }
-  .spinbutton.vertical .button:last-child:insensitive {
+    .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:hover {
+      border-width: 1px;
+      border-style: solid;
+      color: #eeeeec;
+      border-color: #1c1f1f;
+      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:insensitive {
+      border-width: 1px;
+      border-style: solid;
+      color: #939695;
+      border-color: #1c1f1f;
+      background-image: linear-gradient(to bottom, #323636);
+      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:backdrop {
+      border-width: 1px;
+      border-style: solid;
+      color: #c9cbc9;
+      border-color: #1e2222;
+      background-image: linear-gradient(to bottom, #393f3f);
+      text-shadow: none;
+      icon-shadow: none;
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
+  .spinbutton.vertical .button:backdrop:insensitive {
     border-width: 1px;
     border-style: solid;
-    color: #939695;
-    border-color: #1c1f1f;
-    background-image: linear-gradient(to bottom, #323636);
-    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:backdrop {
-    border-width: 1px;
-    border-style: solid;
-    color: #c9cbc9;
+    color: #454c4c;
     border-color: #1e2222;
     background-image: linear-gradient(to bottom, #393f3f);
-    text-shadow: none;
-    icon-shadow: none;
-    box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
-.spinbutton.vertical .button:backdrop:insensitive {
-  border-width: 1px;
-  border-style: solid;
-  color: #454c4c;
-  border-color: #1e2222;
-  background-image: linear-gradient(to bottom, #393f3f);
-  box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
-.spinbutton.vertical.entry {
-  border-radius: 0; }
-.spinbutton.vertical .button:first-child, .spinbutton.vertical .button:first-child:active, .spinbutton.vertical .button:first-child:hover, .spinbutton.vertical .button:first-child:insensitive, .spinbutton.vertical .button:first-child:backdrop {
-  border-radius: 3px 3px 0 0;
-  border-bottom-width: 0; }
-.spinbutton.vertical .button:last-child, .spinbutton.vertical .button:last-child:active, .spinbutton.vertical .button:last-child:hover, .spinbutton.vertical .button:last-child:insensitive, .spinbutton.vertical .button:last-child:backdrop {
-  border-radius: 0 0 3px 3px;
-  border-top-width: 0; }
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+  .spinbutton.vertical.entry {
+    border-radius: 0; }
+  .spinbutton.vertical .button:first-child, .spinbutton.vertical .button:first-child:active, .spinbutton.vertical .button:first-child:hover, .spinbutton.vertical .button:first-child:insensitive, .spinbutton.vertical .button:first-child:backdrop {
+    border-radius: 3px 3px 0 0;
+    border-bottom-width: 0; }
+  .spinbutton.vertical .button:last-child, .spinbutton.vertical .button:last-child:active, .spinbutton.vertical .button:last-child:hover, .spinbutton.vertical .button:last-child:insensitive, .spinbutton.vertical .button:last-child:backdrop {
+    border-radius: 0 0 3px 3px;
+    border-top-width: 0; }
 
 /**************
  * ComboBoxes *
diff --git a/gtk/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css
index 2df5e8064e..5f0b8ffc7f 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained.css
@@ -139,6 +139,16 @@
   background-image: linear-gradient(to bottom, #f7f7f7, white 90%);
   border-color: #a1a1a1;
   box-shadow: inset 0 2px 2px -2px #7f7f7f, 0 1px white; }
+  .entry.flat, .entry.flat:focus {
+    padding: 2px;
+    background-color: transparent;
+    border-style: solid;
+    border-width: 1px;
+    background-image: linear-gradient(to bottom, #f7f7f7, white 90%);
+    border-color: #a1a1a1;
+    box-shadow: inset 0 2px 2px -2px #7f7f7f;
+    border: none;
+    border-radius: 0; }
   .entry:focus {
     background-color: transparent;
     border-style: solid;
@@ -499,136 +509,148 @@ GtkColorButton.button {
 /*****************
  * GtkSpinButton *
  *****************/
-.spinbutton .button {
-  background-image: none;
-  border-width: 0 0 0 1px;
-  border-color: rgba(161, 161, 161, 0.3);
-  color: #383e40;
-  border-radius: 0;
-  box-shadow: none; }
-  .spinbutton .button:dir(rtl) {
-    border-width: 0 1px 0 0; }
-  .spinbutton .button:hover {
-    color: #2e3436;
-    background-color: rgba(0, 0, 0, 0.05); }
-  .spinbutton .button:insensitive {
-    color: rgba(141, 144, 145, 0.3); }
-  .spinbutton .button:active {
-    box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.2);
-    background-color: rgba(0, 0, 0, 0.1); }
-  .spinbutton .button:backdrop {
-    border-color: rgba(168, 168, 168, 0.3); }
-  .spinbutton .button:backdrop:insensitive {
+.spinbutton {
+  /* This is to fix spinbuttons in entries, but I feel like hiding code issues
+   * hence it's commented atm.
+   *  GtkTreeView & {
+   *   &.entry, &.entry:focus {
+   *     padding: 1px;
+   *     border-width: 1px 0;
+   *     border-color: $selected_bg_color;
+   *     border-radius: 0;
+   *     box-shadow: none;
+   *   }
+   * } */ }
+  .spinbutton .button {
     background-image: none;
-    color: rgba(199, 199, 199, 0.3);
-    border-width: 0 0 0 1px; }
-    .spinbutton .button:backdrop:insensitive:dir(rtl) {
+    border-width: 0 0 0 1px;
+    border-color: rgba(161, 161, 161, 0.3);
+    color: #383e40;
+    border-radius: 0;
+    box-shadow: none; }
+    .spinbutton .button:dir(rtl) {
       border-width: 0 1px 0 0; }
-.spinbutton.vertical .button:first-child {
-  border-width: 1px;
-  border-style: solid;
-  color: #2e3436;
-  background-image: linear-gradient(to bottom, #fafafa, #ededed 40%, #e0e0e0);
-  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; }
-  .spinbutton.vertical .button:first-child:active {
+    .spinbutton .button:hover {
+      color: #2e3436;
+      background-color: rgba(0, 0, 0, 0.05); }
+    .spinbutton .button:insensitive {
+      color: rgba(141, 144, 145, 0.3); }
+    .spinbutton .button:active {
+      box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.2);
+      background-color: rgba(0, 0, 0, 0.1); }
+    .spinbutton .button:backdrop {
+      border-color: rgba(168, 168, 168, 0.3); }
+    .spinbutton .button:backdrop:insensitive {
+      background-image: none;
+      color: rgba(199, 199, 199, 0.3);
+      border-width: 0 0 0 1px; }
+      .spinbutton .button:backdrop:insensitive:dir(rtl) {
+        border-width: 0 1px 0 0; }
+  .spinbutton.vertical .button:first-child {
     border-width: 1px;
     border-style: solid;
     color: #2e3436;
+    background-image: linear-gradient(to bottom, #fafafa, #ededed 40%, #e0e0e0);
     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: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:insensitive {
-    border-width: 1px;
-    border-style: solid;
-    color: #8d9091;
-    border-color: #a1a1a1;
-    background-image: linear-gradient(to bottom, #f4f4f4);
-    text-shadow: none;
-    icon-shadow: none;
-    box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
-  .spinbutton.vertical .button:first-child:backdrop {
-    border-width: 1px;
-    border-style: solid;
-    color: #54595a;
-    border-color: #a8a8a8;
-    background-image: linear-gradient(to bottom, #ededed);
-    text-shadow: none;
-    icon-shadow: none;
-    box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
-.spinbutton.vertical .button:last-child {
-  border-width: 1px;
-  border-style: solid;
-  color: #2e3436;
-  background-image: linear-gradient(to bottom, #fafafa, #ededed 40%, #e0e0e0);
-  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; }
-  .spinbutton.vertical .button:last-child:active {
+    .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: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:insensitive {
+      border-width: 1px;
+      border-style: solid;
+      color: #8d9091;
+      border-color: #a1a1a1;
+      background-image: linear-gradient(to bottom, #f4f4f4);
+      text-shadow: none;
+      icon-shadow: none;
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+    .spinbutton.vertical .button:first-child:backdrop {
+      border-width: 1px;
+      border-style: solid;
+      color: #54595a;
+      border-color: #a8a8a8;
+      background-image: linear-gradient(to bottom, #ededed);
+      text-shadow: none;
+      icon-shadow: none;
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
+  .spinbutton.vertical .button:last-child {
     border-width: 1px;
     border-style: solid;
     color: #2e3436;
+    background-image: linear-gradient(to bottom, #fafafa, #ededed 40%, #e0e0e0);
     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: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:insensitive {
+    .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: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:insensitive {
+      border-width: 1px;
+      border-style: solid;
+      color: #8d9091;
+      border-color: #a1a1a1;
+      background-image: linear-gradient(to bottom, #f4f4f4);
+      text-shadow: none;
+      icon-shadow: none;
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px white; }
+    .spinbutton.vertical .button:last-child:backdrop {
+      border-width: 1px;
+      border-style: solid;
+      color: #54595a;
+      border-color: #a8a8a8;
+      background-image: linear-gradient(to bottom, #ededed);
+      text-shadow: none;
+      icon-shadow: none;
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
+  .spinbutton.vertical .button:backdrop:insensitive {
     border-width: 1px;
     border-style: solid;
-    color: #8d9091;
-    border-color: #a1a1a1;
-    background-image: linear-gradient(to bottom, #f4f4f4);
-    text-shadow: none;
-    icon-shadow: none;
-    box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px white; }
-  .spinbutton.vertical .button:last-child:backdrop {
-    border-width: 1px;
-    border-style: solid;
-    color: #54595a;
+    color: #c7c7c7;
     border-color: #a8a8a8;
     background-image: linear-gradient(to bottom, #ededed);
-    text-shadow: none;
-    icon-shadow: none;
-    box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
-.spinbutton.vertical .button:backdrop:insensitive {
-  border-width: 1px;
-  border-style: solid;
-  color: #c7c7c7;
-  border-color: #a8a8a8;
-  background-image: linear-gradient(to bottom, #ededed);
-  box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
-.spinbutton.vertical.entry {
-  border-radius: 0; }
-.spinbutton.vertical .button:first-child, .spinbutton.vertical .button:first-child:active, .spinbutton.vertical .button:first-child:hover, .spinbutton.vertical .button:first-child:insensitive, .spinbutton.vertical .button:first-child:backdrop {
-  border-radius: 3px 3px 0 0;
-  border-bottom-width: 0; }
-.spinbutton.vertical .button:last-child, .spinbutton.vertical .button:last-child:active, .spinbutton.vertical .button:last-child:hover, .spinbutton.vertical .button:last-child:insensitive, .spinbutton.vertical .button:last-child:backdrop {
-  border-radius: 0 0 3px 3px;
-  border-top-width: 0; }
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+  .spinbutton.vertical.entry {
+    border-radius: 0; }
+  .spinbutton.vertical .button:first-child, .spinbutton.vertical .button:first-child:active, .spinbutton.vertical .button:first-child:hover, .spinbutton.vertical .button:first-child:insensitive, .spinbutton.vertical .button:first-child:backdrop {
+    border-radius: 3px 3px 0 0;
+    border-bottom-width: 0; }
+  .spinbutton.vertical .button:last-child, .spinbutton.vertical .button:last-child:active, .spinbutton.vertical .button:last-child:hover, .spinbutton.vertical .button:last-child:insensitive, .spinbutton.vertical .button:last-child:backdrop {
+    border-radius: 0 0 3px 3px;
+    border-top-width: 0; }
 
 /**************
  * ComboBoxes *