summaryrefslogtreecommitdiff
path: root/jqtouch/jqtouch.css
diff options
context:
space:
mode:
Diffstat (limited to 'jqtouch/jqtouch.css')
-rw-r--r--jqtouch/jqtouch.css373
1 files changed, 373 insertions, 0 deletions
diff --git a/jqtouch/jqtouch.css b/jqtouch/jqtouch.css
new file mode 100644
index 0000000..5c3e736
--- /dev/null
+++ b/jqtouch/jqtouch.css
@@ -0,0 +1,373 @@
+* {
+ margin: 0;
+ padding: 0;
+}
+a {
+ -webkit-tap-highlight-color: rgba(0,0,0,0);
+}
+
+div#jqt {
+ /*overflow-x: hidden;*/
+ -webkit-user-select: none;
+ -webkit-text-size-adjust: none;
+ font-family: "Helvetica Neue", Helvetica;
+ -webkit-perspective: 800;
+ -webkit-transform-style: preserve-3d;
+}
+#jqt .selectable, #jqt input, #jqt textarea {
+ -webkit-user-select: auto;
+}
+div#jqt > * {
+ -webkit-backface-visibility: hidden;
+ -webkit-box-sizing: border-box;
+ display: none;
+ position: absolute;
+ left: 0;
+ width: 100%;
+ -webkit-transform: translate3d(0,0,0) rotate(0) scale(1);
+ min-height: 420px !important;
+}
+#jqt.fullscreen > * {
+ min-height: 460px !important;
+}
+#jqt.fullscreen.black-translucent > * {
+ min-height: 480px !important;
+}
+#jqt.landscape > * {
+ min-height: 320px !important;
+}
+div#jqt > .current {
+ display: block !important;
+}
+
+#jqt .in, #jqt .out {
+ -webkit-animation-timing-function: ease-in-out;
+ -webkit-animation-duration: 350ms;
+}
+
+#jqt .slide.in {
+ -webkit-animation-name: slideinfromright;
+}
+
+#jqt .slide.out {
+ -webkit-animation-name: slideouttoleft;
+}
+
+#jqt .slide.in.reverse {
+ -webkit-animation-name: slideinfromleft;
+}
+
+#jqt .slide.out.reverse {
+ -webkit-animation-name: slideouttoright;
+}
+
+@-webkit-keyframes slideinfromright {
+ from { -webkit-transform: translateX(100%); }
+ to { -webkit-transform: translateX(0); }
+}
+
+@-webkit-keyframes slideinfromleft {
+ from { -webkit-transform: translateX(-100%); }
+ to { -webkit-transform: translateX(0); }
+}
+
+@-webkit-keyframes slideouttoleft {
+ from { -webkit-transform: translateX(0); }
+ to { -webkit-transform: translateX(-100%); }
+}
+
+@-webkit-keyframes slideouttoright {
+ from { -webkit-transform: translateX(0); }
+ to { -webkit-transform: translateX(100%); }
+}
+
+@-webkit-keyframes fadein {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
+
+@-webkit-keyframes fadeout {
+ from { opacity: 1; }
+ to { opacity: 0; }
+}
+
+#jqt .fade.in {
+ z-index: 10;
+ -webkit-animation-name: fadein;
+}
+#jqt .fade.out {
+ z-index: 0;
+}
+
+#jqt .dissolve.in {
+ -webkit-animation-name: fadein;
+}
+
+#jqt .dissolve.out {
+ -webkit-animation-name: fadeout;
+}
+
+
+
+#jqt .flip {
+ -webkit-animation-duration: .65s;
+}
+
+#jqt .flip.in {
+ -webkit-animation-name: flipinfromleft;
+}
+
+#jqt .flip.out {
+ -webkit-animation-name: flipouttoleft;
+}
+
+/* Shake it all about */
+
+#jqt .flip.in.reverse {
+ -webkit-animation-name: flipinfromright;
+}
+
+#jqt .flip.out.reverse {
+ -webkit-animation-name: flipouttoright;
+}
+
+@-webkit-keyframes flipinfromright {
+ from { -webkit-transform: rotateY(-180deg) scale(.8); }
+ to { -webkit-transform: rotateY(0) scale(1); }
+}
+
+@-webkit-keyframes flipinfromleft {
+ from { -webkit-transform: rotateY(180deg) scale(.8); }
+ to { -webkit-transform: rotateY(0) scale(1); }
+}
+
+@-webkit-keyframes flipouttoleft {
+ from { -webkit-transform: rotateY(0) scale(1); }
+ to { -webkit-transform: rotateY(-180deg) scale(.8); }
+}
+
+@-webkit-keyframes flipouttoright {
+ from { -webkit-transform: rotateY(0) scale(1); }
+ to { -webkit-transform: rotateY(180deg) scale(.8); }
+}
+
+#jqt .slideup.in {
+ -webkit-animation-name: slideup;
+ z-index: 10;
+}
+
+#jqt .slideup.out {
+ -webkit-animation-name: dontmove;
+ z-index: 0;
+}
+
+#jqt .slideup.out.reverse {
+ z-index: 10;
+ -webkit-animation-name: slidedown;
+}
+
+#jqt .slideup.in.reverse {
+ z-index: 0;
+ -webkit-animation-name: dontmove;
+}
+
+
+@-webkit-keyframes slideup {
+ from { -webkit-transform: translateY(100%); }
+ to { -webkit-transform: translateY(0); }
+}
+
+@-webkit-keyframes slidedown {
+ from { -webkit-transform: translateY(0); }
+ to { -webkit-transform: translateY(100%); }
+}
+
+
+
+/* Hackish, but reliable. */
+
+@-webkit-keyframes dontmove {
+ from { opacity: 1; }
+ to { opacity: 1; }
+}
+
+#jqt .swap {
+ -webkit-transform: perspective(800);
+ -webkit-animation-duration: .7s;
+}
+#jqt .swap.out {
+ -webkit-animation-name: swapouttoleft;
+}
+#jqt .swap.in {
+ -webkit-animation-name: swapinfromright;
+}
+#jqt .swap.out.reverse {
+ -webkit-animation-name: swapouttoright;
+}
+#jqt .swap.in.reverse {
+ -webkit-animation-name: swapinfromleft;
+}
+
+
+@-webkit-keyframes swapouttoright {
+ 0% {
+ -webkit-transform: translate3d(0px, 0px, 0px) rotateY(0deg);
+ -webkit-animation-timing-function: ease-in-out;
+ }
+ 50% {
+ -webkit-transform: translate3d(-180px, 0px, -400px) rotateY(20deg);
+ -webkit-animation-timing-function: ease-in;
+ }
+ 100% {
+ -webkit-transform: translate3d(0px, 0px, -800px) rotateY(70deg);
+ }
+}
+
+@-webkit-keyframes swapouttoleft {
+ 0% {
+ -webkit-transform: translate3d(0px, 0px, 0px) rotateY(0deg);
+ -webkit-animation-timing-function: ease-in-out;
+ }
+ 50% {
+ -webkit-transform: translate3d(180px, 0px, -400px) rotateY(-20deg);
+ -webkit-animation-timing-function: ease-in;
+ }
+ 100% {
+ -webkit-transform: translate3d(0px, 0px, -800px) rotateY(-70deg);
+ }
+}
+
+@-webkit-keyframes swapinfromright {
+ 0% {
+ -webkit-transform: translate3d(0px, 0px, -800px) rotateY(70deg);
+ -webkit-animation-timing-function: ease-out;
+ }
+ 50% {
+ -webkit-transform: translate3d(-180px, 0px, -400px) rotateY(20deg);
+ -webkit-animation-timing-function: ease-in-out;
+ }
+ 100% {
+ -webkit-transform: translate3d(0px, 0px, 0px) rotateY(0deg);
+ }
+}
+
+@-webkit-keyframes swapinfromleft {
+ 0% {
+ -webkit-transform: translate3d(0px, 0px, -800px) rotateY(-70deg);
+ -webkit-animation-timing-function: ease-out;
+ }
+ 50% {
+ -webkit-transform: translate3d(180px, 0px, -400px) rotateY(-20deg);
+ -webkit-animation-timing-function: ease-in-out;
+ }
+ 100% {
+ -webkit-transform: translate3d(0px, 0px, 0px) rotateY(0deg);
+ }
+}
+
+#jqt .cube {
+ -webkit-animation-duration: .55s;
+}
+
+#jqt .cube.in {
+ -webkit-animation-name: cubeinfromright;
+ -webkit-transform-origin: 0% 50%;
+}
+#jqt .cube.out {
+ -webkit-animation-name: cubeouttoleft;
+ -webkit-transform-origin: 100% 50%;
+}
+#jqt .cube.in.reverse {
+ -webkit-animation-name: cubeinfromleft;
+ -webkit-transform-origin: 100% 50%;
+}
+#jqt .cube.out.reverse {
+ -webkit-animation-name: cubeouttoright;
+ -webkit-transform-origin: 0% 50%;
+
+}
+
+@-webkit-keyframes cubeinfromleft {
+ from {
+ -webkit-transform: rotateY(-90deg) translateZ(320px);
+ opacity: .5;
+ }
+ to {
+ -webkit-transform: rotateY(0deg) translateZ(0);
+ opacity: 1;
+ }
+}
+@-webkit-keyframes cubeouttoright {
+ from {
+ -webkit-transform: rotateY(0deg) translateX(0);
+ opacity: 1;
+ }
+ to {
+ -webkit-transform: rotateY(90deg) translateZ(320px);
+ opacity: .5;
+ }
+}
+@-webkit-keyframes cubeinfromright {
+ from {
+ -webkit-transform: rotateY(90deg) translateZ(320px);
+ opacity: .5;
+ }
+ to {
+ -webkit-transform: rotateY(0deg) translateZ(0);
+ opacity: 1;
+ }
+}
+@-webkit-keyframes cubeouttoleft {
+ from {
+ -webkit-transform: rotateY(0deg) translateZ(0);
+ opacity: 1;
+ }
+ to {
+ -webkit-transform: rotateY(-90deg) translateZ(320px);
+ opacity: .5;
+ }
+}
+
+
+
+
+#jqt .pop {
+ -webkit-transform-origin: 50% 50%;
+}
+
+#jqt .pop.in {
+ -webkit-animation-name: popin;
+ z-index: 10;
+}
+
+#jqt .pop.out.reverse {
+ -webkit-animation-name: popout;
+ z-index: 10;
+}
+
+#jqt .pop.in.reverse {
+ z-index: 0;
+ -webkit-animation-name: dontmove;
+}
+
+@-webkit-keyframes popin {
+ from {
+ -webkit-transform: scale(.2);
+ opacity: 0;
+ }
+ to {
+ -webkit-transform: scale(1);
+ opacity: 1;
+ }
+}
+
+@-webkit-keyframes popout {
+ from {
+ -webkit-transform: scale(1);
+ opacity: 1;
+ }
+ to {
+ -webkit-transform: scale(.2);
+ opacity: 0;
+ }
+} \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2024-12-29 15:00:25 +0000