[gnome-shell/wip/fmuellner/notification-redux+sass: 60/207] theme: on screen keyboard + bits

[Florian Müllner <fmuellner src gnome org>]

commit f4b21e075cfd2dc1f24412b66b27f7fadb41ec5a
Author: Jakub Steiner <jimmac gmail com>
Date:   Thu Jan 29 12:46:02 2015 +0100

    theme: on screen keyboard + bits

 data/theme/_common.scss                  |   56 ++++++++++++++-
 data/theme/_gnome-shell-old.scss         |   62 ---------------
 data/theme/gnome-shell-high-contrast.css |  119 ++++++++++++++++-------------
 data/theme/gnome-shell.css               |  119 ++++++++++++++++-------------
 4 files changed, 187 insertions(+), 169 deletions(-)
---
diff --git a/data/theme/_common.scss b/data/theme/_common.scss
index 34aa141..0f29cd9 100644
--- a/data/theme/_common.scss
+++ b/data/theme/_common.scss
@@ -1425,8 +1425,62 @@ StScrollBar {
     }
 
 /* Eeeky things */
-//Mess that is Looking Glass
 
+//magnifier
+
+.magnifier-zoom-region { 
+  border: 2px solid $selected_bg_color;
+  &.full-screen { border-width: 0; }
+}
+
+//Keyboard
+/* On-screen Keyboard */
+
+#keyboard {
+    background: transparentize($osd_bg_color, 0.3);
+}
+
+  .keyboard-layout {
+      spacing: 10px;
+      padding: 10px;
+  }
+
+  .keyboard-row {
+      spacing: 15px;
+  }
+
+  .keyboard-key {
+    @include button(normal);
+    min-height: 2em;
+    min-width: 2em;
+    font-size: 14pt;
+    font-weight: bold;
+    border-radius: 5px;
+    border: 1px solid $borders-color;
+    color: white;
+    &:focus { @include button(focus); }
+    &:hover,&:checked { @include button(hover); }
+    &:active { @include button(active);}
+    &:grayed {
+      background-color: green;
+      color: red;
+      border-color: blue;
+    }
+  }
+
+  .keyboard-subkeys {
+      color: white;
+      padding: 5px;
+      -arrow-border-radius: 10px;
+      -arrow-background-color: #090909;
+      -arrow-border-width: 2px;
+      -arrow-border-color: white;
+      -arrow-base: 20px;
+      -arrow-rise: 10px;
+      -boxpointer-gap: 5px;
+  }
+
+//Mess that is Looking Glass
 #LookingGlassDialog {
   background-color: rgba(0,0,0,0.80);
   spacing: 4px;
diff --git a/data/theme/_gnome-shell-old.scss b/data/theme/_gnome-shell-old.scss
index 217820a..9354796 100644
--- a/data/theme/_gnome-shell-old.scss
+++ b/data/theme/_gnome-shell-old.scss
@@ -18,70 +18,8 @@
  */
 
 
-/* Magnifier */
 
-.magnifier-zoom-region {
-    border: 2px solid rgba(128, 0, 0, 1);
-}
-
-.magnifier-zoom-region.full-screen {
-    border-width: 0px;
-}
-
-/* On-screen Keyboard */
-
-#keyboard {
-    background: rgba(0,0,0,0.8);
-}
 
-.keyboard-layout {
-    spacing: 10px;
-    padding: 10px;
-}
-
-.keyboard-row {
-    spacing: 15px;
-}
-
-.keyboard-key {
-    min-height: 30px;
-    min-width: 30px;
-    background-gradient-start: rgba(255,245,245,0.4);
-    background-gradient-end: rgba(105,105,105,0.1);
-    background-gradient-direction: vertical;
-    font-size: 14pt;
-    font-weight: bold;
-    border-radius: 10px;
-    border: 2px solid #a0a0a0;
-    color: white;
-}
-
-.keyboard-key:grayed {
-   color: #808080;
-   border-color: #808080;
-}
-
-.keyboard-key:checked,
-.keyboard-key:hover {
-    background: #303030;
-    border: 3px solid white;
-}
-
-.keyboard-key:active {
-    background: #808080;
-}
-
-.keyboard-subkeys {
-    color: white;
-    padding: 5px;
-    -arrow-border-radius: 10px;
-    -arrow-background-color: #090909;
-    -arrow-border-width: 2px;
-    -arrow-border-color: white;
-    -arrow-base: 20px;
-    -arrow-rise: 10px;
-    -boxpointer-gap: 5px;
-}
 
 /* IBus Candidate Popup */
 
