Highlight the modifier keys when they're toggled.

[guacamole.git] / src / main / webapp / styles / keyboard.css

diff --git a/src/main/webapp/styles/keyboard.css b/src/main/webapp/styles/keyboard.css
index e5b3c49..551acba 100644 (file)
--- a/src/main/webapp/styles/keyboard.css
+++ b/src/main/webapp/styles/keyboard.css
@@ -25,7 +25,7 @@
     bottom: 0;
     width: 100%;
     margin: 0;
-    padding: 0.5em;
+    padding: 0;
 
     border-top: 1px solid black;
     background: #222;
@@ -35,9 +35,10 @@
     z-index: 1;
 }
 
-.guacamole-keyboard {
+.guac-keyboard {
     display: inline-block;
     width: 100%;
+    
     margin: 0;
     padding: 0;
     cursor: default;
@@ -46,50 +47,105 @@
     vertical-align: middle;
 }
 
-.guacamole-keyboard .guacamole-keyboard-key {
+.guac-keyboard .guac-keyboard-key-container {
     display: inline-block;
 }
 
-.guacamole-keyboard .guacamole-keyboard-cap {
-
+.guac-keyboard .guac-keyboard-key {
     background: #444;
-    border: 1px solid #888;
-    -moz-border-radius: 0.25em;
-    -webkit-border-radius: 0.25em;
-    -khtml-border-radius: 0.25em;
-    border-radius: 0.25em;
+    border: 1px outset #888;
+    -moz-border-radius: 0.1em;
+    -webkit-border-radius: 0.1em;
+    -khtml-border-radius: 0.1em;
+    border-radius: 0.1em;
+}
 
+.guac-keyboard .guac-keyboard-cap {
     color: white;
     font-family: sans-serif;
     font-size: 50%;
-    text-shadow: 0 0.1em 0.1em black;
+    font-weight: lighter;
     text-align: center;
     white-space: pre;
+}
 
+.guac-keyboard .guac-keyboard-key:hover {
+    cursor: pointer;
 }
 
-.guacamole-keyboard .guacamole-keyboard-key:hover .guacamole-keyboard-cap {
+.guac-keyboard .guac-keyboard-key.highlight {
     background: #666;
     border-color: #666;
-    cursor: pointer;
 }
 
-.guacamole-keyboard .guacamole-keyboard-key.pressed:hover .guacamole-keyboard-cap {
-    background: #822;
-    border-color: #D44;
+.guac-keyboard.guac-keyboard-modifier-shift .guac-keyboard-key.shift,
+.guac-keyboard.guac-keyboard-modifier-numsym .guac-keyboard-key.numsym {
+    background: #882;
+    border-color: #DD4;
+}
+
+.guac-keyboard.guac-keyboard-modifier-control .guac-keyboard-key.control,
+.guac-keyboard.guac-keyboard-modifier-numsym .guac-keyboard-key.numsym {
+    background: #882;
+    border-color: #DD4;
 }
 
-.guacamole-keyboard .guacamole-keyboard-key.active:hover .guacamole-keyboard-cap {
+.guac-keyboard.guac-keyboard-modifier-alt .guac-keyboard-key.alt,
+.guac-keyboard.guac-keyboard-modifier-numsym .guac-keyboard-key.numsym {
     background: #882;
     border-color: #DD4;
 }
 
-.guacamole-keyboard .guacamole-keyboard-column {
+.guac-keyboard.guac-keyboard-modifier-super .guac-keyboard-key.super,
+.guac-keyboard.guac-keyboard-modifier-numsym .guac-keyboard-key.numsym {
+    background: #882;
+    border-color: #DD4;
+}
+
+.guac-keyboard .guac-keyboard-key.guac-keyboard-pressed {
+    background: #822;
+    border-color: #D44;
+    border-style: inset;
+}
+
+.guac-keyboard .guac-keyboard-row {
+    line-height: 0;
+}
+
+.guac-keyboard .guac-keyboard-column {
     display: inline-block;
     text-align: center;
+    vertical-align: top;
 }
 
-.guacamole-keyboard .guacamole-keyboard-gap {
+.guac-keyboard .guac-keyboard-gap {
     display: inline-block;
 }
- 
\ No newline at end of file
+
+/* Hide keycaps requiring modifiers which are NOT currently active. */
+.guac-keyboard:not(.guac-keyboard-modifier-caps)
+.guac-keyboard-cap.guac-keyboard-requires-caps,
+
+.guac-keyboard:not(.guac-keyboard-modifier-numsym)
+.guac-keyboard-cap.guac-keyboard-requires-numsym,
+
+.guac-keyboard:not(.guac-keyboard-modifier-shift)
+.guac-keyboard-cap.guac-keyboard-requires-shift,
+
+/* Hide keycaps NOT requiring modifiers which ARE currently active, where that
+   modifier is used to determine which cap is displayed for the current key. */
+.guac-keyboard.guac-keyboard-modifier-shift
+.guac-keyboard-key.guac-keyboard-uses-shift
+.guac-keyboard-cap:not(.guac-keyboard-requires-shift),
+
+.guac-keyboard.guac-keyboard-modifier-numsym
+.guac-keyboard-key.guac-keyboard-uses-numsym
+.guac-keyboard-cap:not(.guac-keyboard-requires-numsym),
+
+.guac-keyboard.guac-keyboard-modifier-caps
+.guac-keyboard-key.guac-keyboard-uses-caps
+.guac-keyboard-cap:not(.guac-keyboard-requires-caps) {
+
+    display: none;
+    
+}