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 {
--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) {
--foldertree-background: var(--color-gray-10);
--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-30);
--treeitem-background-hover: var(--color-gray-20);
--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) {
--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;
}
}
&[lwt-tree] {
--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);
}
&[uidensity="compact"] {
--folder-mode-name-padding: 3px;
--folder-tree-header-gap: 6px;
--folder-tree-header-padding: 4px 6px 3px;
}
&[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);
}
@media (prefers-contrast) {
&:not([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);
}
}
}
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
text-shadow: none;
display: grid;
--folderPaneSplitter-width: 18em;
--messagePaneSplitter-width: 54em;
--messagePaneSplitter-height: 36em;
/* Classic layout: folder tree on the left, thread tree and message browser on the right. */
&.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. */
&.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. */
&.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. */
&.account-central {
grid-template: "folders folderPaneSplitter account-central" auto
/ minmax(auto, var(--folderPaneSplitter-width)) min-content minmax(auto, 1fr);
}
&.account-central :is(
#threadPane,
#messagePaneSplitter,
#messagePane,
) {
display: none;
}
&:not(.account-central) #accountCentralBrowser {
display: none;
}
}
/* Different layouts */
#folderPane {
grid-area: folders;
box-sizing: border-box;
/* Matches the collapse-width on the splitter. */
min-width: 100px;
overflow: hidden;
background-color: var(--sidebar-background-color, var(--foldertree-background));
color: var(--sidebar-text-color, var(--layout-color-1));
user-select: none;
display: flex;
flex-direction: column;
}
#folderPaneSplitter {
grid-area: folderPaneSplitter;
}
#threadPane {
container-name: threadPane;
container-type: inline-size;
grid-area: threads;
box-sizing: border-box;
min-height: 110px;
min-width: 300px;
display: flex;
flex-direction: column;
overflow: hidden;
}
#messagePaneSplitter {
grid-area: messagePaneSplitter;
}
#messagePane {
grid-area: message;
box-sizing: border-box;
background-color: var(--layout-background-1);
/* Matches the collapse-height and collapse-width on the splitter. */
min-height: 100px;
min-width: 300px;
overflow: auto;
display: flex;
flex-direction: column;
}
#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;
}
/* 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);
background-color: var(--sidebar-background-color, var(--foldertree-background));
color: inherit;
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 {
overflow-y: auto;
@media not (prefers-contrast) {
& {
position: relative;
}
&::before,
&::after {
display: block;
content: "";
top: 0;
left: 0;
width: 100%;
height: 4px;
pointer-events: none;
}
&::before {
position: sticky;
background-image: radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .15), rgba(0, 0, 0, 0));
}
&::after {
position: absolute;
background-color: var(--sidebar-background-color, var(--foldertree-background));
}
}
&,
& ul {
margin: 0;
padding: 0;
list-style: none;
--depth: 0;
--indent: calc(16px * var(--depth));
}
& ul {
overflow: hidden;
height: auto;
}
&:focus-visible {
outline: none;
}
& li[data-mode] {
margin-bottom: 3px;
}
#folderPaneHeaderBar[hidden] + & > li.unselectable:first-of-type > .mode-container {
border-top-style: none;
}
&:focus-within li.selected > .container,
& li.drop-target > .container {
background-color: var(--treeitem-background-active);
color: var(--treeitem-text-active);
}
& .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));
}
& li {
& .twisty {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--list-item-buttons-size);
height: var(--list-item-buttons-size);
}
&:not(.children) .twisty-icon {
display: none;
}
&.children.collapsed {
& > .container .twisty-icon {
transform: rotate(-90deg);
}
&:dir(rtl) > .container .twisty-icon {
transform: rotate(90deg);
}
}
&[data-server-type] > .container > .icon {
--icon-color: var(--primary);
}
&:is([data-server-type="imap"], [data-server-type="pop3"]) > .container > .icon {
background-image: var(--icon-mail);
}
&:is([data-server-type="imap"], [data-server-type="pop3"])[data-server-secure="true"]
> .container > .icon {
background-image: var(--icon-mail-secure);
}
&[data-server-type="none"] > .container > .icon {
background-image: var(--icon-folder);
}
&[data-server-type="nntp"] > .container > .icon {
background-image: var(--icon-globe);
}
&[data-server-type="nntp"][data-server-secure="true"] > .container > .icon {
background-image: var(--icon-globe-secure);
}
&[data-server-type="rss"] > .container > .icon {
background-image: var(--icon-rss);
}
&[data-server-type="rss"] > ul > li:not([data-folder-type], [data-is-busy="true"]) .icon {
--icon-color: currentColor;
fill: var(--icon-color);
}
&[data-folder-type="archive"] > .container > .icon {
background-image: var(--icon-archive);
--icon-color: var(--folder-color-archive);
}
&[data-folder-type="drafts"] > .container > .icon {
background-image: var(--icon-draft);
--icon-color: var(--folder-color-draft);
}
&[data-folder-type="inbox"] > .container > .icon {
background-image: var(--icon-inbox);
--icon-color: var(--folder-color-inbox);
}
&[data-folder-type="junk"] > .container > .icon {
background-image: var(--icon-spam);
--icon-color: var(--folder-color-spam);
}
&[data-folder-type="outbox"] > .container > .icon {
background-image: var(--icon-outbox);
--icon-color: var(--folder-color-outbox);
}
&[data-folder-type="sent"] > .container > .icon {
background-image: var(--icon-sent);
--icon-color: var(--folder-color-sent);
}
&[data-folder-type="templates"] > .container > .icon {
background-image: var(--icon-template);
--icon-color: var(--folder-color-template);
}
&[data-folder-type="trash"] > .container > .icon {
background-image: var(--icon-trash);
--icon-color: var(--folder-color-trash);
}
&[data-folder-type="virtual"] > .container > .icon {
background-image: var(--icon-folder-filter);
--icon-color: var(--folder-color-folder-filter);
}
&[data-server-type="nntp"] ul .icon {
background-image: var(--icon-newsletter);
--icon-color: var(--folder-color-newsletter);
}
&[data-is-paused="true"] > .container > .icon,
&[data-is-paused="true"] > .container > .name,
&[data-is-paused="true"] ul > li > .container > .icon,
&[data-is-paused="true"] ul > li > .container > .name {
opacity: 0.6;
}
&[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) {
content: var(--icon-loading) !important;
animation: activity-indicator-3pane 1.05s steps(30) infinite;
object-fit: cover;
object-position: 0px 0;
}
}
&[data-has-error="true"] > .container > .icon {
content: var(--icon-warning) !important;
background-image: none;
fill: var(--color-amber-30);
stroke: var(--color-amber-60);
}
&[data-tag-key] > .container > .icon {
background-image: var(--icon-tag);
}
&[data-server-type] > .container > .name {
font-weight: bold;
}
}
&:focus-within li {
&.selected > .container {
& > .icon {
--icon-color: currentColor !important; /* Override the user customized folder color. */
}
& > .unread-count {
background-color: var(--folderpane-unread-count-text);
color: var(--treeitem-background-active);
}
& > .folder-size {
color: currentColor;
}
}
&.noselect-folder.selected > .container > .name {
opacity: 0.8;
}
&.selected.new-messages > .container > .name {
color: currentColor;
}
&.selected.unread.children.collapsed > .container > .unread-count {
color: var(--folderpane-unread-count-text);
background-color: transparent;
border-color: var(--folderpane-unread-count-text);
}
}
& > li {
&:not(:first-of-type) > .mode-container {
justify-content: space-between;
border-top: 1px solid var(--sidebar-border-color, var(--splitter-color));
}
&.unselectable > .mode-container {
margin: 0;
border-radius: 0;
&:hover {
background-color: transparent;
}
}
& > .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;
}
& > .mode-button {
background-image: var(--icon-kebab);
}
}
}
@media (prefers-reduced-motion: no-preference) {
& .twisty-icon {
transition: transform var(--transition-duration) var(--transition-timing);
}
}
}
.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);
@media (prefers-reduced-motion: no-preference) {
& {
transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease;
.icon {
transition: fill 300ms ease, stroke 300ms ease;
}
}
}
li.selected > & {
background-color: var(--treeitem-background-selected);
}
li:not(.selected) > &:hover {
background-color: var(--treeitem-background-hover);
}
@media (prefers-contrast) {
li:not(:focus-visible) > &:hover {
outline: var(--treeitem-outline-hover);
outline-offset: -2px;
}
}
li.context-menu-target:not(.selected) > &,
li.context-menu-target:not(.selected) > &: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;
}
.new-messages:not([data-server-type]) > & > .icon::after {
position: absolute;
content: var(--icon-sparkle-star-xs);
inset-inline-start: -4px;
inset-block-start: -4px;
-moz-context-properties: fill, stroke;
fill: var(--color-yellow-30);
stroke: var(--color-amber-50);
}
}
@keyframes activity-indicator-3pane {
100% { object-position: -480px 0; }
}
.name {
flex: 1;
margin-inline: 7px;
white-space: nowrap;
text-overflow: ellipsis;
overflow-x: hidden;
.noselect-folder > .container > & {
font-style: italic;
opacity: 0.6;
}
.unread > .container > &,
.new-messages > .container > & {
font-weight: bold;
}
.new-messages > .container > & {
color: var(--new-folder-color);
}
}
.folder-count-badge {
display: none;
padding: 1px 4px;
border-radius: 1000px;
color: var(--folderpane-unread-count-text);
font-size: 0.85em;
font-weight: bold;
font-variant-numeric: tabular-nums;
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);
}
.total > .container > .total-count:not([hidden]) {
display: unset;
}
.unread-count {
.unread > .container > & {
display: unset;
background-color: var(--folderpane-unread-count-background);
}
.new-messages > .container > & {
background-color: var(--folderpane-unread-new-count-background);
}
.unread.children.collapsed:has(ul > .unread) > .container > & {
color: var(--folderpane-unread-count-background);
background-color: transparent;
border: 1px solid var(--folderpane-unread-count-background);
padding-block: 0;
}
.new-messages.unread.children.collapsed:has(ul > .new-messages) > .container > & {
color: var(--folderpane-unread-new-count-background);
border-color: var(--folderpane-unread-new-count-background);
}
}
.folder-size {
font-size: .8rem;
font-weight: bold;
color: var(--layout-color-3);
margin-inline-end: 6px;
&:empty {
display: none;
}
}
/* Message browser pane. */
#webBrowser,
#messageBrowser,
#multiMessageBrowser {
flex: 1;
}