UNPKG

ionic-angular

Version:

A powerful framework for building mobile and progressive web apps with JavaScript and Angular

2,415 lines (1,959 loc) 490 kB
/*! * Ionic Framework * A powerful framework for building mobile and progressive web apps. * http://ionicframework.com/ * * v3.9.9-202004081557, Dark Theme * * Licensed under the MIT license. Please see LICENSE for more information. */ ion-action-sheet { left: 0; top: 0; position: absolute; z-index: 1000; display: block; width: 100%; height: 100%; } .action-sheet-wrapper { left: 0; right: 0; top: 0; bottom: 0; margin: auto; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); position: absolute; z-index: 10; display: block; width: 100%; max-width: 500px; pointer-events: none; } .action-sheet-button { width: 100%; } .action-sheet-container { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: column; -ms-flex-flow: column; flex-flow: column; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; height: 100%; max-height: 100%; } .action-sheet-group { overflow: scroll; -webkit-flex-shrink: 2; -ms-flex-negative: 2; flex-shrink: 2; pointer-events: all; } .action-sheet-group-cancel { overflow: hidden; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; } .action-sheet-ios { text-align: center; } .action-sheet-ios .action-sheet-wrapper { margin: constant(safe-area-inset-top) auto constant(safe-area-inset-bottom); margin: env(safe-area-inset-top) auto env(safe-area-inset-bottom); } .action-sheet-ios .action-sheet-container { padding: 0 10px; } .action-sheet-ios .action-sheet-group { border-radius: 13px; margin-bottom: 8px; background: #f9f9f9; } .action-sheet-ios .action-sheet-group:first-child { margin-top: 10px; } .action-sheet-ios .action-sheet-group:last-child { margin-bottom: 10px; } .action-sheet-ios .action-sheet-title { padding: 1.5rem; text-align: center; border-radius: 0; border-bottom: 0.55px solid #d6d6da; font-size: 1.3rem; font-weight: 400; color: #8f8f8f; } .action-sheet-ios .action-sheet-button { margin: 0; padding: 18px; min-height: 5.6rem; border-bottom: 0.55px solid #d6d6da; font-size: 2rem; color: #007aff; background: transparent; } .action-sheet-ios .action-sheet-button:last-child { border-bottom-color: transparent; } .action-sheet-ios .action-sheet-button.activated { margin-top: -0.55px; border-top: 0.55px solid #ebebeb; border-bottom-color: #ebebeb; background: #ebebeb; } .action-sheet-ios .action-sheet-selected { font-weight: bold; background: #fff; } .action-sheet-ios .action-sheet-destructive { color: #f53d3d; } .action-sheet-ios .action-sheet-cancel { font-weight: 600; background: #fff; } .action-sheet-md .action-sheet-title { text-align: left; text-align: start; font-size: 1.6rem; color: #757575; padding: 11px 16px 17px; } .action-sheet-md .action-sheet-button { text-align: left; text-align: start; position: relative; overflow: hidden; min-height: 4.8rem; font-size: 1.6rem; color: #222; background: transparent; padding: 0 16px; } .action-sheet-md .action-sheet-button.activated { background: #f1f1f1; } .action-sheet-md .action-sheet-icon { padding: 0; text-align: center; width: 2.3rem; font-size: 2.4rem; vertical-align: middle; margin: 0 32px 0 0; } .action-sheet-md .action-sheet-group { background: #fafafa; } .action-sheet-md .action-sheet-group:first-child { padding-top: 0.8rem; } .action-sheet-md .action-sheet-group:last-child { padding-bottom: 0.8rem; } .action-sheet-md .action-sheet-group .button-inner { -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; } .action-sheet-md .action-sheet-selected { font-weight: bold; } .action-sheet-wp .action-sheet-title { text-align: left; text-align: start; font-size: 2rem; color: #4d4d4d; padding: 11px 16px 17px; } .action-sheet-wp .action-sheet-button { text-align: left; text-align: start; min-height: 4.8rem; font-size: 1.5rem; color: #4d4d4d; background: transparent; padding: 0 16px; } .action-sheet-wp .action-sheet-button.activated { background: #aaa; } .action-sheet-wp .action-sheet-icon { padding: 0; text-align: center; width: 2.3rem; font-size: 2.4rem; vertical-align: middle; margin: 0 20px 0 0; } .action-sheet-wp .action-sheet-group { background: #fff; } .action-sheet-wp .action-sheet-group:first-child { padding-top: 0.8rem; box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2); } .action-sheet-wp .action-sheet-group:last-child { padding-bottom: 0.8rem; } .action-sheet-wp .action-sheet-group .button-inner { -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; } .action-sheet-wp .action-sheet-selected { font-weight: bold; } .action-sheet-wp .action-sheet-cancel { background: transparent; } ion-alert { left: 0; right: 0; top: 0; bottom: 0; position: absolute; z-index: 1000; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; contain: strict; } ion-alert.alert-top { padding-top: 50px; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } ion-alert input { width: 100%; } .alert-wrapper { z-index: 10; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; min-width: 250px; max-height: 90%; opacity: 0; contain: content; } .alert-title { margin: 0; padding: 0; } .alert-sub-title { margin: 5px 0 0; padding: 0; font-weight: normal; } .alert-message { overflow-y: scroll; -webkit-overflow-scrolling: touch; } .alert-input { padding: 10px 0; border: 0; background: inherit; } .alert-input::-moz-placeholder { color: #999; } .alert-input:-ms-input-placeholder { color: #999; } .alert-input::-webkit-input-placeholder { text-indent: 0; color: #999; } .alert-button-group { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .alert-button-group-vertical { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .alert-button { margin: 0; z-index: 0; display: block; font-size: 14px; line-height: 20px; } .alert-tappable { text-align: left; text-align: start; -moz-appearance: none; -ms-appearance: none; -webkit-appearance: none; appearance: none; margin: 0; padding: 0; width: 100%; font-size: inherit; line-height: initial; background: transparent; } .alert-ios .alert-wrapper { border-radius: 13px; overflow: hidden; max-width: 270px; background-color: #f8f8f8; box-shadow: none; } .alert-ios .alert-head { text-align: center; padding: 12px 16px 7px; } .alert-ios .alert-title { margin-top: 8px; font-size: 17px; font-weight: 600; } .alert-ios .alert-sub-title { font-size: 14px; color: #666; } .alert-ios .alert-message, .alert-ios .alert-input-group { text-align: center; font-size: 13px; color: inherit; padding: 0 16px 21px; } .alert-ios .alert-message { max-height: 240px; } .alert-ios .alert-message:empty { padding: 0 0 12px; } .alert-ios .alert-input { -moz-appearance: none; -ms-appearance: none; -webkit-appearance: none; appearance: none; margin-top: 10px; border-radius: 4px; border: 0.55px solid #ccc; background-color: #fff; padding: 6px; } .alert-ios .alert-radio-group, .alert-ios .alert-checkbox-group { overflow: scroll; max-height: 240px; border-top: 0.55px solid #dbdbdf; -webkit-overflow-scrolling: touch; } .alert-ios .alert-tappable { display: -webkit-flex; display: -ms-flexbox; display: flex; min-height: 44px; } .alert-ios .alert-radio-label { overflow: hidden; -webkit-flex: 1; -ms-flex: 1; flex: 1; -webkit-order: 0; -ms-flex-order: 0; order: 0; text-overflow: ellipsis; white-space: nowrap; color: initial; padding: 13px; } .alert-ios [aria-checked=true] .alert-radio-label { color: #007aff; } .alert-ios .alert-radio-icon { position: relative; -webkit-order: 1; -ms-flex-order: 1; order: 1; min-width: 30px; } .alert-ios [aria-checked=true] .alert-radio-inner { left: 7px; top: -7px; position: absolute; width: 6px; height: 12px; border-width: 2px; border-top-width: 0; border-left-width: 0; border-style: solid; border-color: #007aff; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .alert-ios .alert-checkbox-label { overflow: hidden; -webkit-flex: 1; -ms-flex: 1; flex: 1; text-overflow: ellipsis; white-space: nowrap; color: initial; padding: 13px; } .alert-ios [aria-checked=true] .alert-checkbox-label { color: initial; } .alert-ios .alert-checkbox-icon { border-radius: 50%; position: relative; width: 21px; height: 21px; border-width: 0.55px; border-style: solid; border-color: #000; background-color: #242424; margin: 10px 6px 10px 16px; } .alert-ios [aria-checked=true] .alert-checkbox-icon { border-color: #007aff; background-color: #007aff; } .alert-ios [aria-checked=true] .alert-checkbox-inner { left: 7px; top: 4px; position: absolute; width: 4px; height: 9px; border-width: 0.55px; border-top-width: 0; border-left-width: 0; border-style: solid; border-color: #191919; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .alert-ios .alert-button-group { margin-right: -0.55px; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .alert-ios .alert-button { margin: 0; border-radius: 0; overflow: hidden; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; min-width: 50%; height: 44px; border-top: 0.55px solid #dbdbdf; border-right: 0.55px solid #dbdbdf; font-size: 17px; color: #007aff; background-color: transparent; } .alert-ios .alert-button:last-child { border-right: 0; font-weight: bold; } .alert-ios .alert-button.activated { background-color: #e9e9e9; } .alert-md .alert-wrapper { border-radius: 2px; max-width: 280px; background-color: #fafafa; box-shadow: 0 16px 20px rgba(0, 0, 0, 0.4); } .alert-md .alert-head { text-align: left; text-align: start; padding: 24px 24px 20px; } .alert-md .alert-title { font-size: 22px; } .alert-md .alert-sub-title { font-size: 16px; } .alert-md .alert-message, .alert-md .alert-input-group { color: rgba(0, 0, 0, 0.5); padding: 0 24px 24px; } .alert-md .alert-message { max-height: 240px; font-size: 15px; } .alert-md .alert-message:empty { padding: 0; } .alert-md .alert-input { margin: 5px 0; border-bottom: 1px solid #dedede; color: #000; } .alert-md .alert-input:focus { margin-bottom: 4px; border-bottom: 2px solid #007aff; } .alert-md .alert-radio-group, .alert-md .alert-checkbox-group { position: relative; overflow: auto; max-height: 240px; border-top: 1px solid #dedede; border-bottom: 1px solid #dedede; } .alert-md .alert-tappable { position: relative; display: -webkit-flex; display: -ms-flexbox; display: flex; overflow: hidden; min-height: 4.4rem; } .alert-md .alert-radio-label { overflow: hidden; -webkit-flex: 1; -ms-flex: 1; flex: 1; text-overflow: ellipsis; white-space: nowrap; color: initial; padding: 13px 26px; } .alert-md .alert-radio-icon { left: 13px; top: 0; border-radius: 50%; position: relative; display: block; width: 16px; height: 16px; border-width: 2px; border-style: solid; border-color: #787878; } .alert-md .alert-radio-inner { left: 2px; top: 2px; border-radius: 50%; position: absolute; width: 8px; height: 8px; background-color: #007aff; -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); transition: -webkit-transform 280ms cubic-bezier(0.4, 0, 0.2, 1); transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1); transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 280ms cubic-bezier(0.4, 0, 0.2, 1); } .alert-md [aria-checked=true] .alert-radio-label { color: #007aff; } .alert-md [aria-checked=true] .alert-radio-icon { border-color: #007aff; } .alert-md [aria-checked=true] .alert-radio-inner { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } .alert-md .alert-checkbox-label { overflow: hidden; -webkit-flex: 1; -ms-flex: 1; flex: 1; text-overflow: ellipsis; white-space: nowrap; color: initial; padding: 13px 26px; } .alert-md [aria-checked=true] .alert-checkbox-label { color: initial; } .alert-md .alert-checkbox-icon { left: 13px; top: 0; border-radius: 2px; position: relative; width: 16px; height: 16px; border-width: 2px; border-style: solid; border-color: #787878; } .alert-md [aria-checked=true] .alert-checkbox-icon { border-color: #007aff; background-color: #007aff; } .alert-md [aria-checked=true] .alert-checkbox-inner { left: 3px; top: 0; position: absolute; width: 6px; height: 10px; border-width: 2px; border-top-width: 0; border-left-width: 0; border-style: solid; border-color: #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .alert-md .alert-button-group { -webkit-flex-wrap: wrap-reverse; -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; padding: 8px 8px 8px 24px; } .alert-md .alert-button { text-align: right; text-align: end; border-radius: 2px; position: relative; overflow: hidden; font-weight: 500; text-transform: uppercase; color: #007aff; background-color: transparent; margin: 0 8px 0 0; padding: 10px; } .alert-md .alert-button.activated { background-color: rgba(158, 158, 158, 0.2); } .alert-md .alert-button .button-inner { -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; } .alert-wp ion-backdrop { background: #fff; } .alert-wp .alert-wrapper { border-radius: 0; width: 100%; max-width: 520px; border: 1px solid #007aff; background: #e6e6e6; } .alert-wp .alert-head { text-align: left; text-align: start; padding: 20px 22px 5px; } .alert-wp .alert-title { font-size: 20px; font-weight: 400; } .alert-wp .alert-sub-title { font-size: 16px; } .alert-wp .alert-message, .alert-wp .alert-input-group { color: #000; padding: 0 22px 8px; } .alert-wp .alert-message { max-height: 240px; font-size: 13px; } .alert-wp .alert-message:empty { padding: 0; } .alert-wp .alert-input { border: 2px solid rgba(0, 0, 0, 0.5); line-height: 3rem; color: #000; margin: 5px 0; padding: 0 8px; } .alert-wp .alert-input:focus { border-color: #007aff; } .alert-wp .alert-radio-group, .alert-wp .alert-checkbox-group { position: relative; overflow: auto; max-height: 240px; } .alert-wp .alert-tappable { position: relative; display: -webkit-flex; display: -ms-flexbox; display: flex; overflow: hidden; min-height: 4.4rem; } .alert-wp .alert-radio-label { overflow: hidden; -webkit-flex: 1; -ms-flex: 1; flex: 1; text-overflow: ellipsis; white-space: nowrap; color: initial; padding: 13px 26px; } .alert-wp .alert-radio-icon { left: 13px; top: 0; margin: 0; border-radius: 50%; position: relative; display: block; width: 16px; height: 16px; border-width: 2px; border-style: solid; border-color: rgba(0, 0, 0, 0.5); } .alert-wp .alert-radio-inner { left: 2px; top: 2px; border-radius: 50%; position: absolute; display: none; width: 8px; height: 8px; background: #007aff; } .alert-wp [aria-checked=true] .alert-radio-label { color: #000; } .alert-wp [aria-checked=true] .alert-radio-icon { border-color: rgba(0, 0, 0, 0.5); } .alert-wp [aria-checked=true] .alert-radio-inner { display: block; } .alert-wp .alert-checkbox-label { overflow: hidden; -webkit-flex: 1; -ms-flex: 1; flex: 1; text-overflow: ellipsis; white-space: nowrap; color: initial; padding: 13px 26px; } .alert-wp [aria-checked=true] .alert-checkbox-label { color: initial; } .alert-wp .alert-checkbox-icon { left: 13px; top: 0; border-radius: 0; position: relative; width: 16px; height: 16px; border-width: 2px; border-style: solid; border-color: rgba(0, 0, 0, 0.5); background: transparent; } .alert-wp [aria-checked=true] .alert-checkbox-icon { border-color: #007aff; background: #007aff; } .alert-wp [aria-checked=true] .alert-checkbox-inner { left: 3px; top: -2px; position: absolute; width: 6px; height: 12px; border-width: 1px; border-top-width: 0; border-left-width: 0; border-style: solid; border-color: #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .alert-wp .alert-button-group { -webkit-flex-wrap: wrap-reverse; -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; padding: 20px 22px; } .alert-wp .alert-button-group-vertical .alert-button { margin-top: 5px; width: 100%; } .alert-wp .alert-button-group-vertical .alert-button:first-child:not(:only-child) { margin-right: 0; margin-top: 0; } .alert-wp .alert-button { border-radius: 0; width: 49.5%; font-weight: 400; color: #000; background: #b8b8b8; padding: 5px; } .alert-wp .alert-button:first-child:not(:only-child) { margin-right: 1%; } .alert-wp .alert-button.activated { background: darkgray; } audio, canvas, progress, video { vertical-align: baseline; } audio:not([controls]) { display: none; height: 0; } b, strong { font-weight: bold; } img { max-width: 100%; border: 0; } svg:not(:root) { overflow: hidden; } figure { margin: 1em 40px; } hr { height: 1px; border-width: 0; box-sizing: content-box; } pre { overflow: auto; } code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } label, input, select, textarea { font-family: inherit; line-height: normal; } textarea { overflow: auto; height: auto; font: inherit; color: inherit; } textarea::-webkit-input-placeholder { padding-left: 2px; } textarea:-ms-input-placeholder { padding-left: 2px; } textarea::placeholder { padding-left: 2px; } form, input, optgroup, select { margin: 0; font: inherit; color: inherit; } html input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; } a, a div, a span, a ion-icon, a ion-label, button, button div, button span, button ion-icon, button ion-label, [tappable], [tappable] div, [tappable] span, [tappable] ion-icon, [tappable] ion-label, input, textarea { -ms-touch-action: manipulation; touch-action: manipulation; } a ion-label, button ion-label { pointer-events: none; } button { border: 0; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: 1; text-transform: none; cursor: pointer; -webkit-appearance: button; } [tappable] { cursor: pointer; } a[disabled], button[disabled], html input[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { padding: 0; border: 0; } input[type="checkbox"], input[type="radio"] { padding: 0; box-sizing: border-box; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } .hide, [hidden], template { display: none !important; } .sticky { position: -webkit-sticky; position: sticky; top: 0; } :focus, :active { outline: none; } .focus-outline :focus { outline: thin dotted; outline-offset: -1px; } .focus-outline button:focus, .focus-outline [ion-button]:focus { border-color: #51a7e8; outline: 2px solid #51a7e8; box-shadow: 0 0 8px 1px #51a7e8; } ion-input :focus { outline: none; } .click-block { display: none; } .click-block-enabled { left: 0; right: 0; top: 0; bottom: 0; -webkit-transform: translate3d(0, -100%, 0) translateY(1px); transform: translate3d(0, -100%, 0) translateY(1px); position: absolute; z-index: 99999; display: block; opacity: 0; contain: strict; } .click-block-active { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } html { width: 100%; height: 100%; font-size: 62.5%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; padding: 0; position: fixed; overflow: hidden; width: 100%; max-width: 100%; height: 100%; max-height: 100%; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; text-rendering: optimizeLegibility; -webkit-user-drag: none; -ms-content-zooming: none; -ms-touch-action: manipulation; touch-action: manipulation; word-wrap: break-word; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; text-size-adjust: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } a { background-color: transparent; } .enable-hover a:hover { opacity: .7; } h1, h2, h3, h4, h5, h6 { margin-top: 1.6rem; margin-bottom: 1rem; font-weight: 500; line-height: 1.2; } [padding] h1:first-child, [padding] h2:first-child, [padding] h3:first-child, [padding] h4:first-child, [padding] h5:first-child, [padding] h6:first-child { margin-top: -0.3rem; } h1 + h2, h1 + h3, h2 + h3 { margin-top: -0.3rem; } h1 { margin-top: 2rem; font-size: 2.6rem; } h2 { margin-top: 1.8rem; font-size: 2.4rem; } h3 { font-size: 2.2rem; } h4 { font-size: 2rem; } h5 { font-size: 1.8rem; } h6 { font-size: 1.6rem; } small { font-size: 75%; } sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; } sup { top: -.5em; } sub { bottom: -.25em; } ion-app, ion-nav, ion-tab, ion-tabs, .app-root { left: 0; top: 0; position: absolute; z-index: 0; display: block; width: 100%; height: 100%; } ion-nav, ion-tab, ion-tabs { overflow: hidden; } ion-tab { display: none; } ion-tab.show-tab { display: block; } ion-app, ion-nav, ion-tab, ion-tabs, .app-root, .ion-page { contain: strict; } .ion-page { left: 0; top: 0; position: absolute; display: block; width: 100%; height: 100%; opacity: 0; } .ion-page.show-page { opacity: 1; } ion-header { left: 0; top: 0; position: absolute; z-index: 10; display: block; width: 100%; } ion-footer { left: 0; bottom: 0; position: absolute; z-index: 10; display: block; width: 100%; } [app-viewport], [overlay-portal], [nav-viewport], [tab-portal], .nav-decor { display: none; } [text-center] { text-align: center !important; } [text-justify] { text-align: justify !important; } [text-start] { text-align: left; text-align: start !important; } [text-end] { text-align: right; text-align: end !important; } [text-left] { text-align: left !important; } [text-right] { text-align: right !important; } [text-nowrap] { white-space: nowrap !important; } [text-wrap] { white-space: normal !important; } @media (min-width: 576px) { [text-sm-center] { text-align: center !important; } [text-sm-justify] { text-align: justify !important; } [text-sm-start] { text-align: left; text-align: start !important; } [text-sm-end] { text-align: right; text-align: end !important; } [text-sm-left] { text-align: left !important; } [text-sm-right] { text-align: right !important; } [text-sm-nowrap] { white-space: nowrap !important; } [text-sm-wrap] { white-space: normal !important; } } @media (min-width: 768px) { [text-md-center] { text-align: center !important; } [text-md-justify] { text-align: justify !important; } [text-md-start] { text-align: left; text-align: start !important; } [text-md-end] { text-align: right; text-align: end !important; } [text-md-left] { text-align: left !important; } [text-md-right] { text-align: right !important; } [text-md-nowrap] { white-space: nowrap !important; } [text-md-wrap] { white-space: normal !important; } } @media (min-width: 992px) { [text-lg-center] { text-align: center !important; } [text-lg-justify] { text-align: justify !important; } [text-lg-start] { text-align: left; text-align: start !important; } [text-lg-end] { text-align: right; text-align: end !important; } [text-lg-left] { text-align: left !important; } [text-lg-right] { text-align: right !important; } [text-lg-nowrap] { white-space: nowrap !important; } [text-lg-wrap] { white-space: normal !important; } } @media (min-width: 1200px) { [text-xl-center] { text-align: center !important; } [text-xl-justify] { text-align: justify !important; } [text-xl-start] { text-align: left; text-align: start !important; } [text-xl-end] { text-align: right; text-align: end !important; } [text-xl-left] { text-align: left !important; } [text-xl-right] { text-align: right !important; } [text-xl-nowrap] { white-space: nowrap !important; } [text-xl-wrap] { white-space: normal !important; } } [text-uppercase] { text-transform: uppercase !important; } [text-lowercase] { text-transform: lowercase !important; } [text-capitalize] { text-transform: capitalize !important; } @media (min-width: 576px) { [text-sm-uppercase] { text-transform: uppercase !important; } [text-sm-lowercase] { text-transform: lowercase !important; } [text-sm-capitalize] { text-transform: capitalize !important; } } @media (min-width: 768px) { [text-md-uppercase] { text-transform: uppercase !important; } [text-md-lowercase] { text-transform: lowercase !important; } [text-md-capitalize] { text-transform: capitalize !important; } } @media (min-width: 992px) { [text-lg-uppercase] { text-transform: uppercase !important; } [text-lg-lowercase] { text-transform: lowercase !important; } [text-lg-capitalize] { text-transform: capitalize !important; } } @media (min-width: 1200px) { [text-xl-uppercase] { text-transform: uppercase !important; } [text-xl-lowercase] { text-transform: lowercase !important; } [text-xl-capitalize] { text-transform: capitalize !important; } } [float-left] { float: left !important; } [float-right] { float: right !important; } [float-start] { float: left !important; } [float-end] { float: right !important; } @media (min-width: 576px) { [float-sm-left] { float: left !important; } [float-sm-right] { float: right !important; } [float-sm-start] { float: left !important; } [float-sm-end] { float: right !important; } } @media (min-width: 768px) { [float-md-left] { float: left !important; } [float-md-right] { float: right !important; } [float-md-start] { float: left !important; } [float-md-end] { float: right !important; } } @media (min-width: 992px) { [float-lg-left] { float: left !important; } [float-lg-right] { float: right !important; } [float-lg-start] { float: left !important; } [float-lg-end] { float: right !important; } } @media (min-width: 1200px) { [float-xl-left] { float: left !important; } [float-xl-right] { float: right !important; } [float-xl-start] { float: left !important; } [float-xl-end] { float: right !important; } } ion-app.ios { font-family: -apple-system, "Helvetica Neue", "Roboto", sans-serif; font-size: 1.4rem; background-color: #191919; } ion-app.md { font-family: "Roboto", "Helvetica Neue", sans-serif; font-size: 1.4rem; background-color: #191919; } ion-app.wp { font-family: "Segoe UI", "Noto Sans", sans-serif; font-size: 1.4rem; background-color: #191919; } ion-backdrop { left: 0; top: 0; position: absolute; z-index: 2; display: block; width: 100%; height: 100%; background-color: #000; opacity: .01; -webkit-transform: translateZ(0); transform: translateZ(0); } ion-backdrop.backdrop-no-tappable { cursor: auto; } ion-badge { padding: 3px 8px; text-align: center; display: inline-block; min-width: 10px; font-size: 1.3rem; font-weight: bold; line-height: 1; white-space: nowrap; vertical-align: baseline; } ion-badge:empty { display: none; } .badge-ios { border-radius: 10px; color: #fff; background-color: #007aff; } .badge-ios-primary { color: #fff; background-color: #007aff; } .badge-ios-secondary { color: #fff; background-color: #32db64; } .badge-ios-danger { color: #fff; background-color: #d91e18; } .badge-ios-light { color: #000; background-color: #f4f4f4; } .badge-ios-dark { color: #fff; background-color: #222; } .badge-md { border-radius: 4px; color: #fff; background-color: #007aff; } .badge-md-primary { color: #fff; background-color: #007aff; } .badge-md-secondary { color: #fff; background-color: #32db64; } .badge-md-danger { color: #fff; background-color: #d91e18; } .badge-md-light { color: #000; background-color: #f4f4f4; } .badge-md-dark { color: #fff; background-color: #222; } .badge-wp { border-radius: 0; color: #fff; background-color: #007aff; } .badge-wp-primary { color: #fff; background-color: #007aff; } .badge-wp-secondary { color: #fff; background-color: #32db64; } .badge-wp-danger { color: #fff; background-color: #d91e18; } .badge-wp-light { color: #000; background-color: #f4f4f4; } .badge-wp-dark { color: #fff; background-color: #222; } .button { text-align: center; -moz-appearance: none; -ms-appearance: none; -webkit-appearance: none; appearance: none; position: relative; z-index: 0; display: inline-block; text-overflow: ellipsis; text-transform: none; white-space: nowrap; cursor: pointer; vertical-align: top; vertical-align: -webkit-baseline-middle; transition: background-color, opacity 100ms linear; -webkit-font-kerning: none; font-kerning: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; contain: content; } .button-inner { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 100%; } [ion-button] { text-decoration: none; } a[disabled], button[disabled], [ion-button][disabled] { cursor: default; opacity: .4; pointer-events: none; } .button-block { display: block; clear: both; width: 100%; contain: strict; } .button-block::after { clear: both; } .button-full { display: block; width: 100%; contain: strict; } .button-full.button-outline { border-radius: 0; border-right-width: 0; border-left-width: 0; } [icon-left] ion-icon, [icon-start] ion-icon { font-size: 1.4em; line-height: .67; pointer-events: none; padding-right: 0.3em; } [icon-right] ion-icon, [icon-end] ion-icon { font-size: 1.4em; line-height: .67; pointer-events: none; padding-left: 0.4em; } .button[icon-only] { padding: 0; min-width: .9em; } [icon-only] ion-icon { padding: 0 0.5em; font-size: 1.8em; line-height: .67; pointer-events: none; } .button-ios { border-radius: 4px; height: 2.8em; font-size: 1.6rem; color: #fff; background-color: #007aff; margin: 0.4rem 0.2rem; padding: 0 1em; } .button-ios.activated { background-color: #1485ff; opacity: 1; } .button-ios:hover:not(.disable-hover) { opacity: 0.8; } .button-large-ios { height: 2.8em; font-size: 2rem; padding: 0 1em; } .button-small-ios { height: 2.1em; font-size: 1.3rem; padding: 0 0.9em; } .button-small-ios[icon-only] ion-icon { font-size: 1.3em; } .button-block-ios { margin-left: 0; margin-right: 0; } .button-full-ios { margin-left: 0; margin-right: 0; border-radius: 0; border-right-width: 0; border-left-width: 0; } .button-outline-ios { border-radius: 4px; border-width: 1px; border-style: solid; border-color: #007aff; color: #007aff; background-color: transparent; } .button-outline-ios.activated { color: #fff; background-color: #007aff; opacity: 1; } .button-clear-ios { border-color: transparent; color: #007aff; background-color: transparent; } .button-clear-ios.activated { background-color: transparent; opacity: 0.4; } .button-clear-ios:hover:not(.disable-hover) { color: #007aff; opacity: 0.6; } .button-round-ios { border-radius: 64px; padding: 0 2.6rem; } .button-ios-primary { color: #fff; background-color: #007aff; } .button-ios-primary.activated { background-color: #1485ff; } .button-outline-ios-primary { border-color: #007aff; color: #007aff; background-color: transparent; } .button-outline-ios-primary.activated { color: #fff; background-color: #007aff; } .button-clear-ios-primary { border-color: transparent; color: #007aff; background-color: transparent; } .button-clear-ios-primary.activated { opacity: 0.4; } .button-clear-ios-primary:hover:not(.disable-hover) { color: #007aff; } .button-ios-secondary { color: #fff; background-color: #32db64; } .button-ios-secondary.activated { background-color: #2ec95c; } .button-outline-ios-secondary { border-color: #32db64; color: #32db64; background-color: transparent; } .button-outline-ios-secondary.activated { color: #fff; background-color: #32db64; } .button-clear-ios-secondary { border-color: transparent; color: #32db64; background-color: transparent; } .button-clear-ios-secondary.activated { opacity: 0.4; } .button-clear-ios-secondary:hover:not(.disable-hover) { color: #32db64; } .button-ios-danger { color: #fff; background-color: #d91e18; } .button-ios-danger.activated { background-color: #dc302a; } .button-outline-ios-danger { border-color: #d91e18; color: #d91e18; background-color: transparent; } .button-outline-ios-danger.activated { color: #fff; background-color: #d91e18; } .button-clear-ios-danger { border-color: transparent; color: #d91e18; background-color: transparent; } .button-clear-ios-danger.activated { opacity: 0.4; } .button-clear-ios-danger:hover:not(.disable-hover) { color: #d91e18; } .button-ios-light { color: #000; background-color: #f4f4f4; } .button-ios-light.activated { background-color: #e0e0e0; } .button-outline-ios-light { border-color: #f4f4f4; color: #f4f4f4; background-color: transparent; } .button-outline-ios-light.activated { color: #000; background-color: #f4f4f4; } .button-clear-ios-light { border-color: transparent; color: #f4f4f4; background-color: transparent; } .button-clear-ios-light.activated { opacity: 0.4; } .button-clear-ios-light:hover:not(.disable-hover) { color: #f4f4f4; } .button-ios-dark { color: #fff; background-color: #222; } .button-ios-dark.activated { background-color: #343434; } .button-outline-ios-dark { border-color: #222; color: #222; background-color: transparent; } .button-outline-ios-dark.activated { color: #fff; background-color: #222; } .button-clear-ios-dark { border-color: transparent; color: #222; background-color: transparent; } .button-clear-ios-dark.activated { opacity: 0.4; } .button-clear-ios-dark:hover:not(.disable-hover) { color: #222; } .button-strong-ios { font-weight: 600; } .button-md { border-radius: 2px; overflow: hidden; height: 3.6rem; font-size: 1.4rem; font-weight: 500; text-transform: uppercase; color: #fff; background-color: #007aff; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1), background-color 300ms cubic-bezier(0.4, 0, 0.2, 1), color 300ms cubic-bezier(0.4, 0, 0.2, 1); margin: 0.4rem 0.2rem; padding: 0 1.1em; } .button-md:hover:not(.disable-hover) { background-color: #007aff; } .button-md.activated { background-color: #1485ff; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.14), 0 3px 5px rgba(0, 0, 0, 0.21), 0 0 0 0 transparent; } .button-md .button-effect { background-color: #fff; } .button-large-md { height: 2.8em; font-size: 2rem; padding: 0 1em; } .button-small-md { height: 2.1em; font-size: 1.3rem; padding: 0 0.9em; } .button-small-md[icon-only] ion-icon { font-size: 1.4em; } .button-block-md { margin-left: 0; margin-right: 0; } .button-full-md { margin-left: 0; margin-right: 0; border-radius: 0; border-right-width: 0; border-left-width: 0; } .button-outline-md { border-width: 1px; border-style: solid; border-color: #007aff; color: #007aff; background-color: transparent; box-shadow: none; } .button-outline-md:hover:not(.disable-hover) { background-color: rgba(158, 158, 158, 0.1); } .button-outline-md.activated { background-color: transparent; box-shadow: none; opacity: 1; } .button-outline-md .button-effect { background-color: #007aff; } .button-clear-md { border-color: transparent; color: #007aff; background-color: transparent; box-shadow: none; opacity: 1; } .button-clear-md.activated { background-color: rgba(158, 158, 158, 0.2); box-shadow: none; } .button-clear-md:hover:not(.disable-hover) { background-color: rgba(158, 158, 158, 0.1); } .button-clear-md .button-effect { background-color: #999; } .button-round-md { border-radius: 64px; padding: 0 2.6rem; } .button-md [icon-only] { padding: 0; } .button-effect { border-radius: 50%; -webkit-transform-origin: center center; transform-origin: center center; position: absolute; z-index: 0; display: none; background-color: #555; opacity: .2; transition-timing-function: ease-in-out; pointer-events: none; top: 0; left: 0; } .md button .button-effect { display: block; } .button-md-primary { color: #fff; background-color: #007aff; } .button-md-primary:hover:not(.disable-hover) { background-color: #007aff; } .button-md-primary.activated { background-color: #1485ff; opacity: 1; } .button-md-primary .button-effect { background-color: #fff; } .button-outline-md-primary { border-color: #0d81ff; color: #0d81ff; background-color: transparent; } .button-outline-md-primary:hover:not(.disable-hover) { background-color: rgba(158, 158, 158, 0.1); } .button-outline-md-primary.activated { background-color: transparent; } .button-outline-md-primary .button-effect { background-color: #0d81ff; } .button-clear-md-primary { border-color: transparent; color: #007aff; background-color: transparent; } .button-clear-md-primary.activated { background-color: rgba(158, 158, 158, 0.2); box-shadow: none; } .button-clear-md-primary:hover:not(.disable-hover) { color: #007aff; } .button-md-secondary { color: #fff; background-color: #32db64; } .button-md-secondary:hover:not(.disable-hover) { background-color: #32db64; } .button-md-secondary.activated { background-color: #2ec95c; opacity: 1; } .button-md-secondary .button-effect { background-color: #fff; } .button-outline-md-secondary { border-color: #30d05f; color: #30d05f; background-color: transparent; } .button-outline-md-secondary:hover:not(.disable-hover) { background-color: rgba(158, 158, 158, 0.1); } .button-outline-md-secondary.activated { background-color: transparent; } .button-outline-md-secondary .button-effect { background-color: #30d05f; } .button-clear-md-secondary { border-color: transparent; color: #32db64; background-color: transparent; } .button-clear-md-secondary.activated { background-color: rgba(158, 158, 158, 0.2); box-shadow: none; } .button-clear-md-secondary:hover:not(.disable-hover) { color: #32db64; } .button-md-danger { color: #fff; background-color: #d91e18; } .button-md-danger:hover:not(.disable-hover) { background-color: #d91e18; } .button-md-danger.activated { background-color: #dc302a; opacity: 1; } .button-md-danger .button-effect { background-color: #fff; } .button-outline-md-danger { border-color: #db2924; color: #db2924; background-color: transparent; } .button-outline-md-danger:hover:not(.disable-hover) { background-color: rgba(158, 158, 158, 0.1); } .button-outline-md-danger.activated { background-color: transparent; } .button-outline-md-danger .button-effect { background-color: #db2924; } .button-clear-md-danger { border-color: transparent; color: #d91e18; background-color: transparent; } .button-clear-md-danger.activated { background-color: rgba(158, 158, 158, 0.2); box-shadow: none; } .button-clear-md-danger:hover:not(.disable-hover) { color: #d91e18; } .button-md-light { color: #000; background-color: #f4f4f4; } .button-md-light:hover:not(.disable-hover) { background-color: #f4f4f4; } .button-md-light.activated { background-color: #e0e0e0; opacity: 1; } .button-md-light .button-effect { background-color: #000; } .button-outline-md-light { border-color: #e8e8e8; color: #e8e8e8; background-color: transparent; } .button-outline-md-light:hover:not(.disable-hover) { background-color: rgba(158, 158, 158, 0.1); } .button-outline-md-light.activated { background-color: transparent; } .button-outline-md-light .button-effect { background-color: #e8e8e8; } .button-clear-md-light { border-color: transparent; color: #f4f4f4; background-color: transparent; } .button-clear-md-light.activated { background-color: rgba(158, 158, 158, 0.2); box-shadow: none; } .button-clear-md-light:hover:not(.disable-hover) { color: #f4f4f4; } .button-md-dark { color: #fff; background-color: #222; } .button-md-dark:hover:not(.disable-hover) { background-color: #222; } .button-md-dark.activated { background-color: #343434; opacity: 1; } .button-md-dark .button-effect { background-color: #fff; } .button-outline-md-dark { border-color: #2d2d2d; color: #2d2d2d; background-color: transparent; } .button-outline-md-dark:hover:not(.disable-hover) { background-color: rgba(158, 158, 158, 0.1); } .button-outline-md-dark.activated { background-color: transparent; } .button-outline-md-dark .button-effect { background-color: #2d2d2d; } .button-clear-md-dark { border-color: transparent; color: #222; background-color: transparent; } .button-clear-md-dark.activated { background-color: rgba(158, 158, 158, 0.2); box-shadow: none; } .button-clear-md-dark:hover:not(.disable-hover) { color: #222; } .button-strong-md { font-weight: bold; } .button-wp { border-radius: 0; height: 3.6rem; border: 3px solid transparent; font-size: 1.4rem; color: #fff; background-color: #007aff; margin: 0.4rem 0.2rem; padding: 0 1.1em; } .button-wp:hover:not(.disable-hover) { border-color: #1485ff; background-color: #007aff; } .button-wp.activated { background-color: #1485ff; } .button-large-wp { height: 2.8em; font-size: 2rem; padding: 0 1em; } .button-small-wp { height: 2.1em; font-size: 1.3rem; padding: 0 0.9em; } .button-small-wp[icon-only] ion-icon { font-size: 1.4em; } .button-block-wp { margin-left: 0; margin-right: 0; } .button-full-wp { margin-left: 0; margin-right: 0; border-radius: 0; border-right-width: 0; border-left-width: 0; } .button-outline-wp { border-width: 1px; border-style: solid; border-color: #007aff; color: #007aff; background-color: transparent; } .button-outline-wp:hover:not(.disable-hover) { background-color: rgba(158, 158, 158, 0.1); } .button-outline-wp.activated { background-color: rgba(0, 122, 255, 0.16); } .button-clear-wp { color: #007aff; background-color: transparent; } .button-clear-wp.activated { background-color: rgba(158, 158, 158, 0.2); } .button-clear-wp:hover:not(.disable-hover) { background-color: rgba(158, 158, 158, 0.1); } .button-round-wp { border-radius: 64px; padding: 0 2.6rem; } .button-wp [icon-only] { padding: 0; } .button-wp-primary { color: #fff; background-color: #007aff; } .button-wp-primary:hover:not(.disable-hover) { border-color: #1485ff; background-color: #007aff; } .button-wp-primary.activated { background-color: #1485ff; } .button-outline-wp-primary { border-color: #0d81ff; color: #0d81ff; background-color: transparent; } .button-outline-wp-primary:hover:not(.disable-hover) { border-color: #0d81ff; background-color: rgba(158, 158, 158, 0.1); } .button-outline-wp-primary.activated { background-color: rgba(13, 129, 255, 0.16); } .button-clear-wp-primary { color: #007aff; background-color: transparent; } .button-clear-wp-primary.activated { background-color: rgba(158, 158, 158, 0.2); } .button-clear-wp-primary:hover:not(.disable-hover) { color: #007aff; } .button-wp-secondary { color: #fff; background-color: #32db64; } .button-wp-secondary:hover:not(.disable-hover) { border-color: #2ec95c; background-color: #32db64; } .button-wp-secondary.activated { background-color: #2ec95c; } .button-outline-wp-secondary { border-color: #30d05f; color: #30d05f; background-color: transparent; } .button-outline-wp-secondary:hover:not(.disable-hover) { border-color: #30d05f; background-color: rgba(158, 158, 158, 0.1); } .button-outline-wp-secondary.activated { background-color: rgba(48, 208, 95, 0.16); } .button-clear-wp-secondary { color: #32db64; background-color: transparent; } .button-clear-wp-secondary.activated { background-color: rgba(158, 158, 158, 0.2); } .button-clear-wp-secondary:hover:not(.disable-hover) { color: #32db64; } .button-wp-danger { color: #fff; background-color: #d91e18; } .button-wp-danger:hover:not(.disable-hover) { border-color: #dc302a; background-color: #d91e18; } .button-wp-danger.activated { background-color: #dc302a; } .button-outline-wp-danger { border-color: #db2924; color: #db2924; background-color: transparent; } .button-outline-wp-danger:hover:not(.disable-hover) { border-color: #db2924; background-color: rgba(158, 158, 158, 0.1); } .button-outline-wp-danger.activated { background-color: rgba(219, 41, 36, 0.16); } .button-clear-wp-danger { color: #d91e18; background-color: transparent; } .button-clear-wp-danger.activated { background-color: rgba(158, 158, 158, 0.2); } .button-clear-wp-danger:hover:not(.disable-hover) { color: #d91e18; } .button-wp-light { color: #000; background-color: #f4f4f4; } .button-wp-light:hover:not(.disable-hover) { border-color: #e0e0e0; background-color: #f4f4f4; } .button-wp-light.activated { background-color: #e0e0e0; } .button-outline-wp-light { border-color: #e8e8e8; color: #e8e8e8; background-color: transparent; } .button-outline-wp-light:hover:not(.disable-hover) { border-color: #e8e8e8; background-color: rgba(158, 158, 158, 0.1); } .button-outline-wp-light.activated { background-color: rgba(232, 232, 232, 0.16); } .button-clear-wp-light { color: #f4f4f4; background-color: transparent; } .button-clear-wp-light.activated { background-color: rgba(158, 158, 158, 0.2); } .button-clear-wp-light:hover:not(.disable-hover) { color: #f4f4f4; } .button-wp-dark { color: #fff; background-color: #222; } .button-wp-dark:hover:not(.disable-hover) { border-color: #343434; background-color: #222; } .button-wp-dark.activated { background-color: #343434; } .button-outline-wp-dark { border-color: #2d2d2d; color: #2d2d2d; background-color: transparent; } .button-outline-wp-dark:hover:not(.disable-hover) { border-color: #2d2d2d; background-color: rgba(158, 158, 158, 0.1); } .button-outline-wp-dark.activated { background-color: rgba(45, 45, 45, 0.16); } .button-clear-wp-dark { color: #222; background-color: transparent; } .button-clear-wp-dark.activated { background-color: rgba(158, 158, 158, 0.2); } .button-clear-wp-dark:hover:not(.disable-hover) { color: #222; } .button-strong-wp { font-weight: bold; } ion-card { display: block; overflow: hidden; } ion-card img { display: block; width: 100%; } ion-card-header { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } ion-card-content { display: block; } .card-ios { margin: 12px; border-radius: 2px; width: calc(100% - 24px); font-size: 1.4rem; background: #242424; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .card-ios ion-list { margin-bottom: 0; } .card-ios > .item:last-child, .card-ios > .item:last-child .item-inner, .card-ios > .item-wrapper:last-child .item { border-bottom: 0; } .card-ios .item-ios.item-block .item-inner { border: 0; } .card-content-ios { padding: 13px 16px 14px; font-size: 1.4rem; line-height: 1.4; } .card-header-ios { font-size: 1.6rem; font-weight: 500; color: #333; padding: 16px; } .card-header-ios + .card-content-ios, .card-ios .item + .card-content-ios { padding-top: 0; } .card .note-ios { font-size: