diff options
Diffstat (limited to 'comm/mail/themes/shared/mail/about3Pane.css')
| -rw-r--r-- | comm/mail/themes/shared/mail/about3Pane.css | 631 |
1 files changed, 631 insertions, 0 deletions
diff --git a/comm/mail/themes/shared/mail/about3Pane.css b/comm/mail/themes/shared/mail/about3Pane.css new file mode 100644 index 0000000000..75a4f9b668 --- /dev/null +++ b/comm/mail/themes/shared/mail/about3Pane.css @@ -0,0 +1,631 @@ +/* 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/threadPane.css"); + +:root { + --foldertree-background: -moz-Dialog; + --treeitem-border-radius: 3px; + --folder-mode-name-padding: 6px; + --folder-tree-header-gap: 9px; + --folder-tree-header-padding: 9px; + --folder-pane-icon-size: 16px; + --folder-pane-icon-new: var(--icon-add); + --folder-pane-icon-more: var(--icon-more); + --folder-pane-icon-download: var(--icon-cloud-download); + --folder-pane-icon-kebab: var(--icon-kebab); +} + +@media not (prefers-contrast) { + :root { + --foldertree-background: var(--color-gray-05); + --folderpane-unread-count-background: var(--color-gray-50); + --folderpane-unread-count-text: var(--color-white); + --folderpane-total-count-background: var(--color-gray-20); + --folderpane-total-count-text: var(--color-gray-90); + --folderpane-unread-new-count-background: var(--color-blue-60); + --treeitem-background-selected: var(--color-gray-20); + --treeitem-background-hover: var(--color-gray-10); + --treeitem-text-active: var(--color-white); + --treeitem-background-active: var(--color-blue-50); + --in-content-item-selected-unfocused: var(--color-gray-20); + } + + @media (prefers-color-scheme: dark) { + :root { + --foldertree-background: var(--color-gray-80); + --folderpane-unread-new-count-background: var(--color-blue-50); + --folderpane-total-count-background: var(--color-gray-60); + --folderpane-total-count-text: var(--color-white); + --treeitem-background-selected: var(--color-gray-70); + --treeitem-background-hover: var(--color-gray-60); + --treeitem-background-active: var(--color-blue-60); + --in-content-item-selected-unfocused: rgba(249, 249, 250, 0.05); + --in-content-primary-button-background: #45a1ff; + --in-content-primary-button-background-hover: #65c1ff; + --in-content-primary-button-background-active: #85e1ff; + --in-content-focus-outline-color: #45a1ff; + } + } +} + +@media (prefers-contrast) { + :root:not(:-moz-lwtheme) { + --folderpane-unread-count-background: var(--selected-item-color); + --folderpane-unread-count-text: var(--selected-item-text-color); + --folderpane-total-count-background: var(--selected-item-color); + --folderpane-total-count-text: var(--selected-item-text-color); + --folderpane-unread-new-count-background: ButtonShadow; + --treeitem-background-selected: transparent; + --treeitem-background-hover: transparent; + --treeitem-outline-hover: 2px solid var(--selected-item-color); + --treeitem-text-active: var(--selected-item-text-color); + --treeitem-background-active: var(--selected-item-color); + } +} + +:root[lwt-tree] { + --foldertree-background: var(--sidebar-background-color); + --treeitem-background-selected: color-mix(in srgb, transparent 70%, var(--sidebar-highlight-background-color)); + --treeitem-background-hover: color-mix(in srgb, transparent 80%, var(--sidebar-highlight-background-color)); + --treeitem-text-active: var(--sidebar-highlight-text-color); + --treeitem-background-active: var(--sidebar-highlight-background-color); +} + +:root[uidensity="compact"] { + --folder-mode-name-padding: 3px; + --folder-tree-header-gap: 6px; + --folder-tree-header-padding: 4px 6px 3px; +} + +:root[uidensity="touch"] { + --folder-mode-name-padding: 9px; + --folder-tree-header-gap: 12px; + --folder-pane-icon-size: 20px; + --folder-pane-icon-new: var(--icon-add-md); + --folder-pane-icon-more: var(--icon-more-md); + --folder-pane-icon-download: var(--icon-cloud-download-md); +} + + +html { + height: 100%; +} + +body { + height: 100%; + margin: 0; + text-shadow: none; + + display: grid; + --folderPaneSplitter-width: 18em; + --messagePaneSplitter-width: 54em; + --messagePaneSplitter-height: 36em; +} + +/* Different layouts */ + +#folderPane { + grid-area: folders; + box-sizing: border-box; + /* Matches the collapse-width on the splitter. */ + min-width: 100px; + overflow: hidden auto; + background-color: var(--sidebar-background-color, var(--foldertree-background)); + color: var(--sidebar-text-color, inherit); + user-select: none; +} + +#folderPaneSplitter { + grid-area: folderPaneSplitter; +} + +#threadPane { + container-name: threadPane; + container-type: inline-size; + grid-area: threads; + box-sizing: border-box; + min-height: 200px; + min-width: 300px; + display: flex; + flex-direction: column; + overflow: hidden; +} + +#messagePaneSplitter { + grid-area: messagePaneSplitter; +} + +#messagePane { + grid-area: message; + box-sizing: border-box; + /* Matches the collapse-height and collapse-width on the splitter. */ + min-height: 100px; + min-width: 300px; + overflow: auto; + display: flex; +} + +#accountCentralBrowser { + grid-area: account-central; + box-sizing: border-box; + min-width: 400px; +} + +:is( + #messagePane, + #folderPane +).collapsed-by-splitter { + /* NOTE: We use "display: none" rather than "visibility: collapse". In the + * latter case, the min-width of min-height of the element would still + * influence the "auto" track sizing in the grid layout. In the former case + * the grid is completely missing a grid item for this track, so the "auto" + * size properly reduces to 0, as desired. Note that the track is indeed + * missing a grid item because each element in the body is explicitly placed + * in a grid-area, which means that there is no auto-placement of the grid + * items that would fill the track. */ + display: none; +} + +/* Classic layout: folder tree on the left, thread tree and message browser on the right. */ +body.layout-classic { + grid-template: "folders folderPaneSplitter threads" minmax(auto, 1fr) + "folders folderPaneSplitter messagePaneSplitter" min-content + "folders folderPaneSplitter message" minmax(auto, var(--messagePaneSplitter-height)) + / minmax(auto, var(--folderPaneSplitter-width)) min-content minmax(auto, 1fr); +} + +/* Vertical layout: three columns. */ +body.layout-vertical { + grid-template: "folders folderPaneSplitter threads messagePaneSplitter message" auto + / minmax(auto, var(--folderPaneSplitter-width)) min-content minmax(auto, 1fr) min-content minmax(auto, var(--messagePaneSplitter-width)); +} + +/* Wide layout: folder tree and thread tree on the top, and message browser on the bottom. */ +body.layout-wide { + grid-template: "folders folderPaneSplitter threads" minmax(auto, 1fr) + "messagePaneSplitter messagePaneSplitter messagePaneSplitter" min-content + "message message message" minmax(auto, var(--messagePaneSplitter-height)) + / minmax(auto, var(--folderPaneSplitter-width)) min-content minmax(auto, 1fr); +} + +/* If Account Central is shown, it overrides the layout setting. */ +body.account-central { + grid-template: "folders folderPaneSplitter account-central" auto + / minmax(auto, var(--folderPaneSplitter-width)) min-content minmax(auto, 1fr); +} + +body.account-central :is( + #threadPane, + #messagePaneSplitter, + #messagePane, +) { + display: none; +} + +body:not(.account-central) #accountCentralBrowser { + display: none; +} + +/* Folder tree pane. */ + +#folderPaneHeaderBar:not([hidden]) { + --button-margin: 0; + display: flex; + flex-direction: row-reverse; + align-items: center; + justify-content: space-between; + gap: var(--folder-tree-header-gap); + position: sticky; + top: 0; + background-color: var(--sidebar-background-color, var(--foldertree-background)); + color: var(--layout-color-2); + padding: var(--folder-tree-header-padding); + z-index: 1; +} + +#folderPaneGetMessages, +#folderPaneMoreButton, +#folderPaneWriteMessage { + --icon-size: var(--folder-pane-icon-size); +} + +#folderPaneGetMessages { + background-image: var(--folder-pane-icon-download); +} + +#folderPaneGetMessagesContext { + -moz-context-properties: fill, stroke; + fill: color-mix(in srgb, currentColor 20%, transparent); + stroke: currentColor; +} + +#itemGetAllNewMessages { + list-style-image: var(--folder-pane-icon-download); +} + +#folderPaneMoreButton { + background-image: var(--folder-pane-icon-more); +} + +#folderPaneWriteMessage { + background-image: var(--folder-pane-icon-new); +} + +#folderTree, +#folderTree ul { + margin: 0; + padding: 0; + list-style: none; + --depth: 0; + --indent: calc(16px * var(--depth)); +} + +#folderTree ul { + overflow: hidden; + height: auto; +} + +#folderTree:focus-visible { + outline: none; +} + +#folderTree li[data-mode] { + margin-bottom: 3px; +} + +#folderTree > li:not(:first-of-type) > .mode-container { + justify-content: space-between; + border-top: 1px solid var(--sidebar-border-color, var(--splitter-color)); +} + +#folderTree > li.unselectable > .mode-container { + margin: 0; + border-radius: 0; +} + +#folderTree > li.unselectable > .mode-container:hover { + background-color: transparent; +} + +#folderTree > li > .mode-container > .mode-name { + font-weight: 600; + font-size: 1.1rem; + min-height: initial; + padding-block: var(--folder-mode-name-padding); + padding-inline-start: 12px; + flex: 1; +} + +#folderTree > li > .mode-container > .mode-button { + background-image: var(--icon-kebab); +} + +#folderPaneHeaderBar[hidden] + #folderTree > li.unselectable:first-of-type > .mode-container { + border-top-style: none; +} + +.mode-container:not([hidden]) { + display: flex; + align-items: center; +} + +.container { + display: flex; + align-items: center; + -moz-context-properties: fill; + margin-inline: 6px; + border-radius: var(--treeitem-border-radius); + fill: currentColor; + cursor: default; + padding-inline-start: var(--indent); +} + +li.selected > .container { + background-color: var(--treeitem-background-selected); +} + +li:not(.selected) > .container:hover { + background-color: var(--treeitem-background-hover); +} + +@media (prefers-contrast) { + li:not(:focus-visible) > .container:hover { + outline: var(--treeitem-outline-hover); + outline-offset: -2px; + } +} + +li.context-menu-target:not(.selected) > .container, +li.context-menu-target:not(.selected) > .container:hover { + background-color: color-mix(in srgb, var(--treeitem-background-active) 10%, transparent); + outline: 1px var(--listbox-border-type) var(--listbox-focused-selected-bg); + outline-offset: -1px; +} + +#folderTree:focus-within li.selected > .container, +#folderTree li.drop-target > .container { + background-color: var(--treeitem-background-active); + color: var(--treeitem-text-active); +} + +#folderTree li .twisty { + display: inline-flex; + align-items: center; + justify-content: center; + width: var(--list-item-buttons-size); + height: var(--list-item-buttons-size); +} + +#folderTree li:not(.children) .twisty-icon { + display: none; +} + +#folderTree li.children.collapsed > .container .twisty-icon { + transform: rotate(-90deg); +} + +#folderTree li.children.collapsed:dir(rtl) > .container .twisty-icon { + transform: rotate(90deg); +} + +@media (prefers-reduced-motion: no-preference) { + #folderTree .twisty-icon { + transition: transform var(--transition-duration) var(--transition-timing); + } +} + +#folderTree .icon { + position: relative; + width: 16px; + height: 16px; + background-image: var(--icon-folder); + background-repeat: no-repeat; + --icon-color: var(--folder-color-folder); + -moz-context-properties: fill, stroke; + fill: color-mix(in srgb, var(--icon-color, var(--folder-color-folder)) 20%, transparent); + stroke: var(--icon-color, var(--folder-color-folder)); +} + +.new-messages:not([data-server-type]) > .container > .icon::after { + position: absolute; + content: var(--icon-new-indicator); + inset-inline-start: -2px; + inset-block-start: -2px; +} + +#folderTree:focus-within li.selected > .container > .icon { + --icon-color: currentColor !important; /* Override the user customized folder color. */ +} + +#folderTree li[data-server-type] > .container > .icon { + --icon-color: var(--primary); +} + +#folderTree li:is([data-server-type="imap"], [data-server-type="pop3"]) > .container > .icon { + background-image: var(--icon-mail); +} + +menuitem.server:is([data-server-type="imap"], [data-server-type="pop3"]) { + list-style-image: var(--icon-mail); +} + +#folderTree li:is([data-server-type="imap"], [data-server-type="pop3"])[data-server-secure="true"] + > .container > .icon { + background-image: var(--icon-mail-secure); +} + +menuitem.server:is([data-server-type="imap"], [data-server-type="pop3"])[data-server-secure="true"] { + list-style-image: var(--icon-mail-secure); +} + +#folderTree li[data-server-type="none"] > .container > .icon { + background-image: var(--icon-folder); +} + +#folderTree li[data-server-type="nntp"] > .container > .icon { + background-image: var(--icon-globe); +} + +menuitem.server[data-server-type="nntp"] { + list-style-image: var(--icon-globe); +} + +#folderTree li[data-server-type="nntp"][data-server-secure="true"] > .container > .icon { + background-image: var(--icon-globe-secure); +} + +menuitem.server[data-server-type="nntp"][data-server-secure="true"] { + list-style-image: var(--icon-globe-secure); +} + +#folderTree li[data-server-type="rss"] > .container > .icon { + background-image: var(--icon-rss); +} + +#folderTree li[data-server-type="rss"] > ul > li:not([data-folder-type], [data-is-busy="true"]) .icon { + --icon-color: currentColor; + fill: var(--icon-color); +} + +menuitem.server[data-server-type="rss"] { + list-style-image: var(--icon-rss); +} + +#folderTree li[data-folder-type="archive"] > .container > .icon { + background-image: var(--icon-archive); + --icon-color: var(--folder-color-archive); +} + +#folderTree li[data-folder-type="drafts"] > .container > .icon { + background-image: var(--icon-draft); + --icon-color: var(--folder-color-draft); +} + +#folderTree li[data-folder-type="inbox"] > .container > .icon { + background-image: var(--icon-inbox); + --icon-color: var(--folder-color-inbox); +} + +#folderTree li[data-folder-type="junk"] > .container > .icon { + background-image: var(--icon-spam); + --icon-color: var(--folder-color-spam); +} + +#folderTree li[data-folder-type="outbox"] > .container > .icon { + background-image: var(--icon-outbox); + --icon-color: var(--folder-color-outbox); +} + +#folderTree li[data-folder-type="sent"] > .container > .icon { + background-image: var(--icon-sent); + --icon-color: var(--folder-color-sent); +} + +#folderTree li[data-folder-type="templates"] > .container > .icon { + background-image: var(--icon-template); + --icon-color: var(--folder-color-template); +} + +#folderTree li[data-folder-type="trash"] > .container > .icon { + background-image: var(--icon-trash); + --icon-color: var(--folder-color-trash); +} + +#folderTree li[data-folder-type="virtual"] > .container > .icon { + background-image: var(--icon-folder-filter); + --icon-color: var(--folder-color-folder-filter); +} + +#folderTree li[data-server-type="nntp"] ul .icon { + background-image: var(--icon-newsletter); + --icon-color: var(--folder-color-newsletter); +} + +#folderTree li[data-is-paused="true"] > .container > .icon, +#folderTree li[data-is-paused="true"] > .container > .name, +#folderTree li[data-is-paused="true"] ul > li > .container > .icon, +#folderTree li[data-is-paused="true"] ul > li > .container > .name { + opacity: 0.6; +} + +#folderTree li[data-is-busy="true"] > .container > .icon { + content: var(--icon-clock) !important; + background-image: none; + --icon-color: var(--button-primary-background-color); +} + +@media (prefers-reduced-motion: no-preference) { + #folderTree li[data-is-busy="true"] > .container > .icon { + content: var(--icon-loading) !important; + animation: activity-indicator-3pane 1.05s steps(30) infinite; + object-fit: cover; + object-position: 0px 0; + } + @keyframes activity-indicator-3pane { + 100% { object-position: -480px 0; } + } +} + +#folderTree li[data-has-error="true"] > .container > .icon { + content: var(--icon-warning) !important; + background-image: none; + fill: var(--color-amber-30); + stroke: var(--color-amber-60); +} + +#folderTree li[data-tag-key] > .container > .icon { + background-image: var(--icon-tag); +} + +.name { + flex: 1; + margin-inline: 7px; + white-space: nowrap; + text-overflow: ellipsis; + overflow-x: hidden; +} + +#folderTree li[data-server-type] > .container > .name { + font-weight: bold; +} + +.noselect-folder > .container > .name { + font-style: italic; + opacity: 0.6; +} + +#folderTree:focus-within li.noselect-folder.selected > .container > .name { + opacity: 0.8; +} + +.unread > .container > .name, +.new-messages > .container > .name { + font-weight: bold; +} + +.new-messages > .container > .name { + color: var(--new-folder-color); +} + +#folderTree:focus-within li.selected.new-messages > .container > .name { + color: currentColor; +} + +.folder-count-badge { + display: none; + padding: 1px 4px; + border-radius: 1000px; + color: var(--folderpane-unread-count-text); + font-size: 0.85em; + font-weight: bold; + min-width: 16px; + text-align: center; + line-height: initial; + box-sizing: border-box; + margin-inline-end: 6px; +} + +.total-count { + font-weight: normal; + color: var(--folderpane-total-count-text); + background-color: var(--folderpane-total-count-background); +} + +.unread > .container > .unread-count { + display: unset; + background-color: var(--folderpane-unread-count-background); +} + +.total > .container > .total-count:not([hidden]) { + display: unset; +} + +.new-messages > .container > .unread-count { + background-color: var(--folderpane-unread-new-count-background); +} + +#folderTree:focus-within li.selected > .container > .unread-count { + background-color: var(--folderpane-unread-count-text); + color: var(--treeitem-background-active); +} + +.folder-size { + font-size: .8rem; + font-weight: bold; + color: var(--layout-color-3); + margin-inline-end: 6px; +} + +#folderTree:focus-within li.selected > .container > .folder-size { + color: currentColor; +} + +/* Message browser pane. */ + +#webBrowser, +#messageBrowser, +#multiMessageBrowser { + flex: 1; +} |