From 5e9efc1c8b1ebb5056af03509b655f428ab01e1b Mon Sep 17 00:00:00 2001 From: Michael Jumper Date: Thu, 30 Apr 2015 00:21:38 -0700 Subject: [PATCH 1/3] GUAC-1170: Adopt cleaner OSK style. --- .../src/main/webapp/app/osk/styles/osk.css | 52 ++++++++++++++----- 1 file changed, 38 insertions(+), 14 deletions(-) diff --git a/guacamole/src/main/webapp/app/osk/styles/osk.css b/guacamole/src/main/webapp/app/osk/styles/osk.css index f61ac6f9d..53ebc2287 100644 --- a/guacamole/src/main/webapp/app/osk/styles/osk.css +++ b/guacamole/src/main/webapp/app/osk/styles/osk.css @@ -45,23 +45,36 @@ .guac-keyboard .guac-keyboard-key-container { display: inline-block; margin: 0.05em; + position: relative; } .guac-keyboard .guac-keyboard-key { - background: #444; - 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 { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + + background: #444; + + border: 2px solid #666; + -moz-border-radius: 0.25em; + -webkit-border-radius: 0.25em; + -khtml-border-radius: 0.25em; + border-radius: 0.25em; + color: white; - font-size: 50%; + font-size: 40%; font-weight: lighter; text-align: center; white-space: pre; + + text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25), + 1px -1px 0 rgba(0, 0, 0, 0.25), + -1px 1px 0 rgba(0, 0, 0, 0.25), + -1px -1px 0 rgba(0, 0, 0, 0.25); + } .guac-keyboard .guac-keyboard-key:hover { @@ -73,6 +86,20 @@ border-color: #666; } +/* Align some keys to the left */ +.guac-keyboard .guac-keyboard-key-caps, +.guac-keyboard .guac-keyboard-key-enter, +.guac-keyboard .guac-keyboard-key-tab, +.guac-keyboard .guac-keyboard-key-lalt, +.guac-keyboard .guac-keyboard-key-ralt, +.guac-keyboard .guac-keyboard-key-lctrl, +.guac-keyboard .guac-keyboard-key-rctrl, +.guac-keyboard .guac-keyboard-key-lshift, +.guac-keyboard .guac-keyboard-key-rshift { + text-align: left; + padding-left: 0.75em; +} + /* Active shift */ .guac-keyboard.guac-keyboard-modifier-shift .guac-keyboard-key-rshift, .guac-keyboard.guac-keyboard-modifier-shift .guac-keyboard-key-lshift, @@ -86,11 +113,9 @@ .guac-keyboard.guac-keyboard-modifier-alt .guac-keyboard-key-lalt, /* Active caps */ -.guac-keyboard.guac-keyboard-modifier-caps .guac-keyboard-key-caps { - background: #882; - border-color: #DD4; -} +.guac-keyboard.guac-keyboard-modifier-caps .guac-keyboard-key-caps, +/* Active super */ .guac-keyboard.guac-keyboard-modifier-super .guac-keyboard-key-super, .guac-keyboard.guac-keyboard-modifier-super .guac-keyboard-key-menu { background: #882; @@ -100,7 +125,6 @@ .guac-keyboard .guac-keyboard-key.guac-keyboard-pressed { background: #822; border-color: #D44; - border-style: inset; } .guac-keyboard .guac-keyboard-group { From 53f85222013aebd54a6fcc2460874eb6570de4fb Mon Sep 17 00:00:00 2001 From: Michael Jumper Date: Thu, 30 Apr 2015 00:22:06 -0700 Subject: [PATCH 2/3] GUAC-1170: Use OSK style for text input. --- .../webapp/app/textInput/styles/textInput.css | 43 +++++++++++++------ 1 file changed, 31 insertions(+), 12 deletions(-) diff --git a/guacamole/src/main/webapp/app/textInput/styles/textInput.css b/guacamole/src/main/webapp/app/textInput/styles/textInput.css index e3d6ef774..c2a0a4c54 100644 --- a/guacamole/src/main/webapp/app/textInput/styles/textInput.css +++ b/guacamole/src/main/webapp/app/textInput/styles/textInput.css @@ -22,8 +22,8 @@ .text-input { width: 100%; - border-top: 1px solid rgba(0, 0, 0, 0.5); - background: #CDA; + background: #222; + color: white; } .text-input .text-input-field, @@ -50,6 +50,7 @@ display: inline-block; vertical-align: middle; + color: white; font-size: 12pt; width: 100%; height: auto; @@ -59,7 +60,7 @@ margin: 0; padding: 0.25em; padding-left: 0; - background: #CDA; + background: transparent; overflow: hidden; } @@ -87,20 +88,38 @@ } .text-input .text-input-buttons button { - border: 1px solid rgba(0, 0, 0, 0.5); - background: none; - color: black; + box-shadow: none; - text-shadow: none; padding: 0.25em; max-width: 20%; margin: 0.1em; min-width: 3em; + + background: #444; + + border: 2px solid #666; + -moz-border-radius: 0.25em; + -webkit-border-radius: 0.25em; + -khtml-border-radius: 0.25em; + border-radius: 0.25em; + + color: white; + font-weight: lighter; + text-align: center; + + text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25), + 1px -1px 0 rgba(0, 0, 0, 0.25), + -1px 1px 0 rgba(0, 0, 0, 0.25), + -1px -1px 0 rgba(0, 0, 0, 0.25); + } -.text-input .text-input-buttons button:active, -.text-input .text-input-buttons button.pressed { - border: 1px solid rgba(255, 255, 255, 0.5); - background: rgba(0, 0, 0, 0.75); - color: white; +.text-input .text-input-buttons button:active { + background: #822; + border-color: #D44; +} + +.text-input .text-input-buttons button.pressed { + background: #882; + border-color: #DD4; } From 442518b01bdcadd608933ce31d3ee1471c0cfc11 Mon Sep 17 00:00:00 2001 From: Michael Jumper Date: Thu, 30 Apr 2015 00:26:58 -0700 Subject: [PATCH 3/3] GUAC-1170: Scale border size relative to font. --- guacamole/src/main/webapp/app/osk/styles/osk.css | 2 +- guacamole/src/main/webapp/app/textInput/styles/textInput.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/guacamole/src/main/webapp/app/osk/styles/osk.css b/guacamole/src/main/webapp/app/osk/styles/osk.css index 53ebc2287..afc43b237 100644 --- a/guacamole/src/main/webapp/app/osk/styles/osk.css +++ b/guacamole/src/main/webapp/app/osk/styles/osk.css @@ -58,7 +58,7 @@ background: #444; - border: 2px solid #666; + border: 0.125em solid #666; -moz-border-radius: 0.25em; -webkit-border-radius: 0.25em; -khtml-border-radius: 0.25em; diff --git a/guacamole/src/main/webapp/app/textInput/styles/textInput.css b/guacamole/src/main/webapp/app/textInput/styles/textInput.css index c2a0a4c54..e324329a2 100644 --- a/guacamole/src/main/webapp/app/textInput/styles/textInput.css +++ b/guacamole/src/main/webapp/app/textInput/styles/textInput.css @@ -97,7 +97,7 @@ background: #444; - border: 2px solid #666; + border: 0.125em solid #666; -moz-border-radius: 0.25em; -webkit-border-radius: 0.25em; -khtml-border-radius: 0.25em;