1 /* Copyright (c) 2012 The Chromium Authors. All rights reserved. 2 * Use of this source code is governed by a BSD-style license that can be 3 * found in the LICENSE file. 4 */ 5 6 body { 7 -webkit-user-select: none; 8 background: #fff; 9 margin: 0; 10 overflow: hidden; 11 padding: 0; 12 } 13 14 .keyboard-overlay-keyboard { 15 background: -webkit-linear-gradient(#484848, #252525) no-repeat; 16 background-color: #252525; 17 border-radius: 6px; 18 font-family: 'Noto Sans UI', ui-sans; 19 } 20 21 .keyboard-overlay-instructions { 22 -webkit-box-orient: vertical; 23 background: -webkit-linear-gradient(rgb(51, 76, 126), rgb(13, 23, 43)); 24 border: 2px solid rgb(87, 108, 207); 25 border-radius: 5px; 26 color: #fff; 27 display: -webkit-box; 28 position: absolute; 29 vertical-align: middle; 30 z-index: 100; 31 } 32 33 .keyboard-overlay-instructions-text { 34 -webkit-box-flex: 3; 35 margin: 13px auto 0; 36 max-width: 20em; 37 text-align: center; 38 vertical-align: middle; 39 } 40 41 .keyboard-overlay-instructions-hide-text { 42 -webkit-box-flex: 2; 43 font-weight: bold; 44 text-align: center; 45 vertical-align: middle; 46 } 47 48 .keyboard-overlay-learn-more-text { 49 -webkit-box-flex: 1; 50 font-size: 90%; 51 margin: 0 auto 13px; 52 text-align: center; 53 text-decoration: underline; 54 vertical-align: middle; 55 } 56 57 .keyboard-overlay-learn-more-text a { 58 color: #fff; 59 } 60 61 .keyboard-overlay-key { 62 -webkit-box-orient: vertical; 63 background-color: rgba(24, 24, 24, 0.9); 64 border: 2px solid #7f7f7f; 65 border-radius: 4px; 66 color: rgb(151, 151, 151); 67 display: -webkit-box; 68 font-size: 75%; 69 font-weight: bold; 70 position: absolute; 71 } 72 73 .keyboard-overlay-key.is-shortcut { 74 background: -webkit-linear-gradient(rgba(61, 61, 61, 0.8), 75 rgba(27, 27, 27, 0.8)); 76 border-color: #fafafa; 77 color: #9e9e9e; 78 } 79 80 .keyboard-overlay-key.is-shortcut.modifier-shift { 81 border-color: rgb(97, 186, 100); 82 } 83 84 .keyboard-overlay-key.is-shortcut.modifier-ctrl { 85 border-color: rgb(93, 128, 199); 86 } 87 88 .keyboard-overlay-key.is-shortcut.modifier-alt { 89 border-color: rgb(184, 84, 84); 90 } 91 92 .keyboard-overlay-key.is-shortcut.modifier-search { 93 border-color: rgb(204, 204, 80); 94 } 95 96 .keyboard-overlay-key.is-shortcut.modifier-shift.modifier-ctrl { 97 border-color: rgb(121, 172, 143); 98 } 99 100 .keyboard-overlay-key.is-shortcut.modifier-shift.modifier-alt { 101 border-color: rgb(191, 189, 121); 102 } 103 104 .keyboard-overlay-key.is-shortcut.modifier-ctrl.modifier-alt { 105 border-color: rgb(158, 84, 206); 106 } 107 108 .keyboard-overlay-key.is-shortcut.modifier-shift.modifier-ctrl.modifier-alt { 109 border-color: #7f7f7f; 110 } 111 112 .keyboard-overlay-key.pressed { 113 border-color: #fff; 114 color: #fff; 115 } 116 117 .keyboard-overlay-key.pressed.is-shift { 118 background: -webkit-linear-gradient(rgb(68, 161, 66), rgb(62, 95, 55)); 119 } 120 121 .keyboard-overlay-key.pressed.is-shift.modifier-ctrl { 122 background: -webkit-linear-gradient(rgb(66, 161, 67), rgb(46, 92, 83)); 123 } 124 125 .keyboard-overlay-key.pressed.is-shift.modifier-alt { 126 background: -webkit-linear-gradient(rgb(69, 163, 67), rgb(81, 81, 52)); 127 } 128 129 .keyboard-overlay-key.pressed.is-shift.modifier-ctrl.modifier-alt { 130 background: -webkit-linear-gradient(rgb(82, 161, 42), rgb(79, 77, 46)); 131 } 132 133 .keyboard-overlay-key.pressed.is-ctrl { 134 background: -webkit-linear-gradient(rgb(31, 55, 162), rgb(25, 38, 90)); 135 } 136 137 .keyboard-overlay-key.pressed.is-ctrl.modifier-shift { 138 background: -webkit-linear-gradient(rgb(67, 159, 165), rgb(30, 55, 96)); 139 } 140 141 .keyboard-overlay-key.pressed.is-ctrl.modifier-alt { 142 background: -webkit-linear-gradient(rgb(115, 54, 144), rgb(34, 37, 94)); 143 } 144 145 .keyboard-overlay-key.pressed.is-ctrl.modifier-shift.modifier-alt { 146 background: -webkit-linear-gradient(rgb(115, 54, 144), rgb(33, 37, 93)); 147 } 148 149 .keyboard-overlay-key.pressed.is-alt { 150 background: -webkit-linear-gradient(rgb(132, 44, 42), rgb(84, 30, 28)); 151 } 152 153 .keyboard-overlay-key.pressed.is-alt.modifier-shift { 154 background: -webkit-linear-gradient(top left, rgb(116, 94, 49), 155 rgb(85, 36, 30)); 156 } 157 158 .keyboard-overlay-key.pressed.is-alt.modifier-ctrl { 159 background: -webkit-linear-gradient(rgb(118, 54, 143), rgb(82, 33, 40)); 160 } 161 162 .keyboard-overlay-key.pressed.is-alt.modifier-shift.modifier-ctrl { 163 background: -webkit-linear-gradient(top left, rgb(115, 95, 41), 164 rgb(80, 36, 27)); 165 } 166 167 .keyboard-overlay-key.pressed.is-search { 168 background: -webkit-linear-gradient(rgb(242, 242, 126), rgb(186, 186, 52)); 169 } 170 171 .keyboard-overlay-shortcut-text { 172 -webkit-box-flex: 1; 173 -webkit-box-ordinal-group: 1; 174 color: #fff; 175 padding: 1px 3px 0; 176 text-align: center; 177 text-shadow: #000 0 0 2px; 178 } 179 180 .keyboard-overlay-key-text { 181 -webkit-box-ordinal-group: 2; 182 padding: 0 3px 2px; 183 text-align: center; 184 } 185 186 .keyboard-overlay-key.is-shortcut .keyboard-overlay-key-text { 187 opacity: 0.25; 188 } 189