[gtk+] High Contrast: keycap styling

[Lapo Calamandrei <lapo src gnome org>]

commit 6ccaa8e3ca49e63ce373e53952989527bba43ac8
Author: Lapo Calamandrei <calamandrei gmail com>
Date:   Wed Mar 16 13:34:00 2016 +0100

    High Contrast: keycap styling
    
    sync with Adwaita with some styling tweaks.

 gtk/theme/HighContrast/_common.scss              |   24 +++++++++++++++------
 gtk/theme/HighContrast/gtk-contained-inverse.css |   19 +++++++++++-----
 gtk/theme/HighContrast/gtk-contained.css         |   19 +++++++++++-----
 3 files changed, 43 insertions(+), 19 deletions(-)
---
diff --git a/gtk/theme/HighContrast/_common.scss b/gtk/theme/HighContrast/_common.scss
index ade3a59..86f0473 100644
--- a/gtk/theme/HighContrast/_common.scss
+++ b/gtk/theme/HighContrast/_common.scss
@@ -2984,14 +2984,24 @@ button.circular label {
   padding: 0;
 }
 
-frame.keycap {
-  background-color: #fefefe;
-  border: 1px solid #cecece;
+// shortcut window keys
+.keycap {
+  min-width: 18px;
+  min-height: 25px;
+  margin-top: 3px;
+  padding-bottom: 2px;
+  padding-left: 6px;
+  padding-right: 6px;
+
+  color: $fg_color;
+  background-color: $base_color;
+  border: 2px solid;
+  border-color: $borders_color;
   border-radius: 5px;
-  box-shadow: 0px 1px 0px #fff inset,
-              0px -2px 0px #dedede inset;
-  color: #555753;
-  padding: 3px 8px 3px 8px;
+  box-shadow: inset 0 -3px mix($borders_color, $bg_color, 50%),
+              inset 0 -2px $bg_color,
+              inset 0 0 0 1px $base_color;
+  font-size: smaller;
 }
 
 *:drop(active):focus,
diff --git a/gtk/theme/HighContrast/gtk-contained-inverse.css 
b/gtk/theme/HighContrast/gtk-contained-inverse.css
index 8de8d38..60c4f9f 100644
--- a/gtk/theme/HighContrast/gtk-contained-inverse.css
+++ b/gtk/theme/HighContrast/gtk-contained-inverse.css
@@ -3332,13 +3332,20 @@ button.circular {
 button.circular label {
   padding: 0; }
 
-frame.keycap {
-  background-color: #fefefe;
-  border: 1px solid #cecece;
+.keycap {
+  min-width: 18px;
+  min-height: 25px;
+  margin-top: 3px;
+  padding-bottom: 2px;
+  padding-left: 6px;
+  padding-right: 6px;
+  color: #fff;
+  background-color: #111;
+  border: 2px solid;
+  border-color: gray;
   border-radius: 5px;
-  box-shadow: 0px 1px 0px #fff inset, 0px -2px 0px #dedede inset;
-  color: #555753;
-  padding: 3px 8px 3px 8px; }
+  box-shadow: inset 0 -3px #404040, inset 0 -2px #000, inset 0 0 0 1px #111;
+  font-size: smaller; }
 
 *:drop(active):focus,
 *:drop(active) {
diff --git a/gtk/theme/HighContrast/gtk-contained.css b/gtk/theme/HighContrast/gtk-contained.css
index 0174b66..21ecff9 100644
--- a/gtk/theme/HighContrast/gtk-contained.css
+++ b/gtk/theme/HighContrast/gtk-contained.css
@@ -3339,13 +3339,20 @@ button.circular {
 button.circular label {
   padding: 0; }
 
-frame.keycap {
-  background-color: #fefefe;
-  border: 1px solid #cecece;
+.keycap {
+  min-width: 18px;
+  min-height: 25px;
+  margin-top: 3px;
+  padding-bottom: 2px;
+  padding-left: 6px;
+  padding-right: 6px;
+  color: #000;
+  background-color: #fff;
+  border: 2px solid;
+  border-color: gray;
   border-radius: 5px;
-  box-shadow: 0px 1px 0px #fff inset, 0px -2px 0px #dedede inset;
-  color: #555753;
-  padding: 3px 8px 3px 8px; }
+  box-shadow: inset 0 -3px silver, inset 0 -2px #fff, inset 0 0 0 1px #fff;
+  font-size: smaller; }
 
 *:drop(active):focus,
 *:drop(active) {