1 body { 2 background: #fff; 3 margin: 0; 4 padding: 0; 5 overflow: hidden; 6 } 7 8 .keyboard-overlay-keyboard { 9 border-radius: 6px; 10 background: -webkit-linear-gradient(#484848, #252525) no-repeat; 11 background-color: #252525; 12 font-family: 'Droid Sans', Arial; 13 } 14 15 .keyboard-overlay-instructions { 16 -webkit-box-orient: vertical; 17 background: -webkit-linear-gradient(#334c7e, #0d172b); 18 border-radius: 5px; 19 border: 2px solid #576ccf; 20 color: #fff; 21 display: -webkit-box; 22 position: absolute; 23 vertical-align: middle; 24 z-index: 100; 25 } 26 27 .keyboard-overlay-instructions-text { 28 -webkit-box-flex: 3; 29 margin-top: 13px; 30 text-align: center; 31 vertical-align: middle; 32 } 33 34 .keyboard-overlay-instructions-hide-text { 35 -webkit-box-flex: 2; 36 font-weight: bold; 37 text-align: center; 38 vertical-align: middle; 39 } 40 41 .keyboard-overlay-key { 42 -webkit-box-orient: vertical; 43 border-radius: 4px; 44 background-color: rgba(24, 24, 24, 0.9); 45 border: 2px solid #7f7f7f; 46 color: #979796; 47 display: -webkit-box; 48 font-size: 75%; 49 font-weight: bold; 50 position: absolute; 51 } 52 53 .keyboard-overlay-key.is-shortcut { 54 background: -webkit-linear-gradient(rgba(61, 61, 61, 0.8), 55 rgba(27, 27, 27, 0.8)); 56 border-color: #fafafa; 57 color: #9e9e9e; 58 } 59 60 .keyboard-overlay-key.is-shortcut.modifier-shift { 61 border-color: #61ba64; 62 } 63 64 .keyboard-overlay-key.is-shortcut.modifier-ctrl { 65 border-color: #5d80c7; 66 } 67 68 .keyboard-overlay-key.is-shortcut.modifier-alt { 69 border-color: #b85454; 70 } 71 72 .keyboard-overlay-key.is-shortcut.modifier-shift.modifier-ctrl { 73 border-color: #79ac8f; 74 } 75 76 .keyboard-overlay-key.is-shortcut.modifier-shift.modifier-alt { 77 border-color: #bfbd79; 78 } 79 80 .keyboard-overlay-key.is-shortcut.modifier-ctrl.modifier-alt { 81 border-color: #9e54ce; 82 } 83 84 .keyboard-overlay-key.is-shortcut.modifier-shift.modifier-ctrl.modifier-alt { 85 border-color: #7f7f7f; 86 } 87 88 .keyboard-overlay-key.pressed { 89 border-color: #fff; 90 color: #fff; 91 font-size: 85%; 92 } 93 94 .keyboard-overlay-key.pressed.is-shift { 95 background: -webkit-linear-gradient(#44a142, #3e5f37); 96 } 97 98 .keyboard-overlay-key.pressed.is-shift.modifier-ctrl { 99 background: -webkit-linear-gradient(#42a143, #2e5c53); 100 } 101 102 .keyboard-overlay-key.pressed.is-shift.modifier-alt { 103 background: -webkit-linear-gradient(#45a343, #515134); 104 } 105 106 .keyboard-overlay-key.pressed.is-shift.modifier-ctrl.modifier-alt { 107 background: -webkit-linear-gradient(#52a12a, #4f4d2e); 108 } 109 110 .keyboard-overlay-key.pressed.is-ctrl { 111 background: -webkit-linear-gradient(#1f37a2, #19265a); 112 } 113 114 .keyboard-overlay-key.pressed.is-ctrl.modifier-shift { 115 background: -webkit-linear-gradient(#439fa5, #1e3760); 116 } 117 118 .keyboard-overlay-key.pressed.is-ctrl.modifier-alt { 119 background: -webkit-linear-gradient(#733690, #22255e); 120 } 121 122 .keyboard-overlay-key.pressed.is-ctrl.modifier-shift.modifier-alt { 123 background: -webkit-linear-gradient(#733690, #21255d); 124 } 125 126 .keyboard-overlay-key.pressed.is-alt { 127 background: -webkit-linear-gradient(#842c2a, #541e1c); 128 } 129 130 .keyboard-overlay-key.pressed.is-alt.modifier-shift { 131 background: -webkit-linear-gradient(top left, #745e31, #55241e); 132 } 133 134 .keyboard-overlay-key.pressed.is-alt.modifier-ctrl { 135 background: -webkit-linear-gradient(#76368f, #522128); 136 } 137 138 .keyboard-overlay-key.pressed.is-alt.modifier-shift.modifier-ctrl { 139 background: -webkit-linear-gradient(top left, #735f29, #50241b); 140 } 141 142 .keyboard-overlay-shortcut-text { 143 -webkit-box-flex: 1; 144 -webkit-box-ordinal-group: 1; 145 color: #fff; 146 text-align: center; 147 } 148 149 .keyboard-overlay-key-text { 150 -webkit-box-ordinal-group: 2; 151 padding-bottom: 1px; 152 text-align: center; 153 } 154