| OLD | NEW |
| (Empty) |
| 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 body { | |
| 6 -webkit-user-select: none; | |
| 7 background: -webkit-linear-gradient(#bababa, #868686) no-repeat; | |
| 8 color: white; | |
| 9 margin: 0; | |
| 10 overflow: hidden; | |
| 11 padding: 0; | |
| 12 } | |
| 13 | |
| 14 div.main { | |
| 15 -webkit-box-orient: vertical; | |
| 16 display: -webkit-box; | |
| 17 margin: 0 auto; | |
| 18 } | |
| 19 | |
| 20 div.keyboard { | |
| 21 -webkit-box-flex: 1; | |
| 22 display: -webkit-box; | |
| 23 margin: 0 auto; | |
| 24 text-align: center; | |
| 25 } | |
| 26 | |
| 27 div.rows { | |
| 28 -webkit-box-flex: 1; | |
| 29 -webkit-box-orient: vertical; | |
| 30 display: -webkit-box; | |
| 31 margin-bottom: 5px; | |
| 32 text-align: center; | |
| 33 } | |
| 34 | |
| 35 div.row { | |
| 36 -webkit-box-flex: 1; | |
| 37 display: -webkit-box; | |
| 38 margin-right: 5px; | |
| 39 margin-top: 5px; | |
| 40 } | |
| 41 | |
| 42 div.row > div { | |
| 43 -webkit-box-flex: 1; | |
| 44 display: -webkit-box; | |
| 45 } | |
| 46 | |
| 47 .handwritingcanvas { | |
| 48 border: 1px solid gray; | |
| 49 border-radius: 4px; | |
| 50 color: #dbdbdb; | |
| 51 font-family: sans-serif; | |
| 52 margin: 5px 0 0 5px; | |
| 53 text-align: center; | |
| 54 } | |
| 55 | |
| 56 .ime { | |
| 57 border: 1px solid gray; | |
| 58 color: #dbdbdb; | |
| 59 display: inline-block; | |
| 60 font-family: sans-serif; | |
| 61 margin: 0; | |
| 62 text-align: center; | |
| 63 white-space: nowrap; | |
| 64 } | |
| 65 | |
| 66 .panel { | |
| 67 border: 0; | |
| 68 clear: both; | |
| 69 margin-left: 5px; | |
| 70 text-align: left; | |
| 71 } | |
| 72 | |
| 73 .popup { | |
| 74 background: rgba(50, 50, 50, 0.95); | |
| 75 border: 1px solid rgba(50, 50, 50, 0.8); | |
| 76 border-radius: 4px; | |
| 77 box-shadow: 5px 5px 3px rgba(50, 50, 50, 0.3); | |
| 78 padding-right: 5px; | |
| 79 position: absolute; | |
| 80 } | |
| 81 | |
| 82 .button { | |
| 83 background: -webkit-linear-gradient(rgb(90, 97, 111), rgb(80, 86, 98)); | |
| 84 } | |
| 85 .button:active { | |
| 86 background: -webkit-linear-gradient(rgb(80, 86, 98), rgb(90, 97, 111)); | |
| 87 } | |
| 88 | |
| 89 .auxiliary:active { | |
| 90 background: -webkit-linear-gradient(rgb(90, 97, 111), rgb(80, 86, 98)); | |
| 91 } | |
| 92 | |
| 93 .key { | |
| 94 -webkit-box-flex: 1; | |
| 95 background: -webkit-linear-gradient(#fff, #cacaca); | |
| 96 /* Reserving equivalent space to .key:active so | |
| 97 keys don't shift when selected. */ | |
| 98 border: 1px solid transparent; | |
| 99 border-radius: 6px; | |
| 100 /* Do not use box shadow until performance improves | |
| 101 * http://code.google.com/p/chromium/issues/detail?id=99045 | |
| 102 box-shadow: 0 1px 1px #000; | |
| 103 */ | |
| 104 color: #535353; | |
| 105 display: -webkit-box; | |
| 106 font-family: sans-serif; | |
| 107 font-weight: 100; | |
| 108 margin-left: 5px; | |
| 109 position: relative; | |
| 110 } | |
| 111 | |
| 112 .key > div { | |
| 113 bottom: 0; | |
| 114 left: 0; | |
| 115 margin: auto; | |
| 116 position: absolute; | |
| 117 right: 0; | |
| 118 top: 0; | |
| 119 } | |
| 120 | |
| 121 .key.popupkey { | |
| 122 background: rgba(0, 0, 0, 0); | |
| 123 border: 1px solid rgba(0, 0, 0, 0); | |
| 124 box-shadow: 0 0 0 #fff; | |
| 125 color: #fff; | |
| 126 } | |
| 127 | |
| 128 .key.popupkey.highlighted { | |
| 129 background: rgba(20, 20, 200, 0.2); | |
| 130 color: #fff; | |
| 131 } | |
| 132 | |
| 133 .key:active { | |
| 134 background: -webkit-linear-gradient(#d6d6d6, #acacac); | |
| 135 border: 1px solid rgba(125,125,125,0.5); | |
| 136 /* Do not use box shadow until performance improves | |
| 137 * http://code.google.com/p/chromium/issues/detail?id=99045 | |
| 138 box-shadow: 0 0 15px #fff; | |
| 139 */ | |
| 140 } | |
| 141 | |
| 142 div.moddown { | |
| 143 background: -webkit-linear-gradient(#d6d6d6, #acacac); | |
| 144 border-color: rgb(48, 74, 155); | |
| 145 } | |
| 146 | |
| 147 .image-key { | |
| 148 background-position: center center; | |
| 149 background-repeat: no-repeat; | |
| 150 background-size: contain; | |
| 151 height: 100%; | |
| 152 width: 100%; | |
| 153 } | |
| 154 | |
| 155 .text-key { | |
| 156 height: 1.2em; | |
| 157 } | |
| 158 | |
| 159 .backspace > div, | |
| 160 .handwriting-backspace > div { | |
| 161 background-image: url('del.svg'); | |
| 162 } | |
| 163 | |
| 164 .tab > div { | |
| 165 background-image: url('tab.svg'); | |
| 166 } | |
| 167 | |
| 168 .return > div, | |
| 169 .handwriting-return > div { | |
| 170 background-image: url('ret.svg'); | |
| 171 } | |
| 172 | |
| 173 .mic > div, | |
| 174 .handwriting-mic > div { | |
| 175 background-image: url('mic.svg'); | |
| 176 } | |
| 177 | |
| 178 .shift > div.image-key { | |
| 179 background-image: url('shift.svg'); | |
| 180 } | |
| 181 | |
| 182 .moddown.shift > div.image-key { | |
| 183 background-image: url('shift-down.svg'); | |
| 184 } | |
| 185 | |
| 186 .hide > div { | |
| 187 background-image: url('keyboard.svg'); | |
| 188 } | |
| 189 | |
| 190 .at, | |
| 191 .com, | |
| 192 .comma, | |
| 193 .handwriting-backspace, | |
| 194 .hide, | |
| 195 .mic, | |
| 196 .period, | |
| 197 .return, | |
| 198 .symbol { | |
| 199 -webkit-box-flex: 1.3; | |
| 200 } | |
| 201 | |
| 202 .backspace, | |
| 203 .left_shift { | |
| 204 -webkit-box-flex: 1.6; | |
| 205 } | |
| 206 | |
| 207 .space { | |
| 208 -webkit-box-flex: 4.8; | |
| 209 } | |
| 210 | |
| 211 .handwriting-mic, | |
| 212 .handwriting-space { | |
| 213 -webkit-box-flex: 3.7; | |
| 214 } | |
| 215 | |
| 216 .handwriting-clear, | |
| 217 .handwriting-return { | |
| 218 -webkit-box-flex: 5; | |
| 219 } | |
| 220 | |
| 221 .nodisplay { | |
| 222 display: none; | |
| 223 } | |
| OLD | NEW |