diff options
Diffstat (limited to 'comm/mail/themes/shared/mail/aboutAddressBook.css')
| -rw-r--r-- | comm/mail/themes/shared/mail/aboutAddressBook.css | 1023 |
1 files changed, 1023 insertions, 0 deletions
diff --git a/comm/mail/themes/shared/mail/aboutAddressBook.css b/comm/mail/themes/shared/mail/aboutAddressBook.css new file mode 100644 index 0000000000..d155fe3d1c --- /dev/null +++ b/comm/mail/themes/shared/mail/aboutAddressBook.css @@ -0,0 +1,1023 @@ +/* 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/. */ + +@import url("chrome://messenger/skin/shared/preferences/subdialog.css"); +@import url("chrome://messenger/skin/abFormFields.css"); +@import url("chrome://messenger/skin/icons.css"); + +: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; +} + +:root[uidensity="compact"] { + --ab-card-line-height: 1em; + --ab-card-table-row-height: 18px; +} + +:root[uidensity="touch"] { + --ab-card-line-height: 1.4em; + --ab-card-table-row-height: 32px; +} + +@media (prefers-contrast) { + :root { + background-color: transparent; + color: currentColor; + + --address-book-cards-list-bg: transparent; + --address-book-icons-color: currentColor; + } +} + +@media not (prefers-contrast) { + :root { + 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; +} + +body.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-y: auto; + background-color: var(--layout-background-2); +} + +#booksSplitter { + grid-area: booksSplitter; +} + +#books { + flex: 1; + font-size: 1.1rem; + scroll-behavior: smooth; + -moz-user-select: none; +} + +#books:focus-visible { + outline: none; +} + +#books, +#books 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 > :is(.bookRow-container, .listRow-container) { + background-color: var(--listbox-selected-bg); + outline: var(--listbox-selected-outline); + outline-offset: -2px; +} + +.bookRow > .bookRow-container:hover, +.listRow > .listRow-container:hover { + background-color: var(--listbox-hover); +} + +#books:focus :where(.bookRow, .listRow).selected > :is(.bookRow-container, .listRow-container) { + background-color: var(--listbox-focused-selected-bg); + color: var(--listbox-selected-color); + fill: color-mix(in srgb, currentColor 20%, transparent); + stroke: currentColor; +} + +#books:focus .selected .twisty { + stroke: currentColor; +} + +.bookRow.drop-target > .bookRow-container, +.listRow.drop-target > .listRow-container { + background-color: var(--in-content-item-selected); + color: var(--in-content-item-selected-text); +} + +.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); +} + +.bookRow:not(.children) .twisty-icon { + display: none; +} + +.bookRow.children.collapsed .twisty-icon { + transform: rotate(-90deg); +} + +.bookRow.children.collapsed: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; + } + + .bookRow.requesting .bookRow-icon::before { + content: ""; + position: absolute; + background-image: var(--icon-loading); + width: 480px; + height: 100%; + animation: tab-throbber-animation 1.05s steps(30) infinite; + } + + .bookRow.requesting .bookRow-icon: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; +} + +.bookRow > ul:empty, +.bookRow.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; +} + +.bookRow-container:hover .bookRow-menu, +.listRow-container:hover .listRow-menu, +#books:focus-visible .bookRow.selected .bookRow-menu, +#books:focus-visible .listRow.selected .listRow-menu { + 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); +} + +#searchInput:focus { + border-color: transparent; + outline: 2px solid var(--color-blue-60); + 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; +} + +#cards[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); +} + +#placeholderCreateContact::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(tr[is="ab-card-row"], .selected-card) :is(.ab-card-first-line, .ab-card-second-line) { + display: flex; + justify-content: space-between; + margin-block: 0; + font-size: 1rem; + position: relative; +} + +:is(tr[is="ab-card-row"], .selected-card) span { + overflow: hidden; + text-overflow: ellipsis; +} + +:is(tr[is="ab-card-row"], .selected-card) .name { + font-size: 1.1rem; + font-weight: 500; +} + +:is(tr[is="ab-card-row"], .selected-card) :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"] tr[is="ab-card-row"] :is(.ab-card-first-line, .ab-card-second-line) { + line-height: 1.2; +} + +:root[uidensity="touch"] tr[is="ab-card-row"] :is(.ab-card-first-line, .ab-card-second-line) { + line-height: 1.4; +} + +@media (-moz-platform: windows) { + :root[uidensity="compact"] tr[is="ab-card-row"] :is(.ab-card-first-line, .ab-card-second-line) { + 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 #sharedSplitter { + z-index: 2; +} + +body.layout-table #sharedSplitter { + width: auto !important; +} + +body:not(.layout-table) #sharedSplitter { + height: auto !important; +} + +#detailsPane.collapsed-by-splitter, +#sharedSplitter.splitter-collapsed { + display: none; +} + +#detailsPane { + grid-area: details; + min-height: var(--address-book-card-min-height); + user-select: text; +} + +#detailsPane:not([hidden]) { + display: grid; + grid-template: "scroll-content" 1fr + "footer" auto / 1fr; +} + +#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); +} + +.contact-details-scroll > *, +#detailsFooter { + /* Fits two #detailsBody and vcard-edit columns. */ + max-width: 64em; +} + +body.is-editing #detailsPane { + z-index: 2; + background-color: var(--in-content-page-background); + color: var(--in-content-page-color); + box-shadow: 0 2px 6px -5px #000; +} + +#detailsPaneBackdrop { + grid-column: 1 / -1; + grid-row: 2 / -1; + background-color: rgba(0, 0, 0, 0.5); + z-index: 1; +} + +body:not(.is-editing) #detailsPaneBackdrop { + 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; +} + +#photoButton:hover { + background: none; +} + +#photoOverlay { + position: absolute; + inset: 0; + border-radius: 100%; +} + +#photoButton:focus-visible { + outline: 2px solid var(--in-content-focus-outline-color); + outline-offset: 2px; +} + +#photoButton:is(:focus-visible, :hover) #photoOverlay { + 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; +} + +#detailsActions { + grid-column: 1 / -1; +} + +#detailsBody 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; +} + +.button-block:not([hidden]) { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + row-gap: 6px; +} + +.button-block 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; +} + +.icon-button:hover { + background-color: var(--in-content-button-background); +} + +.icon-button:hover:active { + background-color: var(--in-content-button-background-active); +} + +.icon-button::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); +} + +#detailsBody h2 { + margin-block: 0 15px; + font-size: 1.1rem; + line-height: 1.2; + font-weight: 500; +} + +.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; +} + +section#selectedCards ul { + margin: 0; + padding: 0; + list-style: none inside; + display: flex; + flex-direction: column; + row-gap: 12px; +} + +#detailsDeleteButton { + color: var(--vcard-delete-button-color); +} + +#detailsDeleteButton:hover { + background-color: var(--vcard-delete-button-color); + color: var(--color-white); +} + +#detailsDeleteButton:hover:active { + background-color: var(--red-70); +} + +#detailsDeleteButton::before, +.icon-button-delete { + background-image: var(--icon-trash); +} + +#detailsFooter label { + margin: 0 4px; + white-space: nowrap; +} + +#detailsFooter 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; +} + +#detailsFooter menulist > menupopup { + --panel-padding: 4px 0; + --panel-border-color: var(--arrowpanel-border-color); + --panel-border-radius: var(--arrowpanel-border-radius); +} + +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 */ +input[type="number"].size3 { + width: calc(3ch + 55px); +} +input[type="number"].size5 { + width: calc(5ch + 55px); +} + +input[type="number"]::-moz-number-spin-box { + padding-inline-start: 10px; +} + +input[type="number"]::-moz-number-spin-up, +input[type="number"]::-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; +} + +input[type="number"]::-moz-number-spin-up:hover, +input[type="number"]::-moz-number-spin-down:hover { + background-color: var(--in-content-button-background-hover); +} + +input[type="number"]::-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); + background-image: url("chrome://global/skin/icons/arrow-up-12.svg"); +} + +input[type="number"]::-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); + background-image: url("chrome://global/skin/icons/arrow-down-12.svg"); +} + +/* 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; +} + +#photoDropTarget[hidden] { + display: none; +} + +#photoDropTarget .icon { + display: none; + margin-inline-end: 8px; + width: 16px; + height: 16px; + -moz-context-properties: stroke; + stroke: currentColor; +} + +@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; + } + + #photoDropTarget.drop-loading .icon::before { + content: ""; + position: absolute; + background-image: url("chrome://messenger/skin/icons/loading.svg"); + width: 480px; + height: 100%; + animation: tab-throbber-animation 1.05s steps(30) infinite; + } + + #photoDropTarget.drop-loading .icon: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%); + } + } +} + +#photoDropTarget.drop-error .icon { + display: unset; + background-image: url("chrome://global/skin/icons/warning.svg"); + background-size: contain; +} + +#photoDialog svg { + margin: -10px; +} + +#photoDialog svg[hidden] { + display: none; +} + +#photoDialog rect { + fill: transparent; +} + +#photoDialog rect:not(.corner) { + shape-rendering: crispEdges; + stroke: #fff; + stroke-width: 1px; +} + +#photoDialog .corner.nw { + cursor: nw-resize; +} + +#photoDialog .corner.ne { + cursor: ne-resize; +} + +#photoDialog .corner.se { + cursor: se-resize; +} + +#photoDialog .corner.sw { + cursor: sw-resize; +} + +#photoDialog .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; +} |