GUAC-809: Implement guacOsk directive.

This commit is contained in:
Michael Jumper
2014-12-18 04:27:19 -08:00
parent b305c9b148
commit de24eef9b8
5 changed files with 300 additions and 115 deletions

View File

@@ -0,0 +1,136 @@
/*
* Copyright (C) 2014 Glyptodon LLC
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*/
.guac-keyboard {
display: inline-block;
width: 100%;
margin: 0;
padding: 0;
cursor: default;
text-align: left;
vertical-align: middle;
}
.guac-keyboard .guac-keyboard-key-container {
display: inline-block;
}
.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 {
color: white;
font-family: sans-serif;
font-size: 50%;
font-weight: lighter;
text-align: center;
white-space: pre;
}
.guac-keyboard .guac-keyboard-key:hover {
cursor: pointer;
}
.guac-keyboard .guac-keyboard-key.highlight {
background: #666;
border-color: #666;
}
.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;
}
.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;
}
.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;
}
.guac-keyboard .guac-keyboard-gap {
display: inline-block;
}
/* 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;
}