Merge pull request #170 from glyptodon/osk-style

GUAC-1170: Clean up OSK style while it's relevant
This commit is contained in:
James Muehlner
2015-04-30 08:20:12 -07:00
2 changed files with 69 additions and 26 deletions

View File

@@ -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: 0.125em 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 {

View File

@@ -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: 0.125em 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;
}