[Gtk-3.20] Redecorate OSD: Implement spinbutton and entry. Fixes #457

gtk-3.20/scss/_global.scss

@@ -74,8 +74,12 @@ $panel_bg_color: $dark_bg_color;
 $panel_fg_color: $dark_fg_color;
 
 $osd_base: $dark_bg_color;
+$osd_text_color: $white;
 $osd_fg: $dark_fg_color;
 $osd_bg: alpha($osd_base, .8);
+$osd_insensitive_bg_color: mix($osd_fg, $osd_bg, .5);
+$osd_insensitive_fg_color: mix($osd_fg, $osd_base, .6);
+$osd_borders_color: shade($osd_bg, .85);
 
 $lightdm_bg_color: $dark_bg_color;
 $lightdm_fg_color: $dark_fg_color;

gtk-3.20/scss/widgets/_entry.scss

@@ -118,7 +118,7 @@
     selection { &:focus, & { @extend %selected_items; } }
 }
 
-@mixin entry($bg, $fg) {
+@mixin entry($bg, $fg, $border: $borders_color) {
     @extend %entry;
     @include linear-gradient($bg, to top);
     @include border($bg);
@@ -128,7 +128,7 @@
     color: $fg;
     caret-color: $fg;
 
-    &:focus, &:active { border-color: border_focus($borders_color); }
+    &:focus, &:active { border-color: border_focus($border); }
 
     &:disabled {
         @include linear-gradient(shade($bg, .9), to top);

gtk-3.20/scss/widgets/_osd.scss

@@ -9,6 +9,9 @@
     overlay.osd { background-color: transparent; }
 
     .osd {
+        background-color: $osd_bg;
+        color: $osd_fg;
+
         &.background {
             background-color: alpha($osd_bg, .8);
             color: $osd_fg;
@@ -19,7 +22,7 @@
             background-origin: border-box;
         }
 
-        button { @include button($osd_bg, $osd_fg); }
+        entry { @include entry($osd_base, $osd_text_color, $osd_borders_color); }
 
 
         toolbar {
@@ -104,5 +107,63 @@
             /* when there's no pixbuf yet */
             background-color: $osd_bg;
         }
+
+        spinbutton {
+            // OSD horizontal
+            &:not(.vertical) {
+                @include linear-gradient($osd_base, to top);
+                @include border($osd_base);
+
+                padding: 0;
+
+                color: $osd_text_color;
+                caret-color: $osd_text_color;
+
+                &:focus, &:active { border-color: border_focus($osd_borders_color); }
+
+                &:disabled {
+                    @include linear-gradient(shade($osd_base, .9), to top);
+
+                    color: mix($osd_base, $osd_text_color, .5);
+                }
+
+                button {
+                    @include button($osd_bg, $osd_fg);
+
+                    border-radius: 0;
+                    border-color: transparentize($osd_borders_color, .3);
+                    border-style: none none none solid;
+                    background-image: none;
+                    box-shadow: none;
+
+                    &:dir(rtl) { border-style: none solid none none; }
+
+                    &:active, &:checked, &:hover { color: $osd_text_color; }
+
+                    &:disabled { color: alpha($osd_insensitive_fg_color, .8); }
+
+                    &:backdrop { color: mix($backdrop_base_color, $backdrop_fg_color, .9); }
+
+                    &:active { box-shadow: inset 0 2px 3px -1px transparentize($black, .8); }
+
+                    &:backdrop:disabled {
+                        color: alpha($backdrop_insensitive_color, .8);
+
+                        border-style: none none none solid; // It is needed or it gets overridden
+
+                        &:dir(rtl) { border-style: none solid none none; }
+                    }
+
+                    &:dir(rtl):first-child { border-radius: $roundness 0 0 $roundness; }
+
+                    &:dir(ltr):last-child { border-radius: 0 $roundness $roundness 0; }
+                }
+            }
+
+            // OSD vertical
+            &.vertical button:first-child {
+                @include button($osd_bg, $osd_fg);
+            }
+        }
     }
 }