Adwaita: osd spinbutton fixes

3 files changed, 137 insertions, 15 deletions

diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 9101a8cb68..43bc9c23cc 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -825,7 +825,9 @@ GtkColorButton.button {
       }
     }
   }
-  .osd & {
+
+  // OSD horizontal
+  .osd &:not(.vertical) {
     .button {
       @include button(undecorated);
       color: $osd_fg_color;
@@ -861,6 +863,8 @@ GtkColorButton.button {
       &:dir(rtl):first-child { border-radius: 3px 0 0 3px; }
     }
   }
+
+  // Vertical
   &.vertical {
     .button {
       padding-top: 8px;    //  Same vertical padding as image-buttons
@@ -883,6 +887,7 @@ GtkColorButton.button {
         &:backdrop {
           @extend %top_button;
           @include button(backdrop, $edge:none);
+          &:insensitive { @include button(backdrop-insensitive, $edge:none); }
         }
       }
       &:last-child { @extend %bottom_button; }
@@ -903,6 +908,17 @@ GtkColorButton.button {
       border-style: none solid solid solid;
     }
   }
+
+  // OSD vertical
+  .osd &.vertical .button:first-child {
+    @include button(osd);
+    &:hover { @include button(osd-hover);}
+    &:active { @include button(osd-active); }
+    &:insensitive { @include button(osd-insensitive); }
+    &:backdrop { @include button(osd-backdrop); }
+  }
+
+  // Misc
   GtkTreeView & {
     &.entry, &.entry:focus {
       padding: 1px;
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index 6d2659a2b2..1f195d9744 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -1269,7 +1269,7 @@ GtkColorButton.button, .header-bar GtkColorButton.button.titlebutton,
     border-style: none none none solid; }
     .spinbutton:not(.vertical) .button:backdrop:insensitive:dir(rtl) {
       border-style: none solid none none; }
-.osd .spinbutton .button {
+.osd .spinbutton:not(.vertical) .button {
   border-color: transparent;
   background-color: transparent;
   background-image: none;
@@ -1282,9 +1282,9 @@ GtkColorButton.button, .header-bar GtkColorButton.button.titlebutton,
   border-radius: 0;
   box-shadow: none;
   icon-shadow: 0 1px black; }
-  .osd .spinbutton .button:dir(rtl) {
+  .osd .spinbutton:not(.vertical) .button:dir(rtl) {
     border-style: none solid none none; }
-  .osd .spinbutton .button:hover {
+  .osd .spinbutton:not(.vertical) .button:hover {
     border-color: transparent;
     background-color: transparent;
     background-image: none;
@@ -1296,7 +1296,7 @@ GtkColorButton.button, .header-bar GtkColorButton.button.titlebutton,
     background-color: rgba(238, 238, 236, 0.1);
     icon-shadow: 0 1px black;
     box-shadow: none; }
-  .osd .spinbutton .button:backdrop {
+  .osd .spinbutton:not(.vertical) .button:backdrop {
     border-color: transparent;
     background-color: transparent;
     background-image: none;
@@ -1307,7 +1307,7 @@ GtkColorButton.button, .header-bar GtkColorButton.button.titlebutton,
     border-color: rgba(0, 0, 0, 0.5);
     icon-shadow: none;
     box-shadow: none; }
-  .osd .spinbutton .button:insensitive {
+  .osd .spinbutton:not(.vertical) .button:insensitive {
     border-color: transparent;
     background-color: transparent;
     background-image: none;
@@ -1318,9 +1318,9 @@ GtkColorButton.button, .header-bar GtkColorButton.button.titlebutton,
     border-color: rgba(0, 0, 0, 0.5);
     icon-shadow: none;
     box-shadow: none; }
-  .osd .spinbutton .button:last-child {
+  .osd .spinbutton:not(.vertical) .button:last-child {
     border-radius: 0 3px 3px 0; }
-  .osd .spinbutton .button:dir(rtl):first-child {
+  .osd .spinbutton:not(.vertical) .button:dir(rtl):first-child {
     border-radius: 3px 0 0 3px; }
 .spinbutton.vertical .button {
   padding-top: 8px;
@@ -1366,6 +1366,16 @@ GtkColorButton.button, .header-bar GtkColorButton.button.titlebutton,
       text-shadow: none;
       icon-shadow: none;
       box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+      .spinbutton.vertical .button:first-child:backdrop:insensitive {
+        color: #5d6767;
+        border-color: #1f2222;
+        background-image: linear-gradient(to bottom, #333636);
+        text-shadow: none;
+        icon-shadow: none;
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+        .spinbutton.vertical .button:first-child:backdrop:insensitive > .label, .spinbutton.vertical .header-bar .button.titlebutton:first-child:backdrop:insensitive > .label,
+        .spinbutton.vertical .titlebar .button.titlebutton:first-child:backdrop:insensitive > .label {
+          color: inherit; }
 .spinbutton.vertical.entry {
   border-radius: 0;
   padding-left: 3px;
@@ -1376,6 +1386,49 @@ GtkColorButton.button, .header-bar GtkColorButton.button.titlebutton,
 .spinbutton.vertical .button:last-child {
   border-radius: 0 0 3px 3px;
   border-style: none solid solid solid; }
+.osd .spinbutton.vertical .button:first-child {
+  color: #eeeeec;
+  border-color: rgba(0, 0, 0, 0.7);
+  background-image: linear-gradient(to bottom, rgba(32, 37, 38, 0.7));
+  background-clip: padding-box;
+  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
+  text-shadow: 0 1px black;
+  icon-shadow: 0 1px black;
+  outline-color: rgba(238, 238, 236, 0.3); }
+  .osd .spinbutton.vertical .button:first-child:hover {
+    color: white;
+    border-color: rgba(0, 0, 0, 0.7);
+    background-image: linear-gradient(to bottom, rgba(60, 69, 71, 0.7));
+    background-clip: padding-box;
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
+    text-shadow: 0 1px black;
+    icon-shadow: 0 1px black;
+    outline-color: rgba(238, 238, 236, 0.3); }
+  .osd .spinbutton.vertical .button:first-child:active {
+    color: white;
+    border-color: rgba(0, 0, 0, 0.7);
+    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7));
+    background-clip: padding-box;
+    box-shadow: none;
+    text-shadow: none;
+    icon-shadow: none;
+    outline-color: rgba(238, 238, 236, 0.3); }
+  .osd .spinbutton.vertical .button:first-child:insensitive {
+    color: #878a89;
+    border-color: rgba(0, 0, 0, 0.7);
+    background-image: linear-gradient(to bottom, rgba(53, 57, 58, 0.5));
+    background-clip: padding-box;
+    box-shadow: none;
+    text-shadow: none;
+    icon-shadow: none; }
+  .osd .spinbutton.vertical .button:first-child:backdrop {
+    color: #eeeeec;
+    border-color: rgba(0, 0, 0, 0.7);
+    background-image: linear-gradient(to bottom, rgba(32, 37, 38, 0.7));
+    background-clip: padding-box;
+    box-shadow: none;
+    text-shadow: none;
+    icon-shadow: none; }
 GtkTreeView .spinbutton.entry, GtkTreeView .spinbutton.entry:focus {
   padding: 1px;
   border-width: 1px 0;
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index 628da3be14..e3684a6f3f 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -1269,7 +1269,7 @@ GtkColorButton.button, .header-bar GtkColorButton.button.titlebutton,
     border-style: none none none solid; }
     .spinbutton:not(.vertical) .button:backdrop:insensitive:dir(rtl) {
       border-style: none solid none none; }
-.osd .spinbutton .button {
+.osd .spinbutton:not(.vertical) .button {
   border-color: transparent;
   background-color: transparent;
   background-image: none;
@@ -1282,9 +1282,9 @@ GtkColorButton.button, .header-bar GtkColorButton.button.titlebutton,
   border-radius: 0;
   box-shadow: none;
   icon-shadow: 0 1px black; }
-  .osd .spinbutton .button:dir(rtl) {
+  .osd .spinbutton:not(.vertical) .button:dir(rtl) {
     border-style: none solid none none; }
-  .osd .spinbutton .button:hover {
+  .osd .spinbutton:not(.vertical) .button:hover {
     border-color: transparent;
     background-color: transparent;
     background-image: none;
@@ -1296,7 +1296,7 @@ GtkColorButton.button, .header-bar GtkColorButton.button.titlebutton,
     background-color: rgba(238, 238, 236, 0.1);
     icon-shadow: 0 1px black;
     box-shadow: none; }
-  .osd .spinbutton .button:backdrop {
+  .osd .spinbutton:not(.vertical) .button:backdrop {
     border-color: transparent;
     background-color: transparent;
     background-image: none;
@@ -1307,7 +1307,7 @@ GtkColorButton.button, .header-bar GtkColorButton.button.titlebutton,
     border-color: rgba(0, 0, 0, 0.5);
     icon-shadow: none;
     box-shadow: none; }
-  .osd .spinbutton .button:insensitive {
+  .osd .spinbutton:not(.vertical) .button:insensitive {
     border-color: transparent;
     background-color: transparent;
     background-image: none;
@@ -1318,9 +1318,9 @@ GtkColorButton.button, .header-bar GtkColorButton.button.titlebutton,
     border-color: rgba(0, 0, 0, 0.5);
     icon-shadow: none;
     box-shadow: none; }
-  .osd .spinbutton .button:last-child {
+  .osd .spinbutton:not(.vertical) .button:last-child {
     border-radius: 0 3px 3px 0; }
-  .osd .spinbutton .button:dir(rtl):first-child {
+  .osd .spinbutton:not(.vertical) .button:dir(rtl):first-child {
     border-radius: 3px 0 0 3px; }
 .spinbutton.vertical .button {
   padding-top: 8px;
@@ -1366,6 +1366,16 @@ GtkColorButton.button, .header-bar GtkColorButton.button.titlebutton,
       text-shadow: none;
       icon-shadow: none;
       box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+      .spinbutton.vertical .button:first-child:backdrop:insensitive {
+        color: #c7c7c7;
+        border-color: darkgray;
+        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:insensitive > .label, .spinbutton.vertical .header-bar .button.titlebutton:first-child:backdrop:insensitive > .label,
+        .spinbutton.vertical .titlebar .button.titlebutton:first-child:backdrop:insensitive > .label {
+          color: inherit; }
 .spinbutton.vertical.entry {
   border-radius: 0;
   padding-left: 3px;
@@ -1376,6 +1386,49 @@ GtkColorButton.button, .header-bar GtkColorButton.button.titlebutton,
 .spinbutton.vertical .button:last-child {
   border-radius: 0 0 3px 3px;
   border-style: none solid solid solid; }
+.osd .spinbutton.vertical .button:first-child {
+  color: #eeeeec;
+  border-color: rgba(0, 0, 0, 0.7);
+  background-image: linear-gradient(to bottom, rgba(32, 37, 38, 0.7));
+  background-clip: padding-box;
+  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
+  text-shadow: 0 1px black;
+  icon-shadow: 0 1px black;
+  outline-color: rgba(238, 238, 236, 0.3); }
+  .osd .spinbutton.vertical .button:first-child:hover {
+    color: white;
+    border-color: rgba(0, 0, 0, 0.7);
+    background-image: linear-gradient(to bottom, rgba(60, 69, 71, 0.7));
+    background-clip: padding-box;
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
+    text-shadow: 0 1px black;
+    icon-shadow: 0 1px black;
+    outline-color: rgba(238, 238, 236, 0.3); }
+  .osd .spinbutton.vertical .button:first-child:active {
+    color: white;
+    border-color: rgba(0, 0, 0, 0.7);
+    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7));
+    background-clip: padding-box;
+    box-shadow: none;
+    text-shadow: none;
+    icon-shadow: none;
+    outline-color: rgba(238, 238, 236, 0.3); }
+  .osd .spinbutton.vertical .button:first-child:insensitive {
+    color: #878a89;
+    border-color: rgba(0, 0, 0, 0.7);
+    background-image: linear-gradient(to bottom, rgba(53, 57, 58, 0.5));
+    background-clip: padding-box;
+    box-shadow: none;
+    text-shadow: none;
+    icon-shadow: none; }
+  .osd .spinbutton.vertical .button:first-child:backdrop {
+    color: #eeeeec;
+    border-color: rgba(0, 0, 0, 0.7);
+    background-image: linear-gradient(to bottom, rgba(32, 37, 38, 0.7));
+    background-clip: padding-box;
+    box-shadow: none;
+    text-shadow: none;
+    icon-shadow: none; }
 GtkTreeView .spinbutton.entry, GtkTreeView .spinbutton.entry:focus {
   padding: 1px;
   border-width: 1px 0;