Source code
Revision control
Copy as Markdown
Other Tools
/* 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
/**
* "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 {
}
&#address-capture-menu-button {
}
}
.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;
> h1 {
font-size: 1em;
padding-block: 8px 4px;
margin-block: 0;
}
}
.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 {
-moz-context-properties: fill;
fill: currentColor;
}
.address-capture-img-email {
-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;
}