| body { |
| background: #fff; |
| margin: 0; |
| padding: 0; |
| overflow: hidden; |
| } |
| |
| .keyboard-overlay-keyboard { |
| border-radius: 6px; |
| background: -webkit-linear-gradient(#484848, #252525) no-repeat; |
| background-color: #252525; |
| font-family: 'Droid Sans', Arial; |
| } |
| |
| .keyboard-overlay-instructions { |
| -webkit-box-orient: vertical; |
| background: -webkit-linear-gradient(#334c7e, #0d172b); |
| border-radius: 5px; |
| border: 2px solid #576ccf; |
| color: #fff; |
| display: -webkit-box; |
| position: absolute; |
| vertical-align: middle; |
| z-index: 100; |
| } |
| |
| .keyboard-overlay-instructions-text { |
| -webkit-box-flex: 3; |
| margin-top: 13px; |
| text-align: center; |
| vertical-align: middle; |
| } |
| |
| .keyboard-overlay-instructions-hide-text { |
| -webkit-box-flex: 2; |
| font-weight: bold; |
| text-align: center; |
| vertical-align: middle; |
| } |
| |
| .keyboard-overlay-key { |
| -webkit-box-orient: vertical; |
| border-radius: 4px; |
| background-color: rgba(24, 24, 24, 0.9); |
| border: 2px solid #7f7f7f; |
| color: #979796; |
| display: -webkit-box; |
| font-size: 75%; |
| font-weight: bold; |
| position: absolute; |
| } |
| |
| .keyboard-overlay-key.is-shortcut { |
| background: -webkit-linear-gradient(rgba(61, 61, 61, 0.8), |
| rgba(27, 27, 27, 0.8)); |
| border-color: #fafafa; |
| color: #9e9e9e; |
| } |
| |
| .keyboard-overlay-key.is-shortcut.modifier-shift { |
| border-color: #61ba64; |
| } |
| |
| .keyboard-overlay-key.is-shortcut.modifier-ctrl { |
| border-color: #5d80c7; |
| } |
| |
| .keyboard-overlay-key.is-shortcut.modifier-alt { |
| border-color: #b85454; |
| } |
| |
| .keyboard-overlay-key.is-shortcut.modifier-shift.modifier-ctrl { |
| border-color: #79ac8f; |
| } |
| |
| .keyboard-overlay-key.is-shortcut.modifier-shift.modifier-alt { |
| border-color: #bfbd79; |
| } |
| |
| .keyboard-overlay-key.is-shortcut.modifier-ctrl.modifier-alt { |
| border-color: #9e54ce; |
| } |
| |
| .keyboard-overlay-key.is-shortcut.modifier-shift.modifier-ctrl.modifier-alt { |
| border-color: #7f7f7f; |
| } |
| |
| .keyboard-overlay-key.pressed { |
| border-color: #fff; |
| color: #fff; |
| font-size: 85%; |
| } |
| |
| .keyboard-overlay-key.pressed.is-shift { |
| background: -webkit-linear-gradient(#44a142, #3e5f37); |
| } |
| |
| .keyboard-overlay-key.pressed.is-shift.modifier-ctrl { |
| background: -webkit-linear-gradient(#42a143, #2e5c53); |
| } |
| |
| .keyboard-overlay-key.pressed.is-shift.modifier-alt { |
| background: -webkit-linear-gradient(#45a343, #515134); |
| } |
| |
| .keyboard-overlay-key.pressed.is-shift.modifier-ctrl.modifier-alt { |
| background: -webkit-linear-gradient(#52a12a, #4f4d2e); |
| } |
| |
| .keyboard-overlay-key.pressed.is-ctrl { |
| background: -webkit-linear-gradient(#1f37a2, #19265a); |
| } |
| |
| .keyboard-overlay-key.pressed.is-ctrl.modifier-shift { |
| background: -webkit-linear-gradient(#439fa5, #1e3760); |
| } |
| |
| .keyboard-overlay-key.pressed.is-ctrl.modifier-alt { |
| background: -webkit-linear-gradient(#733690, #22255e); |
| } |
| |
| .keyboard-overlay-key.pressed.is-ctrl.modifier-shift.modifier-alt { |
| background: -webkit-linear-gradient(#733690, #21255d); |
| } |
| |
| .keyboard-overlay-key.pressed.is-alt { |
| background: -webkit-linear-gradient(#842c2a, #541e1c); |
| } |
| |
| .keyboard-overlay-key.pressed.is-alt.modifier-shift { |
| background: -webkit-linear-gradient(top left, #745e31, #55241e); |
| } |
| |
| .keyboard-overlay-key.pressed.is-alt.modifier-ctrl { |
| background: -webkit-linear-gradient(#76368f, #522128); |
| } |
| |
| .keyboard-overlay-key.pressed.is-alt.modifier-shift.modifier-ctrl { |
| background: -webkit-linear-gradient(top left, #735f29, #50241b); |
| } |
| |
| .keyboard-overlay-shortcut-text { |
| -webkit-box-flex: 1; |
| -webkit-box-ordinal-group: 1; |
| color: #fff; |
| text-align: center; |
| } |
| |
| .keyboard-overlay-key-text { |
| -webkit-box-ordinal-group: 2; |
| padding-bottom: 1px; |
| text-align: center; |
| } |