/** * ================================== * Ratchet v1.0.0 * Licensed under The MIT License * http://opensource.org/licenses/MIT * ================================== */ /* Hard reset -------------------------------------------------- */ html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, section, summary, time, audio, video { padding: 0; margin: 0; border: 0; } /* Prevents iOS text size adjust after orientation change, without disabling (Thanks to @necolas) */ html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } /* Base styles -------------------------------------------------- */ body { position: fixed; top: 0; right: 0; bottom: 0; left: 0; font: 14px/1.25 "Helvetica Neue", sans-serif; color: #222; background-color: #fff; } /* Universal link styling */ a { color: #0882f0; text-decoration: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* Removes the dark touch outlines on links */ } /* Wrapper to be used around all content not in .bar-title and .bar-tab */ .content { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: auto; background-color: #fff; -webkit-transition-property: top, bottom; transition-property: top, bottom; -webkit-transition-duration: .2s, .2s; transition-duration: .2s, .2s; -webkit-transition-timing-function: linear, linear; transition-timing-function: linear, linear; -webkit-overflow-scrolling: touch; } /* Hack to force all relatively and absolutely positioned elements still render while scrolling Note: This is a bug for "-webkit-overflow-scrolling: touch" */ .content > * { -webkit-transform: translateZ(0px); transform: translateZ(0px); } /* Utility wrapper to pad in components like forms, block buttons and segmented-controllers so they're not full-bleed */ .content-padded { padding: 10px; } /* Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab. Note: For these to work, content must come after both bars in the markup */ .bar-title ~ .content { top: 44px; } .bar-tab ~ .content { bottom: 51px; } .bar-header-secondary ~ .content { top: 88px; }/* General bar styles -------------------------------------------------- */ [class*="bar-"] { position: fixed; right: 0; left: 0; z-index: 10; height: 44px; padding: 5px; box-sizing: border-box; } /* Modifier class to dock any bar below .bar-title */ .bar-header-secondary { top: 45px; } /* Modifier class to dock any bar to bottom of viewport */ .bar-footer { bottom: 0; } /* Generic bar for wrapping buttons, segmented controllers, etc. */ .bar-standard { background-color: #f2f2f2; background-image: -webkit-linear-gradient(top, #f2f2f2 0, #e5e5e5 100%); background-image: linear-gradient(to bottom, #f2f2f2 0, #e5e5e5 100%); border-bottom: 1px solid #aaa; box-shadow: inset 0 1px 1px -1px #fff; } /* Flip border position to top for footer bars */ .bar-footer.bar-standard, .bar-footer-secondary.bar-standard { border-top: 1px solid #aaa; border-bottom-width: 0; } /* Bars inside the scrollable div */ .bar-scrolling { position: relative; top: auto; } /* Title bar -------------------------------------------------- */ /* Bar docked to top of viewport for showing page title and actions */ .bar-title { top: 0; display: -webkit-box; display: box; background-color: #1eb0e9; background-image: -webkit-linear-gradient(top, #1eb0e9 0, #109adc 100%); background-image: linear-gradient(to bottom, #1eb0e9 0, #109adc 100%); border-bottom: 1px solid #0e5895; box-shadow: inset 0 1px 1px -1px rgba(255, 255, 255, .8); -webkit-box-orient: horizontal; box-orient: horizontal; } /* Centered text in the .bar-title */ .bar-title .title { position: absolute; top: 0; left: 0; display: block; width: 100%; font-size: 20px; font-weight: bold; line-height: 44px; color: #fff; text-align: center; text-shadow: 0 -1px rgba(0, 0, 0, .5); white-space: nowrap; } .bar-title > a:not([class*="button"]) { display: block; width: 100%; height: 100%; } /* Retain specified title color */ .bar-title .title a { color: inherit; } /* Tab bar -------------------------------------------------- */ /* Bar docked to bottom used for primary app navigation */ .bar-tab { bottom: 0; height: 50px; padding: 0; background-color: #393939; background-image: -webkit-linear-gradient(top, #393939 0, #2b2b2b 100%); background-image: linear-gradient(to bottom, #393939 0, #2b2b2b 100%); border-top: 1px solid #000; border-bottom-width: 0; box-shadow: inset 0 1px 1px -1px rgba(255, 255, 255, .6); } /* Wrapper for individual tab */ .tab-inner { display: -webkit-box; display: box; height: 100%; list-style: none; -webkit-box-orient: horizontal; box-orient: horizontal; } /* Navigational tab */ .tab-item { height: 100%; padding-top: 9px; text-align: center; box-sizing: border-box; -webkit-box-flex: 1; box-flex: 1; } /* Active state for tab */ .tab-item.active { box-shadow: inset 0 0 20px rgba(0, 0, 0, .5); } /* Icon for tab */ .tab-icon { display: block; height: 18px; margin: 0 auto; } /* Label for tab */ .tab-label { margin-top: 1px; font-size: 10px; font-weight: bold; color: #fff; text-shadow: 0 1px rgba(0, 0, 0, .3); } /* Buttons in title bars -------------------------------------------------- */ /* Generic style for all buttons in .bar-title */ .bar-title [class*="button"] { position: relative; z-index: 10; /* Places buttons over full width title */ font-size: 12px; line-height: 23px; color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, .3); background-color: #1eb0e9; background-image: -webkit-linear-gradient(top, #1eb0e9 0, #0984c6 100%); background-image: linear-gradient(to bottom, #1eb0e9 0, #0984c6 100%); border: 1px solid #0e5895; box-shadow: 0 1px rgba(255, 255, 255, .25); -webkit-box-flex: 0; box-flex: 0; } /* Hacky way to right align buttons outside of flex-box system Note: is only absolutely positioned button, would be better if flex-box had an "align right" option */ .bar-title .title + [class*="button"]:last-child, .bar-title .button + [class*="button"]:last-child, .bar-title [class*="button"].pull-right { position: absolute; top: 5px; right: 5px; } /* Override standard button active states */ .bar-title .button:active { color: #fff; background-color: #0876b1; } /* Directional buttons in title bars (thanks to @GregorAdams for solution - http://cssnerd.com/2011/11/30/the-best-pure-css3-ios-style-arrow-back-button/) -------------------------------------------------- */ /* Add relative positioning so :before content is positioned properly */ .bar-title .button-prev, .bar-title .button-next { position: relative; } /* Prev/next button base styles */ .bar-title .button-prev { margin-left: 7px; /* Push over to make room for :before content */ border-left: 0; border-bottom-left-radius: 10px 15px; border-top-left-radius: 10px 15px; } .bar-title .button-next { margin-right: 7px; /* Push over to make room for :before content */ border-right: 0; border-top-right-radius: 10px 15px; border-bottom-right-radius: 10px 15px; } /* Pointed part of directional button */ .bar-title .button-prev:before, .bar-title .button-next:before { position: absolute; top: 2px; width: 27px; height: 27px; border-radius: 30px 100px 2px 40px / 2px 40px 30px 100px; content: ''; box-shadow: inset 1px 0 #0e5895, inset 0 1px #0e5895; -webkit-mask-image: -webkit-gradient(linear, left top, right bottom, from(#000), color-stop(.33, #000), color-stop(.5, transparent), to(transparent)); mask-image: gradient(linear, left top, right bottom, from(#000), color-stop(.33, #000), color-stop(.5, transparent), to(transparent)); } .bar-title .button-prev:before { left: -5px; background-image: -webkit-gradient(linear, left bottom, right top, from(#0984c6), to(#1eb0e9)); background-image: gradient(linear, left bottom, right top, from(#0984c6), to(#1eb0e9)); border-left: 1.5px solid rgba(255, 255, 255, .25); -webkit-transform: rotate(-45deg) skew(-10deg, -10deg); transform: rotate(-45deg) skew(-10deg, -10deg); } .bar-title .button-next:before { right: -5px; background-image: -webkit-gradient(linear, left bottom, right top, from(#1eb0e9), to(#0984c6)); background-image: gradient(linear, left bottom, right top, from(#1eb0e9), to(#0984c6)); border-top: 1.5px solid rgba(255, 255, 255, .25); -webkit-transform: rotate(135deg) skew(-10deg, -10deg); transform: rotate(135deg) skew(-10deg, -10deg); } /* Active states for the directional buttons */ .bar-title .button-prev:active, .bar-title .button-next:active, .bar-title .button-prev:active:before, .bar-title .button-next:active:before { color: #fff; background-color: #0876b1; background-image: none; } .bar-title .button-prev:active:before, .bar-title .button-next:active:before { content: ''; } .bar-title .button-prev:active:before { box-shadow: inset 0 3px 3px rgba(0, 0, 0, .2); } .bar-title .button-next:active:before { box-shadow: inset 0 -3px 3px rgba(0, 0, 0, .2); } /* Block buttons in any bar -------------------------------------------------- */ /* Add proper padding and replace buttons normal dropshadow with a shine from bar */ [class*="bar"] .button-block { padding: 7px 0; margin-bottom: 0; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4), 0 1px rgba(255, 255, 255, .8); } /* Override standard padding changes for .button-blocks */ [class*="bar"] .button-block:active { padding: 7px 0; } /* Segmented controller in any bar -------------------------------------------------- */ /* Remove standard segmented bottom margin */ [class*="bar-"] .segmented-controller { margin-bottom: 0; } /* Add margins between segmented controllers and buttons */ [class*="bar-"] .segmented-controller + [class*="button"], [class*="bar-"] [class*="button"] + .segmented-controller { margin-left: 5px; } /* Segmented controller in a title bar -------------------------------------------------- */ .bar-title .segmented-controller { line-height: 18px; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); background-color: #1eb0e9; background-image: -webkit-linear-gradient(top, #1eb0e9 0, #0984c6 100%); background-image: linear-gradient(to bottom, #1eb0e9 0, #0984c6 100%); border: 1px solid #0e5895; border-radius: 3px; box-shadow: 0 1px rgba(255, 255, 255, .25); -webkit-box-flex: 1; box-flex: 1; } /* Set color for tab border and highlight */ .bar-title .segmented-controller li { border-left: 1px solid #0e5895; box-shadow: inset 1px 0 rgba(255, 255, 255, .25); } /* Remove inset shadow from first tab or one to the right of the active tab */ .bar-title .segmented-controller .active + li, .bar-title .segmented-controller li:first-child { box-shadow: none; } /* Remove left-hand border from first tab */ .bar-title .segmented-controller li:first-child { border-left-width: 0; } /* Depressed state (active) */ .bar-title .segmented-controller li.active { background-color: #0082c4; box-shadow: inset 0 1px 6px rgba(0, 0, 0, .3); } /* Set color of links to white */ .bar-title .segmented-controller li > a { color: #fff; } /* Search forms in standard bar -------------------------------------------------- */ /* Position/size search bar within the bar */ .bar-standard input[type=search] { height: 32px; margin: 0; }/* Lists -------------------------------------------------- */ /* Remove usual bullet styles from list */ .list { margin-bottom: 10px; list-style: none; background-color: #fff; } /* Pad each list item and add dividers */ .list li { position: relative; padding: 20px 60px 20px 10px; /* Given extra right padding to accomodate counts, chevrons or buttons */ border-bottom: 1px solid rgba(0, 0, 0, .1); } /* Give top border to first list items */ .list li:first-child { border-top: 1px solid rgba(0, 0, 0, .1); } /* If a list of links, make sure the child takes up full list item tap area (want to avoid selecting child buttons though) */ .list li > a:not([class*="button"]) { position: relative; display: block; padding: inherit; margin: -20px -60px -20px -10px; color: inherit; } /* Inset list -------------------------------------------------- */ .list.inset { width: auto; margin-right: 10px; margin-left: 10px; border: 1px solid rgba(0, 0, 0, .1); border-radius: 6px; box-sizing: border-box; } /* Remove border from first/last standard list items to avoid double border at top/bottom of lists */ .list.inset li:first-child { border-top-width: 0; } .list.inset li:last-child { border-bottom-width: 0; } /* List dividers -------------------------------------------------- */ .list .list-divider { position: relative; top: -1px; padding-top: 6px; padding-bottom: 6px; font-size: 12px; font-weight: bold; line-height: 18px; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); background-color: #f8f8f8; background-image: -webkit-linear-gradient(top, #f8f8f8 0, #eee 100%); background-image: linear-gradient(to bottom, #f8f8f8 0, #eee 100%); border-top: 1px solid rgba(0, 0, 0, .1); border-bottom: 1px solid rgba(0, 0, 0, .1); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4); } /* Rounding first divider on inset lists and remove border on the top */ .list.inset .list-divider:first-child { top: 0; border-top-width: 0; border-radius: 6px 6px 0 0; } /* Rounding last divider on inset lists */ .list.inset .list-divider:last-child { border-radius: 0 0 6px 6px; } /* Right-aligned subcontent in lists (chevrons, buttons, counts and toggles) -------------------------------------------------- */ .list .chevron, .list [class*="button"], .list [class*="count"], .list .toggle { position: absolute; top: 50%; right: 10px; } /* Position chevrons/counts vertically centered on the right in list items */ .list .chevron, .list [class*="count"] { margin-top: -10px; /* Half height of chevron */ } /* Push count over if there's a sibling chevron */ .list .chevron + [class*="count"] { right: 30px; } /* Position buttons vertically centered on the right in list items */ .list [class*="button"] { left: auto; margin-top: -14px; /* Half height of button */ } .list .toggle { margin-top: -15px; /* Half height of toggle */ }/* Forms -------------------------------------------------- */ /* Force form elements to inherit font styles */ input, textarea, button, select { font-family: inherit; font-size: inherit; } /* Stretch inputs/textareas to full width and add height to maintain a consistent baseline */ select, textarea, input[type="text"], input[type=search], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="tel"], input[type="color"], .input-group { width: 100%; height: 40px; padding: 10px; margin-bottom: 10px; background-color: #fff; border: 1px solid rgba(0, 0, 0, .2); border-radius: 3px; box-shadow: 0 1px 1px rgba(255, 255, 255, .2), inset 0 1px 1px rgba(0, 0, 0, .1); -webkit-appearance: none; box-sizing: border-box; } /* Fully round search input */ input[type=search] { height: 34px; font-size: 14px; border-radius: 30px; } /* Allow text area's height to grow larger than a normal input */ textarea { height: auto; } /* Style select button to look like part of the Ratchet's style */ select { height: auto; font-size: 14px; background-color: #f8f8f8; background-image: -webkit-linear-gradient(top, #f8f8f8 0%, #d4d4d4 100%); background-image: linear-gradient(to bottom, #f8f8f8 0%, #d4d4d4 100%); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1); } /* Input groups (cluster multiple inputs together into a single group) -------------------------------------------------- */ /* Reset from initial form setup styles */ .input-group { width: auto; height: auto; padding: 0; } /* Remove spacing, borders, shadows and rounding since it all belongs on the .input-group not the input */ .input-group input { margin-bottom: 0; background-color: transparent; border: 0; border-bottom: 1px solid rgba(0, 0, 0, .2); border-radius: 0; box-shadow: none; } /* Remove bottom border on last input to avoid double bottom border */ .input-group input:last-child { border-bottom-width: 0; } /* Input groups with labels -------------------------------------------------- */ /* To use labels with input groups, wrap a label and an input in an .input-row */ .input-row { overflow: hidden; border-bottom: 1px solid rgba(0, 0, 0, .2); } /* Remove bottom border on last input-row to avoid double bottom border */ .input-row:last-child { border-bottom-width: 0; } /* Labels get floated left with a set percentage width */ .input-row label { float: left; width: 25%; padding: 11px 10px 9px 13px; /* Optimizing the baseline for mobile. */ font-weight: bold; } /* Actual inputs float to right of labels and also have a set percentage */ .input-row label + input { float: right; width: 65%; padding-left: 0; margin-bottom: 0; border-bottom: 0; }/* General button styles -------------------------------------------------- */ [class*="button"] { position: relative; display: inline-block; padding: 4px 12px; margin: 0; font-weight: bold; line-height: 18px; color: #333; text-align: center; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); vertical-align: top; cursor: pointer; background-color: #f8f8f8; background-image: -webkit-linear-gradient(top, #f8f8f8 0, #d4d4d4 100%); background-image: linear-gradient(to bottom, #f8f8f8 0, #d4d4d4 100%); border: 1px solid rgba(0, 0, 0, .3); border-radius: 3px; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4), 0 1px 2px rgba(0, 0, 0, .05); } /* Active */ [class*="button"]:active { padding-top: 5px; padding-bottom: 3px; color: #333; background-color: #ccc; background-image: none; box-shadow: inset 0 3px 3px rgba(0, 0, 0, .2); } /* Button modifiers -------------------------------------------------- */ /* Overriding styles for buttons with modifiers */ .button-main, .button-positive, .button-negative { color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, .3); } /* Main button */ .button-main { background-color: #1eafe7; background-image: -webkit-linear-gradient(top, #1eafe7 0, #1a97c8 100%); background-image: linear-gradient(to bottom, #1eafe7 0, #1a97c8 100%); border: 1px solid #117aaa; } /* Positive button */ .button-positive { background-color: #34ba15; background-image: -webkit-linear-gradient(top, #34ba15 0, #2da012 100%); background-image: linear-gradient(to bottom, #34ba15 0, #2da012 100%); border: 1px solid #278f0f; } /* Negative button */ .button-negative { background-color: #e71e1e; background-image: -webkit-linear-gradient(top, #e71e1e 0,#c71a1a 100%); background-image: linear-gradient(to bottom, #e71e1e 0, #c71a1a 100%); border: 1px solid #b51a1a; } /* Active state for buttons with modifiers */ .button-main:active, .button-positive:active, .button-negative:active { color: #fff; } .button-main:active { background-color: #0876b1; } .button-positive:active { background-color: #298f11; } .button-negative:active { background-color: #b21a1a; } /* Block level buttons (full width buttons) */ .button-block { display: block; padding: 11px 0 13px; margin-bottom: 10px; font-size: 16px; } /* Active state for block level buttons */ .button-block:active { padding: 12px 0; } /* Counts in buttons -------------------------------------------------- */ /* Generic styles for all counts within buttons */ [class*="button"] [class*="count"] { padding-top: 2px; padding-bottom: 2px; margin-right: -4px; margin-left: 4px; text-shadow: none; background-color: rgba(0, 0, 0, .2); box-shadow: inset 0 1px 1px -1px #000000, 0 1px 1px -1px #fff; } /* Position counts within block level buttons Note: These are absolutely positioned so that text of button isn't "pushed" by count and always stays at true center of button */ .button-block [class*="count"] { position: absolute; right: 0; padding-top: 4px; padding-bottom: 4px; margin-right: 10px; }/* Chevrons -------------------------------------------------- */ .chevron { display: block; height: 20px; } /* Base styles for both 1/2's of the chevron */ .chevron:before, .chevron:after { position: relative; display: block; width: 12px; height: 4px; background-color: #999; content: ''; } /* Position and rotate respective 1/2's of the chevron */ .chevron:before { top: 5px; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .chevron:after { top: 7px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }/* General count styles -------------------------------------------------- */ [class*="count"] { display: inline-block; padding: 4px 9px; font-size: 12px; font-weight: bold; line-height: 13px; color: #fff; background-color: rgba(0, 0, 0, .3); border-radius: 100px; } /* Count modifiers -------------------------------------------------- */ /* Overriding styles for counts with modifiers */ .count-main, .count-positive, .count-negative { color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, .3); } /* Main count */ .count-main { background-color: #1eafe7; background-image: -webkit-linear-gradient(top, #1eafe7 0, #1a97c8 100%); background-image: linear-gradient(to bottom, #1eafe7 0, #1a97c8 100%); } /* Positive count */ .count-positive { background-color: #34ba15; background-image: -webkit-linear-gradient(top, #34ba15 0, #2da012 100%); background-image: linear-gradient(to bottom, #34ba15 0, #2da012 100%); } /* Negative count */ .count-negative { background-color: #e71e1e; background-image: -webkit-linear-gradient(top, #e71e1e 0,#c71a1a 100%); background-image: linear-gradient(to bottom, #e71e1e 0, #c71a1a 100%); }/* Segmented controllers -------------------------------------------------- */ .segmented-controller { display: -webkit-box; display: box; margin-bottom: 10px; overflow: hidden; font-size: 12px; font-weight: bold; text-shadow: 0 1px rgba(255, 255, 255, .5); list-style: none; background-color: #f8f8f8; background-image: -webkit-linear-gradient(top, #f8f8f8 0, #d4d4d4 100%); background-image: linear-gradient(to bottom, #f8f8f8 0, #d4d4d4 100%); border: 1px solid #aaa; border-radius: 3px; box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(255, 255, 255, .8); -webkit-box-orient: horizontal; box-orient: horizontal; } /* Section within controller */ .segmented-controller li { overflow: hidden; text-align: center; white-space: nowrap; border-left: 1px solid #aaa; box-shadow: inset 1px 0 rgba(255, 255, 255, .5); -webkit-box-flex: 1; box-flex: 1; } /* Link that fills each section */ .segmented-controller li > a { display: block; padding: 8px 16px; overflow: hidden; line-height: 15px; color: #333; text-overflow: ellipsis; } /* Remove border-left and shadow from first section */ .segmented-controller li:first-child { border-left-width: 0; box-shadow: none; } /* Active segment of controller */ .segmented-controller li.active { background-color: #ccc; box-shadow: inset 0 1px 5px rgba(0, 0, 0, .3); } .segmented-controller-item { display: none; } .segmented-controller-item.active { display: block; }/* Popovers (to be used with popovers.js) -------------------------------------------------- */ .popover { position: fixed; top: 55px; left: 50%; z-index: 20; display: none; width: 280px; padding: 5px; margin-left: -146px; background-color: #555; background-image: -webkit-linear-gradient(top, #555 5%, #555 6%, #111 30%); background-image: linear-gradient(to bottom, #555 5%, #555 6%,#111 30%); border: 1px solid #111; border-radius: 6px; opacity: 0; box-shadow: inset 0 1px 1px -1px #fff, 0 3px 10px rgba(0, 0, 0, .3); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out; transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out; } /* Caret on top of popover using CSS triangles (thanks to @chriscoyier for solution) */ .popover:before, .popover:after { position: absolute; left: 50%; width: 0; height: 0; content: ''; } .popover:before { top: -20px; margin-left: -21px; border-right: 21px solid transparent; border-bottom: 21px solid #111; border-left: 21px solid transparent; } .popover:after { top: -19px; margin-left: -20px; border-right: 20px solid transparent; border-bottom: 20px solid #555; border-left: 20px solid transparent; } /* Wrapper for a title and buttons */ .popover-header { display: -webkit-box; display: box; height: 34px; margin-bottom: 5px; } /* Centered title for popover */ .popover-header .title { position: absolute; top: 0; left: 0; width: 100%; margin: 15px 0; font-size: 16px; font-weight: bold; line-height: 12px; color: #fff; text-align: center; text-shadow: 0 -1px rgba(0, 0, 0, .5); } /* Generic style for all buttons in .popover-header */ .popover-header [class*="button"] { z-index: 25; font-size: 12px; line-height: 22px; color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, .3); background-color: #454545; background-image: -webkit-linear-gradient(top, #454545 0, #353535 100%); background-image: linear-gradient(to bottom, #454545 0, #353535 100%); border: 1px solid #111; -webkit-box-flex: 0; box-flex: 0; } /* Hacky way to right align buttons outside of flex-box system Note: is only absolutely positioned button, would be better if flex-box had an "align right" option */ .popover-header .title + [class*="button"]:last-child, .popover-header .button + [class*="button"]:last-child, .popover-header [class*="button"].pull-right { position: absolute; top: 5px; right: 5px; } /* Active state for popover header buttons */ .popover-header .button:active { color: #fff; background-color: #0876b1; } /* Popover animation -------------------------------------------------- */ .popover.visible { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } /* Backdrop (used as invisible touch escape) -------------------------------------------------- */ .backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; } /* Block level buttons in popovers -------------------------------------------------- */ /* Positioning and giving darker border to look sharp against dark popover */ .popover .button-block { margin-bottom: 5px; border: 1px solid #111; } /* Remove extra margin on bottom of last button */ .popover .button-block:last-child { margin-bottom: 0; } /* Lists in popovers -------------------------------------------------- */ .popover .list { width: auto; max-height: 250px; margin-right: 0; margin-bottom: 0; margin-left: 0; overflow: auto; background-color: #fff; border: 1px solid #000; border-radius: 3px; -webkit-overflow-scrolling: touch; }/* Modals -------------------------------------------------- */ .modal { position: fixed; top: 0; opacity: 0; z-index: 11; width: 100%; min-height: 100%; overflow: hidden; background-color: #fff; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); -webkit-transition: -webkit-transform .25s ease-in-out, opacity 1ms .25s; transition: transform .25s ease-in-out, opacity 1ms .25s; } /* Modal - When active -------------------------------------------------- */ .modal.active { opacity: 1; height: 100%; -webkit-transition: -webkit-transform .25s ease-in-out; transition: transform: .25 ease-in-out; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }/* Slider styles (to be used with sliders.js) -------------------------------------------------- */ /* Width/height of slider */ .slider, .slider > li { width: 100%; height: 200px; } /* Outer wrapper for slider */ .slider { overflow: hidden; background-color: #000; } /* Inner wrapper for slider (width of all slides together) */ .slider > ul { position: relative; font-size: 0; /* Remove spaces from inline-block children */ white-space: nowrap; -webkit-transition: all 0 linear; transition: all 0 linear; } /* Individual slide */ .slider > ul > li { display: inline-block; vertical-align: top; /* Ensure that li always aligns to top */ width: 100%; height: 100%; } /* Required reset of font-size to same as standard body */ .slider > ul > li > * { font-size: 14px; }/* Toggle styles (to be used with toggles.js) -------------------------------------------------- */ .toggle { position: relative; width: 75px; height: 28px; background-color: #eee; border: 1px solid #bbb; border-radius: 20px; box-shadow: inset 0 0 4px rgba(0, 0, 0, .1); } /* Text indicating "on" or "off". Default is "off" */ .toggle:before { position: absolute; right: 13px; font-weight: bold; line-height: 28px; color: #777; text-shadow: 0 1px #fff; text-transform: uppercase; content: "Off"; } /* Sliding handle */ .toggle-handle { position: absolute; top: -1px; left: -1px; z-index: 2; width: 28px; height: 28px; background-color: #fff; background-image: -webkit-linear-gradient(top, #fff 0, #f2f2f2 100%); background-image: linear-gradient(to bottom, #fff 0, #f2f2f2 100%); border: 1px solid rgba(0, 0, 0, .2); border-radius: 100px; -webkit-transition: -webkit-transform 0.1s ease-in-out, border 0.1s ease-in-out; transition: transform 0.1s ease-in-out, border 0.1s ease-in-out; } /* Active state for toggle */ .toggle.active { background-color: #19a8e4; background-image: -webkit-linear-gradient(top, #088cd4 0, #19a8e4 100%); background-image: linear-gradient(to bottom, #088cd4 0, #19a8e4 100%); border: 1px solid #096c9d; box-shadow: inset 0 0 15px rgba(255, 255, 255, .25); } /* Active state for toggle handle */ .toggle.active .toggle-handle { border-color: #0a76ad; -webkit-transform: translate3d(48px,0,0); transform: translate3d(48px,0,0); } /* Change "off" to "on" for active state */ .toggle.active:before { right: auto; left: 15px; color: #fff; text-shadow: 0 -1px rgba(0, 0, 0, 0.25); content: "On"; }/* Push styles (to be used with push.js) -------------------------------------------------- */ /* Fade animation */ .content.fade { left: 0; opacity: 0; -webkit-transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out; } .content.fade.in { opacity: 1; } /* Slide animation */ .content.slide { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: -webkit-transform .25s ease-in-out; transition: transform .25s ease-in-out; } .content.slide.left { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .content.slide.right { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); }/* PullToRefresh styles -------------------------------------------------- */ .scrollable { overflow-y: auto; height: auto; -webkit-overflow-scrolling: touch; position: absolute; } .scrollable .wrap { min-height: 100%; padding-bottom: 1px; background: #f5f5f5; -webkit-transform: translateZ(0); -webkit-user-select: none; -moz-user-select: none; user-select: none; } .wrap { position: relative; } .ptr_box { position: absolute; top: -55px; line-height: 55px; display: block; text-align: center; height: 55px; left: 0px; right: 0px; } .ptr_container { position: relative; width: 230px; margin: auto; height: 40px; top: 15px; } .ptr_image { margin: 5px; margin-top: 20px; height: 30px; width: 30px; zoom: 0.5; background-image: url('data:image/png;base64,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'); -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; background-size: 100% 100%; background-repeat: repeat-x; display: inline-block; background-position: left center; float: left; position: relative; bottom: 0px; -webkit-backface-visibility: hidden } .ptr_image.loading { background-image: url('data:image/png;base64,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'); background-repeat: no-repeat; -webkit-animation-name: rotate; -webkit-animation-duration:0.5s; -webkit-animation-timing-function:linear; -webkit-animation-iteration-count:infinite; -webkit-animation-play-state:running; } .ptr_text { position: relative; top: -10px; left: 20px; float: left; font-size: 20px; } .inserted { border-top: 1px solid #0a0a0a; list-style-type: none; padding: 0; margin: 0; } .inserted ul { padding: 0px; margin: 0px; } @-webkit-keyframes rotate { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } }