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