OLD | NEW |
| (Empty) |
1 /* | |
2 Copyright (c) 2013 The Chromium Authors. All rights reserved. | |
3 Use of this source code is governed by a BSD-style license that can be | |
4 found in the LICENSE file. | |
5 */ | |
6 | |
7 body { | |
8 -webkit-user-select: none; | |
9 color: white; | |
10 margin: 0; | |
11 overflow: hidden; | |
12 padding: 0; | |
13 } | |
14 | |
15 div.main { | |
16 -webkit-box-orient: vertical; | |
17 background: -webkit-linear-gradient(#bababa, #868686) no-repeat; | |
18 display: -webkit-box; | |
19 left: 0; | |
20 position: absolute; | |
21 right: 0; | |
22 top: -10px; | |
23 } | |
24 | |
25 div.keyboard { | |
26 -webkit-box-flex: 1; | |
27 display: -webkit-box; | |
28 margin: 0 auto; | |
29 text-align: center; | |
30 } | |
31 | |
32 div.rows { | |
33 -webkit-box-flex: 1; | |
34 -webkit-box-orient: vertical; | |
35 display: -webkit-box; | |
36 margin-bottom: 5px; | |
37 text-align: center; | |
38 } | |
39 | |
40 div.row { | |
41 -webkit-box-flex: 1; | |
42 display: -webkit-box; | |
43 margin-right: 5px; | |
44 margin-top: 5px; | |
45 } | |
46 | |
47 div.row > div { | |
48 -webkit-box-flex: 1; | |
49 display: -webkit-box; | |
50 } | |
51 | |
52 .panel { | |
53 border: 0; | |
54 clear: both; | |
55 margin-left: 5px; | |
56 text-align: left; | |
57 } | |
58 | |
59 .backspace > div { | |
60 background-image: url('images/del.svg'); | |
61 } | |
62 | |
63 .tab > div { | |
64 background-image: url('images/tab.svg'); | |
65 } | |
66 | |
67 .return > div { | |
68 background-image: url('images/ret.svg'); | |
69 } | |
70 | |
71 .mic > div { | |
72 background-image: url('images/mic.svg'); | |
73 } | |
74 | |
75 .button { | |
76 background: -webkit-linear-gradient(rgb(90, 97, 111), rgb(80, 86, 98)); | |
77 } | |
78 .button:active { | |
79 background: -webkit-linear-gradient(rgb(80, 86, 98), rgb(90, 97, 111)); | |
80 } | |
81 | |
82 .auxiliary:active { | |
83 background: -webkit-linear-gradient(rgb(90, 97, 111), rgb(80, 86, 98)); | |
84 } | |
85 | |
86 .key { | |
87 -webkit-box-flex: 1; | |
88 background: -webkit-linear-gradient(#fff, #cacaca); | |
89 border: 1px solid transparent; | |
90 border-radius: 6px; | |
91 /* Reserving equivalent space to .key:active so | |
92 keys don't shift when selected. */ | |
93 /* Do not use box shadow until performance improves | |
94 * http://code.google.com/p/chromium/issues/detail?id=99045 | |
95 box-shadow: 0px 1px 1px #000; | |
96 */ | |
97 color: #535353; | |
98 display: -webkit-box; | |
99 font-family: sans-serif; | |
100 font-weight: 100; | |
101 margin-left: 5px; | |
102 position: relative; | |
103 } | |
104 | |
105 .key > div { | |
106 bottom: 0; | |
107 left: 0; | |
108 margin: auto; | |
109 position: absolute; | |
110 right: 0; | |
111 top: 0; | |
112 } | |
113 | |
114 .key:active { | |
115 background: -webkit-linear-gradient(#d6d6d6, #acacac); | |
116 border: 1px solid rgba(125,125,125,0.5); | |
117 /* Do not use box shadow until performance improves | |
118 * http://code.google.com/p/chromium/issues/detail?id=99045 | |
119 box-shadow: 0px 0px 15px #fff; | |
120 */ | |
121 } | |
122 | |
123 div.moddown { | |
124 background: -webkit-linear-gradient(#d6d6d6, #acacac); | |
125 border-color: rgb(48, 74, 155); | |
126 } | |
127 | |
128 .image-key { | |
129 background-position: center center; | |
130 background-repeat: no-repeat; | |
131 background-size: contain; | |
132 height: 100%; | |
133 width: 100%; | |
134 } | |
135 | |
136 .text-key { | |
137 height: 1.2em; | |
138 } | |
139 | |
140 | |
141 .shift > div.image-key { | |
142 background-image: url('images/shift.svg'); | |
143 } | |
144 | |
145 .moddown.shift > div.image-key { | |
146 background-image: url('images/shift-down.svg'); | |
147 } | |
148 | |
149 .hide > div { | |
150 background-image: url('images/keyboard.svg'); | |
151 } | |
152 | |
153 .at, | |
154 .tab, | |
155 .com, | |
156 .comma, | |
157 .hide, | |
158 .mic, | |
159 .period { | |
160 -webkit-box-flex: 1.3; | |
161 } | |
162 | |
163 .symbol { | |
164 -webkit-box-flex: 1.4; | |
165 } | |
166 | |
167 .return { | |
168 -webkit-box-flex: 1.5; | |
169 } | |
170 | |
171 .backspace { | |
172 -webkit-box-flex: 1.6; | |
173 } | |
174 | |
175 .left-shift { | |
176 -webkit-box-flex: 1.8; | |
177 } | |
178 | |
179 .right-shift { | |
180 -webkit-box-flex: 2.0; | |
181 } | |
182 | |
183 .space { | |
184 -webkit-box-flex: 4.8; | |
185 } | |
186 | |
187 .bar { | |
188 -webkit-box-flex: 0.6; | |
189 } | |
190 | |
191 .nodisplay { | |
192 display: none; | |
193 } | |
OLD | NEW |