diff options
Diffstat (limited to 'comm/mail/themes/shared/mail/messengercompose.css')
| -rw-r--r-- | comm/mail/themes/shared/mail/messengercompose.css | 1485 |
1 files changed, 1485 insertions, 0 deletions
diff --git a/comm/mail/themes/shared/mail/messengercompose.css b/comm/mail/themes/shared/mail/messengercompose.css new file mode 100644 index 0000000000..1c599c1d06 --- /dev/null +++ b/comm/mail/themes/shared/mail/messengercompose.css @@ -0,0 +1,1485 @@ +/* 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/. */ + +@namespace html url("http://www.w3.org/1999/xhtml"); + +:root { + --lwt-additional-images: none; + --lwt-background-alignment: right top; + --lwt-background-tiling: no-repeat; + --toolbar-bgcolor: var(--toolbar-non-lwt-bgcolor); + --toolbar-color: var(--toolbar-non-lwt-textcolor); + --autocomplete-box-padding: 3px; + --autocomplete-item-padding: 3px; + --autocomplete-item-radius: var(--button-border-radius); +} + +:root[uidensity="compact"] { + --autocomplete-box-padding: 0; + --autocomplete-item-padding: 0; + --autocomplete-item-radius: 0; +} + +:root[uidensity="touch"] { + --autocomplete-item-padding: 8px 3px; +} + +#contactsSidebar .sidebar-header { + appearance: none; + height: 30px; + text-shadow: none; + background-color: -moz-Dialog; + background-image: linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)); + color: -moz-dialogText; + border-bottom: 1px solid var(--lwt-tabs-border-color); +} + +:root[lwt-tree] #contactsSidebar .sidebar-header { + background-color: var(--toolbar-bgcolor); + color: var(--lwt-text-color); + border-bottom: 1px solid var(--lwt-tabs-border-color); +} + +:root[lwt-tree-brighttext] #contactsSidebar .sidebar-header { + background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)); +} + +#contactsSidebar toolbarbutton.close-icon { + margin-inline-end: 3px; +} + +/* Styles for the default system dark theme */ + +:root[lwt-tree] :is(#MsgHeadersToolbar, #FormatToolbox) { + background-color: var(--toolbar-bgcolor) !important; + color: var(--lwt-text-color); +} + +:root[lwt-tree] panel[type="autocomplete-richlistbox"] { + margin-top: -1px; + padding: 2px 0; + --panel-background: var(--arrowpanel-background); + --panel-color: var(--arrowpanel-color); + --panel-border-color: var(--arrowpanel-border-color); +} + +:root[lwt-tree] .autocomplete-richlistbox { + color: inherit; + background-color: inherit; +} + +:root[lwt-tree] .autocomplete-richlistitem[selected] { + background-color: var(--autocomplete-popup-highlight-background); + color: var(--autocomplete-popup-highlight-color); +} + +.autocomplete-richlistbox { + padding: var(--autocomplete-box-padding); +} + +.autocomplete-richlistitem { + padding: var(--autocomplete-item-padding); + border-radius: var(--autocomplete-item-radius); +} + +#attachmentBucket { + grid-area: attachment-list; + border-block: 1px solid var(--splitter-color); /* The same color as the splitters */ + padding: 1px; +} + +:root[lwt-tree] #attachmentArea > summary { + background-color: var(--toolbar-bgcolor); + color: var(--toolbar-color); +} + +#attachmentArea > summary { + grid-area: attachment-header; + padding: 6px; + /* Position self for the #newAttachmentIndicator. */ + position: relative; + display: flex; + gap: 6px; + align-items: baseline; +} + +#attachmentArea > summary > * { + flex: 0 0 auto; +} + +#attachmentArea > summary:focus-visible { + outline-style: auto; + outline-offset: -1px; +} + +#newAttachmentIndicator { + color: var(--selected-item-text-color); + background-color: var(--selected-item-color); + font-size: 0.85em; + padding: 2px 5px; + border-radius: 10px; + font-weight: 600; + position: absolute; + inset-inline-start: 3px; + z-index: 9; + opacity: 0; +} + +@media (prefers-reduced-motion: no-preference) { + .is_animating { + animation: new-attachment 1s steps(30) 1; + } + + @keyframes new-attachment { + 0% { + opacity: 0; + margin-block-start: 0; + } + 50% { + opacity: 1; + margin-block-start: -50px; + } + 100% { + opacity: 0; + margin-block-start: -100px; + } + } + + #attachmentToggle { + transition: transform 200ms ease; + } +} + +#attachmentToggle { + align-self: center; + color: inherit; + -moz-context-properties: stroke; + stroke: currentColor; + fill-opacity: 1; +} + +#attachmentArea:not([open]) #attachmentToggle { + transform: rotate(-90deg); +} + +#attachmentArea:-moz-locale-dir(rtl):not([open]) #attachmentToggle { + transform: rotate(90deg); +} + +#attachmentBucketCount { + text-overflow: ellipsis; + /* Required for text-overflow to do anything */ + white-space: nowrap; + overflow: hidden; +} + +#attachmentBucketSize { + color: var(--selected-item-text-color); + background-color: var(--selected-item-color); + font-size: 0.85em; + line-height: 1em; + padding: 3px 5px; + border-radius: 10px; + font-weight: 500; +} + +.drop-attachment-overlay { + --overlay-color: #fff; + --overlay-backround: rgba(0, 0, 0, 0.5); + --drop-attachment-box-color: #222; + --drop-attachment-box-border-color: rgba(255, 255, 255, 0.85); + --drop-attachment-box-background-hover: rgba(255, 255, 255, 0.5); + --drop-attachment-box-border-color-hover: #fff; + --drop-attachment-title-background: rgba(255, 255, 255, 0.85); +} + +:root[lwt-tree-brighttext] .drop-attachment-overlay { + --drop-attachment-box-color: #cbcbcb; + --drop-attachment-box-border-color: #999; + --drop-attachment-box-background-hover: rgba(0, 0, 0, 0.5); + --drop-attachment-box-border-color-hover: #fff; + --drop-attachment-title-background: rgba(0, 0, 0, 0.85); +} + +.drop-attachment-overlay { + pointer-events: none; + position: fixed; + z-index: 12; /* above the attachment bucket splitter */ + background-color: var(--overlay-backround); + color: var(--overlay-color); + inset: 0; + padding: 30px; + display: none; + justify-content: space-around; +} + +@media (prefers-reduced-motion: no-preference) { + @keyframes hiding-animation { + 0% { opacity: 1; } + 100% { opacity: 0; } + } + @keyframes showing-animation { + 0% { opacity: 0; } + 100% { opacity: 1; } + } + + .drop-attachment-box { + transition: color 120ms ease, background-color 120ms ease, border 120ms ease; + } + + .drop-attachment-box span { + transition: background-color 120ms ease; + } +} + +@media (prefers-reduced-motion: reduce) { + /* + * Redefine these animations but without any visible transition as we still + * need the timing for the animationend JavaScript event. + */ + @keyframes hiding-animation { + 0% { opacity: 1; } + 100% { opacity: 1; } + } + @keyframes showing-animation { + 0% { opacity: 1; } + 100% { opacity: 1; } + } +} + +.drop-attachment-overlay.hiding { + animation: hiding-animation 120ms ease 1; +} + +.drop-attachment-overlay.showing { + display: flex; + animation: showing-animation 120ms ease 1; +} + +.drop-attachment-overlay.show { + display: flex; +} + +.drop-attachment-box { + pointer-events: auto; + font-size: 1.4rem; + font-weight: 600; + color: var(--drop-attachment-box-color); + border-radius: 15px; + border: 4px dashed var(--drop-attachment-box-border-color); + flex: 1; + display: flex; + align-items: center; + justify-content: center; +} + +.drop-attachment-box:not(.hidden) + .drop-attachment-box { + margin-inline-start: 30px; +} + +.drop-attachment-box span { + pointer-events: none; + -moz-context-properties: fill; + fill: currentColor; + padding-inline: 25px 6px; + border-radius: 3px; + background-color: var(--drop-attachment-title-background); + background-position: 6px center; + background-repeat: no-repeat; + background-size: 16px; +} + +.drop-attachment-box span:-moz-locale-dir(rtl) { + background-position-x: right 6px; +} + +.drop-attachment-box .drop-as-attachment { + background-image: url("chrome://messenger/skin/icons/attach.svg"); +} + +.drop-attachment-box .drop-inline { + background-image: url("chrome://messenger/skin/icons/image.svg"); +} + +.drop-attachment-box.hidden { + display: none; +} + +.drop-attachment-box.hover { + border-color: var(--drop-attachment-box-border-color-hover); + border-style: solid; + background-color: var(--drop-attachment-box-background-hover); +} + +.drop-attachment-box.hover span { + background-color: transparent; +} + +.add-attachment-label { + -moz-context-properties: fill; + fill: currentColor; + background: url("chrome://messenger/skin/icons/attach.svg") left center no-repeat; + background-size: contain; + padding-inline-start: 25px; +} + +#compose-toolbox > toolbar { + /* force iconsize="small" on these toolbars */ + counter-reset: smallicons; + background-color: var(--toolbar-bgcolor); +} + +#compose-toolbox:-moz-lwtheme { + appearance: none; + position: relative; + color: var(--toolbar-color, inherit); +} + +#compose-toolbox:-moz-lwtheme::after { + content: ""; + display: block; + position: absolute; + pointer-events: none; + top: -1px; + width: -moz-available; + height: 1px; + border-bottom: 1px solid var(--lwt-tabs-border-color, transparent); +} + +#composeToolbar2 { + padding-inline: 3px; +} + +#composeContentBox { + /* In order to remove the shadow border on left/right edges elegantly, use + * left/right margins of -3px. We make up for this by adding 3px of padding + * instead. */ + margin-inline: -3px; + padding-inline: 3px; + display: grid; + grid-template: "contacts contacts-splitter headers" minmax(auto, var(--headersSplitter-height)) + "contacts contacts-splitter format-toolbar" min-content + "contacts contacts-splitter headers-splitter" min-content + "contacts contacts-splitter message" minmax(33%, 1fr) + "contacts contacts-splitter attachment-splitter" min-content + "contacts contacts-splitter attachment-header" min-content + "contacts contacts-splitter attachment-list" var(--attachment-list-track-size) + / minmax(auto, var(--contactsSplitter-width)) min-content minmax(auto, 1fr); + /* If the splitter is not used, the header and attachment areas will try and + * grow to their content size. */ + --headersSplitter-height: min-content; + --attachmentSplitter-height: min-content; + --contactsSplitter-width: 200px; + /* NOTE: We specify the sizing of the attachment list using a variable because + * when the attachment area is hidden or the attachment list is closed, we + * want to adjust the sizing so that we can ignore the splitter height. */ + --attachment-list-track-size: minmax(auto, var(--attachmentSplitter-height)); + /* The parent body uses the -moz-box display, which does not take into account + * the natural minimum height this element can take due to its grid display. + * So we need to explicitly set the minimum height so that the body's layout + * will properly resize this element to the available space. + * TODO: Remove these rules when the body uses a standard CSS display. */ + min-height: 0; + flex: 1; + overflow: clip; +} + +#contactsSidebar { + grid-area: contacts; + box-sizing: border-box; + min-width: 150px; + max-width: 400px; + display: flex; + flex-direction: column; +} + +#contactsSidebar .sidebar-header { + flex: 0 0 auto; +} + +#contactsBrowser { + flex: 1 1 auto; +} + +#contactsSidebar.collapsed-by-splitter { + display: none; +} + +#contactsSplitter { + grid-area: contacts-splitter; +} + +#contactsSplitter.splitter-collapsed { + /* The splitter cannot be un-collapsed using a mouse drag. */ + display: none; +} + +#MsgHeadersToolbar { + grid-area: headers; +} + +#FormatToolbox { + appearance: none; + grid-area: format-toolbar; +} + +#headersSplitter { + grid-area: headers-splitter; +} + +#messageArea { + grid-area: message; + display: flex; + flex-direction: column; +} + +#messageEditor { + flex: 1 1 0; + min-height: 0; +} + +#FindToolbar { + flex: 0 0 auto; +} + +@media (prefers-color-scheme: dark) { + #messageArea { + background-color: #2a2a2e; + } +} + +#attachmentSplitter { + grid-area: attachment-splitter; +} + +#attachmentArea { + /* Children are grid items. */ + display: contents; +} + +/* When the attachment area is hidden, or the visibility of the attachmentBucket + * is toggled by the summary element. */ +#composeContentBox:is(.attachment-area-hidden, .attachment-bucket-closed) { + /* We adjust the track sizing so it no longer takes up any grid space. */ + --attachment-list-track-size: 0; +} + +#composeContentBox.attachment-bucket-closed #attachmentSplitter { + /* NOTE: When the bucket is closed, we do not consider it "collapsed" by the + * splitter. It was closed by the attachmentArea's summary, not the splitter. + * Moreover, it cannot be un-collapsed by the splitter either. + * Instead, we want to simply stop the splitter from resizing by making it + * non-interactive. We keep the splitter visible though as it still acts as a + * barrier between the message body and the attachment area. */ + pointer-events: none; +} + +#composeContentBox.attachment-area-hidden #attachmentSplitter { + /* We completely hide the splitter when the attachment area is hidden. */ + display: none; +} + +#composeContentBox.attachment-area-hidden #attachmentArea { + display: none; +} + +#composeContentBox.attachment-bucket-closed #attachmentBucket { + display: none; +} + +/* :::: primary toolbar buttons :::: */ + +#button-send { + list-style-image: var(--icon-sent); +} + +#button-contacts { + list-style-image: var(--icon-address-book); +} + +#spellingButton { + list-style-image: var(--icon-spelling); +} + +#button-attach { + list-style-image: var(--icon-attachment); +} + +#button-encryption { + list-style-image: var(--icon-lock-disabled); +} + +#button-encryption[checked] { + list-style-image: var(--icon-lock); +} + +#button-encryption-options { + list-style-image: var(--icon-shield); +} + +#button-signing { + list-style-image: var(--icon-ribbon); +} + +#button-save { + list-style-image: var(--icon-download); +} + +#quoteButton { + list-style-image: var(--icon-quote); +} + +#button-returnReceipt { + list-style-image: var(--icon-receipt); +} + +#cut-button { + list-style-image: var(--icon-cut); +} + +#copy-button { + list-style-image: var(--icon-copy); +} + +#paste-button { + list-style-image: var(--icon-paste); +} + +#button-print { + list-style-image: var(--icon-print); +} + +.menu-description, +menulist::part(description) { + font-style: italic; + opacity: 0.55; + margin-inline: 1ex !important; +} + +.aw-firstColBox { + /* aw-firstColBox inline padding (4px + 4px) + remove-field-button inline + * padding (2px + 2px) + img width (16px) */ + padding: 0 4px; + width: 28px; +} + +.aw-firstColBox, +#identityLabel-box { + flex-shrink: 0; +} + +/* :::: Format toolbar :::: */ + +#FormatToolbar:not([hidden="true"]) { + display: flex; +} + +/* + * Removed from global.css in bug 1484949. It's needed so the formatting + * toolbar is not disabled while a dropdown (paragraph format or font) is active. + */ +.toolbar-focustarget { + -moz-user-focus: ignore !important; +} + +#ParagraphSelect { + flex-shrink: 0.1; + min-width: 7em; +} + +#FontFaceSelect { + flex-shrink: 2; + min-width: 7em; +} + +#FormatToolbar > menulist { + margin-block: 1px; +} + +#FormatToolbar > menulist:not(:hover) { + background: transparent; +} + +#FormatToolbar > menulist::part(label-box) { + text-shadow: none; +} + +#FormatToolbar > menulist:not([disabled="true"],[open="true"]):hover { + background: var(--toolbarbutton-hover-background); +} + +#FormatToolbar > menulist[open="true"] { + background: var(--toolbarbutton-active-background); + border-color: var(--toolbarbutton-active-bordercolor); +} + +#FormatToolbar > toolbarbutton > .toolbarbutton-text { + display: none; +} + +toolbarbutton.formatting-button { + appearance: none; + border: 1px solid transparent; + border-radius: var(--button-border-radius); + color: inherit; + -moz-context-properties: fill; + fill: currentColor; + transition-property: background-color, border-color, box-shadow; + transition-duration: 150ms; +} + +toolbarbutton.formatting-button:not([disabled="true"]):hover { + background: var(--toolbarbutton-hover-background); + border-color: var(--toolbarbutton-hover-bordercolor); + box-shadow: var(--toolbarbutton-hover-boxshadow); +} + +toolbarbutton.formatting-button:not([disabled="true"]):is([open="true"],[checked="true"],:hover:active) { + background: var(--toolbarbutton-checked-background); + border-color: var(--toolbarbutton-active-bordercolor); + box-shadow: var(--toolbarbutton-active-boxshadow); +} + +toolbarbutton.formatting-button:not([disabled="true"]):is([open="true"],:hover:active) { + background: var(--toolbarbutton-active-background) !important; +} + +.formatting-button > .toolbarbutton-menu-dropmarker { + list-style-image: url("chrome://messenger/skin/messengercompose/format-dropmarker.svg"); + -moz-context-properties: fill; + fill: currentColor; + display: inline-flex; +} + +toolbarbutton.formatting-button[disabled="true"] > .toolbarbutton-icon, +.formatting-button[disabled="true"] > .toolbarbutton-menu-dropmarker { + opacity: 0.4; +} + +#FontFaceSelect { + max-width: 35ch; +} + +/* ..... fg/bg color picker ..... */ + +#ColorButtons { + margin-inline: 3px 4px; +} + +.color-button { + border: 1px solid var(--toolbarbutton-active-bordercolor); + padding: 0; + width: 18px; + height: 15px; + margin: 2px; +} + +.color-button[disabled="true"] { + opacity: 0.5; +} + +.ColorPickerLabel { + border: 1px inset ThreeDFace; + margin: 0; + padding: 2px; +} + +#TextColorButton { + margin-block: 2px 9px; + margin-inline: 2px 9px; +} + +#TextColorButton[color="mixed"] { + background-image: url("chrome://messenger/skin/icons/multicolor.png"); + background-size: cover; +} + +#BackgroundColorButton { + margin-block: 9px 2px; + margin-inline: 9px 2px; +} + +/* :::: Reorder Attachments Panel :::: */ + +#reorderAttachmentsPanel::part(content) { + --panel-padding: 4px; +} + +#btn_moveAttachmentFirst { + list-style-image: url("chrome://messenger/skin/icons/move-first.svg"); +} + +#btn_moveAttachmentLeft { + list-style-image: url("chrome://messenger/skin/icons/move-left.svg"); +} + +#btn_moveAttachmentRight { + list-style-image: url("chrome://messenger/skin/icons/move-right.svg"); +} + +#btn_moveAttachmentLast { + list-style-image: url("chrome://messenger/skin/icons/move-last.svg"); +} + +#btn_moveAttachmentBundleUp { + list-style-image: url("chrome://messenger/skin/icons/move-together.svg"); +} + +#btn_sortAttachmentsToggle { + list-style-image: url("chrome://messenger/skin/icons/sort.svg"); +} + +#btn_sortAttachmentsToggle[sortdirection="descending"] > .toolbarbutton-icon { + transform: scaleY(-1); +} + +.autocomplete-richlistitem:hover { + background-color: var(--arrowpanel-dimmed); +} + +.autocomplete-richlistitem[selected] { + background-color: var(--selected-item-color); + color: var(--selected-item-text-color); +} + +/* :::: autocomplete icons :::: */ + +.autocomplete-richlistitem > .ac-site-icon { + -moz-context-properties: fill, stroke; + fill: color-mix(in srgb, currentColor 20%, transparent); + stroke: currentColor; +} + +.autocomplete-richlistitem[type="local-abook"] > .ac-site-icon { + list-style-image: var(--icon-address-book); +} + +.autocomplete-richlistitem[type="remote-abook"] > .ac-site-icon { + list-style-image: var(--icon-globe); +} + +.autocomplete-richlistitem[type="remote-err"] > .ac-site-icon { + list-style-image: var(--icon-error-circle); +} + +.autocomplete-richlistitem[type="subscribed-news-abook"] > .ac-site-icon { + list-style-image: var(--icon-newsletter); +} + +/* :::: attachment notification :::: */ + +#compose-notification-bottom > .notificationbox-stack { + background-color: var(--toolbar-field-focus-background-color); +} + +#attachmentReminderText { + margin-inline-start: 0; + cursor: pointer; +} + +#attachmentKeywords { + font-weight: bold; + margin-inline-start: 0; + text-decoration: underline; + cursor: pointer; +} + +#identityLabel, +.address-label-container label { + margin-inline-end: 6px; + text-align: right; +} + +#top-gradient-box.address-identity-recipient { + overflow: hidden; +} + +#msgIdentity { + flex: 0 1 auto; + overflow: hidden; + appearance: none; + align-items: center; + font: inherit; + margin-inline: 4px 10px; + border: 1px solid transparent; + border-radius: var(--button-border-radius); + background-color: transparent; + transition: border .2s, box-shadow .2s, background-color .2s; +} + +/* XUL element needs the full [disabled="true"] attribute. */ +#msgIdentity[disabled="true"] { + opacity: 0.6; +} + +#msgIdentity:-moz-locale-dir(rtl) { + background-position: 5px; +} + +#extraAddressRowsArea { + /* Contains the main recipient buttons, plus the button to reveal the + * overflow. */ + display: flex; + align-items: center; + gap: 12px; + margin-inline-end: 6px; +} + +#extraAddressRowsArea > * { + flex: 0 0 auto; +} + +#extraAddressRowsArea.addressingWidget-separator::before { + display: block; + content: ''; + width: 1px; + border-inline-start: 1px solid var(--toolbarbutton-hover-bordercolor); + height: 14px; +} + +#msgIdentity::part(text-input) { + border-style: none; + outline-style: none; + margin-inline: 1px; +} + +#msgIdentityPopup > menuitem[selected="true"] { + background-color: var(--autocomplete-popup-highlight-background); + color: var(--autocomplete-popup-highlight-color); +} + +#msgSubjectContainer { + position: relative; +} + +#msgEncryptedSubjectIcon { + position: absolute; + top: 8px; + inset-inline-start: 10px; +} + +#msgSubject { + appearance: none; + margin-top: 0; + margin-inline: 4px 8px; + background-color: Field; + border: 1px solid var(--toolbarbutton-hover-bordercolor); + border-radius: var(--button-border-radius); + padding-block: 0; + padding-inline: 4px 2px; + transition: border .2s, box-shadow .2s; +} + +#msgSubject.with-icon { + padding-inline-start: 25px; +} + +.recipients-container { + display: block; + overflow-y: auto; +} + +:root[lwt-tree] #msgSubject, +:root[lwt-tree] .address-container { + background-color: var(--toolbar-field-background-color); + color: var(--lwt-text-color); +} + +.address-row { + display: flex; + flex: 1; + margin-block: 6px; + margin-inline-end: 8px; + align-items: self-start; +} + +.address-row > .aw-firstColBox { + transition: opacity .2s ease; + opacity: 0; + flex: 0 0 auto; + align-self: center; +} + +.address-row:hover > .aw-firstColBox, +.address-row:focus > .aw-firstColBox, +.address-row:focus-within > .aw-firstColBox { + opacity: 1; +} + +.address-row > .address-label-container { + flex: 0 0 auto; +} + +.address-row > .address-container { + flex: 1 1 auto; +} + +.address-row.hidden { + display: none; +} + +.address-container { + margin-inline-start: 4px; + margin-inline-end: 0; + border: solid 1px var(--toolbarbutton-hover-bordercolor); + border-radius: var(--button-border-radius); + background-color: Field; + transition: border .2s, box-shadow .2s; + cursor: text; +} + +.address-container.disable-container { + opacity: 0.9; +} + +.address-input { + color: inherit; + outline: none; +} + +.address-container > .address-input { + padding-block: 4px; +} + +.address-container > .address-input:focus { + outline: none; +} + +.address-pill { + display: flex; + align-items: center; + border-radius: var(--button-border-radius); + margin-inline-end: 3px; + margin-block: 2px; + padding-inline: 7px; + background-color: rgba(0,0,0,0.1); + transition: color .2s ease, background-color .2s ease, box-shadow .2s ease, + text-shadow .2s ease; + -moz-user-focus: normal; + cursor: default; + box-shadow: inset 0 0 0 1px transparent; +} + +.address-pill label { + -moz-user-focus: none; + cursor: default; + margin-inline: 0; +} + +.address-pill label, +.address-pill hbox { + pointer-events: none; +} + +.address-pill hbox:not([hidden="true"]) { + display: flex; +} + +.address-pill:hover:not(.editing), +.address-pill:focus:not(.editing) { + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3), + inset 0 0 0 2em rgba(0, 0, 0, 0.1); +} + +.address-pill[selected]:hover:not(.editing), +.address-pill[selected]:focus:not(.editing) { + box-shadow: 0 1px 5px -2px var(--focus-outline-color), + inset 0 0 0 1px rgba(0, 0, 0, 0.3), + inset 0 0 0 2em rgba(0, 0, 0, 0.15); + text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); +} + +.address-pill.editing { + flex: 1; + background-color: transparent; + box-shadow: inset 0 0 0 1px var(--focus-outline-color); + min-height: calc(1.25em + 4px); /* needed to not shrink in edit mode */ +} + +.pill-indicator { + -moz-context-properties: fill, stroke; + fill: currentColor; + stroke: Field; + margin-inline-end: -8px; + margin-bottom: 1em; + transition: fill .2s ease, stroke .2s ease; +} + +:root[lwt-tree] .pill-indicator { + stroke: var(--toolbar-field-background-color); +} + +#MsgHeadersToolbar[brighttext] .address-pill:not(.editing) { + background-color: rgba(0,0,0,0.3); +} + +#MsgHeadersToolbar[brighttext] .address-pill:hover:not(.editing), +#MsgHeadersToolbar[brighttext] .address-pill:focus:not(.editing) { + box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3), + inset 0 0 0 2em rgba(255, 255, 255, 0.1); +} + +#MsgHeadersToolbar[brighttext] .address-pill[selected]:hover:not(.editing), +#MsgHeadersToolbar[brighttext] .address-pill[selected]:focus:not(.editing) { + box-shadow: 0 1px 5px -2px var(--focus-outline-color), + inset 0 0 0 1px rgba(255,255,255,0.3), + inset 0 0 0 2em rgba(0, 0, 0, 0.2); + text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); +} + +.address-pill.invalid-address:not(.editing), +#MsgHeadersToolbar[brighttext] .address-pill.invalid-address:not(.editing) { + color: #fff; + background-color: #d70022; + background-image: url("chrome://global/skin/icons/warning.svg"); + background-size: 12px; + background-repeat: no-repeat; + background-position: calc(100% - 5px); + padding-inline-end: 21px; + fill: currentColor; + -moz-context-properties: fill; +} + +.address-pill.key-issue:not(.editing), +#MsgHeadersToolbar[brighttext] .address-pill.key-issue:not(.editing) { + color: #000; + background-color: #ffe900; + background-image: url("chrome://global/skin/icons/warning.svg"); + background-size: 12px; + background-repeat: no-repeat; + background-position: calc(100% - 5px); + padding-inline-end: 21px; + fill: currentcolor; + -moz-context-properties: fill; +} + +/* RTL variation for background position */ +.address-pill.invalid-address:not(.editing):-moz-locale-dir(rtl), +.address-pill.key-issue:not(.editing):-moz-locale-dir(rtl), +#MsgHeadersToolbar[brighttext] .address-pill.invalid-address:not(.editing):-moz-locale-dir(rtl), +#MsgHeadersToolbar[brighttext] .address-pill.key-issue:not(.editing):-moz-locale-dir(rtl) { + background-position: 5px; +} + +.address-pill.invalid-address:hover:not(.editing), +.address-pill.invalid-address:focus:not(.editing), +#MsgHeadersToolbar[brighttext] .address-pill.invalid-address:hover:not(.editing), +#MsgHeadersToolbar[brighttext] .address-pill.invalid-address:focus:not(.editing) { + background-color: #a4000f; +} + +.address-pill.key-issue:hover:not(.editing), +.address-pill.key-issue:focus:not(.editing), +#MsgHeadersToolbar[brighttext] .address-pill.key-issue:hover:not(.editing), +#MsgHeadersToolbar[brighttext] .address-pill.key-issue:focus:not(.editing) { + background-color: #d7b600; +} + +.address-pill[selected]:not(.editing), +.address-pill.invalid-address[selected]:not(.editing), +.address-pill.key-issue[selected]:not(.editing), +#MsgHeadersToolbar[brighttext] .address-pill[selected]:not(.editing), +#MsgHeadersToolbar[brighttext] .address-pill.invalid-address[selected]:not(.editing), +#MsgHeadersToolbar[brighttext] .address-pill.key-issue[selected]:not(.editing) { + color: var(--selected-item-text-color); + background-color: var(--selected-item-color); +} + +.address-pill[selected]:not(.editing) .pill-indicator { + fill: var(--selected-item-color); +} + +#MsgHeadersToolbar { + display: grid; + grid-template-rows: min-content minmax(0, min-content) min-content; + grid-template-columns: auto; +} + +.address-identity-recipient { + margin-inline-end: 8px; + display: flex; +} + +.recipient-button { + white-space: nowrap; + text-align: start; +} + +#extraAddressRowsMenu { + min-width: 160px; +} + +.overflow-icon { + width: 16px; + height: 16px; + color: inherit; + -moz-context-properties: stroke, fill-opacity; + stroke: currentColor; + fill-opacity: 1; +} + +.overflow-icon:-moz-locale-dir(rtl) { + transform: scaleX(-1); +} + +button#extraAddressRowsMenuButton[aria-expanded="true"] { + /* Show as toggled on when the overflow is expanded. */ + background: var(--toolbarbutton-active-background); + box-shadow: var(--toolbarbutton-active-boxshadow); +} + +button:is(#extraAddressRowsMenuButton, .remove-field-button) { + padding: 2px; + margin: 0; +} + +button.recipient-button { + padding: 2px 4px; + margin: 0; +} + +button:is( + #extraAddressRowsMenuButton, + .remove-field-button, + .recipient-button +):focus-visible { + outline: 2px solid var(--focus-outline-color); +} + +.remove-field-button > img { + -moz-context-properties: fill; + fill: currentColor; + width: 16px; + height: 16px; +} + +#msgIdentity:hover { + border-color: var(--toolbarbutton-hover-bordercolor); + background-color: Field; +} + +:root[lwt-tree] #msgIdentity:hover { + background-color: var(--toolbar-field-background-color); +} + +#msgIdentity:focus, +#msgIdentity:focus-within, +#msgIdentity[focused="true"], +#msgSubject:focus, +.drag-address-container, +.address-container[focused="true"] { + border-color: var(--toolbar-field-focus-border-color); + background-color: Field; + outline: 1px solid var(--toolbar-field-focus-border-color); + outline-offset: 0; +} + +:root[lwt-tree] #msgIdentity:focus-within, +:root[lwt-tree] #msgIdentity[focused="true"], +:root[lwt-tree] #msgSubject:focus, +:root[lwt-tree] .address-container[focused="true"] { + color: var(--toolbar-field-focus-color); + background-color: var(--toolbar-field-focus-background-color); +} + +:root[lwt-tree-brighttext] #msgIdentity:focus, +:root[lwt-tree-brighttext] #msgIdentity:focus-within, +:root[lwt-tree-brighttext] #msgIdentity[focused="true"], +:root[lwt-tree-brighttext] #msgSubject:focus, +:root[lwt-tree-brighttext] .address-container[focused="true"] { + background-color: var(--toolbar-field-background-color); +} + +.address-pill::before { + display: block; + content: ''; + position: relative; + width: 3px; + background-color: var(--focus-outline-color); + height: 15px; + border-radius: 2px; + margin-inline: -10px 5px; + transition: all .2s ease; + transform: scaleY(0); +} + +.drop-indicator::before { + transform: scaleY(1); +} + +/* ..... format buttons ..... */ + +#AbsoluteFontSizeButton { + list-style-image: url("chrome://messenger/skin/icons/size.svg"); +} + +#DecreaseFontSizeButton { + list-style-image: url("chrome://messenger/skin/icons/decrease.svg"); +} + +#IncreaseFontSizeButton { + list-style-image: url("chrome://messenger/skin/icons/increase.svg"); +} + +#boldButton { + list-style-image: url("chrome://messenger/skin/icons/bold.svg"); +} + +#italicButton { + list-style-image: url("chrome://messenger/skin/icons/italics.svg"); +} + +#underlineButton { + list-style-image: url("chrome://messenger/skin/icons/underline.svg"); +} + +#ulButton { + list-style-image: url("chrome://messenger/skin/icons/bullet-list.svg"); +} + +#removeStylingButton { + list-style-image: url("chrome://messenger/skin/icons/remove-text-styling.svg"); +} + +#olButton { + list-style-image: url("chrome://messenger/skin/icons/number-list.svg"); +} + +#outdentButton { + list-style-image: url("chrome://messenger/skin/icons/outdent.svg"); +} + +#indentButton { + list-style-image: url("chrome://messenger/skin/icons/indent.svg"); +} + +#InsertPopupButton { + list-style-image: url("chrome://messenger/skin/icons/image.svg"); +} + +#AlignPopupButton { + list-style-image: url("chrome://messenger/skin/icons/left-align.svg"); +} + +#smileButtonMenu { + list-style-image: url("chrome://messenger/skin/icons/smiley.svg"); +} + +/* ..... align menu ..... */ + +#AlignPopup > menuitem { + -moz-context-properties: fill; + fill: currentColor; +} + +#AlignLeftItem, #AlignPopupButton[state="left"] { + list-style-image: url("chrome://messenger/skin/icons/left-align.svg"); +} + +#AlignCenterItem, #AlignPopupButton[state="center"] { + list-style-image: url("chrome://messenger/skin/icons/center-align.svg"); +} + +#AlignRightItem, #AlignPopupButton[state="right"] { + list-style-image: url("chrome://messenger/skin/icons/right-align.svg"); +} + +#AlignJustifyItem, #AlignPopupButton[state="justify"] { + list-style-image: url("chrome://messenger/skin/icons/justify.svg"); +} + +/* ..... insert menu ..... */ + +#InsertPopup > menuitem { + -moz-context-properties: fill; + fill: currentColor; +} + +#InsertLinkItem { + list-style-image: url("chrome://global/skin/icons/link.svg"); +} + +#InsertAnchorItem { + list-style-image: url("chrome://messenger/skin/icons/anchor.svg"); +} + +#InsertImageItem { + list-style-image: url("chrome://messenger/skin/icons/image.svg"); +} + +#InsertHRuleItem { + list-style-image: url("chrome://messenger/skin/icons/hline.svg"); +} + +#InsertTableItem { + list-style-image: url("chrome://messenger/skin/icons/table.svg"); +} + +#findbar-replaceButton { + margin-block: 0; +} + +#findbar-replaceButton > .toolbarbutton-icon { + display: none; +} + +#linkPreviewSettings { + border: 1px solid silver; + border-radius: 5px; + padding: 10px 20px; + width: 500px; +} +#linkPreviewSettings h2 { + color: blue; + font-size: 1em; +} +#linkPreviewSettings p { + margin: 0.5em 0.2em; +} +#linkPreviewSettings .bottom { + padding: 1em 0; +} +#linkPreviewSettings button { + background-color: navy; + color: white; + padding: 0.2em 2em; +} +#linkPreviewSettings .close { + font-size: 1.4em; + float: inline-end; + font-weight: 600; + display: inline-block; + transform: rotate(45deg); + margin-block: -0.2em 0.2em; + margin-inline: 0.2em -0.2em; +} + +.statusbar:not([hidden="true"]) { + display: flex; + align-items: center; + min-width: 0; +} + +.statusbar > :not(#statusText) { + flex: 0 0 auto; +} + +.statusbar > #statusText { + flex: 1 1 auto; +} + +#statusText { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + margin-inline: 4px; +} + +#compose-progressmeter { + margin-inline: 4px; +} + +/* Language selector */ +#languageStatusButton { + margin-block: 0; + margin-inline: 4px 0; + padding: 2px 4px; + border-radius: 0; +} + +#languageStatusButton:focus-visible { + /* Provide some inset for the outline. */ + outline-offset: -1px; +} + +#toggleRecipientsButton { + margin-top: 3px; +} + +.font-bold { + font-weight: bold; +} + +.flex-center { + display: flex; + align-items: center; + gap: 5px; +} + +.margin-top-1em { + margin-top: 1em; +} + +dialog.modal-dialog[open] { + display: flex; + flex-direction: column; + width: 580px; + color: inherit; + padding-inline: 0; + max-height: 90vh; + overflow-x: hidden; +} + +dialog .modal-dialog-body { + flex: 1; + display: flex; + flex-direction: column; + justify-content: space-between; + overflow-y: auto; + padding-inline: 15px; +} + +dialog .container-with-link { + display: grid; + grid-template-columns: 1fr auto; + align-items: baseline; +} + +dialog .radio-container-with-text { + display: grid; + grid-template-columns: auto 1fr; + align-items: baseline; + column-gap: 12px; +} + +dialog .display-block { + display: block; + margin-block: 1px; +} + +dialog .key-list { + display: flex; + flex-direction: column; + gap: 3px; + border: 1px solid var(--dialog-box-border-color); + border-radius: 3px; + margin-block: 12px 6px; +} + +dialog .key-list > li:nth-child(even) { + background-color: rgba(0, 0, 0, 0.05); +} + +dialog .key-row { + display: flex; + align-items: center; + gap: 3px 6px; + padding: 3px 6px; +} + +dialog .key-info { + flex: 1; + display: flex; + flex-direction: column; + gap: 3px; +} + +dialog .key-info-block { + margin-block-start: 6px; + margin-inline-start: 28px; +} + +.comma-separated a:not(:last-child):after { + content: ", "; +} |