Mercurial > ~darius > hgwebdir.cgi > iwws
diff static/jqtouch.css @ 0:2d9ee2b3ae82
Initial commit of iWWS.
author | Daniel O'Connor <darius@dons.net.au> |
---|---|
date | Mon, 15 Aug 2011 17:44:56 +0930 |
parents | |
children |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/static/jqtouch.css Mon Aug 15 17:44:56 2011 +0930 @@ -0,0 +1,539 @@ +* { + margin: 0; + padding: 0; +} +a { + -webkit-tap-highlight-color: rgba(0,0,0,0); +} + +body { + -webkit-tap-highlight-color: rgba(0,0,0,0); + -webkit-touch-callout: none; +} + +#jqt { + -webkit-text-size-adjust: none; + -webkit-user-select: none; + bottom: 0; + font-family: "Helvetica Neue", Helvetica; + left: 0; + position: absolute; + right: 0; + top: 0; +} + +#jqt .selectable, #jqt input, #jqt textarea { + -webkit-user-select: auto; +} + +#jqt.notransform { + -webkit-transform: none !important; +} + +#jqt > * { + -webkit-box-sizing: border-box; + display: none; + left: 0; + min-height: 100%; + overflow-x: hidden; + position: absolute; + width: 100%; + z-index: 0; +} + +#jqt > .current { + display: block !important; + z-index: 10; +} + +#jqt .in, #jqt .out { + -webkit-animation-duration: 250ms; + -webkit-animation-fill-mode: both; + -webkit-animation-timing-function: ease-in-out; +} + +#jqt .in { + z-index: 10; +} + +#jqt .out { + z-index: 0 !important; +} + +#jqt.supports3d { + -webkit-perspective: 800; + -webkit-transform-style: preserve-3d; +} + +#jqt.supports3d > * { + -webkit-transform: translate3d(0,0,0) rotate(0) scale(1); +} + + + + + + + + +/* Fade */ + +#jqt .fade.in { + -webkit-animation-name: fadeIn; +} + +#jqt .fade.out { + -webkit-animation-name: fadeOut; +} + +@-webkit-keyframes fadeIn { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +@-webkit-keyframes fadeOut { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} + + + +/* Disolve */ + +#jqt .dissolve.in { + -webkit-animation-name: dissolveIn; +} + +#jqt .dissolve.out { + -webkit-animation-name: dissolveOut; +} + +@-webkit-keyframes dissolveIn { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +@-webkit-keyframes dissolveOut { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} + + + +/* Pop */ + +#jqt .pop.in { + -webkit-animation-name: popIn; +} + +#jqt .pop.out { + -webkit-animation-name: popOut; +} + +@-webkit-keyframes popIn { + 0% { + -webkit-transform: scale(.2); + opacity: 0; + } + 100% { + -webkit-transform: scale(1); + opacity: 1; + } +} + +@-webkit-keyframes popOut { + 0% { + -webkit-transform: scale(1); + opacity: 1; + } + 100% { + -webkit-transform: scale(.2); + opacity: 0; + } +} + + + +/* Slide Left */ + +#jqt .slideleft.in { + -webkit-animation-name: slideLeftIn; +} + +#jqt .slideleft.out { + -webkit-animation-name: slideLeftOut; +} + +@-webkit-keyframes slideLeftIn { + 0% { + -webkit-transform: translateX(100%); + } + 100% { + -webkit-transform: translateX(0); + } +} + +@-webkit-keyframes slideLeftOut { + 0% { + -webkit-transform: translateX(0px); + } + 100% { + -webkit-transform: translateX(-100%); + } +} + + + +/* Slide Right */ + +#jqt .slideright.in { + -webkit-animation-name: slideRightIn; +} + +#jqt .slideright.out { + -webkit-animation-name: slideRightOut; +} + +@-webkit-keyframes slideRightIn { + 0% { + -webkit-transform: translateX(-100%); + } + 100% { + -webkit-transform: translateX(0); + } +} + +@-webkit-keyframes slideRightOut { + 0% { + -webkit-transform: translateX(0); + } + 100% { + -webkit-transform: translateX(100%); + } +} + + + +/* Slide Up */ + +#jqt .slideup.in { + z-index: 10; + -webkit-animation-name: slideUpIn; +} +#jqt .slideup.out { + z-index: 0; + -webkit-animation-name: slideUpOut; +} + +@-webkit-keyframes slideUpIn { + 0% { + -webkit-transform: translateY(100%); + } + 100% { + -webkit-transform: translateY(0); + } +} + +@-webkit-keyframes slideUpOut { + 0% { + -webkit-transform: translateY(0); + } + 100% { + -webkit-transform: translateY(0); + } +} + + + +/* Slide Down */ + +#jqt .slidedown.in { + z-index: 0; + -webkit-animation-name: slideDownIn; +} +#jqt .slidedown.out { + z-index: 10; + -webkit-animation-name: slideDownOut; +} + +@-webkit-keyframes slideDownIn { + 0% { + -webkit-transform: translateY(0); + } + 100% { + -webkit-transform: translateY(0); + } +} + +@-webkit-keyframes slideDownOut { + 0% { + -webkit-transform: translateY(0); + } + 100% { + -webkit-transform: translateY(100%); + } +} + + + + +/* Flip Left */ + +#jqt .flipleft { + -webkit-backface-visibility: hidden; +} + +#jqt .flipleft.in { + -webkit-animation-name: flipLeftIn; +} + +#jqt .flipleft.out { + -webkit-animation-name: flipLeftOut; +} + +@-webkit-keyframes flipLeftIn { + 0% { + -webkit-transform: rotateY(180deg) scale(.8); + } + 100% { + -webkit-transform: rotateY(0deg) scale(1); + } +} + +@-webkit-keyframes flipLeftOut { + 0% { + -webkit-transform: rotateY(0deg) scale(1); + } + 100% { + -webkit-transform: rotateY(-180deg) scale(.8); + } +} + + + +/* Flip Right */ + +#jqt .flipright { + -webkit-backface-visibility: hidden; +} + +#jqt .flipright.in { + -webkit-animation-name: flipRightIn; +} + +#jqt .flipright.out { + -webkit-animation-name: flipRightOut; +} + +@-webkit-keyframes flipRightIn { + 0% { + -webkit-transform: rotateY(-180deg) scale(.8); + } + 100% { + -webkit-transform: rotateY(0deg) scale(1); + } +} + +@-webkit-keyframes flipRightOut { + 0% { + -webkit-transform: rotateY(0deg) scale(1); + } + 100% { + -webkit-transform: rotateY(180deg) scale(.8); + } +} + + + +/* Swap Right */ + +#jqt .swapright { + -webkit-animation-duration: .7s; + -webkit-transform: perspective(800); + -webkit-animation-timing-function: ease-out; +} +#jqt .swapright.in { + -webkit-animation-name: swapRightIn; +} +#jqt .swapright.out { + -webkit-animation-name: swapRightOut; +} + +@-webkit-keyframes swapRightIn { + 0% { + -webkit-transform: translate3d(0px, 0px, -800px) rotateY(70deg); + opacity:0; + } + 35% { + -webkit-transform: translate3d(-180px, 0px, -400px) rotateY(20deg); + opacity:1; + } + 100% { + -webkit-transform: translate3d(0px, 0px, 0px) rotateY(0deg); + opacity:1; + } +} + +@-webkit-keyframes swapRightOut { + 0% { + -webkit-transform: translate3d(0px, 0px, 0px) rotateY(0deg); + opacity:1; + } + 35% { + -webkit-transform: translate3d(180px, 0px, -400px) rotateY(-20deg); + opacity:.5; + } + 100% { + -webkit-transform: translate3d(0px, 0px, -800px) rotateY(-70deg); + opacity:0; + } +} + + + +/* Swap Left */ + +#jqt .swapleft { + -webkit-animation-duration: .7s; + -webkit-transform: perspective(800); + -webkit-animation-timing-function: ease-out; +} +#jqt .swapleft.in { + -webkit-animation-name: swapLeftIn; +} +#jqt .swapleft.out { + -webkit-animation-name: swapLeftOut; +} + +@-webkit-keyframes swapLeftIn { + 0% { + -webkit-transform: translate3d(0px, 0px, -800px) rotateY(-70deg); + opacity:0; + } + 35% { + -webkit-transform: translate3d(180px, 0px, -400px) rotateY(-20deg); + opacity:1; + } + 100% { + opacity:1; + -webkit-transform: translate3d(0px, 0px, 0px) rotateY(0deg); + } +} + +@-webkit-keyframes swapLeftOut { + 0% { + -webkit-transform: translate3d(0px, 0px, 0px) rotateY(0deg); + opacity:1; + } + 35% { + -webkit-transform: translate3d(-180px, 0px, -400px) rotateY(20deg); + opacity:.5; + } + 100% { + -webkit-transform: translate3d(0px, 0px, -800px) rotateY(70deg); + opacity:0; + } +} + + + +/* Cube Left */ + +#jqt .cubeleft { + -webkit-animation-duration: .55s; +} + +#jqt .cubeleft.in { + -webkit-transform-origin: 100% 50%; + -webkit-animation-name: cubeLeftIn; +} + +#jqt .cubeleft.out { + -webkit-transform-origin: 0% 50%; + -webkit-animation-name: cubeLeftOut; +} + +@-webkit-keyframes cubeLeftIn { + 0% { + -webkit-transform: rotateY(90deg) translateZ(100%) scale(.5); + opacity: .5; + } + 100% { + -webkit-transform: rotateY(00deg) translateZ(0) scale(1); + opacity: 1; + } +} + +@-webkit-keyframes cubeLeftOut { + 0% { + -webkit-transform: rotateY(0deg) translateX(0) scale(1); + opacity: 1; + } + 100% { + -webkit-transform: rotateY(-90deg) translateZ(100%) scale(.5); + opacity: .5; + } +} + + + +/* Cube Right */ + +#jqt .cuberight { + -webkit-animation-duration: .55s; +} + +#jqt .cuberight.in { + -webkit-transform-origin: 0% 50%; + -webkit-animation-name: cubeRightIn; +} + +#jqt .cuberight.out { + -webkit-transform-origin: 100% 50%; + -webkit-animation-name: cubeRightOut; +} + +@-webkit-keyframes cubeRightIn { + 0% { + -webkit-transform: rotateY(-90deg) translateZ(100%) scale(.5); + opacity: .5; + } + 100% { + -webkit-transform: rotateY(0deg) translateZ(0) scale(1); + opacity: 1; + } +} + +@-webkit-keyframes cubeRightOut { + 0% { + -webkit-transform: rotateY(0deg) translateX(0) scale(1); + opacity: 1; + } + 100% { + -webkit-transform: rotateY(90deg) translateZ(100%) scale(.5); + opacity: .5; + } +} + + + + + + +