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 |