diff --git a/data/theme/gnome-shell-high-contrast.css b/data/theme/gnome-shell-high-contrast.css
index bfd1a39..2383619 100644
--- a/data/theme/gnome-shell-high-contrast.css
+++ b/data/theme/gnome-shell-high-contrast.css
@@ -16,59 +16,6 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin St - Fifth Floor, Boston, MA 02110-1301 USA.
  */
-/* Magnifier */
-.magnifier-zoom-region {
-  border: 2px solid maroon; }
-
-.magnifier-zoom-region.full-screen {
-  border-width: 0px; }
-
-/* On-screen Keyboard */
-#keyboard {
-  background: rgba(0, 0, 0, 0.8); }
-
-.keyboard-layout {
-  spacing: 10px;
-  padding: 10px; }
-
-.keyboard-row {
-  spacing: 15px; }
-
-.keyboard-key {
-  min-height: 30px;
-  min-width: 30px;
-  background-gradient-start: rgba(255, 245, 245, 0.4);
-  background-gradient-end: rgba(105, 105, 105, 0.1);
-  background-gradient-direction: vertical;
-  font-size: 14pt;
-  font-weight: bold;
-  border-radius: 10px;
-  border: 2px solid #a0a0a0;
-  color: white; }
-
-.keyboard-key:grayed {
-  color: #808080;
-  border-color: #808080; }
-
-.keyboard-key:checked,
-.keyboard-key:hover {
-  background: #303030;
-  border: 3px solid white; }
-
-.keyboard-key:active {
-  background: #808080; }
-
-.keyboard-subkeys {
-  color: white;
-  padding: 5px;
-  -arrow-border-radius: 10px;
-  -arrow-background-color: #090909;
-  -arrow-border-width: 2px;
-  -arrow-border-color: white;
-  -arrow-base: 20px;
-  -arrow-rise: 10px;
-  -boxpointer-gap: 5px; }
-
 /* IBus Candidate Popup */
 .candidate-popup-content {
   padding: 0.5em;
@@ -1664,6 +1611,72 @@ StScrollBar {
   color: pink; }
 
 /* Eeeky things */
+.magnifier-zoom-region {
+  border: 2px solid #215d9c; }
+  .magnifier-zoom-region.full-screen {
+    border-width: 0; }
+
+/* On-screen Keyboard */
+#keyboard {
+  background: rgba(46, 52, 54, 0.7); }
+
+.keyboard-layout {
+  spacing: 10px;
+  padding: 10px; }
+
+.keyboard-row {
+  spacing: 15px; }
+
+.keyboard-key {
+  color: #eeeeec;
+  background-color: #2e3436;
+  border-color: rgba(0, 0, 0, 0.7);
+  box-shadow: inset 0 1px #454f52;
+  text-shadow: 0 1px black;
+  icon-shadow: 0 1px black;
+  min-height: 2em;
+  min-width: 2em;
+  font-size: 14pt;
+  font-weight: bold;
+  border-radius: 5px;
+  border: 1px solid black;
+  color: white; }
+  .keyboard-key:focus {
+    color: #eeeeec;
+    border-color: #215d9c;
+    box-shadow: inset 0 1px #454f52;
+    text-shadow: 0 1px black;
+    icon-shadow: 0 1px black; }
+  .keyboard-key:hover, .keyboard-key:checked {
+    color: white;
+    border-color: rgba(0, 0, 0, 0.7);
+    background-color: #454f52;
+    box-shadow: inset 0 1px #5d696d;
+    text-shadow: 0 1px black;
+    icon-shadow: 0 1px black; }
+  .keyboard-key:active {
+    color: white;
+    border-color: rgba(0, 0, 0, 0.7);
+    background-color: #222728;
+    box-shadow: none;
+    text-shadow: none;
+    icon-shadow: none; }
+  .keyboard-key:grayed {
+    background-color: green;
+    color: red;
+    border-color: blue; }
+
+.keyboard-subkeys {
+  color: white;
+  padding: 5px;
+  -arrow-border-radius: 10px;
+  -arrow-background-color: #090909;
+  -arrow-border-width: 2px;
+  -arrow-border-color: white;
+  -arrow-base: 20px;
+  -arrow-rise: 10px;
+  -boxpointer-gap: 5px; }
+
 #LookingGlassDialog {
   background-color: rgba(0, 0, 0, 0.8);
   spacing: 4px;
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 3186850..eafc444 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -16,59 +16,6 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin St - Fifth Floor, Boston, MA 02110-1301 USA.
  */
-/* Magnifier */
-.magnifier-zoom-region {
-  border: 2px solid maroon; }
-
-.magnifier-zoom-region.full-screen {
-  border-width: 0px; }
-
-/* On-screen Keyboard */
-#keyboard {
-  background: rgba(0, 0, 0, 0.8); }
-
-.keyboard-layout {
-  spacing: 10px;
-  padding: 10px; }
-
-.keyboard-row {
-  spacing: 15px; }
-
-.keyboard-key {
-  min-height: 30px;
-  min-width: 30px;
-  background-gradient-start: rgba(255, 245, 245, 0.4);
-  background-gradient-end: rgba(105, 105, 105, 0.1);
-  background-gradient-direction: vertical;
-  font-size: 14pt;
-  font-weight: bold;
-  border-radius: 10px;
-  border: 2px solid #a0a0a0;
-  color: white; }
-
-.keyboard-key:grayed {
-  color: #808080;
-  border-color: #808080; }
-
-.keyboard-key:checked,
-.keyboard-key:hover {
-  background: #303030;
-  border: 3px solid white; }
-
-.keyboard-key:active {
-  background: #808080; }
-
-.keyboard-subkeys {
-  color: white;
-  padding: 5px;
-  -arrow-border-radius: 10px;
-  -arrow-background-color: #090909;
-  -arrow-border-width: 2px;
-  -arrow-border-color: white;
-  -arrow-base: 20px;
-  -arrow-rise: 10px;
-  -boxpointer-gap: 5px; }
-
 /* IBus Candidate Popup */
 .candidate-popup-content {
   padding: 0.5em;
@@ -1664,6 +1611,72 @@ StScrollBar {
   color: pink; }
 
 /* Eeeky things */
+.magnifier-zoom-region {
+  border: 2px solid #215d9c; }
+  .magnifier-zoom-region.full-screen {
+    border-width: 0; }
+
+/* On-screen Keyboard */
+#keyboard {
+  background: rgba(46, 52, 54, 0.7); }
+
+.keyboard-layout {
+  spacing: 10px;
+  padding: 10px; }
+
+.keyboard-row {
+  spacing: 15px; }
+
+.keyboard-key {
+  color: #eeeeec;
+  background-color: #2e3436;
+  border-color: rgba(0, 0, 0, 0.7);
+  box-shadow: inset 0 1px #454f52;
+  text-shadow: 0 1px black;
+  icon-shadow: 0 1px black;
+  min-height: 2em;
+  min-width: 2em;
+  font-size: 14pt;
+  font-weight: bold;
+  border-radius: 5px;
+  border: 1px solid #1c1f1f;
+  color: white; }
+  .keyboard-key:focus {
+    color: #eeeeec;
+    border-color: #215d9c;
+    box-shadow: inset 0 1px #454f52;
+    text-shadow: 0 1px black;
+    icon-shadow: 0 1px black; }
+  .keyboard-key:hover, .keyboard-key:checked {
+    color: white;
+    border-color: rgba(0, 0, 0, 0.7);
+    background-color: #454f52;
+    box-shadow: inset 0 1px #5d696d;
+    text-shadow: 0 1px black;
+    icon-shadow: 0 1px black; }
+  .keyboard-key:active {
+    color: white;
+    border-color: rgba(0, 0, 0, 0.7);
+    background-color: #222728;
+    box-shadow: none;
+    text-shadow: none;
+    icon-shadow: none; }
+  .keyboard-key:grayed {
+    background-color: green;
+    color: red;
+    border-color: blue; }
+
+.keyboard-subkeys {
+  color: white;
+  padding: 5px;
+  -arrow-border-radius: 10px;
+  -arrow-background-color: #090909;
+  -arrow-border-width: 2px;
+  -arrow-border-color: white;
+  -arrow-base: 20px;
+  -arrow-rise: 10px;
+  -boxpointer-gap: 5px; }
+
 #LookingGlassDialog {
   background-color: rgba(0, 0, 0, 0.8);
   spacing: 4px;