fix header-bar spinbuttons

14 files changed, 92 insertions, 24 deletions

diff --git a/common/gtk-3.0/3.14/gtk-contained-dark.css b/common/gtk-3.0/3.14/gtk-contained-dark.css
index 2446e4e..62db47b 100644
--- a/common/gtk-3.0/3.14/gtk-contained-dark.css
+++ b/common/gtk-3.0/3.14/gtk-contained-dark.css
@@ -1246,11 +1246,16 @@ GtkComboBox {
 
 .primary-toolbar .spinbutton:focus .button, .header-bar .spinbutton:focus .button {
   color: #ffffff; }
+  .primary-toolbar .spinbutton:focus .button:hover, .header-bar .spinbutton:focus .button:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+    border-color: transparent; }
+  .primary-toolbar .spinbutton:focus .button:insensitive, .header-bar .spinbutton:focus .button:insensitive {
+    color: rgba(255, 255, 255, 0.4); }
 
 .primary-toolbar .spinbutton .button, .header-bar .spinbutton .button {
   color: rgba(207, 218, 231, 0.8); }
   .primary-toolbar .spinbutton .button:hover, .header-bar .spinbutton .button:hover {
-    background-color: rgba(255, 255, 255, 0.1);
+    background-color: rgba(207, 218, 231, 0.05);
     border-color: transparent; }
   .primary-toolbar .spinbutton .button:insensitive, .header-bar .spinbutton .button:insensitive {
     color: rgba(207, 218, 231, 0.5); }
diff --git a/common/gtk-3.0/3.14/gtk-contained-darker.css b/common/gtk-3.0/3.14/gtk-contained-darker.css
index 41bb058..77c92ac 100644
--- a/common/gtk-3.0/3.14/gtk-contained-darker.css
+++ b/common/gtk-3.0/3.14/gtk-contained-darker.css
@@ -1246,11 +1246,16 @@ GtkComboBox {
 
 .primary-toolbar .spinbutton:focus .button, .header-bar .spinbutton:focus .button {
   color: #ffffff; }
+  .primary-toolbar .spinbutton:focus .button:hover, .header-bar .spinbutton:focus .button:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+    border-color: transparent; }
+  .primary-toolbar .spinbutton:focus .button:insensitive, .header-bar .spinbutton:focus .button:insensitive {
+    color: rgba(255, 255, 255, 0.4); }
 
 .primary-toolbar .spinbutton .button, .header-bar .spinbutton .button {
   color: rgba(207, 218, 231, 0.8); }
   .primary-toolbar .spinbutton .button:hover, .header-bar .spinbutton .button:hover {
-    background-color: rgba(255, 255, 255, 0.1);
+    background-color: rgba(207, 218, 231, 0.05);
     border-color: transparent; }
   .primary-toolbar .spinbutton .button:insensitive, .header-bar .spinbutton .button:insensitive {
     color: rgba(207, 218, 231, 0.5); }
diff --git a/common/gtk-3.0/3.14/gtk-contained-solid-dark.css b/common/gtk-3.0/3.14/gtk-contained-solid-dark.css
index f7eb6fd..e3f1200 100644
--- a/common/gtk-3.0/3.14/gtk-contained-solid-dark.css
+++ b/common/gtk-3.0/3.14/gtk-contained-solid-dark.css
@@ -1246,11 +1246,16 @@ GtkComboBox {
 
 .primary-toolbar .spinbutton:focus .button, .header-bar .spinbutton:focus .button {
   color: #ffffff; }
+  .primary-toolbar .spinbutton:focus .button:hover, .header-bar .spinbutton:focus .button:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+    border-color: transparent; }
+  .primary-toolbar .spinbutton:focus .button:insensitive, .header-bar .spinbutton:focus .button:insensitive {
+    color: rgba(255, 255, 255, 0.4); }
 
 .primary-toolbar .spinbutton .button, .header-bar .spinbutton .button {
   color: rgba(207, 218, 231, 0.8); }
   .primary-toolbar .spinbutton .button:hover, .header-bar .spinbutton .button:hover {
-    background-color: rgba(255, 255, 255, 0.1);
+    background-color: rgba(207, 218, 231, 0.05);
     border-color: transparent; }
   .primary-toolbar .spinbutton .button:insensitive, .header-bar .spinbutton .button:insensitive {
     color: rgba(207, 218, 231, 0.5); }
diff --git a/common/gtk-3.0/3.14/gtk-contained-solid-darker.css b/common/gtk-3.0/3.14/gtk-contained-solid-darker.css
index d6b78d7..e0dbb2c 100644
--- a/common/gtk-3.0/3.14/gtk-contained-solid-darker.css
+++ b/common/gtk-3.0/3.14/gtk-contained-solid-darker.css
@@ -1246,11 +1246,16 @@ GtkComboBox {
 
 .primary-toolbar .spinbutton:focus .button, .header-bar .spinbutton:focus .button {
   color: #ffffff; }
+  .primary-toolbar .spinbutton:focus .button:hover, .header-bar .spinbutton:focus .button:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+    border-color: transparent; }
+  .primary-toolbar .spinbutton:focus .button:insensitive, .header-bar .spinbutton:focus .button:insensitive {
+    color: rgba(255, 255, 255, 0.4); }
 
 .primary-toolbar .spinbutton .button, .header-bar .spinbutton .button {
   color: rgba(207, 218, 231, 0.8); }
   .primary-toolbar .spinbutton .button:hover, .header-bar .spinbutton .button:hover {
-    background-color: rgba(255, 255, 255, 0.1);
+    background-color: rgba(207, 218, 231, 0.05);
     border-color: transparent; }
   .primary-toolbar .spinbutton .button:insensitive, .header-bar .spinbutton .button:insensitive {
     color: rgba(207, 218, 231, 0.5); }
diff --git a/common/gtk-3.0/3.14/gtk-contained-solid.css b/common/gtk-3.0/3.14/gtk-contained-solid.css
index 063c06f..d2f5156 100644
--- a/common/gtk-3.0/3.14/gtk-contained-solid.css
+++ b/common/gtk-3.0/3.14/gtk-contained-solid.css
@@ -1246,11 +1246,16 @@ GtkComboBox {
 
 .primary-toolbar .spinbutton:focus .button, .header-bar .spinbutton:focus .button {
   color: #ffffff; }
+  .primary-toolbar .spinbutton:focus .button:hover, .header-bar .spinbutton:focus .button:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+    border-color: transparent; }
+  .primary-toolbar .spinbutton:focus .button:insensitive, .header-bar .spinbutton:focus .button:insensitive {
+    color: rgba(255, 255, 255, 0.4); }
 
 .primary-toolbar .spinbutton .button, .header-bar .spinbutton .button {
   color: rgba(82, 93, 118, 0.8); }
   .primary-toolbar .spinbutton .button:hover, .header-bar .spinbutton .button:hover {
-    background-color: rgba(255, 255, 255, 0.1);
+    background-color: rgba(82, 93, 118, 0.05);
     border-color: transparent; }
   .primary-toolbar .spinbutton .button:insensitive, .header-bar .spinbutton .button:insensitive {
     color: rgba(82, 93, 118, 0.5); }
diff --git a/common/gtk-3.0/3.14/gtk-contained.css b/common/gtk-3.0/3.14/gtk-contained.css
index f6c1ffc..7aefef5 100644
--- a/common/gtk-3.0/3.14/gtk-contained.css
+++ b/common/gtk-3.0/3.14/gtk-contained.css
@@ -1246,11 +1246,16 @@ GtkComboBox {
 
 .primary-toolbar .spinbutton:focus .button, .header-bar .spinbutton:focus .button {
   color: #ffffff; }
+  .primary-toolbar .spinbutton:focus .button:hover, .header-bar .spinbutton:focus .button:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+    border-color: transparent; }
+  .primary-toolbar .spinbutton:focus .button:insensitive, .header-bar .spinbutton:focus .button:insensitive {
+    color: rgba(255, 255, 255, 0.4); }
 
 .primary-toolbar .spinbutton .button, .header-bar .spinbutton .button {
   color: rgba(82, 93, 118, 0.8); }
   .primary-toolbar .spinbutton .button:hover, .header-bar .spinbutton .button:hover {
-    background-color: rgba(255, 255, 255, 0.1);
+    background-color: rgba(82, 93, 118, 0.05);
     border-color: transparent; }
   .primary-toolbar .spinbutton .button:insensitive, .header-bar .spinbutton .button:insensitive {
     color: rgba(82, 93, 118, 0.5); }
diff --git a/common/gtk-3.0/3.14/sass/_common.scss b/common/gtk-3.0/3.14/sass/_common.scss
index ff8a53c..665ae6a 100644
--- a/common/gtk-3.0/3.14/sass/_common.scss
+++ b/common/gtk-3.0/3.14/sass/_common.scss
@@ -1303,14 +1303,18 @@ GtkComboBox {
   // Header-bar Spinbuttons
   & .spinbutton {
 
-      &:focus .button { color: $selected_fg_color; }
+    &:focus .button {
+      color: $selected_fg_color;
 
-      .button {
-        color: $header_fg;
+      &:hover { background-color: transparentize($selected_fg_color, 0.9); border-color: transparent; }
+      &:insensitive { color: transparentize($selected_fg_color, 0.6); }
+    }
+    .button {
+      color: $header_fg;
 
-        &:hover { background-color: rgba(255,255,255,0.1); border-color: transparent; }
-        &:insensitive { color: transparentize($header_fg, 0.3); }
-        &:active { background-color: rgba(0,0,0,0.1); }
+      &:hover { background-color: transparentize($header_fg, 0.75); border-color: transparent; }
+      &:insensitive { color: transparentize($header_fg, 0.3); }
+      &:active { background-color: rgba(0,0,0,0.1); }
     }
   }
 
diff --git a/common/gtk-3.0/3.16/gtk-contained-dark.css b/common/gtk-3.0/3.16/gtk-contained-dark.css
index 54914f7..6eed2d8 100644
--- a/common/gtk-3.0/3.16/gtk-contained-dark.css
+++ b/common/gtk-3.0/3.16/gtk-contained-dark.css
@@ -1245,11 +1245,16 @@ GtkComboBox {
 
 .primary-toolbar .spinbutton:focus .button, .header-bar .spinbutton:focus .button {
   color: #ffffff; }
+  .primary-toolbar .spinbutton:focus .button:hover, .header-bar .spinbutton:focus .button:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+    border-color: transparent; }
+  .primary-toolbar .spinbutton:focus .button:insensitive, .header-bar .spinbutton:focus .button:insensitive {
+    color: rgba(255, 255, 255, 0.4); }
 
 .primary-toolbar .spinbutton .button, .header-bar .spinbutton .button {
   color: rgba(207, 218, 231, 0.8); }
   .primary-toolbar .spinbutton .button:hover, .header-bar .spinbutton .button:hover {
-    background-color: rgba(255, 255, 255, 0.1);
+    background-color: rgba(207, 218, 231, 0.05);
     border-color: transparent; }
   .primary-toolbar .spinbutton .button:insensitive, .header-bar .spinbutton .button:insensitive {
     color: rgba(207, 218, 231, 0.5); }
diff --git a/common/gtk-3.0/3.16/gtk-contained-darker.css b/common/gtk-3.0/3.16/gtk-contained-darker.css
index e60fd79..7ad34f1 100644
--- a/common/gtk-3.0/3.16/gtk-contained-darker.css
+++ b/common/gtk-3.0/3.16/gtk-contained-darker.css
@@ -1245,11 +1245,16 @@ GtkComboBox {
 
 .primary-toolbar .spinbutton:focus .button, .header-bar .spinbutton:focus .button {
   color: #ffffff; }
+  .primary-toolbar .spinbutton:focus .button:hover, .header-bar .spinbutton:focus .button:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+    border-color: transparent; }
+  .primary-toolbar .spinbutton:focus .button:insensitive, .header-bar .spinbutton:focus .button:insensitive {
+    color: rgba(255, 255, 255, 0.4); }
 
 .primary-toolbar .spinbutton .button, .header-bar .spinbutton .button {
   color: rgba(207, 218, 231, 0.8); }
   .primary-toolbar .spinbutton .button:hover, .header-bar .spinbutton .button:hover {
-    background-color: rgba(255, 255, 255, 0.1);
+    background-color: rgba(207, 218, 231, 0.05);
     border-color: transparent; }
   .primary-toolbar .spinbutton .button:insensitive, .header-bar .spinbutton .button:insensitive {
     color: rgba(207, 218, 231, 0.5); }
diff --git a/common/gtk-3.0/3.16/gtk-contained-solid-dark.css b/common/gtk-3.0/3.16/gtk-contained-solid-dark.css
index 1ac520a..9dadbbd 100644
--- a/common/gtk-3.0/3.16/gtk-contained-solid-dark.css
+++ b/common/gtk-3.0/3.16/gtk-contained-solid-dark.css
@@ -1245,11 +1245,16 @@ GtkComboBox {
 
 .primary-toolbar .spinbutton:focus .button, .header-bar .spinbutton:focus .button {
   color: #ffffff; }
+  .primary-toolbar .spinbutton:focus .button:hover, .header-bar .spinbutton:focus .button:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+    border-color: transparent; }
+  .primary-toolbar .spinbutton:focus .button:insensitive, .header-bar .spinbutton:focus .button:insensitive {
+    color: rgba(255, 255, 255, 0.4); }
 
 .primary-toolbar .spinbutton .button, .header-bar .spinbutton .button {
   color: rgba(207, 218, 231, 0.8); }
   .primary-toolbar .spinbutton .button:hover, .header-bar .spinbutton .button:hover {
-    background-color: rgba(255, 255, 255, 0.1);
+    background-color: rgba(207, 218, 231, 0.05);
     border-color: transparent; }
   .primary-toolbar .spinbutton .button:insensitive, .header-bar .spinbutton .button:insensitive {
     color: rgba(207, 218, 231, 0.5); }
diff --git a/common/gtk-3.0/3.16/gtk-contained-solid-darker.css b/common/gtk-3.0/3.16/gtk-contained-solid-darker.css
index 74d2fc0..e3d6c15 100644
--- a/common/gtk-3.0/3.16/gtk-contained-solid-darker.css
+++ b/common/gtk-3.0/3.16/gtk-contained-solid-darker.css
@@ -1245,11 +1245,16 @@ GtkComboBox {
 
 .primary-toolbar .spinbutton:focus .button, .header-bar .spinbutton:focus .button {
   color: #ffffff; }
+  .primary-toolbar .spinbutton:focus .button:hover, .header-bar .spinbutton:focus .button:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+    border-color: transparent; }
+  .primary-toolbar .spinbutton:focus .button:insensitive, .header-bar .spinbutton:focus .button:insensitive {
+    color: rgba(255, 255, 255, 0.4); }
 
 .primary-toolbar .spinbutton .button, .header-bar .spinbutton .button {
   color: rgba(207, 218, 231, 0.8); }
   .primary-toolbar .spinbutton .button:hover, .header-bar .spinbutton .button:hover {
-    background-color: rgba(255, 255, 255, 0.1);
+    background-color: rgba(207, 218, 231, 0.05);
     border-color: transparent; }
   .primary-toolbar .spinbutton .button:insensitive, .header-bar .spinbutton .button:insensitive {
     color: rgba(207, 218, 231, 0.5); }
diff --git a/common/gtk-3.0/3.16/gtk-contained-solid.css b/common/gtk-3.0/3.16/gtk-contained-solid.css
index 18abdb6..24c6232 100644
--- a/common/gtk-3.0/3.16/gtk-contained-solid.css
+++ b/common/gtk-3.0/3.16/gtk-contained-solid.css
@@ -1245,11 +1245,16 @@ GtkComboBox {
 
 .primary-toolbar .spinbutton:focus .button, .header-bar .spinbutton:focus .button {
   color: #ffffff; }
+  .primary-toolbar .spinbutton:focus .button:hover, .header-bar .spinbutton:focus .button:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+    border-color: transparent; }
+  .primary-toolbar .spinbutton:focus .button:insensitive, .header-bar .spinbutton:focus .button:insensitive {
+    color: rgba(255, 255, 255, 0.4); }
 
 .primary-toolbar .spinbutton .button, .header-bar .spinbutton .button {
   color: rgba(82, 93, 118, 0.8); }
   .primary-toolbar .spinbutton .button:hover, .header-bar .spinbutton .button:hover {
-    background-color: rgba(255, 255, 255, 0.1);
+    background-color: rgba(82, 93, 118, 0.05);
     border-color: transparent; }
   .primary-toolbar .spinbutton .button:insensitive, .header-bar .spinbutton .button:insensitive {
     color: rgba(82, 93, 118, 0.5); }
diff --git a/common/gtk-3.0/3.16/gtk-contained.css b/common/gtk-3.0/3.16/gtk-contained.css
index a1eacd8..24f3671 100644
--- a/common/gtk-3.0/3.16/gtk-contained.css
+++ b/common/gtk-3.0/3.16/gtk-contained.css
@@ -1245,11 +1245,16 @@ GtkComboBox {
 
 .primary-toolbar .spinbutton:focus .button, .header-bar .spinbutton:focus .button {
   color: #ffffff; }
+  .primary-toolbar .spinbutton:focus .button:hover, .header-bar .spinbutton:focus .button:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+    border-color: transparent; }
+  .primary-toolbar .spinbutton:focus .button:insensitive, .header-bar .spinbutton:focus .button:insensitive {
+    color: rgba(255, 255, 255, 0.4); }
 
 .primary-toolbar .spinbutton .button, .header-bar .spinbutton .button {
   color: rgba(82, 93, 118, 0.8); }
   .primary-toolbar .spinbutton .button:hover, .header-bar .spinbutton .button:hover {
-    background-color: rgba(255, 255, 255, 0.1);
+    background-color: rgba(82, 93, 118, 0.05);
     border-color: transparent; }
   .primary-toolbar .spinbutton .button:insensitive, .header-bar .spinbutton .button:insensitive {
     color: rgba(82, 93, 118, 0.5); }
diff --git a/common/gtk-3.0/3.16/sass/_common.scss b/common/gtk-3.0/3.16/sass/_common.scss
index 4ceb343..4505d9a 100644
--- a/common/gtk-3.0/3.16/sass/_common.scss
+++ b/common/gtk-3.0/3.16/sass/_common.scss
@@ -1312,14 +1312,18 @@ GtkComboBox {
   // Header-bar Spinbuttons
   & .spinbutton {
 
-      &:focus .button { color: $selected_fg_color; }
+    &:focus .button {
+      color: $selected_fg_color;
 
-      .button {
-        color: $header_fg;
+      &:hover { background-color: transparentize($selected_fg_color, 0.9); border-color: transparent; }
+      &:insensitive { color: transparentize($selected_fg_color, 0.6); }
+    }
+    .button {
+      color: $header_fg;
 
-        &:hover { background-color: rgba(255,255,255,0.1); border-color: transparent; }
-        &:insensitive { color: transparentize($header_fg, 0.3); }
-        &:active { background-color: rgba(0,0,0,0.1); }
+      &:hover { background-color: transparentize($header_fg, 0.75); border-color: transparent; }
+      &:insensitive { color: transparentize($header_fg, 0.3); }
+      &:active { background-color: rgba(0,0,0,0.1); }
     }
   }