diff options
Diffstat (limited to 'browser/components/payments/res/paymentRequest.css')
| -rw-r--r-- | browser/components/payments/res/paymentRequest.css | 265 |
1 files changed, 265 insertions, 0 deletions
diff --git a/browser/components/payments/res/paymentRequest.css b/browser/components/payments/res/paymentRequest.css new file mode 100644 index 0000000000..ef03c745ae --- /dev/null +++ b/browser/components/payments/res/paymentRequest.css @@ -0,0 +1,265 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +:root { + height: 100%; +} + +body { + height: 100%; + margin: 0; + /* Override font-size from in-content/common.css which is too large */ + font-size: inherit; +} + +[hidden] { + display: none !important; +} + +#debugging-console { + /* include the default borders in the max-height */ + box-sizing: border-box; + float: right; + height: 100vh; + /* Float above the other overlays */ + position: relative; + z-index: 99; +} + +payment-dialog { + box-sizing: border-box; + display: grid; + grid-template: "header" auto + "main" 1fr + "disabled-overlay" auto; + height: 100%; +} + +payment-dialog > header, +.page > .page-body, +.page > footer { + padding: 0 10%; +} + +payment-dialog > header { + border-bottom: 1px solid rgba(0,0,0,0.1); + display: flex; + /* Wrap so that the error text appears full-width above the rest of the contents */ + flex-wrap: wrap; + /* from visual spec: */ + padding-bottom: 19px; + padding-top: 19px; +} + +payment-dialog > header > .page-error:empty { + display: none; +} + +payment-dialog > header > .page-error { + background: #D70022; + border-radius: 3px; + color: white; + padding: 6px; + width: 100%; +} + +#main-container { + display: flex; + grid-area: main; + position: relative; + max-height: 100%; +} + +.page { + display: flex; + flex-direction: column; + height: 100%; + position: relative; + width: 100%; +} + +.page > .page-body { + display: flex; + flex-direction: column; + flex-grow: 1; + /* The area above the footer should scroll, if necessary. */ + overflow: auto; + padding-top: 18px; +} + +.page > .page-body > h2:empty { + display: none; +} + +.page-error { + color: #D70022; +} + +.manage-text { + margin: 0; + padding: 18px 0; +} + +.page > footer { + align-items: center; + justify-content: end; + background-color: #eaeaee; + display: flex; + /* from visual spec: */ + padding-top: 20px; + padding-bottom: 18px; +} + +#order-details-overlay { + background-color: var(--in-content-page-background); + overflow: auto; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1; +} + +#total { + flex: 1 1 auto; + margin: 5px; +} + +#total > currency-amount { + color: var(--in-content-link-color); + font-size: 1.5em; +} + +#total > currency-amount > .currency-code { + color: GrayText; + font-size: 1rem; +} + +#total > div { + color: GrayText; +} + +#view-all { + flex: 0 1 auto; +} + +payment-dialog[complete-status="processing"] #pay { + /* Force opacity to 1 even when disabled in the processing state. */ + opacity: 1; +} + +payment-dialog #pay::before { + -moz-context-properties: fill; + content: url(chrome://browser/skin/connection-secure.svg); + fill: currentColor; + height: 16px; + margin-inline-end: 0.5em; + vertical-align: text-bottom; + width: 16px; +} + +payment-dialog[changes-prevented][complete-status="fail"] #pay, +payment-dialog[changes-prevented][complete-status="unknown"] #pay, +payment-dialog[changes-prevented][complete-status="processing"] #pay, +payment-dialog[changes-prevented][complete-status="success"] #pay { + /* Show the pay button above #disabled-overlay */ + position: relative; + z-index: 51; +} + +#disabled-overlay { + background: white; + grid-area: disabled-overlay; + opacity: 0.6; + width: 100%; + height: 100%; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + /* z-index must be greater than some positioned fields and #pay with z-index + but less than 99, the z-index of the debugging console. */ + z-index: 50; +} + +.persist-checkbox { + padding: 5px 0; +} + +.persist-checkbox > label { + display: flex; + align-items: center; +} + +.info-tooltip { + display: inline-block; + background-image: url(chrome://global/skin/icons/help.svg); + width: 16px; + height: 16px; + padding: 2px 4px; + background-repeat: no-repeat; + background-position: center; + position: relative; +} + +.info-tooltip:focus::after, +.info-tooltip:hover::after { + content: attr(aria-label); + display: block; + position: absolute; + padding: 3px 5px; + background-color: #fff; + border: 1px solid #bebebf; + box-shadow: 1px 1px 3px #bebebf; + font-size: smaller; + line-height: normal; + width: 188px; + /* Center the tooltip over the (i) icon (188px / 2 - 5px (padding) - 1px (border)). */ + left: -86px; + bottom: 20px; +} + +.info-tooltip:dir(rtl):focus::after, +.info-tooltip:dir(rtl):hover::after { + left: auto; + right: -86px; +} + +.csc.info-tooltip:focus::after, +.csc.info-tooltip:hover::after { + /* Right-align the tooltip over the (i) icon (-188px - 60px (padding) - 2px (border) + 4px ((i) start padding) + 16px ((i) icon width)). */ + left: -226px; + background-position: top 5px left 5px; + background-image: url(./containers/cvv-hint-image-back.svg); + background-repeat: no-repeat; + padding-inline-start: 55px; +} + +.csc.info-tooltip[cc-type="amex"]::after { + background-image: url(./containers/cvv-hint-image-front.svg); +} + +.csc.info-tooltip:dir(rtl):focus::after, +.csc.info-tooltip:dir(rtl):hover::after { + left: auto; + /* Left-align the tooltip over the (i) icon (-188px - 60px (padding) - 2px (border) + 4px ((i) start padding) + 16px ((i) icon width)). */ + right: -226px; + background-position: top 5px right 5px; +} + +.branding { + background-image: url(chrome://branding/content/icon32.png); + background-size: 16px; + background-repeat: no-repeat; + background-position: left center; + padding-inline-start: 20px; + line-height: 20px; + margin-inline-end: auto; +} + +.branding:dir(rtl) { + background-position: right center; +} |