diff options
Diffstat (limited to 'browser/extensions/formautofill/skin/shared')
4 files changed, 485 insertions, 0 deletions
diff --git a/browser/extensions/formautofill/skin/shared/autocomplete-item-shared.css b/browser/extensions/formautofill/skin/shared/autocomplete-item-shared.css new file mode 100644 index 0000000000..d9ec6bb665 --- /dev/null +++ b/browser/extensions/formautofill/skin/shared/autocomplete-item-shared.css @@ -0,0 +1,188 @@ +/* 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/. */ + +@namespace url("http://www.w3.org/1999/xhtml"); +@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + + +xul|richlistitem[originaltype="autofill-profile"][selected="true"] > .autofill-item-box { + background-color: SelectedItem; + color: SelectedItemText; +} + +xul|richlistitem[originaltype="autofill-footer"][selected="true"] > .autofill-item-box > .autofill-button, +xul|richlistitem[originaltype="autofill-clear-button"][selected="true"] > .autofill-item-box > .autofill-button { + background-color: ButtonHighlight; +} + +xul|richlistitem[originaltype="autofill-insecureWarning"] { + border-bottom: 1px solid var(--panel-separator-color); + background-color: var(--arrowpanel-dimmed); +} + +.autofill-item-box { + --item-padding-vertical: 7px; + --item-padding-horizontal: 10px; + --col-spacer: 7px; + --item-width: calc(50% - (var(--col-spacer) / 2)); + --comment-text-color: GreyText; + --warning-text-color: GreyText; + --warning-background-color: rgba(248, 232, 28, .2); + + --default-font-size: 12; + --label-affix-font-size: 10; + --label-font-size: 12; + --comment-font-size: 10; + --warning-font-size: 10; + --btn-font-size: 11; +} + +.autofill-item-box[size="small"] { + --item-padding-vertical: 7px; + --col-spacer: 0px; + --row-spacer: 3px; + --item-width: 100%; +} + +.autofill-item-box:not([ac-image=""]) { + --item-padding-vertical: 6.5px; + --comment-font-size: 11; +} + +.autofill-footer, +.autofill-footer[size="small"] { + --item-width: 100%; + --item-padding-vertical: 0; + --item-padding-horizontal: 0; +} + +.autofill-item-box { + box-sizing: border-box; + margin: 0; + border-bottom: 1px solid rgba(38,38,38,.15); + padding: var(--item-padding-vertical) 0; + padding-inline: var(--item-padding-horizontal); + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + background-color: Field; + color: FieldText; +} + +.autofill-item-box:last-child { + border-bottom: 0; +} + +.autofill-item-box > .profile-item-col { + box-sizing: border-box; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: var(--item-width); +} + +.autofill-item-box > .profile-label-col { + text-align: start; +} + +.autofill-item-box:not([ac-image=""]) > .profile-label-col::before { + margin-inline-end: 5px; + float: inline-start; + content: ""; + width: 16px; + height: 16px; + background-image: var(--primary-icon); + background-size: contain; + background-repeat: no-repeat; + background-position: center; + -moz-context-properties: fill; + fill: var(--comment-text-color) +} + +.autofill-item-box > .profile-label-col > .profile-label { + font-size: calc(var(--label-font-size) / var(--default-font-size) * 1em); + unicode-bidi: plaintext; +} + +.autofill-item-box > .profile-label-col > .profile-label-affix { + font-weight: lighter; + font-size: calc(var(--label-affix-font-size) / var(--default-font-size) * 1em); +} + +.autofill-item-box > .profile-comment-col { + margin-inline-start: var(--col-spacer); + text-align: end; + color: var(--comment-text-color); +} + +.autofill-item-box > .profile-comment-col > .profile-comment { + font-size: calc(var(--comment-font-size) / var(--default-font-size) * 1em); + unicode-bidi: plaintext; +} + +.autofill-item-box[size="small"] { + flex-direction: column; +} + +.autofill-item-box[size="small"] > .profile-comment-col { + margin-top: var(--row-spacer); + text-align: start; +} + +.autofill-footer { + padding: 0; + flex-direction: column; +} + +.autofill-footer > .autofill-footer-row { + display: flex; + justify-content: center; + align-items: center; + width: var(--item-width); +} + +.autofill-footer > .autofill-warning { + padding: 2.5px 0; + color: var(--warning-text-color); + text-align: center; + background-color: var(--warning-background-color); + border-bottom: 1px solid rgba(38,38,38,.15); + font-size: calc(var(--warning-font-size) / var(--default-font-size) * 1em); +} + +.autofill-footer > .autofill-button { + box-sizing: border-box; + padding: 0 10px; + min-height: 40px; + background-color: ButtonFace; + font-size: calc(var(--btn-font-size) / var(--default-font-size) * 1em); + color: ButtonText; + text-align: center; +} + +.autofill-footer[no-warning="true"] > .autofill-warning { + display: none; +} + +.autofill-insecure-item { + box-sizing: border-box; + padding: 4px 0; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-items: center; + color: GrayText; +} + +.autofill-insecure-item::before { + display: block; + margin-inline: 4px 8px; + content: ""; + width: 16px; + height: 16px; + background-image: url(chrome://global/skin/icons/security-broken.svg); + -moz-context-properties: fill; + fill: GrayText; +} diff --git a/browser/extensions/formautofill/skin/shared/editAddress.css b/browser/extensions/formautofill/skin/shared/editAddress.css new file mode 100644 index 0000000000..ea00f1a6a6 --- /dev/null +++ b/browser/extensions/formautofill/skin/shared/editAddress.css @@ -0,0 +1,134 @@ +/* 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/. */ + +.editAddressForm { + display: flex; + flex-wrap: wrap; + /* Use space-between so --grid-column-row-gap is in between the elements on a row */ + justify-content: space-between; +} + +dialog:not([subdialog]) .editAddressForm { + margin-inline: calc(var(--grid-column-row-gap) / -2); +} + +.editAddressForm .container { + /* !important is needed to override preferences.css's generic label rule. */ + margin-top: var(--grid-column-row-gap) !important; + margin-inline: calc(var(--grid-column-row-gap) / 2); + flex-grow: 1; +} + +#country-container { + /* The country dropdown has a different intrinsic (content) width than the + other fields which are <input>. */ + flex-basis: calc(50% - var(--grid-column-row-gap)); + flex-grow: 0; + /* Country names can be longer than 50% which ruins the symmetry in the grid. */ + max-width: calc(50% - var(--grid-column-row-gap)); +} + + +/* Begin name field rules */ + +#name-container input { + /* Override the default @size="20" on <input>, which acts like a min-width, not + * allowing the fields to shrink with flexbox as small as they need to to match + * the other rows. This is noticeable on narrow viewports e.g. in the + * PaymentRequest dialog on Linux due to the larger font-size. */ + width: 0; +} + +/* When there is focus within any of the name fields, the border of the inputs + * should be the focused color, except for inner ones which get overriden below. */ +#name-container:focus-within input { + border-color: var(--in-content-focus-outline-color); +} + +/* Invalid name fields should show the error outline instead of the focus border */ +#name-container:focus-within input:-moz-ui-invalid { + border-color: transparent; +} + +#given-name-container, +#additional-name-container, +#family-name-container { + display: flex; + /* The 3 pieces inside the name container don't have the .container class so + need to set flex-grow themselves. See `.editAddressForm .container` */ + flex-grow: 1; + /* Remove the bottom margin from the name containers so that the outer + #name-container provides the margin on the outside */ + margin-bottom: 0 !important; + margin-inline: 0; +} + +#given-name-container:focus-within, +#additional-name-container:focus-within, +#family-name-container:focus-within { + z-index: 1; +} + +/* The name fields are placed adjacent to each other. + Remove the border-radius on adjacent fields. */ +#given-name:dir(ltr), +#family-name:dir(rtl) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right-width: 0; +} + +#given-name:dir(rtl), +#family-name:dir(ltr) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-left-width: 0; +} + +#additional-name { + border-radius: 0; + /* This provides the inner separators between the fields and should never + * change to the focused color. */ + border-inline-color: var(--in-content-box-border-color) !important; +} + +/* Since the name fields are adjacent, there isn't room for the -moz-ui-invalid + box-shadow so raise invalid name fields and their labels above the siblings + so the shadow is shown around all 4 sides. */ +#name-container input:-moz-ui-invalid, +#name-container input:-moz-ui-invalid ~ .label-text { + z-index: 1; +} + +/* End name field rules */ + +#name-container, +#street-address-container { + /* Name and street address are always full-width */ + flex: 0 1 100%; +} + +#street-address { + resize: vertical; +} + +#country-warning-message { + box-sizing: border-box; + font-size: 1rem; + display: flex; + align-items: center; + text-align: start; + opacity: .5; + padding-inline-start: 1em; + flex: 1; +} + +dialog:not([subdialog]) #country-warning-message { + display: none; +} + +moz-button-group{ + margin-inline: 4px; + margin-block-end: 4px; +} diff --git a/browser/extensions/formautofill/skin/shared/editCreditCard.css b/browser/extensions/formautofill/skin/shared/editCreditCard.css new file mode 100644 index 0000000000..00dde3b5b5 --- /dev/null +++ b/browser/extensions/formautofill/skin/shared/editCreditCard.css @@ -0,0 +1,53 @@ +/* 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/. */ + +.editCreditCardForm { + display: grid; + grid-template-areas: + "cc-number cc-exp-month cc-exp-year" + "cc-name cc-csc ." + "billingAddressGUID billingAddressGUID billingAddressGUID"; + grid-template-columns: 4fr 2fr 2fr; + grid-row-gap: var(--grid-column-row-gap); + grid-column-gap: var(--grid-column-row-gap); +} + +.editCreditCardForm label { + /* Remove the margin on these labels since they are styled on top of + the input/select element. */ + margin-inline-start: 0; + margin-inline-end: 0; +} + +.editCreditCardForm .container { + display: flex; +} + +#cc-number-container { + grid-area: cc-number; +} + +#cc-exp-month-container { + grid-area: cc-exp-month; +} + +#cc-exp-year-container { + grid-area: cc-exp-year; +} + +#cc-name-container { + grid-area: cc-name; +} + +#cc-csc-container { + grid-area: cc-csc; +} + +#billingAddressGUID-container { + grid-area: billingAddressGUID; +} + +#billingAddressGUID { + grid-area: dropdown; +} diff --git a/browser/extensions/formautofill/skin/shared/editDialog-shared.css b/browser/extensions/formautofill/skin/shared/editDialog-shared.css new file mode 100644 index 0000000000..c2ddf71a60 --- /dev/null +++ b/browser/extensions/formautofill/skin/shared/editDialog-shared.css @@ -0,0 +1,110 @@ +/* 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 { + --in-field-label-size: .8em; + --grid-column-row-gap: 8px; + /* Use the animation-easing-function that is defined in xul.css. */ + --animation-easing-function: cubic-bezier(.07,.95,0,1); +} + +dialog[subdialog] form { + /* Add extra space to ensure invalid input box is displayed properly */ + padding: 2px; +} + +/* The overly specific input attributes are required to override + padding from common.css */ +form input[type="email"], +form input[type="tel"], +form input[type="text"], +form textarea, +form select { + flex-grow: 1; + padding-top: calc(var(--in-field-label-size) + .4em); +} + +form input[type="tel"] { + text-align: match-parent; +} + +select { + margin: 0; + padding-bottom: 5px; +} + +form label[class="container"] select { + min-width: 0; +} + +form label, +form div { + /* Positioned so that the .label-text and .error-text children will be + positioned relative to this. */ + position: relative; + display: block; + line-height: 1em; +} + +/* Reset margins for inputs and textareas, overriding in-content styles */ +#form textarea, +#form input { + margin: 0; +} + +form :is(label, div) .label-text { + position: absolute; + opacity: .5; + pointer-events: none; + inset-inline-start: 10px; + top: .2em; + transition: top .2s var(--animation-easing-function), + font-size .2s var(--animation-easing-function); +} + +form :is(label, div):focus-within .label-text, +form :is(label, div) .label-text[field-populated] { + top: 0; + font-size: var(--in-field-label-size); +} + +form :is(input, select, textarea):focus ~ .label-text { + color: var(--in-content-item-selected); + opacity: 1; +} + +/* Focused error fields should get a darker text but not the blue one since it + * doesn't look good with the red error outline. */ +form :is(input, select, textarea):focus:-moz-ui-invalid ~ .label-text { + color: var(--in-content-text-color); +} + +form div[required] > label .label-text::after, +form :is(label, div)[required] .label-text::after { + content: attr(fieldRequiredSymbol); +} + +.persist-checkbox label { + display: flex; + flex-direction: row; + align-items: center; + margin-block: var(--grid-column-row-gap); +} + +dialog[subdialog] form { + /* Match the margin-inline-start of the #controls-container buttons + and provide enough padding at the top of the form so button outlines + don't get clipped. */ + padding: 4px 4px 0; +} + +#controls-container { + display: flex; + justify-content: end; + margin: 1em 0 0; +} + +#billingAddressGUID-container { + display: none; +} |