/* Some unsets */ .ui-mobile, .ui-mobile body { height: 99.9%; margin: 0; padding: 0; } .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; } .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-mobile [data-ui-role=page], .ui-mobile [data-ui-role=dialog], .ui-page { top: 0; left: 0; width: 100%; min-height: 100%; position: absolute; visibility: hidden; 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-page:not(.ui-page-active), [data-role=page]:not(.ui-page-active) { bottom: 0; max-height: 100%; overflow: hidden; } /* Use !important to override "visibility: visible" for any element inside a non-active page */ .ui-page:not(.ui-page-active) * { visibility: hidden !important; } .ui-mobile .ui-page-active { visibility: visible; 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-width: 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; } /* 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-content { border-width: 0; overflow: visible; overflow-x: hidden; padding: 1em; } /* Corner styling for dialogs and popups */ .ui-corner-all > .ui-toolbar-header:first-child, .ui-corner-all > .ui-content:first-child, .ui-corner-all > .ui-toolbar-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-toolbar-header:last-child, .ui-corner-all > .ui-content:last-child, .ui-corner-all > .ui-toolbar-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-button { font-size: 16px; margin: .5em 0; padding: .7em 1em; line-height: 1.5; 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-button-icon-only, .ui-toolbar button.ui-button.ui-button-icon-only, .ui-toolbar-header button.ui-button.ui-button-icon-only, .ui-toolbar-footer button.ui-button.ui-button-icon-only { padding: 0; width: 1.75em; height: 1.75em; text-indent: -9999px; white-space: nowrap !important; } .ui-mini .ui-button, .ui-mini.ui-button, .ui-mini .ui-controlgroup .ui-button-icon-only, .ui-mini.ui-controlgroup .ui-button-icon-only, .ui-controlgroup .ui-button-icon-only.ui-mini { padding: .365em 1em; } .ui-mini .ui-button { font-size: inherit; line-height: inherit; } /* Make buttons in toolbars default to mini and inline. */ .ui-toolbar .ui-button, .ui-toolbar-header .ui-button, .ui-toolbar-footer .ui-button { display: inline-block; vertical-align: middle; } .ui-mini, .ui-toolbar .ui-button, .ui-toolbar-header .ui-button, .ui-toolbar-footer .ui-button, .ui-toolbar .ui-controlgroup .ui-button-icon-only, .ui-toolbar-header .ui-controlgroup .ui-button-icon-only, .ui-toolbar-footer .ui-controlgroup .ui-button-icon-only, .ui-toolbar-header .ui-toolbar-header-button-left, .ui-toolbar-header .ui-toolbar-header-button-right { font-size: 13px; line-height: 1.8462; } .ui-mini.ui-button-icon-only, .ui-mini .ui-button-icon-only, .ui-toolbar .ui-button-icon-only, .ui-toolbar-header .ui-button-icon-only, .ui-toolbar-footer .ui-button-icon-only { font-size: 16px; padding: 0; } .ui-button-inline { display: inline-block; vertical-align: middle; margin-right: .625em; } .ui-icon { display: inline-block; width: 22px; height: 22px; line-height: inherit; vertical-align: middle; margin-top: -2px; } .ui-widget-icon-block { display: block; margin: 0 auto; top: 0; } .ui-button-icon-only .ui-icon { position: absolute; text-indent: 100%; white-space: nowrap; overflow: hidden; top: 50%; left: 50%; } .ui-button-icon-only .ui-icon, .ui-button-icon-only.ui-toolbar-header-button-left > .ui-icon, .ui-button-icon-only.ui-toolbar-header-button-right > .ui-icon { margin-top: -11px; margin-left: -11px; } /* Float icons helper classes */ .ui-widget-icon-floatbeginning { float: left; margin: 1px 1em 0 0; } .ui-widget-icon-floatend { float: right; margin: 1px 0 0 1em; } /* Button elements and input buttons */ button.ui-button, input.ui-button { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; width: 100%; } button.ui-button-inline, input.ui-button-inline, .ui-toolbar button.ui-button, .ui-toolbar-header button.ui-button, .ui-toolbar-footer button.ui-button { 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-button::-moz-focus-inner, input.ui-button::-moz-focus-inner { border: 0; } button.ui-button-icon-only, input.ui-button-icon-only { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; width: 1.75em; } /* Form labels */ .ui-mobile label, .ui-mobile legend { display: block; margin: 0 0 .4em; } /* Accessible content hiding */ .ui-hidden-accessible, .ui-helper-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; }