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
.editContactPanel_rowLabel {
text-align: end;
}
#editContactHeader {
display: flex;
margin-bottom: 15px;
}
#editContactPanelIcon {
-moz-context-properties: fill, stroke, stroke-opacity;
fill: color-mix(in srgb, var(--toolbarbutton-icon-fill-attention) 20%, transparent);
stroke: var(--toolbarbutton-icon-fill-attention);
width: 20px;
height: 20px;
margin-block: auto;
margin-inline: 3px 12px;
}
#editContactPanelTitle {
font-size: 130%;
font-weight: bold;
margin-block: auto;
}
#editContactContent {
margin-block: 6px 15px;
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
}
#editContactEmail {
min-width: 20em;
}
html|input.editContactTextbox {
appearance: none;
cursor: text;
color: var(--toolbar-field-color);
background-color: var(--toolbar-field-background-color);
border: 1px solid var(--toolbar-field-border-color);
border-radius: var(--button-border-radius);
padding: 3px 8px;
width: 20em;
&:focus {
border-color: var(--focus-outline-color);
outline: 1px solid var(--focus-outline-color);
}
&[readonly] {
border-color: transparent !important;
background-color: inherit !important;
box-shadow: none;
color: inherit;
outline: none !important;
}
}
#contactMoveDisabledText {
width: 20em;
}
#editContactAddressBookList {
appearance: none;
background-color: var(--arrowpanel-dimmed);
background-image: none;
border: 1px solid;
border-color: var(--panel-separator-color) !important;
box-shadow: none;
color: inherit;
-moz-context-properties: fill, stroke;
fill: color-mix(in srgb, currentColor 20%, transparent);
stroke: currentColor;
&:not([disabled="true"],[open="true"]):hover {
background-image: linear-gradient(var(--arrowpanel-dimmed),
var(--arrowpanel-dimmed));
background-color: var(--arrowpanel-dimmed);
}
&[open="true"] {
background-image: linear-gradient(var(--arrowpanel-dimmed-further),
var(--arrowpanel-dimmed-further));
box-shadow: 0 1px 0 hsla(210, 4%, 10%, .05) inset;
}
}
#spacesToolbarCustomizationPanel {
margin-block-end: 0;
}
.popup-panel {
margin-block: 0;
& button:focus-visible,
& input[type="color"]:focus-visible {
outline: 2px solid var(--focus-outline-color);
outline-offset: -1px;
}
& label,
& checkbox {
margin-inline-start: 0;
&.indent {
margin-inline-start: 23px;
}
}
}
.popup-panel-body {
padding: 9px 15px;
min-width: 300px;
& h3 {
margin-block: 0 15px;
font-size: 1.4em;
font-weight: 500;
}
}
.popup-panel-options-grid {
display: grid;
margin-block: 6px 15px;
grid-template-columns: 1fr auto;
align-items: center;
gap: 6px;
& input {
margin-inline-end: 0;
}
}
.popup-panel-column-container {
grid-column: 1 / 3;
display: flex;
flex-direction: column;
gap: 6px;
}
.popup-panel-buttons-container {
display: flex;
align-items: center;
margin: 0;
justify-content: end;
& > button {
appearance: none;
border: 0;
border-radius: 4px;
color: var(--button-color, inherit);
background-color: var(--button-background-color, color-mix(in srgb, currentColor 13%, transparent));
padding: 8px 16px;
font-weight: 600;
min-width: 0;
margin-inline: 8px 0;
margin-bottom: 0;
@media (prefers-contrast) {
outline: 1px solid var(--button-border-color);
}
&[disabled] {
opacity: 0.4;
}
&:focus-visible {
outline: var(--focus-outline);
outline-offset: var(--focus-outline-offset);
}
&:not([disabled]):hover {
background-color: var(--button-hover-background-color, color-mix(in srgb, currentColor 17%, transparent));
color: var(--button-hover-text-color);
&:active {
background-color: var(--button-active-background-color, color-mix(in srgb, currentColor 30%, transparent));
}
}
&.primary:not([disabled]) {
color: var(--button-primary-color);
background-color: var(--button-primary-background-color);
&:hover {
background-color: var(--button-primary-hover-background-color);
&:active {
background-color: var(--button-primary-active-background-color);
}
}
}
}
}
.checkbox-description {
font-size: 0.95rem;
margin-block: -5px 6px;
margin-inline-start: 23px;
opacity: 0.8;
}