www.gusucode.com > Destoon B2B仿淘宝电子商务网站 UTF8 v6.0源码程序 > destoon/mobile/static/lib/jquery/jquery.mobile.custom.structure.css
/* * jQuery Mobile v1.4.5 * http://jquerymobile.com * * Copyright 2010, 2014 jQuery Foundation, Inc. and other contributors * Released under the MIT license. * http://jquery.org/license * */ /* Some unsets */ .ui-mobile, .ui-mobile body { height: 99.9%; } .ui-mobile fieldset, .ui-page { padding: 0; margin: 0; } .ui-mobile a img, .ui-mobile fieldset { border-width: 0; } /* Fixes for fieldset issues on IE10 and FF (see #6077) */ .ui-mobile fieldset { min-width: 0; } @-moz-document url-prefix() { .ui-mobile fieldset { display: table-column; vertical-align: middle; } } /* Viewport */ .ui-mobile-viewport { margin: 0; overflow-x: visible; -webkit-text-size-adjust: 100%; -ms-text-size-adjust:none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /* Issue #2066 */ body.ui-mobile-viewport, div.ui-mobile-viewport { overflow-x: hidden; } /* "page" containers - full-screen views, one should always be in view post-pageload */ .ui-mobile [data-role=page], .ui-mobile [data-role=dialog], .ui-page { top: 0; left: 0; width: 100%; min-height: 100%; position: absolute; display: none; border: 0; } /* On ios4, setting focus on the page element causes flashing during transitions when there is an outline, so we turn off outlines */ .ui-page { outline: none; } .ui-mobile .ui-page-active { display: block; overflow: visible; overflow-x: hidden; } @media screen and (orientation: portrait) { .ui-mobile .ui-page { min-height: 420px; } } @media screen and (orientation: landscape) { .ui-mobile .ui-page { min-height: 300px; } } /* Fouc */ .ui-mobile-rendering > * { visibility: hidden; } /* Non-js content hiding */ .ui-nojs { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); } /* Loading screen */ .ui-loading .ui-loader { display: block; } .ui-loader { display: none; z-index: 9999999; position: fixed; top: 50%; left: 50%; border:0; } .ui-loader-default { background: none; filter: Alpha(Opacity=18); opacity: .18; width: 2.875em; height: 2.875em; margin-left: -1.4375em; margin-top: -1.4375em; } .ui-loader-verbose { width: 12.5em; filter: Alpha(Opacity=88); opacity: .88; box-shadow: 0 1px 1px -1px #fff; height: auto; margin-left: -6.875em; margin-top: -2.6875em; padding: .625em; } .ui-loader-default h1 { font-size: 0; width: 0; height: 0; overflow: hidden; } .ui-loader-verbose h1 { font-size: 1em; margin: 0; text-align: center; } .ui-loader .ui-icon-loading { background-color: #000; display: block; margin: 0; width: 2.75em; height: 2.75em; padding: .0625em; -webkit-border-radius: 2.25em; border-radius: 2.25em; } .ui-loader-verbose .ui-icon-loading { margin: 0 auto .625em; filter: Alpha(Opacity=75); opacity: .75; } .ui-loader-textonly { padding: .9375em; margin-left: -7.1875em; } .ui-loader-textonly .ui-icon-loading { display: none; } .ui-loader-fakefix { position: absolute; } /* Headers, content panels */ .ui-bar, .ui-body { position: relative; padding: .4em 1em; overflow: hidden; display: block; clear: both; } .ui-bar h1, .ui-bar h2, .ui-bar h3, .ui-bar h4, .ui-bar h5, .ui-bar h6 { margin: 0; padding: 0; font-size: 1em; display: inline-block; } .ui-header, .ui-footer { border-width: 1px 0; border-style: solid; position: relative; } .ui-header:empty, .ui-footer:empty { min-height: 2.6875em; } .ui-header .ui-title, .ui-footer .ui-title { font-size: 1em; min-height: 1.1em; text-align: center; display: block; margin: 0 30%; padding: .7em 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; outline: 0 !important; } .ui-footer .ui-title { margin: 0 1em; } .ui-content { border-width: 0; overflow: visible; overflow-x: hidden; padding: 1em; } /* Corner styling for dialogs and popups */ .ui-corner-all > .ui-header:first-child, .ui-corner-all > .ui-content:first-child, .ui-corner-all > .ui-footer:first-child { -webkit-border-top-left-radius: inherit; border-top-left-radius: inherit; -webkit-border-top-right-radius: inherit; border-top-right-radius: inherit; } .ui-corner-all > .ui-header:last-child, .ui-corner-all > .ui-content:last-child, .ui-corner-all > .ui-footer:last-child { -webkit-border-bottom-left-radius: inherit; border-bottom-left-radius: inherit; -webkit-border-bottom-right-radius: inherit; border-bottom-right-radius: inherit; } /* Buttons and icons */ .ui-btn { font-size: 16px; margin: .5em 0; padding: .7em 1em; display: block; position: relative; text-align: center; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .ui-btn-icon-notext, .ui-header button.ui-btn.ui-btn-icon-notext, .ui-footer button.ui-btn.ui-btn-icon-notext { padding: 0; width: 1.75em; height: 1.75em; text-indent: -9999px; white-space: nowrap !important; } .ui-mini { font-size: 12.5px; } .ui-mini .ui-btn { font-size: inherit; } /* Make buttons in toolbars default to mini and inline. */ .ui-header .ui-btn, .ui-footer .ui-btn { font-size: 12.5px; display: inline-block; vertical-align: middle; } .ui-header .ui-controlgroup .ui-btn-icon-notext, .ui-footer .ui-controlgroup .ui-btn-icon-notext { font-size: 12.5px; } /* To ensure same top and left/right position when ui-btn-left/right are added to something other than buttons. */ .ui-header .ui-btn-left, .ui-header .ui-btn-right { font-size: 12.5px; } .ui-mini.ui-btn-icon-notext, .ui-mini .ui-btn-icon-notext, .ui-header .ui-btn-icon-notext, .ui-footer .ui-btn-icon-notext { font-size: 16px; padding: 0; } .ui-btn-inline { display: inline-block; vertical-align: middle; margin-right: .625em; } .ui-btn-icon-left { padding-left: 2.5em; } .ui-btn-icon-right { padding-right: 2.5em; } .ui-btn-icon-top { padding-top: 2.5em; } .ui-btn-icon-bottom { padding-bottom: 2.5em; } .ui-header .ui-btn-icon-top, .ui-footer .ui-btn-icon-top, .ui-header .ui-btn-icon-bottom, .ui-footer .ui-btn-icon-bottom { padding-left: .3125em; padding-right: .3125em; } .ui-btn-icon-left:after, .ui-btn-icon-right:after, .ui-btn-icon-top:after, .ui-btn-icon-bottom:after, .ui-btn-icon-notext:after { content: ""; position: absolute; display: block; width: 22px; height: 22px; } .ui-btn-icon-notext:after, .ui-btn-icon-left:after, .ui-btn-icon-right:after { top: 50%; margin-top: -11px; } .ui-btn-icon-left:after { left: .5625em; } .ui-btn-icon-right:after { right: .5625em; } .ui-mini.ui-btn-icon-left:after, .ui-mini .ui-btn-icon-left:after, .ui-header .ui-btn-icon-left:after, .ui-footer .ui-btn-icon-left:after { left: .37em; } .ui-mini.ui-btn-icon-right:after, .ui-mini .ui-btn-icon-right:after, .ui-header .ui-btn-icon-right:after, .ui-footer .ui-btn-icon-right:after { right: .37em; } .ui-btn-icon-notext:after, .ui-btn-icon-top:after, .ui-btn-icon-bottom:after { left: 50%; margin-left: -11px; } .ui-btn-icon-top:after { top: .5625em; } .ui-btn-icon-bottom:after { top: auto; bottom: .5625em; } /* Buttons in header position classes */ .ui-header .ui-btn-left, .ui-header .ui-btn-right, .ui-btn-left > [class*="ui-"], .ui-btn-right > [class*="ui-"] { margin: 0; } .ui-btn-left, .ui-btn-right { position: absolute; top: .24em; } .ui-btn-left { left: .4em; } .ui-btn-right { right: .4em; } .ui-btn-icon-notext.ui-btn-left { top: .3125em; left: .3125em; } .ui-btn-icon-notext.ui-btn-right { top: .3125em; right: .3125em; } /* Button elements */ button.ui-btn, .ui-controlgroup-controls button.ui-btn-icon-notext { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; width: 100%; } button.ui-btn-inline, .ui-header button.ui-btn, .ui-footer button.ui-btn { width: auto; } /* Firefox adds a 1px border in a button element. We negate this to make sure they have the same height as other buttons in controlgroups. */ button.ui-btn::-moz-focus-inner { border: 0; } button.ui-btn-icon-notext, .ui-controlgroup-horizontal .ui-controlgroup-controls button.ui-btn { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; width: 1.75em; } /* Form labels */ .ui-mobile label, .ui-controlgroup-label { display: block; margin: 0 0 .4em; } /* Accessible content hiding */ /* ui-hide-label deprecated in 1.4. TODO: Remove in 1.5 */ .ui-hide-label > label, .ui-hide-label .ui-controlgroup-label, .ui-hide-label .ui-rangeslider label, .ui-hidden-accessible { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); } /* Used for hiding elements by the filterable widget. You can also use this class to hide list items or buttons in controlgroups; this ensures correct corner styling. */ .ui-screen-hidden { display: none !important; } /* Transitions originally inspired by those from jQtouch, nice work, folks */ .ui-mobile-viewport-transitioning, .ui-mobile-viewport-transitioning .ui-page { width: 100%; height: 100%; overflow: hidden; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .ui-page-pre-in { opacity: 0; } .in { -webkit-animation-timing-function: ease-out; -webkit-animation-duration: 350ms; -moz-animation-timing-function: ease-out; -moz-animation-duration: 350ms; animation-timing-function: ease-out; animation-duration: 350ms; } .out { -webkit-animation-timing-function: ease-in; -webkit-animation-duration: 225ms; -moz-animation-timing-function: ease-in; -moz-animation-duration: 225ms; animation-timing-function: ease-in; animation-duration: 225ms; } @-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @-moz-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes fadeout { from { opacity: 1; } to { opacity: 0; } } @-moz-keyframes fadeout { from { opacity: 1; } to { opacity: 0; } } @keyframes fadeout { from { opacity: 1; } to { opacity: 0; } } .fade.out { opacity: 0; -webkit-animation-duration: 125ms; -webkit-animation-name: fadeout; -moz-animation-duration: 125ms; -moz-animation-name: fadeout; animation-duration: 125ms; animation-name: fadeout; } .fade.in { opacity: 1; -webkit-animation-duration: 225ms; -webkit-animation-name: fadein; -moz-animation-duration: 225ms; -moz-animation-name: fadein; animation-duration: 225ms; animation-name: fadein; } /* The properties in this rule are only necessary for the 'flip' transition. * We need specify the perspective to create a projection matrix. This will add * some depth as the element flips. The depth number represents the distance of * the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate * value. */ .viewport-flip { -webkit-perspective: 1000; -moz-perspective: 1000; perspective: 1000; position: absolute; } .flip { -webkit-backface-visibility: hidden; -webkit-transform: translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */ -moz-backface-visibility: hidden; -moz-transform: translateX(0); backface-visibility: hidden; transform: translateX(0); } .flip.out { -webkit-transform: rotateY(-90deg) scale(.9); -webkit-animation-name: flipouttoleft; -webkit-animation-duration: 175ms; -moz-transform: rotateY(-90deg) scale(.9); -moz-animation-name: flipouttoleft; -moz-animation-duration: 175ms; transform: rotateY(-90deg) scale(.9); animation-name: flipouttoleft; animation-duration: 175ms; } .flip.in { -webkit-animation-name: flipintoright; -webkit-animation-duration: 225ms; -moz-animation-name: flipintoright; -moz-animation-duration: 225ms; animation-name: flipintoright; animation-duration: 225ms; } .flip.out.reverse { -webkit-transform: rotateY(90deg) scale(.9); -webkit-animation-name: flipouttoright; -moz-transform: rotateY(90deg) scale(.9); -moz-animation-name: flipouttoright; transform: rotateY(90deg) scale(.9); animation-name: flipouttoright; } .flip.in.reverse { -webkit-animation-name: flipintoleft; -moz-animation-name: flipintoleft; animation-name: flipintoleft; } @-webkit-keyframes flipouttoleft { from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY(-90deg) scale(.9); } } @-moz-keyframes flipouttoleft { from { -moz-transform: rotateY(0); } to { -moz-transform: rotateY(-90deg) scale(.9); } } @keyframes flipouttoleft { from { transform: rotateY(0); } to { transform: rotateY(-90deg) scale(.9); } } @-webkit-keyframes flipouttoright { from { -webkit-transform: rotateY(0) ; } to { -webkit-transform: rotateY(90deg) scale(.9); } } @-moz-keyframes flipouttoright { from { -moz-transform: rotateY(0); } to { -moz-transform: rotateY(90deg) scale(.9); } } @keyframes flipouttoright { from { transform: rotateY(0); } to { transform: rotateY(90deg) scale(.9); } } @-webkit-keyframes flipintoleft { from { -webkit-transform: rotateY(-90deg) scale(.9); } to { -webkit-transform: rotateY(0); } } @-moz-keyframes flipintoleft { from { -moz-transform: rotateY(-90deg) scale(.9); } to { -moz-transform: rotateY(0); } } @keyframes flipintoleft { from { transform: rotateY(-90deg) scale(.9); } to { transform: rotateY(0); } } @-webkit-keyframes flipintoright { from { -webkit-transform: rotateY(90deg) scale(.9); } to { -webkit-transform: rotateY(0); } } @-moz-keyframes flipintoright { from { -moz-transform: rotateY(90deg) scale(.9); } to { -moz-transform: rotateY(0); } } @keyframes flipintoright { from { transform: rotateY(90deg) scale(.9); } to { transform: rotateY(0); } } /* flow transition */ .flow { -webkit-transform-origin: 50% 30%; -webkit-box-shadow: 0 0 20px rgba(0,0,0,.4); -moz-transform-origin: 50% 30%; -moz-box-shadow: 0 0 20px rgba(0,0,0,.4); transform-origin: 50% 30%; box-shadow: 0 0 20px rgba(0,0,0,.4); } .ui-dialog.flow { -webkit-transform-origin: none; -webkit-box-shadow: none; -moz-transform-origin: none; -moz-box-shadow: none; transform-origin: none; box-shadow: none; } .flow.out { -webkit-transform: translateX(-100%) scale(.7); -webkit-animation-name: flowouttoleft; -webkit-animation-timing-function: ease; -webkit-animation-duration: 350ms; -moz-transform: translateX(-100%) scale(.7); -moz-animation-name: flowouttoleft; -moz-animation-timing-function: ease; -moz-animation-duration: 350ms; transform: translateX(-100%) scale(.7); animation-name: flowouttoleft; animation-timing-function: ease; animation-duration: 350ms; } .flow.in { -webkit-transform: translateX(0) scale(1); -webkit-animation-name: flowinfromright; -webkit-animation-timing-function: ease; -webkit-animation-duration: 350ms; -moz-transform: translateX(0) scale(1); -moz-animation-name: flowinfromright; -moz-animation-timing-function: ease; -moz-animation-duration: 350ms; transform: translateX(0) scale(1); animation-name: flowinfromright; animation-timing-function: ease; animation-duration: 350ms; } .flow.out.reverse { -webkit-transform: translateX(100%); -webkit-animation-name: flowouttoright; -moz-transform: translateX(100%); -moz-animation-name: flowouttoright; transform: translateX(100%); animation-name: flowouttoright; } .flow.in.reverse { -webkit-animation-name: flowinfromleft; -moz-animation-name: flowinfromleft; animation-name: flowinfromleft; } @-webkit-keyframes flowouttoleft { 0% { -webkit-transform: translateX(0) scale(1); } 60%, 70% { -webkit-transform: translateX(0) scale(.7); } 100% { -webkit-transform: translateX(-100%) scale(.7); } } @-moz-keyframes flowouttoleft { 0% { -moz-transform: translateX(0) scale(1); } 60%, 70% { -moz-transform: translateX(0) scale(.7); } 100% { -moz-transform: translateX(-100%) scale(.7); } } @keyframes flowouttoleft { 0% { transform: translateX(0) scale(1); } 60%, 70% { transform: translateX(0) scale(.7); } 100% { transform: translateX(-100%) scale(.7); } } @-webkit-keyframes flowouttoright { 0% { -webkit-transform: translateX(0) scale(1); } 60%, 70% { -webkit-transform: translateX(0) scale(.7); } 100% { -webkit-transform: translateX(100%) scale(.7); } } @-moz-keyframes flowouttoright { 0% { -moz-transform: translateX(0) scale(1); } 60%, 70% { -moz-transform: translateX(0) scale(.7); } 100% { -moz-transform: translateX(100%) scale(.7); } } @keyframes flowouttoright { 0% { transform: translateX(0) scale(1); } 60%, 70% { transform: translateX(0) scale(.7); } 100% { transform: translateX(100%) scale(.7); } } @-webkit-keyframes flowinfromleft { 0% { -webkit-transform: translateX(-100%) scale(.7); } 30%, 40% { -webkit-transform: translateX(0) scale(.7); } 100% { -webkit-transform: translateX(0) scale(1); } } @-moz-keyframes flowinfromleft { 0% { -moz-transform: translateX(-100%) scale(.7); } 30%, 40% { -moz-transform: translateX(0) scale(.7); } 100% { -moz-transform: translateX(0) scale(1); } } @keyframes flowinfromleft { 0% { transform: translateX(-100%) scale(.7); } 30%, 40% { transform: translateX(0) scale(.7); } 100% { transform: translateX(0) scale(1); } } @-webkit-keyframes flowinfromright { 0% { -webkit-transform: translateX(100%) scale(.7); } 30%, 40% { -webkit-transform: translateX(0) scale(.7); } 100% { -webkit-transform: translateX(0) scale(1); } } @-moz-keyframes flowinfromright { 0% { -moz-transform: translateX(100%) scale(.7); } 30%, 40% { -moz-transform: translateX(0) scale(.7); } 100% { -moz-transform: translateX(0) scale(1); } } @keyframes flowinfromright { 0% { transform: translateX(100%) scale(.7); } 30%, 40% { transform: translateX(0) scale(.7); } 100% { transform: translateX(0) scale(1); } } .pop { -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; transform-origin: 50% 50%; } .pop.in { -webkit-transform: scale(1); -webkit-animation-name: popin; -webkit-animation-duration: 350ms; -moz-transform: scale(1); -moz-animation-name: popin; -moz-animation-duration: 350ms; transform: scale(1); animation-name: popin; animation-duration: 350ms; opacity: 1; } .pop.out { -webkit-animation-name: fadeout; -webkit-animation-duration: 100ms; -moz-animation-name: fadeout; -moz-animation-duration: 100ms; animation-name: fadeout; animation-duration: 100ms; opacity: 0; } .pop.in.reverse { -webkit-animation-name: fadein; -moz-animation-name: fadein; animation-name: fadein; } .pop.out.reverse { -webkit-transform: scale(.8); -webkit-animation-name: popout; -moz-transform: scale(.8); -moz-animation-name: popout; transform: scale(.8); animation-name: popout; } @-webkit-keyframes popin { from { -webkit-transform: scale(.8); opacity: 0; } to { -webkit-transform: scale(1); opacity: 1; } } @-moz-keyframes popin { from { -moz-transform: scale(.8); opacity: 0; } to { -moz-transform: scale(1); opacity: 1; } } @keyframes popin { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: 1; } } @-webkit-keyframes popout { from { -webkit-transform: scale(1); opacity: 1; } to { -webkit-transform: scale(.8); opacity: 0; } } @-moz-keyframes popout { from { -moz-transform: scale(1); opacity: 1; } to { -moz-transform: scale(.8); opacity: 0; } } @keyframes popout { from { transform: scale(1); opacity: 1; } to { transform: scale(.8); opacity: 0; } } /* keyframes for slidein from sides */ @-webkit-keyframes slideinfromright { from { -webkit-transform: translate3d(100%,0,0); } to { -webkit-transform: translate3d(0,0,0); } } @-moz-keyframes slideinfromright { from { -moz-transform: translateX(100%); } to { -moz-transform: translateX(0); } } @keyframes slideinfromright { from { transform: translateX(100%); } to { transform: translateX(0); } } @-webkit-keyframes slideinfromleft { from { -webkit-transform: translate3d(-100%,0,0); } to { -webkit-transform: translate3d(0,0,0); } } @-moz-keyframes slideinfromleft { from { -moz-transform: translateX(-100%); } to { -moz-transform: translateX(0); } } @keyframes slideinfromleft { from { transform: translateX(-100%); } to { transform: translateX(0); } } /* keyframes for slideout to sides */ @-webkit-keyframes slideouttoleft { from { -webkit-transform: translate3d(0,0,0); } to { -webkit-transform: translate3d(-100%,0,0); } } @-moz-keyframes slideouttoleft { from { -moz-transform: translateX(0); } to { -moz-transform: translateX(-100%); } } @keyframes slideouttoleft { from { transform: translateX(0); } to { transform: translateX(-100%); } } @-webkit-keyframes slideouttoright { from { -webkit-transform: translate3d(0,0,0); } to { -webkit-transform: translate3d(100%,0,0); } } @-moz-keyframes slideouttoright { from { -moz-transform: translateX(0); } to { -moz-transform: translateX(100%); } } @keyframes slideouttoright { from { transform: translateX(0); } to { transform: translateX(100%); } } .slide.out, .slide.in { -webkit-animation-timing-function: ease-out; -webkit-animation-duration: 350ms; -moz-animation-timing-function: ease-out; -moz-animation-duration: 350ms; animation-timing-function: ease-out; animation-duration: 350ms; } .slide.out { -webkit-transform: translate3d(-100%,0,0); -webkit-animation-name: slideouttoleft; -moz-transform: translateX(-100%); -moz-animation-name: slideouttoleft; transform: translateX(-100%); animation-name: slideouttoleft; } .slide.in { -webkit-transform: translate3d(0,0,0); -webkit-animation-name: slideinfromright; -moz-transform: translateX(0); -moz-animation-name: slideinfromright; transform: translateX(0); animation-name: slideinfromright; } .slide.out.reverse { -webkit-transform: translate3d(100%,0,0); -webkit-animation-name: slideouttoright; -moz-transform: translateX(100%); -moz-animation-name: slideouttoright; transform: translateX(100%); animation-name: slideouttoright; } .slide.in.reverse { -webkit-transform: translate3d(0,0,0); -webkit-animation-name: slideinfromleft; -moz-transform: translateX(0); -moz-animation-name: slideinfromleft; transform: translateX(0); animation-name: slideinfromleft; } /* slide down */ .slidedown.out { -webkit-animation-name: fadeout; -webkit-animation-duration: 100ms; -moz-animation-name: fadeout; -moz-animation-duration: 100ms; animation-name: fadeout; animation-duration: 100ms; } .slidedown.in { -webkit-transform: translateY(0); -webkit-animation-name: slideinfromtop; -webkit-animation-duration: 250ms; -moz-transform: translateY(0); -moz-animation-name: slideinfromtop; -moz-animation-duration: 250ms; transform: translateY(0); animation-name: slideinfromtop; animation-duration: 250ms; } .slidedown.in.reverse { -webkit-animation-name: fadein; -webkit-animation-duration: 150ms; -moz-animation-name: fadein; -moz-animation-duration: 150ms; animation-name: fadein; animation-duration: 150ms; } .slidedown.out.reverse { -webkit-transform: translateY(-100%); -webkit-animation-name: slideouttotop; -webkit-animation-duration: 200ms; -moz-transform: translateY(-100%); -moz-animation-name: slideouttotop; -moz-animation-duration: 200ms; transform: translateY(-100%); animation-name: slideouttotop; animation-duration: 200ms; } @-webkit-keyframes slideinfromtop { from { -webkit-transform: translateY(-100%); } to { -webkit-transform: translateY(0); } } @-moz-keyframes slideinfromtop { from { -moz-transform: translateY(-100%); } to { -moz-transform: translateY(0); } } @keyframes slideinfromtop { from { transform: translateY(-100%); } to { transform: translateY(0); } } @-webkit-keyframes slideouttotop { from { -webkit-transform: translateY(0); } to { -webkit-transform: translateY(-100%); } } @-moz-keyframes slideouttotop { from { -moz-transform: translateY(0); } to { -moz-transform: translateY(-100%); } } @keyframes slideouttotop { from { transform: translateY(0); } to { transform: translateY(-100%); } } @-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @-moz-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes fadeout { from { opacity: 1; } to { opacity: 0; } } @-moz-keyframes fadeout { from { opacity: 1; } to { opacity: 0; } } @keyframes fadeout { from { opacity: 1; } to { opacity: 0; } } .fade.out { opacity: 0; -webkit-animation-duration: 125ms; -webkit-animation-name: fadeout; -moz-animation-duration: 125ms; -moz-animation-name: fadeout; animation-duration: 125ms; animation-name: fadeout; } .fade.in { opacity: 1; -webkit-animation-duration: 225ms; -webkit-animation-name: fadein; -moz-animation-duration: 225ms; -moz-animation-name: fadein; animation-duration: 225ms; animation-name: fadein; } /* keyframes for slideout to sides */ @-webkit-keyframes slideouttoleft { from { -webkit-transform: translate3d(0,0,0); } to { -webkit-transform: translate3d(-100%,0,0); } } @-moz-keyframes slideouttoleft { from { -moz-transform: translateX(0); } to { -moz-transform: translateX(-100%); } } @keyframes slideouttoleft { from { transform: translateX(0); } to { transform: translateX(-100%); } } @-webkit-keyframes slideouttoright { from { -webkit-transform: translate3d(0,0,0); } to { -webkit-transform: translate3d(100%,0,0); } } @-moz-keyframes slideouttoright { from { -moz-transform: translateX(0); } to { -moz-transform: translateX(100%); } } @keyframes slideouttoright { from { transform: translateX(0); } to { transform: translateX(100%); } } .slidefade.out { -webkit-transform: translateX(-100%); -webkit-animation-name: slideouttoleft; -webkit-animation-duration: 225ms; -moz-transform: translateX(-100%); -moz-animation-name: slideouttoleft; -moz-animation-duration: 225ms; transform: translateX(-100%); animation-name: slideouttoleft; animation-duration: 225ms; } .slidefade.in { -webkit-transform: translateX(0); -webkit-animation-name: fadein; -webkit-animation-duration: 200ms; -moz-transform: translateX(0); -moz-animation-name: fadein; -moz-animation-duration: 200ms; transform: translateX(0); animation-name: fadein; animation-duration: 200ms; } .slidefade.out.reverse { -webkit-transform: translateX(100%); -webkit-animation-name: slideouttoright; -webkit-animation-duration: 200ms; -moz-transform: translateX(100%); -moz-animation-name: slideouttoright; -moz-animation-duration: 200ms; transform: translateX(100%); animation-name: slideouttoright; animation-duration: 200ms; } .slidefade.in.reverse { -webkit-transform: translateX(0); -webkit-animation-name: fadein; -webkit-animation-duration: 200ms; -moz-transform: translateX(0); -moz-animation-name: fadein; -moz-animation-duration: 200ms; transform: translateX(0); animation-name: fadein; animation-duration: 200ms; } /* slide up */ .slideup.out { -webkit-animation-name: fadeout; -webkit-animation-duration: 100ms; -moz-animation-name: fadeout; -moz-animation-duration: 100ms; animation-name: fadeout; animation-duration: 100ms; } .slideup.in { -webkit-transform: translateY(0); -webkit-animation-name: slideinfrombottom; -webkit-animation-duration: 250ms; -moz-transform: translateY(0); -moz-animation-name: slideinfrombottom; -moz-animation-duration: 250ms; transform: translateY(0); animation-name: slideinfrombottom; animation-duration: 250ms; } .slideup.in.reverse { -webkit-animation-name: fadein; -webkit-animation-duration: 150ms; -moz-animation-name: fadein; -moz-animation-duration: 150ms; animation-name: fadein; animation-duration: 150ms; } .slideup.out.reverse { -webkit-transform: translateY(100%); -webkit-animation-name: slideouttobottom; -webkit-animation-duration: 200ms; -moz-transform: translateY(100%); -moz-animation-name: slideouttobottom; -moz-animation-duration: 200ms; transform: translateY(100%); animation-name: slideouttobottom; animation-duration: 200ms; } @-webkit-keyframes slideinfrombottom { from { -webkit-transform: translateY(100%); } to { -webkit-transform: translateY(0); } } @-moz-keyframes slideinfrombottom { from { -moz-transform: translateY(100%); } to { -moz-transform: translateY(0); } } @keyframes slideinfrombottom { from { transform: translateY(100%); } to { transform: translateY(0); } } @-webkit-keyframes slideouttobottom { from { -webkit-transform: translateY(0); } to { -webkit-transform: translateY(100%); } } @-moz-keyframes slideouttobottom { from { -moz-transform: translateY(0); } to { -moz-transform: translateY(100%); } } @keyframes slideouttobottom { from { transform: translateY(0); } to { transform: translateY(100%); } } /* The properties in this rule are only necessary for the 'flip' transition. * We need specify the perspective to create a projection matrix. This will add * some depth as the element flips. The depth number represents the distance of * the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate * value. */ .viewport-turn { -webkit-perspective: 200px; -moz-perspective: 200px; -ms-perspective: 200px; perspective: 200px; position: absolute; } .turn { -webkit-backface-visibility: hidden; -webkit-transform: translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */ -webkit-transform-origin: 0; -moz-backface-visibility: hidden; -moz-transform: translateX(0); -moz-transform-origin: 0; backface-visibility :hidden; transform: translateX(0); transform-origin: 0; } .turn.out { -webkit-transform: rotateY(-90deg) scale(.9); -webkit-animation-name: flipouttoleft; -webkit-animation-duration: 125ms; -moz-transform: rotateY(-90deg) scale(.9); -moz-animation-name: flipouttoleft; -moz-animation-duration: 125ms; transform: rotateY(-90deg) scale(.9); animation-name: flipouttoleft; animation-duration: 125ms; } .turn.in { -webkit-animation-name: flipintoright; -webkit-animation-duration: 250ms; -moz-animation-name: flipintoright; -moz-animation-duration: 250ms; animation-name: flipintoright; animation-duration: 250ms; } .turn.out.reverse { -webkit-transform: rotateY(90deg) scale(.9); -webkit-animation-name: flipouttoright; -moz-transform: rotateY(90deg) scale(.9); -moz-animation-name: flipouttoright; transform: rotateY(90deg) scale(.9); animation-name: flipouttoright; } .turn.in.reverse { -webkit-animation-name: flipintoleft; -moz-animation-name: flipintoleft; animation-name: flipintoleft; } @-webkit-keyframes flipouttoleft { from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY(-90deg) scale(.9); } } @-moz-keyframes flipouttoleft { from { -moz-transform: rotateY(0); } to { -moz-transform: rotateY(-90deg) scale(.9); } } @keyframes flipouttoleft { from { transform: rotateY(0); } to { transform: rotateY(-90deg) scale(.9); } } @-webkit-keyframes flipouttoright { from { -webkit-transform: rotateY(0) ; } to { -webkit-transform: rotateY(90deg) scale(.9); } } @-moz-keyframes flipouttoright { from { -moz-transform: rotateY(0); } to { -moz-transform: rotateY(90deg) scale(.9); } } @keyframes flipouttoright { from { transform: rotateY(0); } to { transform: rotateY(90deg) scale(.9); } } @-webkit-keyframes flipintoleft { from { -webkit-transform: rotateY(-90deg) scale(.9); } to { -webkit-transform: rotateY(0); } } @-moz-keyframes flipintoleft { from { -moz-transform: rotateY(-90deg) scale(.9); } to { -moz-transform: rotateY(0); } } @keyframes flipintoleft { from { transform: rotateY(-90deg) scale(.9); } to { transform: rotateY(0); } } @-webkit-keyframes flipintoright { from { -webkit-transform: rotateY(90deg) scale(.9); } to { -webkit-transform: rotateY(0); } } @-moz-keyframes flipintoright { from { -moz-transform: rotateY(90deg) scale(.9); } to { -moz-transform: rotateY(0); } } @keyframes flipintoright { from { transform: rotateY(90deg) scale(.9); } to { transform: rotateY(0); } } /* fixed page header & footer configuration */ .ui-header-fixed, .ui-footer-fixed { left: 0; right: 0; width: 100%; position: fixed; z-index: 1000; } .ui-header-fixed { top: -1px; padding-top: 1px; } .ui-header-fixed.ui-fixed-hidden { top: 0; padding-top: 0; } .ui-header-fixed .ui-btn-left, .ui-header-fixed .ui-btn-right { margin-top: 1px; } .ui-header-fixed.ui-fixed-hidden .ui-btn-left, .ui-header-fixed.ui-fixed-hidden .ui-btn-right { margin-top: 0; } .ui-footer-fixed { bottom: -1px; padding-bottom: 1px; } .ui-footer-fixed.ui-fixed-hidden { bottom: 0; padding-bottom: 0; } .ui-header-fullscreen, .ui-footer-fullscreen { filter: Alpha(Opacity=90); opacity: .9; } /* updatePagePadding() will update the padding to actual height of header and footer. */ .ui-page-header-fixed { padding-top: 2.8125em; } .ui-page-footer-fixed { padding-bottom: 2.8125em; } .ui-page-header-fullscreen > .ui-content, .ui-page-footer-fullscreen > .ui-content { padding: 0; } .ui-fixed-hidden { position: absolute; } /* Tap toggle: hide external fixed footer. See issue #6604 */ .ui-footer-fixed.ui-fixed-hidden { display: none; } .ui-page .ui-footer-fixed.ui-fixed-hidden { display: block } .ui-page-header-fullscreen .ui-fixed-hidden, .ui-page-footer-fullscreen .ui-fixed-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); } .ui-header-fixed .ui-btn, .ui-footer-fixed .ui-btn { z-index: 10; } /* workarounds for other widgets */ .ui-android-2x-fixed .ui-li-has-thumb { -webkit-transform: translate3d(0,0,0); }