diff options
Diffstat (limited to '')
-rw-r--r-- | browser/themes/shared/formautofill-notification.css | 209 |
1 files changed, 209 insertions, 0 deletions
diff --git a/browser/themes/shared/formautofill-notification.css b/browser/themes/shared/formautofill-notification.css new file mode 100644 index 0000000000..aefef93517 --- /dev/null +++ b/browser/themes/shared/formautofill-notification.css @@ -0,0 +1,209 @@ +/* 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/. */ + +/** + * "address-capture" prefix is used for cases where the style should apply + * to "save address doorhanger", "update address doorhanger", and "edit address doorhanger" + * + * "address-save" prefix is used for "save address doorhanger" + * "address-update" prefix is used for "update address doorhanger" + * "address-edit" prefix is used for "edit address doorhanger" + * "address-save-update" prefix is used for "save address doorhanger" and "update address doorhanger" + */ + +.popup-notification-body[popupid="address-save-update"] { + width: 25.8em; +} + +.popup-notification-body[popupid="address-edit"] { + width: auto; +} + +.address-capture-notification { + /* Overwrite margin that we don't need */ + :is(popupnotificationcontent, .panel-footer) { + margin-top: 0; + } + + description { + margin: 0; + } + + .popup-notification-body-container { + padding-block: 0; + } + + /* define the default text format for the address capture doorhanger */ + :is(p, textarea) { + margin-block: 0; + line-height: 1.5; + overflow-wrap: anywhere; + } + + menulist { + padding-block: 6px; + padding-inline: 16px 12px; + } + + .address-capture-icon-button { + width: 32px; + height: 32px; + border: 0; + border-radius: 4px; + margin: 0; + padding: 0; + background-color: transparent; + background-repeat: no-repeat; + background-position: center; + -moz-context-properties: fill; + fill: currentColor; + margin-inline-start: auto; + + &:hover { + background-color: var(--panel-item-hover-bgcolor); + + &:active { + background-color: var(--panel-item-active-bgcolor); + } + } + + &:focus-visible { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-offset); + border-radius: 1px; + } + + &#address-capture-edit-address-button { + background-image: url("chrome://browser/skin/formautofill/icon-address-edit.svg"); + } + + &#address-capture-menu-button { + background-image: url("chrome://browser/skin/formautofill/icon-doorhanger-menu.svg"); + } + } + + .popup-notification-primary-button { + color: var(--button-primary-color); + background-color: var(--button-primary-bgcolor); + + &:hover { + background-color: var(--button-primary-hover-bgcolor); + + &:active { + background-color: var(--button-primary-active-bgcolor); + } + } + } +} + +.address-capture-header { + margin-top: 8px; + margin-bottom: 12px; + display: flex; + flex-direction: row; + + > p { + padding-block: 8px 4px; + font-weight: var(--font-weight-bold); + } +} + +.address-save-update-notification-content > .address-capture-content { + padding-inline: 4px 0; +} + +.address-capture-description, +.address-save-update-row-container, +.address-edit-row-container { + margin-bottom: 16px; +} + +.address-save-update-row-container { + display: grid; + grid-template-columns: auto 1fr auto; + gap: 8px; + + > image { + width: 16px; + height: 16px; + margin-top: 2px; + } +} + +.address-update-text-diff-added, +.address-update-text-diff-removed { + font-weight: var(--font-weight-bold); + color: light-dark(rgba(2, 80, 187, 1), rgba(128, 235, 255, 1)); + background: light-dark(rgba(0, 96, 223, 0.08), rgba(0, 221, 255, 0.14)); +} + +.address-update-text-diff-removed { + text-decoration: line-through; +} + +.address-capture-img-address { + list-style-image: url("chrome://browser/skin/formautofill/icon-capture-address-fields.svg"); + -moz-context-properties: fill; + fill: currentColor; +} + +.address-capture-img-email { + list-style-image: url("chrome://browser/skin/formautofill/icon-capture-email-fields.svg"); + -moz-context-properties: fill; + fill: currentColor; +} + +.address-edit-row-container { + display: flex; + flex-direction: row; + gap: 10px; +} + +.address-edit-input-container { + display: flex; + flex-direction: column; + + > label { + line-height: 1.5; + margin-bottom: 4px; + } +} + + +/* Default size for input fields in address edit doorhanger */ +.address-edit-notification-content { + :is(input, textarea) { + width: 15.8em; + margin: 0; + } + + menulist { + width: 17em; + height: 2.46em; + margin: 0; + } +} + +#address-edit-street-address-input { + height: 4.6em; + resize: none; +} + +#address-edit-postal-code-input, +#address-edit-address-level2-input, +#address-edit-address-level3-input { + width: 6.87em; +} + +#address-edit-address-level1-input { + width: 8.1em; +} + +#address-edit-tel-input { + width: 10.6em; +} + +#address-edit-email-input { + width: 12em; +} |