From c94afa01c4bdc175d715c3e8573b02d8cb33325a Mon Sep 17 00:00:00 2001
From: Jakub Steiner <jimmac@gmail.com>
Date: Fri, 18 Mar 2016 15:22:16 +0100
Subject: [PATCH] High Contrast: osd spinbuttons

https://bugzilla.gnome.org/show_bug.cgi?id=763846
---
 gtk/theme/HighContrast/_common.scss           |  45 ++++----
 .../HighContrast/gtk-contained-inverse.css    | 101 +++++++++---------
 gtk/theme/HighContrast/gtk-contained.css      | 101 +++++++++---------
 3 files changed, 125 insertions(+), 122 deletions(-)

diff --git a/gtk/theme/HighContrast/_common.scss b/gtk/theme/HighContrast/_common.scss
index 42d8cc13be..928f6c7823 100644
--- a/gtk/theme/HighContrast/_common.scss
+++ b/gtk/theme/HighContrast/_common.scss
@@ -148,8 +148,8 @@ label {
   background-color: $osd_bg_color;
   background-clip: padding-box;
   outline-color: transparentize($osd_fg_color, 0.7);
-  text-shadow: 0 1px black;
-  -gtk-icon-shadow: 0 1px black;
+  //text-shadow: 0 1px black;
+  //-gtk-icon-shadow: 0 1px black;
 
   &:backdrop {
     text-shadow: none;
@@ -902,9 +902,10 @@ spinbutton {
     @extend %entry;
     border-width: 2px;
     border-color: $borders_color;
-  
+    box-shadow: none;
     padding: 0;
-      
+    
+ 
     entry {
       min-width: 28px;
       margin: 0;
@@ -922,7 +923,6 @@ spinbutton {
       background-image: none;
       border-style: none none none solid;
       border-radius: 0;
-      box-shadow: none;
 
       &:dir(rtl) { border-style: none solid none none; }
 
@@ -935,7 +935,6 @@ spinbutton {
 
       &:active {
         background-color: transparentize(black, 0.9);
-        box-shadow: inset 0 2px 3px -1px transparentize(black, 0.8);
       }
 
       &:backdrop {
@@ -956,25 +955,37 @@ spinbutton {
 
   // OSD horizontal
   .osd &:not(.vertical) {
+    border-color: $osd_borders_color;
+    color: $fg_color;
+    
+    &:focus, &:active {
+      border-color: opacify($osd_borders_color,0.5);
+      box-shadow: inset 0 2px 3px -1px transparentize(black, 0.8);
+    }
+    
+    entry {
+      box-shadow: inset 0 2px 3px -1px transparentize(black, 0.8);
+      color: $fg_color;
+      text-shadow: none;
+    }
+    
     button {
       @include button(undecorated);
 
-      color: $osd_fg_color;
+      color: $fg_color;
       border-style: none none none solid;
-      border-color: transparentize($osd_borders_color, 0.3);
+      border-color: transparentize($borders_color,0.8);
       border-radius: 0;
       box-shadow: none;
-      -gtk-icon-shadow: 0 1px black;
 
       &:dir(rtl) { border-style: none solid none none; }
 
       &:hover {
         @include button(undecorated);
-
-        color: $osd_fg_color;
-        border-color: transparentize(opacify($osd_borders_color, 1), 0.5);
+        
+        border-style: none none none solid;
+        border-color: transparentize($borders_color,0.8);
         background-color: transparentize($osd_fg_color, 0.9);
-        -gtk-icon-shadow: 0 1px black;
         box-shadow: none;
       }
 
@@ -982,17 +993,15 @@ spinbutton {
         @include button(undecorated);
 
         color: $osd_fg_color;
-        border-color: transparentize(opacify($osd_borders_color, 1), 0.5);
-        -gtk-icon-shadow: none;
+        border-color: transparentize($borders_color,0.9);
         box-shadow: none;
       }
 
       &:disabled {
-        @include button(undecorated);
+        //@include button(undecorated);
 
         color: $insensitive_fg_color;
-        border-color: transparentize(opacify($borders_color, 1), 0.5);
-        -gtk-icon-shadow: none;
+        border-color: transparentize($borders_color,0.9);
         box-shadow: none;
       }
 
diff --git a/gtk/theme/HighContrast/gtk-contained-inverse.css b/gtk/theme/HighContrast/gtk-contained-inverse.css
index 55468c3478..9a553774d1 100644
--- a/gtk/theme/HighContrast/gtk-contained-inverse.css
+++ b/gtk/theme/HighContrast/gtk-contained-inverse.css
@@ -113,9 +113,7 @@ popover.background.touch-selection, popover.background.magnifier, .csd popover.b
   border: none;
   background-color: rgba(0, 0, 0, 0.8);
   background-clip: padding-box;
-  outline-color: rgba(255, 255, 255, 0.3);
-  text-shadow: 0 1px black;
-  -gtk-icon-shadow: 0 1px black; }
+  outline-color: rgba(255, 255, 255, 0.3); }
   popover.background.touch-selection:backdrop, popover.background.magnifier:backdrop, popover.background.osd:backdrop, .osd:backdrop {
     text-shadow: none;
     -gtk-icon-shadow: none; }
@@ -1068,6 +1066,7 @@ button:link, button:visited {
 spinbutton:not(.vertical) {
   border-width: 2px;
   border-color: gray;
+  box-shadow: none;
   padding: 0; }
   spinbutton:not(.vertical) entry {
     min-width: 28px;
@@ -1083,8 +1082,7 @@ spinbutton:not(.vertical) {
     color: #e7e7e7;
     background-image: none;
     border-style: none none none solid;
-    border-radius: 0;
-    box-shadow: none; }
+    border-radius: 0; }
     spinbutton:not(.vertical) button:dir(rtl) {
       border-style: none solid none none; }
     spinbutton:not(.vertical) button:hover {
@@ -1093,8 +1091,7 @@ spinbutton:not(.vertical) {
     spinbutton:not(.vertical) button:disabled {
       color: rgba(128, 128, 128, 0.3); }
     spinbutton:not(.vertical) button:active {
-      background-color: rgba(0, 0, 0, 0.1);
-      box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.2); }
+      background-color: rgba(0, 0, 0, 0.1); }
     spinbutton:not(.vertical) button:backdrop {
       color: #fff;
       background-color: transparent;
@@ -1105,22 +1102,17 @@ spinbutton:not(.vertical) {
       border-style: none none none solid; }
       spinbutton:not(.vertical) button:backdrop:disabled:dir(rtl) {
         border-style: none solid none none; }
-.osd spinbutton:not(.vertical) button {
-  border-width: 2px;
-  border-style: solid;
-  color: #fff;
-  background-color: transparent;
-  background-image: none;
-  border-color: transparent;
-  color: #fff;
-  border-style: none none none solid;
-  border-color: rgba(255, 255, 255, 0);
-  border-radius: 0;
-  box-shadow: none;
-  -gtk-icon-shadow: 0 1px black; }
-  .osd spinbutton:not(.vertical) button:dir(rtl) {
-    border-style: none solid none none; }
-  .osd spinbutton:not(.vertical) button:hover {
+.osd spinbutton:not(.vertical) {
+  border-color: rgba(255, 255, 255, 0.2);
+  color: #fff; }
+  .osd spinbutton:not(.vertical):focus, .osd spinbutton:not(.vertical):active {
+    border-color: rgba(255, 255, 255, 0.7);
+    box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.2); }
+  .osd spinbutton:not(.vertical) entry {
+    box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.2);
+    color: #fff;
+    text-shadow: none; }
+  .osd spinbutton:not(.vertical) button {
     border-width: 2px;
     border-style: solid;
     color: #fff;
@@ -1128,36 +1120,41 @@ spinbutton:not(.vertical) {
     background-image: none;
     border-color: transparent;
     color: #fff;
-    border-color: rgba(255, 255, 255, 0.5);
-    background-color: rgba(255, 255, 255, 0.1);
-    -gtk-icon-shadow: 0 1px black;
+    border-style: none none none solid;
+    border-color: rgba(128, 128, 128, 0.2);
+    border-radius: 0;
     box-shadow: none; }
-  .osd spinbutton:not(.vertical) button:backdrop {
-    border-width: 2px;
-    border-style: solid;
-    color: #fff;
-    background-color: transparent;
-    background-image: none;
-    border-color: transparent;
-    color: #fff;
-    border-color: rgba(255, 255, 255, 0.5);
-    -gtk-icon-shadow: none;
-    box-shadow: none; }
-  .osd spinbutton:not(.vertical) button:disabled {
-    border-width: 2px;
-    border-style: solid;
-    color: #fff;
-    background-color: transparent;
-    background-image: none;
-    border-color: transparent;
-    color: gray;
-    border-color: rgba(128, 128, 128, 0.5);
-    -gtk-icon-shadow: none;
-    box-shadow: none; }
-  .osd spinbutton:not(.vertical) button:last-child {
-    border-radius: 0 3px 3px 0; }
-  .osd spinbutton:not(.vertical) button:dir(rtl):first-child {
-    border-radius: 3px 0 0 3px; }
+    .osd spinbutton:not(.vertical) button:dir(rtl) {
+      border-style: none solid none none; }
+    .osd spinbutton:not(.vertical) button:hover {
+      border-width: 2px;
+      border-style: solid;
+      color: #fff;
+      background-color: transparent;
+      background-image: none;
+      border-color: transparent;
+      border-style: none none none solid;
+      border-color: rgba(128, 128, 128, 0.2);
+      background-color: rgba(255, 255, 255, 0.1);
+      box-shadow: none; }
+    .osd spinbutton:not(.vertical) button:backdrop {
+      border-width: 2px;
+      border-style: solid;
+      color: #fff;
+      background-color: transparent;
+      background-image: none;
+      border-color: transparent;
+      color: #fff;
+      border-color: rgba(128, 128, 128, 0.1);
+      box-shadow: none; }
+    .osd spinbutton:not(.vertical) button:disabled {
+      color: gray;
+      border-color: rgba(128, 128, 128, 0.1);
+      box-shadow: none; }
+    .osd spinbutton:not(.vertical) button:last-child {
+      border-radius: 0 3px 3px 0; }
+    .osd spinbutton:not(.vertical) button:dir(rtl):first-child {
+      border-radius: 3px 0 0 3px; }
 spinbutton.vertical {
   border-width: 2px;
   border-color: gray; }
diff --git a/gtk/theme/HighContrast/gtk-contained.css b/gtk/theme/HighContrast/gtk-contained.css
index b7b69bf0b9..29363db2ff 100644
--- a/gtk/theme/HighContrast/gtk-contained.css
+++ b/gtk/theme/HighContrast/gtk-contained.css
@@ -113,9 +113,7 @@ popover.background.touch-selection, popover.background.magnifier, .csd popover.b
   border: none;
   background-color: rgba(0, 0, 0, 0.8);
   background-clip: padding-box;
-  outline-color: rgba(255, 255, 255, 0.3);
-  text-shadow: 0 1px black;
-  -gtk-icon-shadow: 0 1px black; }
+  outline-color: rgba(255, 255, 255, 0.3); }
   popover.background.touch-selection:backdrop, popover.background.magnifier:backdrop, popover.background.osd:backdrop, .osd:backdrop {
     text-shadow: none;
     -gtk-icon-shadow: none; }
@@ -1072,6 +1070,7 @@ button:link, button:visited {
 spinbutton:not(.vertical) {
   border-width: 2px;
   border-color: gray;
+  box-shadow: none;
   padding: 0; }
   spinbutton:not(.vertical) entry {
     min-width: 28px;
@@ -1087,8 +1086,7 @@ spinbutton:not(.vertical) {
     color: #1a1a1a;
     background-image: none;
     border-style: none none none solid;
-    border-radius: 0;
-    box-shadow: none; }
+    border-radius: 0; }
     spinbutton:not(.vertical) button:dir(rtl) {
       border-style: none solid none none; }
     spinbutton:not(.vertical) button:hover {
@@ -1097,8 +1095,7 @@ spinbutton:not(.vertical) {
     spinbutton:not(.vertical) button:disabled {
       color: rgba(128, 128, 128, 0.3); }
     spinbutton:not(.vertical) button:active {
-      background-color: rgba(0, 0, 0, 0.1);
-      box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.2); }
+      background-color: rgba(0, 0, 0, 0.1); }
     spinbutton:not(.vertical) button:backdrop {
       color: #000;
       background-color: transparent;
@@ -1109,59 +1106,59 @@ spinbutton:not(.vertical) {
       border-style: none none none solid; }
       spinbutton:not(.vertical) button:backdrop:disabled:dir(rtl) {
         border-style: none solid none none; }
-.osd spinbutton:not(.vertical) button {
-  border-width: 2px;
-  border-style: solid;
-  color: #000;
-  background-color: transparent;
-  background-image: none;
-  border-color: transparent;
-  color: #fff;
-  border-style: none none none solid;
-  border-color: rgba(255, 255, 255, 0);
-  border-radius: 0;
-  box-shadow: none;
-  -gtk-icon-shadow: 0 1px black; }
-  .osd spinbutton:not(.vertical) button:dir(rtl) {
-    border-style: none solid none none; }
-  .osd spinbutton:not(.vertical) button:hover {
+.osd spinbutton:not(.vertical) {
+  border-color: rgba(255, 255, 255, 0.2);
+  color: #000; }
+  .osd spinbutton:not(.vertical):focus, .osd spinbutton:not(.vertical):active {
+    border-color: rgba(255, 255, 255, 0.7);
+    box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.2); }
+  .osd spinbutton:not(.vertical) entry {
+    box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.2);
+    color: #000;
+    text-shadow: none; }
+  .osd spinbutton:not(.vertical) button {
     border-width: 2px;
     border-style: solid;
     color: #000;
     background-color: transparent;
     background-image: none;
     border-color: transparent;
-    color: #fff;
-    border-color: rgba(255, 255, 255, 0.5);
-    background-color: rgba(255, 255, 255, 0.1);
-    -gtk-icon-shadow: 0 1px black;
-    box-shadow: none; }
-  .osd spinbutton:not(.vertical) button:backdrop {
-    border-width: 2px;
-    border-style: solid;
     color: #000;
-    background-color: transparent;
-    background-image: none;
-    border-color: transparent;
-    color: #fff;
-    border-color: rgba(255, 255, 255, 0.5);
-    -gtk-icon-shadow: none;
+    border-style: none none none solid;
+    border-color: rgba(128, 128, 128, 0.2);
+    border-radius: 0;
     box-shadow: none; }
-  .osd spinbutton:not(.vertical) button:disabled {
-    border-width: 2px;
-    border-style: solid;
-    color: #000;
-    background-color: transparent;
-    background-image: none;
-    border-color: transparent;
-    color: gray;
-    border-color: rgba(128, 128, 128, 0.5);
-    -gtk-icon-shadow: none;
-    box-shadow: none; }
-  .osd spinbutton:not(.vertical) button:last-child {
-    border-radius: 0 3px 3px 0; }
-  .osd spinbutton:not(.vertical) button:dir(rtl):first-child {
-    border-radius: 3px 0 0 3px; }
+    .osd spinbutton:not(.vertical) button:dir(rtl) {
+      border-style: none solid none none; }
+    .osd spinbutton:not(.vertical) button:hover {
+      border-width: 2px;
+      border-style: solid;
+      color: #000;
+      background-color: transparent;
+      background-image: none;
+      border-color: transparent;
+      border-style: none none none solid;
+      border-color: rgba(128, 128, 128, 0.2);
+      background-color: rgba(255, 255, 255, 0.1);
+      box-shadow: none; }
+    .osd spinbutton:not(.vertical) button:backdrop {
+      border-width: 2px;
+      border-style: solid;
+      color: #000;
+      background-color: transparent;
+      background-image: none;
+      border-color: transparent;
+      color: #fff;
+      border-color: rgba(128, 128, 128, 0.1);
+      box-shadow: none; }
+    .osd spinbutton:not(.vertical) button:disabled {
+      color: gray;
+      border-color: rgba(128, 128, 128, 0.1);
+      box-shadow: none; }
+    .osd spinbutton:not(.vertical) button:last-child {
+      border-radius: 0 3px 3px 0; }
+    .osd spinbutton:not(.vertical) button:dir(rtl):first-child {
+      border-radius: 3px 0 0 3px; }
 spinbutton.vertical {
   border-width: 2px;
   border-color: gray; }