/* * 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 * */ .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; } .ui-page { /*position: static !important;*/ } /* 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; } /* 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-content: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-content: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 { 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; } .ui-mini.ui-btn-icon-notext, .ui-mini .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-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 { left: .37em; } .ui-mini.ui-btn-icon-right:after, .ui-mini .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-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 { 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; } .ui-field-contain, .ui-mobile fieldset.ui-field-contain { display: block; position: relative; overflow: visible; clear: both; padding: .8em 0; } .ui-field-contain > label ~ [class*="ui-"], .ui-field-contain .ui-controlgroup-controls { margin: 0; } .ui-field-contain:last-child { border-bottom-width: 0; } @media (min-width: 28em) { .ui-field-contain, .ui-mobile fieldset.ui-field-contain { padding: 0; margin: 1em 0; border-bottom-width: 0; } .ui-field-contain:before, .ui-field-contain:after { content: ""; display: table; } .ui-field-contain:after { clear: both; } .ui-field-contain > label, .ui-field-contain .ui-controlgroup-label, .ui-field-contain > .ui-rangeslider > label { float: left; width: 20%; margin: .5em 2% 0 0; } .ui-popup .ui-field-contain > label, .ui-popup .ui-field-contain .ui-controlgroup-label, .ui-popup .ui-field-contain > .ui-rangeslider > label { float: none; width: auto; margin: 0 0 .4em; } .ui-field-contain > label ~ [class*="ui-"], .ui-field-contain .ui-controlgroup-controls { float: left; width: 78%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* ui-hide-label deprecated in 1.4. TODO: Remove in 1.5 */ .ui-hide-label > label ~ [class*="ui-"], .ui-hide-label .ui-controlgroup-controls, .ui-popup .ui-field-contain > label ~ [class*="ui-"], .ui-popup .ui-field-contain .ui-controlgroup-controls { float: none; width: 100%; } .ui-field-contain > label ~ .ui-btn-inline { width: auto; margin-right: .625em; } .ui-field-contain > label ~ .ui-btn-inline.ui-btn-icon-notext { width: 1.75em; } } /* content configurations. */ .ui-grid-a, .ui-grid-b, .ui-grid-c, .ui-grid-d, .ui-grid-solo { overflow: hidden; } .ui-block-a, .ui-block-b, .ui-block-c, .ui-block-d, .ui-block-e { margin: 0; padding: 0; border: 0; float: left; min-height: 1px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* force new row */ .ui-block-a { clear: left; } ul.ui-grid-a, ul.ui-grid-b, ul.ui-grid-c, ul.ui-grid-d, ul.ui-grid-solo, li.ui-block-a, li.ui-block-b, li.ui-block-c, li.ui-block-d, li.ui-block-e { margin-left: 0; margin-right: 0; padding: 0; list-style: none; } /* No margin in grids for 100% width button elements until we can use max-width: fill-available; */ [class*="ui-block-"] > button.ui-btn { margin-right: 0; margin-left: 0; } [class*="ui-block-"] > .ui-btn, [class*="ui-block-"] > .ui-select, [class*="ui-block-"] > .ui-checkbox, [class*="ui-block-"] > .ui-radio, [class*="ui-block-"] > button.ui-btn-inline, [class*="ui-block-"] > button.ui-btn-icon-notext { margin-right: .3125em; margin-left: .3125em; } .ui-grid-a > .ui-block-a, .ui-grid-a > .ui-block-b { /* width: 49.95%; IE7 */ /* margin-right: -.5px; BB5 */ width: 50%; } .ui-grid-b > .ui-block-a, .ui-grid-b > .ui-block-b, .ui-grid-b > .ui-block-c { /* width: 33.25%; IE7 */ /* margin-right: -.5px; BB5 */ width: 33.333%; } .ui-grid-c > .ui-block-a, .ui-grid-c > .ui-block-b, .ui-grid-c > .ui-block-c, .ui-grid-c > .ui-block-d { /* width: 24.925%; IE7 */ /* margin-right: -.5px; BB5 */ width: 25%; } .ui-grid-d > .ui-block-a, .ui-grid-d > .ui-block-b, .ui-grid-d > .ui-block-c, .ui-grid-d > .ui-block-d, .ui-grid-d > .ui-block-e { /* width: 19.925%; IE7 */ width: 20%; } .ui-grid-solo > .ui-block-a { width: 100%; float: none; } /* preset breakpoint to switch to stacked grid styles below 35em (560px) */ @media (max-width: 35em) { .ui-responsive > .ui-block-a, .ui-responsive > .ui-block-b, .ui-responsive > .ui-block-c, .ui-responsive > .ui-block-d, .ui-responsive > .ui-block-e { width: 100%; float: none; } } /* 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; } /* Hide the native input element */ .ui-input-btn input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0; border: 0; outline: 0; -webkit-border-radius: inherit; border-radius: inherit; -webkit-appearance: none; -moz-appearance: none; cursor: pointer; background: #fff; background: rgba(255,255,255,0); filter: Alpha(Opacity=0); opacity: .1; font-size: 1px; text-indent: -9999px; z-index: 2; } /* Fixes IE/WP filter alpha opacity bugs */ .ui-input-btn.ui-state-disabled input { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }