mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-23 01:10:25 +00:00
ad2f977ca8
Created a new loader that has a circle baked into the animated gif so there's less of a chance of artifacts in bad browsers. The edge is chunky because it's a gif but then added 1px of padding to the loader parent and that the border-radius can smooth this out in iOS. Actually looks sharp in Android too because of interaction effects between these rounded corners. Loader spin is faster and more compressed (16 colors). Removed the body-a class on the spinner since we're just setting this to flat black = one less gradient to render.
92 lines
3.9 KiB
CSS
92 lines
3.9 KiB
CSS
/* some unsets - more probably needed */
|
|
.ui-mobile, .ui-mobile body { height: 100%; }
|
|
.ui-mobile fieldset, .ui-page { padding: 0; margin: 0; }
|
|
.ui-mobile a img, .ui-mobile fieldset { border-width: 0; }
|
|
|
|
/* responsive page widths */
|
|
.ui-mobile-viewport { margin: 0; overflow-x: visible; -webkit-text-size-adjust: none; -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; }
|
|
.ui-mobile .ui-page-active { display: block; overflow: visible; }
|
|
|
|
/* 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; }
|
|
|
|
/*orientations from js are available */
|
|
@media screen and (orientation: portrait){
|
|
.ui-mobile, .ui-mobile .ui-page { min-height: 420px; }
|
|
}
|
|
@media screen and (orientation: landscape){
|
|
.ui-mobile, .ui-mobile .ui-page { min-height: 300px; }
|
|
}
|
|
|
|
/* native overflow scrolling */
|
|
.ui-page.ui-mobile-touch-overflow,
|
|
.ui-page.ui-mobile-touch-overflow.ui-page-header-fixed .ui-content,
|
|
.ui-page.ui-mobile-touch-overflow.ui-page-footer-fixed .ui-content {
|
|
overflow: auto;
|
|
height: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
-webkit-overflow-scrolling: touch;
|
|
-moz-overflow-scrolling: touch;
|
|
-o-overflow-scrolling: touch;
|
|
-ms-overflow-scrolling: touch;
|
|
overflow-scrolling: touch;
|
|
}
|
|
.ui-page.ui-mobile-touch-overflow.ui-page-header-fixed {
|
|
overflow: visible;
|
|
}
|
|
.ui-page.ui-mobile-touch-overflow,
|
|
.ui-page.ui-mobile-touch-overflow * {
|
|
/* some level of transform keeps elements from blinking out of visibility on iOS */
|
|
-webkit-transform: rotateY(0);
|
|
}
|
|
.ui-page.ui-mobile-pre-transition {
|
|
display: block;
|
|
}
|
|
|
|
/* loading screen */
|
|
.ui-loading .ui-loader { display: block; }
|
|
.ui-loader { background-color: #000; opacity: .18; display: none; z-index: 9999999; position: fixed; width: 46px; height: 46px; top: 50%; box-shadow: 0 1px 1px -1px #fff; margin-left: -18px; margin-top: -18px; left: 50%; padding: 1px; border:0; -webkit-border-radius: 36px; -moz-border-radius: 36px; border-radius: 36px; }
|
|
.ui-loader h1 { font-size: 0px; width: 0; height: 0; overflow: hidden; }
|
|
.ui-loader .ui-icon { display: block; margin: 0; width: 46px; height: 46px; background-color: transparent; }
|
|
|
|
/*fouc*/
|
|
.ui-mobile-rendering > * { visibility: hidden; }
|
|
|
|
/*headers, content panels*/
|
|
.ui-bar, .ui-body { position: relative; padding: .4em 15px; overflow: hidden; display: block; clear:both; }
|
|
.ui-bar { font-size: 16px; margin: 0; }
|
|
.ui-bar h1, .ui-bar h2, .ui-bar h3, .ui-bar h4, .ui-bar h5, .ui-bar h6 { margin: 0; padding: 0; font-size: 16px; display: inline-block; }
|
|
|
|
.ui-header, .ui-footer { position: relative; border-left-width: 0; border-right-width: 0; }
|
|
.ui-header .ui-btn-left { position: absolute; left: 10px; top: .4em; }
|
|
.ui-header .ui-btn-right { position: absolute; right: 10px; top: .4em; }
|
|
.ui-header .ui-title, .ui-footer .ui-title { min-height: 1.1em; text-align: center; font-size: 16px; display: block; margin: .6em 30% .8em; padding: 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; outline: 0 !important; }
|
|
.ui-footer .ui-title { margin: .6em 15px .8em; }
|
|
.ui-header-fixed .ui-btn {
|
|
z-index: 10;
|
|
}
|
|
|
|
/*content area*/
|
|
.ui-content { border-width: 0; overflow: visible; overflow-x: hidden; padding: 15px; }
|
|
|
|
/* icons sizing */
|
|
.ui-icon { width: 18px; height: 18px; }
|
|
|
|
/* fluid images */
|
|
.ui-mobile img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* non-js content hiding */
|
|
.ui-nojs { position: absolute; left: -9999px; }
|
|
|
|
/* accessible content hiding */
|
|
.ui-hide-label label,
|
|
.ui-hidden-accessible { position: absolute !important; left: -9999px; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); }
|