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