1/* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 5html { 6 /* Prevent unnecessary horizontal scroll bar from showing */ 7 overflow-x: hidden; 8} 9 10div { 11 display: flex; 12} 13 14button { 15 padding-inline: 10px; 16} 17 18fieldset { 19 margin: 0 4px; 20 padding: 0; 21 border: none; 22} 23 24fieldset > legend { 25 box-sizing: border-box; 26 width: 100%; 27 padding: 0.4em 0.7em; 28 color: #808080; 29 background-color: var(--in-content-box-info-background); 30 border: 1px solid var(--in-content-box-border-color); 31 border-radius: 2px 2px 0 0; 32 user-select: none; 33} 34 35option:nth-child(even) { 36 background-color: var(--in-content-box-background-odd); 37} 38 39#addresses, 40#credit-cards { 41 width: 100%; 42 height: 16.6em; 43 margin: 0; 44 padding-inline: 0; 45 border-top: none; 46 border-radius: 0 0 2px 2px; 47} 48 49#addresses > option, 50#credit-cards > option { 51 display: flex; 52 align-items: center; 53 height: 1.6em; 54 padding-inline-start: 0.6em; 55} 56 57#controls-container { 58 margin-top: 1em; 59} 60 61#remove { 62 margin-inline-end: auto; 63} 64 65#credit-cards > option::before { 66 content: ""; 67 background: url("icon-credit-card-generic.svg") no-repeat; 68 background-size: contain; 69 float: inline-start; 70 width: 16px; 71 height: 16px; 72 padding-inline-end: 10px; 73 -moz-context-properties: fill; 74 fill: currentColor; 75} 76 77/* 78 We use .png / @2x.png images where we don't yet have a vector version of a logo 79*/ 80#credit-cards.branded > option[cc-type="amex"]::before { 81 background-image: url("third-party/cc-logo-amex.png"); 82} 83 84#credit-cards.branded > option[cc-type="cartebancaire"]::before { 85 background-image: url("third-party/cc-logo-cartebancaire.png"); 86} 87 88#credit-cards.branded > option[cc-type="diners"]::before { 89 background-image: url("third-party/cc-logo-diners.svg"); 90} 91 92#credit-cards.branded > option[cc-type="discover"]::before { 93 background-image: url("third-party/cc-logo-discover.png"); 94} 95 96#credit-cards.branded > option[cc-type="jcb"]::before { 97 background-image: url("third-party/cc-logo-jcb.svg"); 98} 99 100#credit-cards.branded > option[cc-type="mastercard"]::before { 101 background-image: url("third-party/cc-logo-mastercard.svg"); 102} 103 104#credit-cards.branded > option[cc-type="mir"]::before { 105 background-image: url("third-party/cc-logo-mir.svg"); 106} 107 108#credit-cards.branded > option[cc-type="unionpay"]::before { 109 background-image: url("third-party/cc-logo-unionpay.svg"); 110} 111 112#credit-cards.branded > option[cc-type="visa"]::before { 113 background-image: url("third-party/cc-logo-visa.svg"); 114} 115 116@media (min-resolution: 1.1dppx) { 117 #credit-cards.branded > option[cc-type="amex"]::before { 118 background-image: url("third-party/cc-logo-amex@2x.png"); 119 } 120 #credit-cards.branded > option[cc-type="cartebancaire"]::before { 121 background-image: url("third-party/cc-logo-cartebancaire@2x.png"); 122 } 123 #credit-cards.branded > option[cc-type="discover"]::before { 124 background-image: url("third-party/cc-logo-discover@2x.png"); 125 } 126} 127