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
:root {
appearance: none;
font: message-box;
background-color: var(--layout-background-0);
--address-book-card-min-height: 140px;
--ab-card-line-height: 1.3em;
--ab-card-table-row-height: 22px;
&[uidensity="compact"] {
--ab-card-line-height: 1em;
--ab-card-table-row-height: 18px;
}
&[uidensity="touch"] {
--ab-card-line-height: 1.4em;
--ab-card-table-row-height: 32px;
}
@media (prefers-contrast) {
background-color: transparent;
color: currentColor;
--address-book-cards-list-bg: transparent;
--address-book-icons-color: currentColor;
}
@media not (prefers-contrast) {
background: var(--layout-background-0);
color: var(--layout-color-0);
--address-book-cards-list-bg: var(--layout-background-1);
--address-book-icons-color: var(--layout-color-0);
}
}
/* Globals */
.disabled {
opacity: 0.5;
pointer-events: none;
}
/* Page layout */
body {
--address-book-pane-min-width: 240px;
--booksSplitter-width: var(--address-book-pane-min-width);
--sharedSplitter-height: 50%;
--address-book-cards-pane-min-width: 340px;
--sharedSplitter-width: var(--address-book-cards-pane-min-width);
--address-book-details-pane-min-width: 500px;
display: grid;
grid-template: "toolbox toolbox toolbox toolbox toolbox" min-content
"books booksSplitter cards sharedSplitter details" minmax(auto, 1fr)
/ minmax(var(--address-book-pane-min-width), var(--booksSplitter-width)) min-content
minmax(var(--address-book-cards-pane-min-width), var(--sharedSplitter-width)) min-content
minmax(var(--address-book-details-pane-min-width), 1fr);
text-shadow: none;
font-size: 1.1rem;
&.layout-table {
grid-template: "toolbox toolbox toolbox" min-content
"books booksSplitter cards" minmax(var(--address-book-card-min-height), 1fr)
"books booksSplitter sharedSplitter" min-content
"books booksSplitter details" minmax(auto, var(--sharedSplitter-height))
/ minmax(var(--address-book-pane-min-width), var(--booksSplitter-width)) min-content minmax(var(--address-book-details-pane-min-width), 1fr);
}
}
#dialogStack {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
/* Toolbar */
#toolbox {
grid-area: toolbox;
font: message-box;
font-size: 1rem;
}
.toolbarbutton-1:focus-visible {
outline: var(--in-content-focus-outline);
}
#toolbarCreateBook {
list-style-image: var(--icon-new-address-book);
}
#toolbarCreateContact {
list-style-image: var(--icon-new-contact);
}
#toolbarCreateList {
list-style-image: var(--icon-new-user-list);
}
#toolbarImport {
list-style-image: var(--icon-import);
}
/* Books pane */
#booksPane {
grid-area: books;
padding-block-start: 30px;
display: flex;
flex-direction: column;
overflow: hidden;
background-color: var(--layout-background-2);
}
#booksSplitter {
grid-area: booksSplitter;
}
#books {
flex: 1;
font-size: 1.1rem;
overflow-y: auto;
scroll-behavior: smooth;
-moz-user-select: none;
&:focus-visible {
outline: none;
}
&,
& ul {
margin: 0;
padding: 0;
list-style: none;
}
}
#allAddressBooks {
margin-block-end: 10px;
}
.bookRow-container,
.listRow-container {
display: flex;
align-items: center;
margin-inline: 6px;
border-radius: var(--in-content-button-border-radius);
color: var(--listbox-color);
-moz-context-properties: fill, stroke;
fill: color-mix(in srgb, var(--address-book-icons-color) 20%, transparent);
stroke: var(--address-book-icons-color);
cursor: default;
#books:not(:focus) :where(.bookRow, .listRow).selected > & {
background-color: var(--listbox-selected-bg);
outline: var(--listbox-selected-outline);
outline-offset: -2px;
}
:where(.bookRow, .listRow) > &:hover {
background-color: var(--listbox-hover);
}
#books:focus :where(.bookRow, .listRow).selected > & {
background-color: var(--listbox-focused-selected-bg);
color: var(--listbox-selected-color);
fill: color-mix(in srgb, currentColor 20%, transparent);
stroke: currentColor;
}
:where(.bookRow, .listRow).drop-target > & {
background-color: var(--in-content-item-selected);
color: var(--in-content-item-selected-text);
}
}
#books:focus .selected .twisty {
stroke: currentColor;
}
.bookRow {
.twisty {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--list-item-buttons-size);
height: var(--list-item-buttons-size);
-moz-context-properties: stroke;
stroke: var(--address-book-icons-color);
}
&:not(.children) .twisty-icon {
display: none;
}
&.children.collapsed {
.twisty-icon {
transform: rotate(-90deg);
}
&:dir(rtl) {
.twisty-icon {
transform: rotate(90deg);
}
}
}
}
.bookRow-icon,
.listRow-icon {
width: 16px;
height: 16px;
background-image: var(--addressbook-tree-ab);
background-position: center center;
background-repeat: no-repeat;
}
.bookRow.remote .bookRow-icon {
background-image: var(--addressbook-tree-remote);
}
@media (prefers-reduced-motion: no-preference) {
.bookRow.requesting .bookRow-icon {
position: relative;
overflow: hidden;
background: none;
&::before {
content: "";
position: absolute;
background-image: var(--icon-loading);
width: 480px;
height: 100%;
animation: tab-throbber-animation 1.05s steps(30) infinite;
}
&:dir(rtl)::before {
animation-name: tab-throbber-animation-rtl;
}
}
@keyframes tab-throbber-animation {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
@keyframes tab-throbber-animation-rtl {
0% { transform: translateX(0); }
100% { transform: translateX(100%); }
}
}
.bookRow-name,
.listRow-name {
flex: 1;
margin-inline: 7px;
white-space: nowrap;
text-overflow: ellipsis;
overflow-x: hidden;
}
.bookRow {
& > ul {
overflow: hidden;
height: auto;
}
& > ul:empty,
&.collapsed > ul {
height: 0;
}
}
.bookRow-menu,
.listRow-menu {
background-image: var(--icon-more);
background-position: center center;
background-repeat: no-repeat;
width: var(--list-item-buttons-size);
height: var(--list-item-buttons-size);
display: none;
:where(.bookRow-container, .listRow-container):hover &,
#books:focus-visible :where(.bookRow, .listRow).selected & {
display: unset;
}
}
.listRow-container {
padding-inline-start: 51px;
}
.listRow-icon {
background-image: var(--addressbook-tree-list);
}
/* Cards pane */
#cardsPane {
position: relative;
grid-area: cards;
padding-block-start: 32px;
display: flex;
flex-direction: column;
overflow-y: hidden;
background-color: var(--address-book-cards-list-bg);
}
#cardsPaneHeader {
display: flex;
margin-block-end: 8px;
margin-inline: 6px;
align-items: center;
}
#searchInput {
height: var(--in-content-button-height);
flex: 1;
margin-block: 0;
margin-inline: 0 6px;
padding-inline: 8px;
box-sizing: border-box;
border: 1px solid var(--in-content-box-border-color);
border-radius: var(--in-content-button-border-radius);
color: inherit;
background-color: var(--in-content-box-background);
&:focus {
border-color: transparent;
outline: 2px solid var(--in-content-focus-outline-color);
outline-offset: -1px;
}
}
#displayButton {
--button-margin: 0;
background-image: var(--icon-display-options);
}
/* Hide list items for sorting in table view. */
body.layout-table ~ menupopup#sortContext >
:where(menuitem:is([name="sort"], [value="addrbook"]), menuseparator:last-of-type) {
display: none;
}
/* Hide address book toggle in the list view if All Address Book is not selected. */
body:not(.layout-table):not(.all-ab-selected) ~ menupopup#sortContext >
menuitem[value="addrbook"] {
display: none;
}
.all-ab-selected .address-book-name {
margin-block-start: auto;
opacity: 0.8;
flex-shrink: 0;
font-weight: initial;
}
#cards {
-moz-context-properties: fill;
fill: currentColor;
&[rows="ab-card-row"] {
border-top: 1px solid var(--splitter-color);
}
}
#placeholderEmptyBook::before,
#placeholderSearchOnly::before {
background-image: var(--addressbook-tree-list);
}
#placeholderCreateContact {
color: var(--in-content-primary-button-background);
&::before {
background-image: var(--icon-new-contact);
}
}
#placeholderSearching::before {
background-image: var(--icon-search);
}
#placeholderNoSearchResults::before {
/* TODO: Replace this with a "no results" search icon, like search-not-found.svg but nice. */
background-image: var(--icon-search);
}
tr[is="ab-card-row"] td > .card-container {
display: flex;
align-items: center;
max-height: inherit;
box-sizing: border-box;
}
.selected-card {
white-space: nowrap;
display: flex;
align-items: center;
}
:is(tr[is="ab-card-row"], .selected-card) {
.ab-card-row-data {
display: flex;
flex-direction: column;
justify-content: center;
line-height: var(--ab-card-line-height);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1 1 auto;
}
& :is(.ab-card-first-line, .ab-card-second-line) {
display: flex;
justify-content: space-between;
margin-block: 0;
font-size: 1rem;
position: relative;
}
& span {
overflow: hidden;
text-overflow: ellipsis;
}
& .name {
font-size: 1.1rem;
font-weight: 500;
}
& :is(.name, .address) {
flex: 1 1 auto;
}
}
tr[is="ab-card-row"] :is(.ab-card-first-line, .ab-card-second-line) {
line-height: 1.3;
:root[uidensity="compact"] & {
line-height: 1.2;
}
:root[uidensity="touch"] & {
line-height: 1.4;
}
@media (-moz-platform: windows) {
:root[uidensity="compact"] & {
line-height: 1.4;
}
}
}
tr[is="ab-card-row"]:not(.selected) .ab-card-second-line {
color: var(--in-content-deemphasized-text);
}
tr[is="ab-card-row"].selected .recipient-avatar.is-mail-list {
color: currentColor;
}
/* Details pane */
#sharedSplitter {
grid-area: sharedSplitter;
body.is-editing & {
z-index: 2;
}
body.layout-table & {
width: auto !important;
}
body:not(.layout-table) & {
height: auto !important;
}
&.splitter-collapsed {
display: none;
}
}
#detailsPane {
grid-area: details;
min-height: var(--address-book-card-min-height);
user-select: text;
&:not([hidden]) {
display: grid;
grid-template: "scroll-content" 1fr
"footer" auto / 1fr;
}
&.collapsed-by-splitter {
display: none;
}
body.is-editing & {
z-index: 2;
background-color: var(--in-content-page-background);
color: var(--in-content-page-color);
box-shadow: 0 2px 6px -5px #000;
}
}
#editContactForm {
display: contents;
}
.contact-details-scroll {
grid-area: scroll-content;
overflow: auto;
padding: 21px;
}
#detailsFooter {
grid-area: footer;
padding: 21px;
background-color: var(--in-content-page-background);
& label {
margin: 0 4px;
white-space: nowrap;
}
& menulist:not([hidden]) {
margin-inline: 4px;
min-height: var(--in-content-button-height);
-moz-context-properties: fill, stroke;
fill: color-mix(in srgb, currentColor 20%, transparent);
stroke: currentColor;
}
& menulist > menupopup {
--panel-padding: 4px 0;
--panel-border-color: var(--arrowpanel-border-color);
--panel-border-radius: var(--arrowpanel-border-radius);
}
}
.contact-details-scroll > *,
#detailsFooter {
/* Fits two #detailsBody and vcard-edit columns. */
max-width: 64em;
}
#detailsPaneBackdrop {
grid-column: 1 / -1;
grid-row: 2 / -1;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1;
body:not(.is-editing) & {
display: none;
}
}
body.is-editing #viewContact {
display: none;
}
body:not(.is-editing) #editContactForm {
display: none;
}
.contact-header:not([hidden]) {
display: grid;
grid-template: "photo headings" auto / auto 1fr;
align-items: center;
gap: 1em;
margin-bottom: 15px;
}
#photoInput {
display: contents;
}
#photoButton,
#viewContactPhoto {
grid-area: photo;
}
.contact-photo {
width: 100px;
height: 100px;
border-radius: 100%;
object-fit: cover;
object-position: center;
background-color: var(--in-content-button-background);
-moz-context-properties: stroke;
stroke: color-mix(in srgb, transparent 50%, var(--recipient-avatar-color));
}
#photoButton {
position: relative;
border-radius: 100%;
padding: 0;
margin: 0;
&:hover {
background: none;
}
&:focus-visible {
outline: 2px solid var(--in-content-focus-outline-color);
outline-offset: 2px;
}
}
#photoOverlay {
position: absolute;
inset: 0;
border-radius: 100%;
#photoButton:is(:focus-visible, :hover) & {
background-color: #0003;
background-image: var(--icon-more);
background-position: center center;
background-repeat: no-repeat;
background-size: 48px;
-moz-context-properties: stroke;
stroke: #fff;
cursor: pointer;
}
}
.contact-headings:not([hidden]) {
grid-area: headings;
display: flex;
flex-direction: column;
gap: 3px;
word-break: break-word;
}
.contact-heading-name,
.contact-headings p {
margin-block: 0;
}
.contact-heading-name {
font-size: 1.6rem;
font-weight: 400;
}
.contact-heading-nickname {
font-size: 1.2rem;
color: var(--in-content-deemphasized-text);
}
.contact-heading-email {
margin-block: 0;
font-size: 1.1rem;
font-weight: 400;
color: var(--in-content-deemphasized-text);
}
.list-header:not([hidden]),
.selection-header:not([hidden]) {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.list-header .recipient-avatar {
width: 50px;
height: 50px;
}
#detailsBody {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(31.5em, 1fr));
grid-template-rows: masonry;
gap: 1em;
& section {
padding: 15px;
border-radius: var(--in-content-button-border-radius);
border: 1px solid var(--in-content-box-info-border);
background-color: var(--in-content-box-info-background);
font-size: 1.1rem;
line-height: 1.2;
}
& h2 {
margin-block: 0 15px;
font-size: 1.1rem;
line-height: 1.2;
font-weight: 500;
}
}
#detailsActions {
grid-column: 1 / -1;
}
.button-block {
&:not([hidden]) {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
row-gap: 6px;
}
& div {
display: flex;
align-items: center;
}
}
.edit-block {
flex: 1;
justify-content: end;
}
.icon-button {
&:not([hidden]) {
min-width: 0;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
background-color: transparent;
--in-content-button-border-color: transparent;
}
&:hover {
background-color: var(--in-content-button-background);
&:active {
background-color: var(--in-content-button-background-active);
}
}
&::before {
content: "";
width: 16px;
height: 16px;
-moz-context-properties: fill, stroke, fill-opacity;
fill: color-mix(in srgb, currentColor 20%, transparent);
stroke: currentColor;
fill-opacity: var(--toolbarbutton-icon-fill-opacity);
}
}
#detailsWriteButton::before {
background-image: var(--icon-pencil);
}
#detailsEventButton::before {
background-image: var(--icon-new-event);
}
#detailsSearchButton::before {
background-image: var(--icon-search);
}
#detailsNewListButton::before {
background-image: var(--icon-new-user-list);
}
.entry-list {
display: grid;
grid-template-columns: min-content auto;
gap: 6px;
align-items: baseline;
margin-block: 0;
margin-inline-start: 9px;
padding: 0;
list-style: none inside;
}
.entry-item {
display: contents;
}
.entry-type {
font-size: 0.9rem;
font-weight: 600;
text-transform: uppercase;
opacity: .85;
}
.entry-value {
word-break: break-all;
}
section#notes div {
white-space: pre-wrap;
overflow-wrap: break-word;
}
section#selectedCards {
width: 31.5em;
grid-column: 1 / -1;
margin-inline: auto;
& ul {
margin: 0;
padding: 0;
list-style: none inside;
display: flex;
flex-direction: column;
row-gap: 12px;
}
}
#detailsDeleteButton {
color: var(--vcard-delete-button-color);
&:hover {
background-color: var(--vcard-delete-button-color);
color: var(--color-white);
&:active {
background-color: var(--red-70);
}
}
&::before {
background-image: var(--icon-trash);
}
}
input[type="number"] {
min-height: 28px;
padding: 1px;
border-radius: var(--in-content-button-border-radius);
/* sizes: chars + 8px padding + 1px borders + spin buttons 25+2+10px */
&.size3 {
width: calc(3ch + 55px);
}
&.size5 {
width: calc(5ch + 55px);
}
&::-moz-number-spin-box {
padding-inline-start: 10px;
}
&::-moz-number-spin-up,
&::-moz-number-spin-down {
appearance: none;
min-width: 25px;
border: 1px solid var(--in-content-box-border-color);
border-radius: 0;
background-color: var(--in-content-button-background);
background-position: center;
background-repeat: no-repeat;
-moz-context-properties: stroke;
stroke: currentColor;
}
&::-moz-number-spin-up:hover,
&::-moz-number-spin-down:hover {
background-color: var(--in-content-button-background-hover);
}
&::-moz-number-spin-up {
min-height: calc(var(--in-content-button-height) * 0.5 - 2px);
border-bottom-width: 1px;
border-bottom-style: solid;
border-start-end-radius: var(--in-content-button-border-radius);
}
&::-moz-number-spin-down {
min-height: calc(var(--in-content-button-height) * 0.5 - 3px);
border-end-end-radius: var(--in-content-button-border-radius);
}
}
/* Photo dialog */
#photoDialogInner {
width: 500px;
text-align: center;
}
#photoDropTarget {
height: 100px;
background-color: var(--in-content-button-background);
background-image: var(--icon-user);
background-size: 80px;
background-position: center;
-moz-context-properties: stroke;
stroke: var(--in-content-box-background);
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: center;
&[hidden] {
display: none;
}
& .icon {
display: none;
margin-inline-end: 8px;
width: 16px;
height: 16px;
-moz-context-properties: stroke;
stroke: currentColor;
}
&.drop-error .icon {
display: unset;
background-size: contain;
}
}
@media (prefers-reduced-motion: no-preference) {
.bookRow-container,
.listRow-container,
.twisty {
transition:
color var(--transition-duration) var(--transition-timing),
background-color var(--transition-duration) var(--transition-timing),
fill var(--transition-duration) var(--transition-timing),
stroke var(--transition-duration) var(--transition-timing);
}
.bookRow .twisty-icon {
transition: transform var(--transition-duration) var(--transition-timing);
}
#photoDropTarget.drop-loading .icon {
display: unset;
position: relative;
overflow: hidden;
text-align: start;
&::before {
content: "";
position: absolute;
width: 480px;
height: 100%;
animation: tab-throbber-animation 1.05s steps(30) infinite;
}
&:dir(rtl)::before {
animation-name: tab-throbber-animation-rtl;
}
}
@keyframes tab-throbber-animation {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
@keyframes tab-throbber-animation-rtl {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
}
}
}
#photoDialog {
& svg {
margin: -10px;
&[hidden] {
display: none;
}
}
& rect {
fill: transparent;
&:not(.corner) {
shape-rendering: crispEdges;
stroke: #fff;
stroke-width: 1px;
}
}
& .corner {
&.nw {
cursor: nw-resize;
}
&.ne {
cursor: ne-resize;
}
&.se {
cursor: se-resize;
}
&.sw {
cursor: sw-resize;
}
}
& .extra1 {
margin-inline-end: auto;
}
}
#cardCount {
position: sticky;
bottom: 0;
background-color: var(--in-content-categories-background);
border-top: 1px solid var(--splitter-color);
color: color-mix(in srgb, currentColor 75%, transparent);
padding: 9px;
margin-block-start: 6px;
font-weight: 500;
font-size: 1rem;
}