0
|
1 * {
|
|
2 margin: 0;
|
|
3 padding: 0;
|
|
4 }
|
|
5 a {
|
|
6 -webkit-tap-highlight-color: rgba(0,0,0,0);
|
|
7 }
|
|
8
|
|
9 body {
|
|
10 -webkit-tap-highlight-color: rgba(0,0,0,0);
|
|
11 -webkit-touch-callout: none;
|
|
12 }
|
|
13
|
|
14 #jqt {
|
|
15 -webkit-text-size-adjust: none;
|
|
16 -webkit-user-select: none;
|
|
17 bottom: 0;
|
|
18 font-family: "Helvetica Neue", Helvetica;
|
|
19 left: 0;
|
|
20 position: absolute;
|
|
21 right: 0;
|
|
22 top: 0;
|
|
23 }
|
|
24
|
|
25 #jqt .selectable, #jqt input, #jqt textarea {
|
|
26 -webkit-user-select: auto;
|
|
27 }
|
|
28
|
|
29 #jqt.notransform {
|
|
30 -webkit-transform: none !important;
|
|
31 }
|
|
32
|
|
33 #jqt > * {
|
|
34 -webkit-box-sizing: border-box;
|
|
35 display: none;
|
|
36 left: 0;
|
|
37 min-height: 100%;
|
|
38 overflow-x: hidden;
|
|
39 position: absolute;
|
|
40 width: 100%;
|
|
41 z-index: 0;
|
|
42 }
|
|
43
|
|
44 #jqt > .current {
|
|
45 display: block !important;
|
|
46 z-index: 10;
|
|
47 }
|
|
48
|
|
49 #jqt .in, #jqt .out {
|
|
50 -webkit-animation-duration: 250ms;
|
|
51 -webkit-animation-fill-mode: both;
|
|
52 -webkit-animation-timing-function: ease-in-out;
|
|
53 }
|
|
54
|
|
55 #jqt .in {
|
|
56 z-index: 10;
|
|
57 }
|
|
58
|
|
59 #jqt .out {
|
|
60 z-index: 0 !important;
|
|
61 }
|
|
62
|
|
63 #jqt.supports3d {
|
|
64 -webkit-perspective: 800;
|
|
65 -webkit-transform-style: preserve-3d;
|
|
66 }
|
|
67
|
|
68 #jqt.supports3d > * {
|
|
69 -webkit-transform: translate3d(0,0,0) rotate(0) scale(1);
|
|
70 }
|
|
71
|
|
72
|
|
73
|
|
74
|
|
75
|
|
76
|
|
77
|
|
78
|
|
79 /* Fade */
|
|
80
|
|
81 #jqt .fade.in {
|
|
82 -webkit-animation-name: fadeIn;
|
|
83 }
|
|
84
|
|
85 #jqt .fade.out {
|
|
86 -webkit-animation-name: fadeOut;
|
|
87 }
|
|
88
|
|
89 @-webkit-keyframes fadeIn {
|
|
90 0% {
|
|
91 opacity: 0;
|
|
92 }
|
|
93 100% {
|
|
94 opacity: 1;
|
|
95 }
|
|
96 }
|
|
97
|
|
98 @-webkit-keyframes fadeOut {
|
|
99 0% {
|
|
100 opacity: 1;
|
|
101 }
|
|
102 100% {
|
|
103 opacity: 0;
|
|
104 }
|
|
105 }
|
|
106
|
|
107
|
|
108
|
|
109 /* Disolve */
|
|
110
|
|
111 #jqt .dissolve.in {
|
|
112 -webkit-animation-name: dissolveIn;
|
|
113 }
|
|
114
|
|
115 #jqt .dissolve.out {
|
|
116 -webkit-animation-name: dissolveOut;
|
|
117 }
|
|
118
|
|
119 @-webkit-keyframes dissolveIn {
|
|
120 0% {
|
|
121 opacity: 0;
|
|
122 }
|
|
123 100% {
|
|
124 opacity: 1;
|
|
125 }
|
|
126 }
|
|
127
|
|
128 @-webkit-keyframes dissolveOut {
|
|
129 0% {
|
|
130 opacity: 1;
|
|
131 }
|
|
132 100% {
|
|
133 opacity: 0;
|
|
134 }
|
|
135 }
|
|
136
|
|
137
|
|
138
|
|
139 /* Pop */
|
|
140
|
|
141 #jqt .pop.in {
|
|
142 -webkit-animation-name: popIn;
|
|
143 }
|
|
144
|
|
145 #jqt .pop.out {
|
|
146 -webkit-animation-name: popOut;
|
|
147 }
|
|
148
|
|
149 @-webkit-keyframes popIn {
|
|
150 0% {
|
|
151 -webkit-transform: scale(.2);
|
|
152 opacity: 0;
|
|
153 }
|
|
154 100% {
|
|
155 -webkit-transform: scale(1);
|
|
156 opacity: 1;
|
|
157 }
|
|
158 }
|
|
159
|
|
160 @-webkit-keyframes popOut {
|
|
161 0% {
|
|
162 -webkit-transform: scale(1);
|
|
163 opacity: 1;
|
|
164 }
|
|
165 100% {
|
|
166 -webkit-transform: scale(.2);
|
|
167 opacity: 0;
|
|
168 }
|
|
169 }
|
|
170
|
|
171
|
|
172
|
|
173 /* Slide Left */
|
|
174
|
|
175 #jqt .slideleft.in {
|
|
176 -webkit-animation-name: slideLeftIn;
|
|
177 }
|
|
178
|
|
179 #jqt .slideleft.out {
|
|
180 -webkit-animation-name: slideLeftOut;
|
|
181 }
|
|
182
|
|
183 @-webkit-keyframes slideLeftIn {
|
|
184 0% {
|
|
185 -webkit-transform: translateX(100%);
|
|
186 }
|
|
187 100% {
|
|
188 -webkit-transform: translateX(0);
|
|
189 }
|
|
190 }
|
|
191
|
|
192 @-webkit-keyframes slideLeftOut {
|
|
193 0% {
|
|
194 -webkit-transform: translateX(0px);
|
|
195 }
|
|
196 100% {
|
|
197 -webkit-transform: translateX(-100%);
|
|
198 }
|
|
199 }
|
|
200
|
|
201
|
|
202
|
|
203 /* Slide Right */
|
|
204
|
|
205 #jqt .slideright.in {
|
|
206 -webkit-animation-name: slideRightIn;
|
|
207 }
|
|
208
|
|
209 #jqt .slideright.out {
|
|
210 -webkit-animation-name: slideRightOut;
|
|
211 }
|
|
212
|
|
213 @-webkit-keyframes slideRightIn {
|
|
214 0% {
|
|
215 -webkit-transform: translateX(-100%);
|
|
216 }
|
|
217 100% {
|
|
218 -webkit-transform: translateX(0);
|
|
219 }
|
|
220 }
|
|
221
|
|
222 @-webkit-keyframes slideRightOut {
|
|
223 0% {
|
|
224 -webkit-transform: translateX(0);
|
|
225 }
|
|
226 100% {
|
|
227 -webkit-transform: translateX(100%);
|
|
228 }
|
|
229 }
|
|
230
|
|
231
|
|
232
|
|
233 /* Slide Up */
|
|
234
|
|
235 #jqt .slideup.in {
|
|
236 z-index: 10;
|
|
237 -webkit-animation-name: slideUpIn;
|
|
238 }
|
|
239 #jqt .slideup.out {
|
|
240 z-index: 0;
|
|
241 -webkit-animation-name: slideUpOut;
|
|
242 }
|
|
243
|
|
244 @-webkit-keyframes slideUpIn {
|
|
245 0% {
|
|
246 -webkit-transform: translateY(100%);
|
|
247 }
|
|
248 100% {
|
|
249 -webkit-transform: translateY(0);
|
|
250 }
|
|
251 }
|
|
252
|
|
253 @-webkit-keyframes slideUpOut {
|
|
254 0% {
|
|
255 -webkit-transform: translateY(0);
|
|
256 }
|
|
257 100% {
|
|
258 -webkit-transform: translateY(0);
|
|
259 }
|
|
260 }
|
|
261
|
|
262
|
|
263
|
|
264 /* Slide Down */
|
|
265
|
|
266 #jqt .slidedown.in {
|
|
267 z-index: 0;
|
|
268 -webkit-animation-name: slideDownIn;
|
|
269 }
|
|
270 #jqt .slidedown.out {
|
|
271 z-index: 10;
|
|
272 -webkit-animation-name: slideDownOut;
|
|
273 }
|
|
274
|
|
275 @-webkit-keyframes slideDownIn {
|
|
276 0% {
|
|
277 -webkit-transform: translateY(0);
|
|
278 }
|
|
279 100% {
|
|
280 -webkit-transform: translateY(0);
|
|
281 }
|
|
282 }
|
|
283
|
|
284 @-webkit-keyframes slideDownOut {
|
|
285 0% {
|
|
286 -webkit-transform: translateY(0);
|
|
287 }
|
|
288 100% {
|
|
289 -webkit-transform: translateY(100%);
|
|
290 }
|
|
291 }
|
|
292
|
|
293
|
|
294
|
|
295
|
|
296 /* Flip Left */
|
|
297
|
|
298 #jqt .flipleft {
|
|
299 -webkit-backface-visibility: hidden;
|
|
300 }
|
|
301
|
|
302 #jqt .flipleft.in {
|
|
303 -webkit-animation-name: flipLeftIn;
|
|
304 }
|
|
305
|
|
306 #jqt .flipleft.out {
|
|
307 -webkit-animation-name: flipLeftOut;
|
|
308 }
|
|
309
|
|
310 @-webkit-keyframes flipLeftIn {
|
|
311 0% {
|
|
312 -webkit-transform: rotateY(180deg) scale(.8);
|
|
313 }
|
|
314 100% {
|
|
315 -webkit-transform: rotateY(0deg) scale(1);
|
|
316 }
|
|
317 }
|
|
318
|
|
319 @-webkit-keyframes flipLeftOut {
|
|
320 0% {
|
|
321 -webkit-transform: rotateY(0deg) scale(1);
|
|
322 }
|
|
323 100% {
|
|
324 -webkit-transform: rotateY(-180deg) scale(.8);
|
|
325 }
|
|
326 }
|
|
327
|
|
328
|
|
329
|
|
330 /* Flip Right */
|
|
331
|
|
332 #jqt .flipright {
|
|
333 -webkit-backface-visibility: hidden;
|
|
334 }
|
|
335
|
|
336 #jqt .flipright.in {
|
|
337 -webkit-animation-name: flipRightIn;
|
|
338 }
|
|
339
|
|
340 #jqt .flipright.out {
|
|
341 -webkit-animation-name: flipRightOut;
|
|
342 }
|
|
343
|
|
344 @-webkit-keyframes flipRightIn {
|
|
345 0% {
|
|
346 -webkit-transform: rotateY(-180deg) scale(.8);
|
|
347 }
|
|
348 100% {
|
|
349 -webkit-transform: rotateY(0deg) scale(1);
|
|
350 }
|
|
351 }
|
|
352
|
|
353 @-webkit-keyframes flipRightOut {
|
|
354 0% {
|
|
355 -webkit-transform: rotateY(0deg) scale(1);
|
|
356 }
|
|
357 100% {
|
|
358 -webkit-transform: rotateY(180deg) scale(.8);
|
|
359 }
|
|
360 }
|
|
361
|
|
362
|
|
363
|
|
364 /* Swap Right */
|
|
365
|
|
366 #jqt .swapright {
|
|
367 -webkit-animation-duration: .7s;
|
|
368 -webkit-transform: perspective(800);
|
|
369 -webkit-animation-timing-function: ease-out;
|
|
370 }
|
|
371 #jqt .swapright.in {
|
|
372 -webkit-animation-name: swapRightIn;
|
|
373 }
|
|
374 #jqt .swapright.out {
|
|
375 -webkit-animation-name: swapRightOut;
|
|
376 }
|
|
377
|
|
378 @-webkit-keyframes swapRightIn {
|
|
379 0% {
|
|
380 -webkit-transform: translate3d(0px, 0px, -800px) rotateY(70deg);
|
|
381 opacity:0;
|
|
382 }
|
|
383 35% {
|
|
384 -webkit-transform: translate3d(-180px, 0px, -400px) rotateY(20deg);
|
|
385 opacity:1;
|
|
386 }
|
|
387 100% {
|
|
388 -webkit-transform: translate3d(0px, 0px, 0px) rotateY(0deg);
|
|
389 opacity:1;
|
|
390 }
|
|
391 }
|
|
392
|
|
393 @-webkit-keyframes swapRightOut {
|
|
394 0% {
|
|
395 -webkit-transform: translate3d(0px, 0px, 0px) rotateY(0deg);
|
|
396 opacity:1;
|
|
397 }
|
|
398 35% {
|
|
399 -webkit-transform: translate3d(180px, 0px, -400px) rotateY(-20deg);
|
|
400 opacity:.5;
|
|
401 }
|
|
402 100% {
|
|
403 -webkit-transform: translate3d(0px, 0px, -800px) rotateY(-70deg);
|
|
404 opacity:0;
|
|
405 }
|
|
406 }
|
|
407
|
|
408
|
|
409
|
|
410 /* Swap Left */
|
|
411
|
|
412 #jqt .swapleft {
|
|
413 -webkit-animation-duration: .7s;
|
|
414 -webkit-transform: perspective(800);
|
|
415 -webkit-animation-timing-function: ease-out;
|
|
416 }
|
|
417 #jqt .swapleft.in {
|
|
418 -webkit-animation-name: swapLeftIn;
|
|
419 }
|
|
420 #jqt .swapleft.out {
|
|
421 -webkit-animation-name: swapLeftOut;
|
|
422 }
|
|
423
|
|
424 @-webkit-keyframes swapLeftIn {
|
|
425 0% {
|
|
426 -webkit-transform: translate3d(0px, 0px, -800px) rotateY(-70deg);
|
|
427 opacity:0;
|
|
428 }
|
|
429 35% {
|
|
430 -webkit-transform: translate3d(180px, 0px, -400px) rotateY(-20deg);
|
|
431 opacity:1;
|
|
432 }
|
|
433 100% {
|
|
434 opacity:1;
|
|
435 -webkit-transform: translate3d(0px, 0px, 0px) rotateY(0deg);
|
|
436 }
|
|
437 }
|
|
438
|
|
439 @-webkit-keyframes swapLeftOut {
|
|
440 0% {
|
|
441 -webkit-transform: translate3d(0px, 0px, 0px) rotateY(0deg);
|
|
442 opacity:1;
|
|
443 }
|
|
444 35% {
|
|
445 -webkit-transform: translate3d(-180px, 0px, -400px) rotateY(20deg);
|
|
446 opacity:.5;
|
|
447 }
|
|
448 100% {
|
|
449 -webkit-transform: translate3d(0px, 0px, -800px) rotateY(70deg);
|
|
450 opacity:0;
|
|
451 }
|
|
452 }
|
|
453
|
|
454
|
|
455
|
|
456 /* Cube Left */
|
|
457
|
|
458 #jqt .cubeleft {
|
|
459 -webkit-animation-duration: .55s;
|
|
460 }
|
|
461
|
|
462 #jqt .cubeleft.in {
|
|
463 -webkit-transform-origin: 100% 50%;
|
|
464 -webkit-animation-name: cubeLeftIn;
|
|
465 }
|
|
466
|
|
467 #jqt .cubeleft.out {
|
|
468 -webkit-transform-origin: 0% 50%;
|
|
469 -webkit-animation-name: cubeLeftOut;
|
|
470 }
|
|
471
|
|
472 @-webkit-keyframes cubeLeftIn {
|
|
473 0% {
|
|
474 -webkit-transform: rotateY(90deg) translateZ(100%) scale(.5);
|
|
475 opacity: .5;
|
|
476 }
|
|
477 100% {
|
|
478 -webkit-transform: rotateY(00deg) translateZ(0) scale(1);
|
|
479 opacity: 1;
|
|
480 }
|
|
481 }
|
|
482
|
|
483 @-webkit-keyframes cubeLeftOut {
|
|
484 0% {
|
|
485 -webkit-transform: rotateY(0deg) translateX(0) scale(1);
|
|
486 opacity: 1;
|
|
487 }
|
|
488 100% {
|
|
489 -webkit-transform: rotateY(-90deg) translateZ(100%) scale(.5);
|
|
490 opacity: .5;
|
|
491 }
|
|
492 }
|
|
493
|
|
494
|
|
495
|
|
496 /* Cube Right */
|
|
497
|
|
498 #jqt .cuberight {
|
|
499 -webkit-animation-duration: .55s;
|
|
500 }
|
|
501
|
|
502 #jqt .cuberight.in {
|
|
503 -webkit-transform-origin: 0% 50%;
|
|
504 -webkit-animation-name: cubeRightIn;
|
|
505 }
|
|
506
|
|
507 #jqt .cuberight.out {
|
|
508 -webkit-transform-origin: 100% 50%;
|
|
509 -webkit-animation-name: cubeRightOut;
|
|
510 }
|
|
511
|
|
512 @-webkit-keyframes cubeRightIn {
|
|
513 0% {
|
|
514 -webkit-transform: rotateY(-90deg) translateZ(100%) scale(.5);
|
|
515 opacity: .5;
|
|
516 }
|
|
517 100% {
|
|
518 -webkit-transform: rotateY(0deg) translateZ(0) scale(1);
|
|
519 opacity: 1;
|
|
520 }
|
|
521 }
|
|
522
|
|
523 @-webkit-keyframes cubeRightOut {
|
|
524 0% {
|
|
525 -webkit-transform: rotateY(0deg) translateX(0) scale(1);
|
|
526 opacity: 1;
|
|
527 }
|
|
528 100% {
|
|
529 -webkit-transform: rotateY(90deg) translateZ(100%) scale(.5);
|
|
530 opacity: .5;
|
|
531 }
|
|
532 }
|
|
533
|
|
534
|
|
535
|
|
536
|
|
537
|
|
538
|
|
539
|