Mercurial > ~darius > hgwebdir.cgi > iwws

comparison static/jqtouch.css @ 0:2d9ee2b3ae82

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Initial commit of iWWS.
author Daniel O'Connor <darius@dons.net.au>
date Mon, 15 Aug 2011 17:44:56 +0930
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:2d9ee2b3ae82
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