summaryrefslogtreecommitdiffstats
path: root/browser/themes/shared/formautofill-notification.css
diff options
context:
space:
mode:
Diffstat (limited to 'browser/themes/shared/formautofill-notification.css')
-rw-r--r--browser/themes/shared/formautofill-notification.css209
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;
+}