1body { 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