]>
Commit | Line | Data |
---|---|---|
5802c0b7 | 1 | /* keyboard - jQuery UI Widget */ |
2 | .ui-keyboard { | |
3 | text-align: center; | |
4 | padding: .3em; | |
5 | position: absolute; | |
6 | left: 0; | |
7 | top: 0; | |
8 | z-index: 16000; | |
9 | /* see issue #484 */ | |
10 | -ms-touch-action: manipulation; | |
11 | touch-action: manipulation; | |
12 | } | |
13 | .ui-keyboard-has-focus { | |
14 | z-index: 16001; | |
15 | } | |
16 | .ui-keyboard div { | |
17 | font-size: 1.1em; | |
18 | } | |
19 | .ui-keyboard-button { | |
20 | height: 2em; | |
21 | min-width: 2em; | |
22 | margin: .1em; | |
23 | cursor: pointer; | |
24 | overflow: hidden; | |
25 | line-height: 2em; | |
26 | -moz-user-focus: ignore; | |
27 | } | |
28 | .ui-keyboard-button span { | |
29 | padding: 0; | |
30 | margin: 0; | |
31 | white-space: nowrap; | |
32 | display: inline-block; | |
33 | } | |
34 | .ui-keyboard-button-endrow { | |
35 | clear: left; | |
36 | } | |
37 | .ui-keyboard-space { | |
38 | width: 15em; | |
39 | } | |
40 | /* see http://nicolasgallagher.com/another-css-image-replacement-technique/ */ | |
41 | .ui-keyboard-space span, .ui-keyboard-empty span { | |
42 | font: 0/0 a; | |
43 | text-shadow: none; | |
44 | color: transparent; | |
45 | } | |
46 | .ui-keyboard-preview-wrapper { | |
47 | text-align: center; | |
48 | position: relative; | |
49 | overflow: hidden; | |
50 | } | |
51 | /* width is calculated in IE, since 99% = 99% full browser width =( */ | |
52 | .ui-keyboard-preview { | |
53 | text-align: left; | |
54 | margin: 0 0 3px 0; | |
55 | display: inline; | |
56 | width: 99%; | |
57 | } | |
58 | .ui-keyboard-keyset { | |
59 | text-align: center; | |
60 | white-space: nowrap; | |
61 | } | |
62 | .ui-keyboard-input { | |
63 | text-align: left; | |
64 | } | |
65 | .ui-keyboard-input-current { | |
66 | -moz-box-shadow: 0 0 5px #4d90fe; | |
67 | -webkit-box-shadow: 0 0 5px #4d90fe; | |
68 | box-shadow: 0 0 5px #4d90fe; | |
69 | } | |
70 | .ui-keyboard-placeholder { | |
71 | color: #888; | |
72 | } | |
73 | /* disabled or readonly inputs, or use | |
74 | input[disabled='disabled'] { color: #f00; } */ | |
75 | .ui-keyboard-nokeyboard { | |
76 | color: #888; | |
77 | border-color: #888; | |
78 | } | |
79 | .ui-keyboard-spacer { | |
80 | display: inline-block; | |
81 | width: 1px; | |
82 | height: 0; | |
83 | cursor: default; | |
84 | } | |
85 | ||
86 | .ui-keyboard-NBSP span, .ui-keyboard-ZWSP span, .ui-keyboard-ZWNJ span, | |
87 | .ui-keyboard-ZWJ span, .ui-keyboard-LRM span, .ui-keyboard-RLM span { | |
88 | font-size: 0.5em; | |
89 | line-height: 1.5em; | |
90 | white-space: normal; | |
91 | } | |
92 | ||
93 | /* combo key styling - toggles diacritics on/off */ | |
94 | .ui-keyboard-button.ui-keyboard-combo.ui-state-default { | |
95 | border-color: #ffaf0f; | |
96 | } | |
97 | ||
98 | /* (in)valid inputs */ | |
99 | button.ui-keyboard-accept.ui-keyboard-valid-input { | |
100 | border-color: #0c0; | |
101 | background: #080; | |
102 | color: #fff; | |
103 | } | |
104 | button.ui-keyboard-accept.ui-keyboard-valid-input:not([disabled]):hover { | |
105 | background: #0a0; | |
106 | } | |
107 | button.ui-keyboard-accept.ui-keyboard-invalid-input { | |
108 | border-color: #c00; | |
109 | background: #800; | |
110 | color: #fff; | |
111 | opacity: 0.5; | |
112 | filter: alpha(opacity=50); | |
113 | } | |
114 | button.ui-keyboard-accept.ui-keyboard-invalid-input:not([disabled]):hover { | |
115 | background: #a00; | |
116 | } | |
117 | ||
118 | /*** Caret extension definition ***/ | |
119 | /* margin-top => is added to the caret height (top & bottom) */ | |
120 | .ui-keyboard-caret { | |
121 | background: #c00; | |
122 | width: 1px; | |
123 | margin-top: 3px; | |
124 | } | |
125 | ||
126 | /*** jQuery Mobile definitions ***/ | |
127 | /* jQuery Mobile styles - need wider buttons because of font size and | |
128 | text-overflow:ellipsis */ | |
129 | div.ui-body.ui-keyboard button.ui-keyboard-button.ui-btn { | |
130 | padding: 0.5em 1em; | |
131 | border-color: transparent; | |
132 | } | |
133 | .ui-body .ui-keyboard-button { | |
134 | width: 3em; | |
135 | height: 3em; | |
136 | display: inline-block; | |
137 | } | |
138 | .ui-body .ui-keyboard-widekey { | |
139 | width: 5.5em; | |
140 | } | |
141 | .ui-body .ui-keyboard-space { | |
142 | width: 15em; | |
143 | } | |
144 | .ui-body .ui-keyboard-space span { | |
145 | visibility: hidden; /* hides the ellipsis */ | |
146 | } | |
147 | .ui-body .ui-keyboard-keyset { | |
148 | line-height: 0.5em; | |
149 | } | |
150 | .ui-body input.ui-input-text, .ui-body textarea.ui-input-text { | |
151 | width: 95%; | |
152 | } | |
153 | ||
154 | /* over-ride padding set by mobile ui theme - needed because the mobile script | |
155 | wraps button text with several more spans */ | |
156 | .ui-body .ui-btn-inner { | |
157 | height: 2em; | |
158 | padding: 0.2em 0; | |
159 | margin: 0; | |
160 | } | |
161 | .ui-body .ui-btn { | |
162 | margin: 0; | |
163 | font-size: 13px; /* mobile default size is 13px */ | |
164 | } | |
165 | ||
166 | /* override Bootstrap excessive button padding */ | |
167 | button.ui-keyboard-button.btn { | |
168 | padding: 1px 6px; | |
169 | } | |
170 | ||
171 | /* enable/disable icons */ | |
172 | button.ui-keyboard-toggle span { | |
173 | width: .8em; | |
174 | height: .8em; | |
175 | display: inline-block; | |
176 | background-repeat: no-repeat; | |
177 | background-position: center center; | |
178 | background-size: contain; | |
179 | } | |
180 | /* unlocked icon (keyboard enabled) */ | |
181 | button.ui-keyboard-toggle span { | |
182 | /* light theme unlocked icon - fill: #111 */ | |
183 | background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgZmlsbD0iIzExMSI+PHBhdGggZD0iTTguNyw0LjRINy41SDUuMHYtMS45YzAtMS40LTEuMS0yLjUtMi41LTIuNWMtMS40LDAtMi41LDEuMS0yLjUsMi41djEuOWgxLjIgdi0xLjljMC0wLjcsMC42LTEuMiwxLjItMS4yczEuMiwwLjYsMS4yLDEuMnYxLjljLTAuNywwLTEuMiwwLjYtMS4yLDEuMlY4LjggYzAsMC43LDAuNiwxLjIsMS4yLDEuMmg1LjBDOS40LDEwLDEwLDkuNCwxMCw4LjhWNS42QzEwLDUuMCw5LjQsNC40LDguOCw0LjR6IE02LjYsNy40djEuMCBjMCwwLjItMC4xLDAuMy0wLjMsMC4zUzYuMCw4LjYsNi4wLDguNFY3LjRjLTAuMi0wLjEtMC4zLTAuMy0wLjMtMC41YzAtMC4zLDAuMy0wLjYsMC42LTAuNiBTNi45LDYuNiw2LjksNi45QzYuOSw3LjEsNi44LDcuMyw2LjYsNy40eiIvPjwvc3ZnPg==); | |
184 | } | |
185 | .ui-keyboard-dark-theme button.ui-keyboard-toggle span { | |
186 | /* dark theme unlocked icon - fill: #eee */ | |
187 | background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgZmlsbD0iI2VlZSI+PHBhdGggZD0iTTguNyw0LjRINy41SDUuMHYtMS45YzAtMS40LTEuMS0yLjUtMi41LTIuNWMtMS40LDAtMi41LDEuMS0yLjUsMi41djEuOWgxLjIgdi0xLjljMC0wLjcsMC42LTEuMiwxLjItMS4yczEuMiwwLjYsMS4yLDEuMnYxLjljLTAuNywwLTEuMiwwLjYtMS4yLDEuMlY4LjggYzAsMC43LDAuNiwxLjIsMS4yLDEuMmg1LjBDOS40LDEwLDEwLDkuNCwxMCw4LjhWNS42QzEwLDUuMCw5LjQsNC40LDguOCw0LjR6IE02LjYsNy40djEuMCBjMCwwLjItMC4xLDAuMy0wLjMsMC4zUzYuMCw4LjYsNi4wLDguNFY3LjRjLTAuMi0wLjEtMC4zLTAuMy0wLjMtMC41YzAtMC4zLDAuMy0wLjYsMC42LTAuNiBTNi45LDYuNiw2LjksNi45QzYuOSw3LjEsNi44LDcuMyw2LjYsNy40eiIvPjwvc3ZnPg==); | |
188 | } | |
189 | ||
190 | /* locked icon (keyboard disabled) */ | |
191 | button.ui-keyboard-toggle.ui-keyboard-disabled span { | |
192 | /* light theme locked icon - fill: #111 */ | |
193 | background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgZmlsbD0iIzExMSI+PHBhdGggZD0iTTcuNCA0LjRWMi41YzAtMS40LTEuMS0yLjUtMi41LTIuNWMtMS40IDAtMi41IDEuMS0yLjUgMi41djEuOSBjLTAuNyAwLTEuMiAwLjUtMS4yIDEuMnYzLjFDMS4zIDkuNCAxLjggMTAgMi41IDEwaDQuOWMwLjcgMCAxLjItMC42IDEuMi0xLjJWNS42IEM4LjcgNC45IDguMSA0LjQgNy40IDQuNHogTTUuMyA3LjR2MS4wYzAgMC4yLTAuMSAwLjMtMC4zIDAuM2MtMC4yIDAtMC4zLTAuMS0wLjMtMC4zVjcuNCBjLTAuMi0wLjEtMC4zLTAuMy0wLjMtMC41YzAtMC4zIDAuMy0wLjYgMC42LTAuNmMwLjMgMCAwLjYgMC4zIDAuNiAwLjYgQzUuNiA3LjEgNS41IDcuMyA1LjMgNy40eiBNNi4yIDQuNEgzLjdWMi41YzAtMC43IDAuNS0xLjIgMS4yLTEuMmMwLjcgMCAxLjIgMC42IDEuMiAxLjIgVjQuNHoiLz48L3N2Zz4=); | |
194 | } | |
195 | .ui-keyboard-dark-theme button.ui-keyboard-toggle.ui-keyboard-disabled span { | |
196 | /* dark theme locked icon - fill: #eee */ | |
197 | background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgZmlsbD0iI2VlZSI+PHBhdGggZD0iTTcuNCA0LjRWMi41YzAtMS40LTEuMS0yLjUtMi41LTIuNWMtMS40IDAtMi41IDEuMS0yLjUgMi41djEuOSBjLTAuNyAwLTEuMiAwLjUtMS4yIDEuMnYzLjFDMS4zIDkuNCAxLjggMTAgMi41IDEwaDQuOWMwLjcgMCAxLjItMC42IDEuMi0xLjJWNS42IEM4LjcgNC45IDguMSA0LjQgNy40IDQuNHogTTUuMyA3LjR2MS4wYzAgMC4yLTAuMSAwLjMtMC4zIDAuM2MtMC4yIDAtMC4zLTAuMS0wLjMtMC4zVjcuNCBjLTAuMi0wLjEtMC4zLTAuMy0wLjMtMC41YzAtMC4zIDAuMy0wLjYgMC42LTAuNmMwLjMgMCAwLjYgMC4zIDAuNiAwLjYgQzUuNiA3LjEgNS41IDcuMyA1LjMgNy40eiBNNi4yIDQuNEgzLjdWMi41YzAtMC43IDAuNS0xLjIgMS4yLTEuMmMwLjcgMCAxLjIgMC42IDEuMiAxLjIgVjQuNHoiLz48L3N2Zz4=); | |
198 | } | |
199 | ||
200 | .ui-keyboard.ui-keyboard-disabled button:not(.ui-keyboard-toggle), | |
201 | .ui-keyboard.ui-keyboard-disabled input { | |
202 | opacity: 0.5; | |
203 | } | |
204 | ||
205 | /*** Alt-Keys Popup extension ***/ | |
206 | /* clickable overlay on top of keyboard to hide the popup */ | |
207 | .ui-keyboard-overlay { | |
208 | position: absolute; | |
209 | top: 0; | |
210 | left: 0; | |
211 | bottom: 0; | |
212 | right: 0; | |
213 | background: rgba(0, 0, 0, 0.5); | |
214 | } | |
215 | /* the actual popup styling, class names from the css.container option are also | |
216 | added */ | |
217 | .ui-keyboard-popup { | |
218 | display: inline-block; | |
219 | /* default buttons are 2em wide + .1em margin on either side (set in | |
220 | .ui-keyboard-button definition); so use multiples of 2.2em for a max-width | |
221 | if you don't want any extra white space on the sides, e.g. | |
222 | 5 buttons * 2.2em = 11em, | |
223 | 6 buttons * 2.2em = 13.2em, etc | |
224 | */ | |
225 | max-width: 22em; /* 10 buttons */ | |
226 | } | |
227 | ||
228 | /*** Extender keyboard extension ***/ | |
229 | div.ui-keyboard-extender { | |
230 | margin-left: 5px; | |
231 | } | |
232 | button.ui-keyboard-extender span { | |
233 | width: .9em; | |
234 | height: .9em; | |
235 | display: inline-block; | |
236 | margin-bottom: 3px; | |
237 | background-repeat: no-repeat; | |
238 | background-position: center center; | |
239 | background-size: contain; | |
240 | /* light theme extender icon - fill: #111 */ | |
241 | background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgc3R5bGU9ImZpbGw6IzExMSI+PGc+PHBhdGggc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6IzExMSIgZD0iTSAwLjUsNC41IDE1LjUsNC41IDE1LjUsMTUuNSAwLjUsMTUuNSBaIj48L3BhdGg+PHJlY3Qgd2lkdGg9IjIiIGhlaWdodD0iMiIgeD0iMiIgeT0iNiI+PC9yZWN0PjxyZWN0IHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjUiIHk9IjYiPjwvcmVjdD48cmVjdCB3aWR0aD0iMiIgaGVpZ2h0PSIyIiB4PSI4IiB5PSI2Ij48L3JlY3Q+PHBhdGggZD0ibSAxMSw2IDMsMCAwLDUgLTIsMCAwLC0zIC0xLDAgeiI+PC9wYXRoPjxyZWN0IHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjEyIiB5PSIxMiI+PC9yZWN0PjxyZWN0IHdpZHRoPSI2IiBoZWlnaHQ9IjIiIHg9IjUiIHk9IjEyIj48L3JlY3Q+PHJlY3Qgd2lkdGg9IjIiIGhlaWdodD0iMiIgeD0iOSIgeT0iOSI+PC9yZWN0PjxyZWN0IHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjYiIHk9IjkiPjwvcmVjdD48cmVjdCB3aWR0aD0iMiIgaGVpZ2h0PSIyIiB4PSIyIiB5PSIxMiI+PC9yZWN0PjxyZWN0IHdpZHRoPSIzIiBoZWlnaHQ9IjIiIHg9IjIiIHk9IjkiPjwvcmVjdD48L2c+PC9zdmc+); | |
242 | } | |
243 | .ui-keyboard-dark-theme button.ui-keyboard-extender span { | |
244 | /* dark theme extender icon - fill: #eee */ | |
245 | background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgc3R5bGU9ImZpbGw6I2VlZSI+PGc+PHBhdGggc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6I2VlZSIgZD0iTSAwLjUsNC41IDE1LjUsNC41IDE1LjUsMTUuNSAwLjUsMTUuNSBaIj48L3BhdGg+PHJlY3Qgd2lkdGg9IjIiIGhlaWdodD0iMiIgeD0iMiIgeT0iNiI+PC9yZWN0PjxyZWN0IHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjUiIHk9IjYiPjwvcmVjdD48cmVjdCB3aWR0aD0iMiIgaGVpZ2h0PSIyIiB4PSI4IiB5PSI2Ij48L3JlY3Q+PHBhdGggZD0ibSAxMSw2IDMsMCAwLDUgLTIsMCAwLC0zIC0xLDAgeiI+PC9wYXRoPjxyZWN0IHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjEyIiB5PSIxMiI+PC9yZWN0PjxyZWN0IHdpZHRoPSI2IiBoZWlnaHQ9IjIiIHg9IjUiIHk9IjEyIj48L3JlY3Q+PHJlY3Qgd2lkdGg9IjIiIGhlaWdodD0iMiIgeD0iOSIgeT0iOSI+PC9yZWN0PjxyZWN0IHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjYiIHk9IjkiPjwvcmVjdD48cmVjdCB3aWR0aD0iMiIgaGVpZ2h0PSIyIiB4PSIyIiB5PSIxMiI+PC9yZWN0PjxyZWN0IHdpZHRoPSIzIiBoZWlnaHQ9IjIiIHg9IjIiIHk9IjkiPjwvcmVjdD48L2c+PC9zdmc+); | |
246 | } | |
247 | ||
248 | /* Media Queries (optimized for jQuery UI themes; | |
249 | may be slightly off in jQuery Mobile themes) */ | |
250 | /* 240 x 320 (small phone) */ | |
251 | @media all and (max-width: 319px) { | |
252 | .ui-keyboard div { | |
253 | font-size: 9px; | |
254 | } | |
255 | .ui-keyboard .ui-keyboard-input { | |
256 | font-size: 12px; | |
257 | } | |
258 | /* I don't own an iPhone so I have no idea how small this really is... is it | |
259 | even clickable with your finger? */ | |
260 | .ui-body .ui-btn { | |
261 | margin: 0; | |
262 | font-size: 9px; | |
263 | } | |
264 | .ui-body .ui-keyboard-button { | |
265 | width: 1.8em; | |
266 | height: 2.5em; | |
267 | } | |
268 | .ui-body .ui-keyboard-widekey { | |
269 | width: 4em; | |
270 | } | |
271 | .ui-body .ui-keyboard-space { | |
272 | width: 8em; | |
273 | } | |
274 | .ui-body .ui-btn-inner { | |
275 | height: 2.5em; | |
276 | padding: 0.3em 0; | |
277 | } | |
278 | } | |
279 | ||
280 | /* 320 x 480 (iPhone) */ | |
281 | @media all and (min-width: 320px) and (max-width: 479px) { | |
282 | .ui-keyboard div { | |
283 | font-size: 9px; | |
284 | } | |
285 | .ui-keyboard .ui-keyboard-input { | |
286 | font-size: 14px; | |
287 | } | |
288 | /* I don't own an iPhone so I have no idea how small this really is... is it | |
289 | even clickable with your finger? */ | |
290 | .ui-body .ui-btn { | |
291 | margin: 0; | |
292 | font-size: 11px; | |
293 | } | |
294 | .ui-body .ui-keyboard-button { | |
295 | width: 1.8em; | |
296 | height: 3em; | |
297 | } | |
298 | .ui-body .ui-keyboard-widekey { | |
299 | width: 4.5em; | |
300 | } | |
301 | .ui-body .ui-keyboard-space { | |
302 | width: 10em; | |
303 | } | |
304 | .ui-body .ui-btn-inner { | |
305 | height: 3em; | |
306 | padding: 0.7em 0; | |
307 | } | |
308 | } | |
309 | ||
310 | /* 480 x 640 (small tablet) */ | |
311 | @media all and (min-width: 480px) and (max-width: 767px) { | |
312 | .ui-keyboard div { | |
313 | font-size: 13px; | |
314 | } | |
315 | .ui-keyboard .ui-keyboard-input { | |
316 | font-size: 14px; | |
317 | } | |
318 | .ui-body .ui-btn { | |
319 | margin: 0; | |
320 | font-size: 10px; | |
321 | } | |
322 | .ui-body .ui-keyboard-button { | |
323 | height: 2.5em; | |
324 | } | |
325 | .ui-body .ui-btn-inner { | |
326 | height: 2.5em; | |
327 | padding: 0.5em 0; | |
328 | } | |
329 | } |