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 {
--thread-pane-header-padding: 3px;
--thread-pane-container-gap: 3px;
--tree-row-padding: 3px;
&[uidensity="compact"] {
--thread-pane-container-gap: 0;
}
&[uidensity="touch"] {
--thread-pane-header-padding: 6px;
}
@media not (prefers-contrast) {
--thread-pane-flag-fill: light-dark(var(--color-orange-30), var(--color-orange-40));
--thread-pane-flag-stroke: light-dark(var(--color-orange-60), var(--color-orange-50));
--thread-pane-unread-fill: light-dark(var(--color-green-60), var(--color-green-50));
--thread-pane-unread-stroke: light-dark(var(--color-green-60), var(--color-green-50));
--thread-pane-spam-fill: light-dark(var(--color-red-50), var(--color-red-40));
--thread-pane-spam-stroke: light-dark(var(--color-red-70), var(--color-red-50));
}
}
#threadPane > tree-view {
-moz-context-properties: fill;
fill: currentColor;
background-color: var(--tree-view-bg);
color: var(--tree-view-color);
overflow-anchor: none;
}
#threadTree tbody {
& button {
min-height: auto;
min-width: auto;
padding: 0;
margin: 0;
background-color: transparent;
border: none;
}
& [data-properties~="dummy"] {
&:not([is="thread-card"], :hover, .selected) {
background-color: var(--layout-background-2);
}
& .subject-line {
margin-inline-start: 6px;
}
& :is(button:not(.twisty), .subject-line > img) {
display: none;
}
}
& [data-properties~="unread"] {
font-weight: bold;
}
& .tree-button-delete img {
content: var(--icon-trash-sm);
}
& button.tree-button-restore {
display: none;
}
& [data-properties~="imapdeleted"] {
& .tree-button-delete {
display: none;
}
& .tree-button-restore {
display: block;
& img {
content: var(--icon-restore);
}
}
& :is(td, .subject-line) {
text-decoration: line-through;
}
}
& [is="thread-row"].children.collapsed[data-properties~="hasUnread"][data-properties~="read"]
:where(td, .subject-line) {
text-decoration: underline;
}
& [data-properties~="ignore"] .tree-view-row-thread img {
content: var(--icon-thread-ignored);
}
& [data-properties~="ignoreSubthread"] .tree-view-row-thread img {
content: var(--icon-subthread-ignored);
}
& [data-properties~="watch"] .tree-view-row-thread img {
content: var(--icon-eye);
}
}
#threadTree thead[is="tree-view-table-header"] th::before {
display: none;
}
#sizeCol,
#unreadCol,
#totalCol {
min-width: 4ch;
}
#sizeColButton,
.sizecol-column,
#unreadColButton,
.unreadcol-column,
#totalColButton,
.totalcol-column {
text-align: end;
}
.totalcol-column,
.unreadcol-column {
font-variant-numeric: tabular-nums;
}
/* Add on the end aligned columns a padding when they are at the end of the row. */
.sizecol-column[colspan="2"],
.unreadcol-column[colspan="2"],
.totalcol-column[colspan="2"] {
/* 25px is the width of the column picker. */
padding-inline-end: 25px;
@media (-moz-overlay-scrollbars) {
padding-inline-end: calc(25px + env(scrollbar-inline-size));
}
}
[is="tree-view-table-body"]:focus > [is="thread-row"].selected button,
[is="tree-view-table-body"]:focus-within > [is="thread-row"].selected button,
[is="tree-view-table-body"] > [is="thread-row"].selected:focus-within button {
color: currentColor;
}
#threadTree button:not(.twisty, .button-column-picker),
#threadTree button:not(.button-column-picker) img {
display: block;
margin-inline: auto;
}
tr[is="thread-row"] {
color: var(--tag-color, currentColor);
}
tr[data-properties~="tagged"] .thread-card-icon-info .thread-card-tags-info {
display: flex;
align-items: center;
gap: 3px;
.tag-more {
font-size: 0.7em;
font-weight: 700;
}
& > img {
position: relative;
&:not(:first-child) {
margin-inline-start: -11px;
}
&:first-child {
z-index: 3;
}
&:nth-of-type(2) {
z-index: 2;
}
&.tag-icon {
content: var(--icon-tag-sm);
}
}
}
tr[data-properties~="tagged"] .tag-icon:not([hidden]) {
display: unset;
color: var(--tag-color, currentColor);
fill: color-mix(in srgb, var(--tag-color, currentColor) 20%, var(--tags-base-background-color));
}
[is="tree-view-table-body"]:focus > [is="thread-row"].selected[data-properties~="tagged"] :is(.tag-icon, .subject),
[is="tree-view-table-body"]:focus-within > [is="thread-row"].selected[data-properties~="tagged"] :is(.tag-icon, .subject),
[is="tree-view-table-body"] > [is="thread-row"].selected[data-properties~="tagged"]:focus-within :is(.tag-icon, .subject) {
color: currentColor;
}
[is="tree-view-table-body"]:focus tr[is="thread-row"].selected,
[is="tree-view-table-body"]:focus-within tr[is="thread-row"].selected,
[is="tree-view-table-body"] tr[is="thread-row"].selected:focus-within {
background-color: var(--tag-color, var(--listbox-focused-selected-bg));
color: var(--tag-contrast-color, var(--listbox-selected-color));
}
/* Thread column */
.tree-view-header-thread img {
content: var(--icon-thread-sm);
pointer-events: none;
}
.tree-view-row-thread img {
content: var(--icon-thread-sm);
color: var(--tree-view-color);
opacity: 0.7;
pointer-events: none;
}
[is="tree-view-table-body"]:focus > .selected .tree-view-row-thread img,
[is="tree-view-table-body"]:focus-within > .selected .tree-view-row-thread img,
[is="tree-view-table-body"] > .selected:focus-within .tree-view-row-thread img {
color: currentColor;
}
#threadTree tr:not(.children, [data-properties~="ignoreSubthread"], [data-properties~="ignore"], [data-properties~="watch"]) .tree-view-row-thread > button {
display: none;
}
/* Starred column */
#flaggedColButton img {
content: var(--icon-star-sm);
}
.tree-view-row-flag button {
color: var(--tree-view-color);
opacity: 0.8;
&:hover {
opacity: 1;
}
}
.tree-view-row-flag img {
content: var(--icon-star);
pointer-events: none;
fill: color-mix(in srgb, currentColor 10%, transparent);
stroke: color-mix(in srgb, currentColor 30%, transparent);
@media (prefers-color-scheme: dark) {
stroke: color-mix(in srgb, currentColor 40%, transparent);
}
}
.button-star {
-moz-context-properties: fill, stroke;
background-image: var(--icon-star);
fill: color-mix(in srgb, currentColor 10%, transparent);
stroke: color-mix(in srgb, currentColor 30%, transparent);
[is="tree-view-table-body"]:is(:focus, :focus-within) >
.selected:not([data-properties~="flagged"]) & {
fill: color-mix(in srgb, currentColor 20%, transparent);
stroke: color-mix(in srgb, currentColor 70%, transparent);
}
}
tr[data-properties~="flagged"] .tree-view-row-flag > .tree-button-flag > img,
tr[data-properties~="flagged"] .button-star {
fill: var(--thread-pane-flag-fill);
stroke: var(--thread-pane-flag-stroke);
}
/* Attachment column variations */
#attachmentColButton img {
content: var(--icon-attachment-sm);
}
:is(.attachmentcol-column img, .attachment-icon) {
content: var(--icon-attachment-sm);
color: var(--tree-view-color);
margin-top: 1px;
opacity: 0.7;
}
[is="tree-view-table-body"]:is(:focus, :focus-within) >
[is="thread-row"].selected :is(.attachmentcol-column img, .attachment-icon),
[is="tree-view-table-body"] >
[is="thread-row"].selected:focus-within :is(.attachmentcol-column img, .attachment-icon) {
color: currentColor;
}
tr:not([data-properties~="attach"]) :is(.attachmentcol-column img, .attachment-icon) {
display: none;
}
/* Unread column variations */
#unreadButtonColHeader img {
content: var(--icon-unread-sm);
}
.tree-view-row-unread {
& button {
color: var(--tree-view-color);
opacity: 0.8;
&:hover {
opacity: 1;
}
}
& img {
content: var(--icon-dot-xs);
pointer-events: none;
fill: color-mix(in srgb, currentColor 10%, transparent);
stroke: color-mix(in srgb, currentColor 30%, transparent);
}
}
tr[data-properties~="unread"] .tree-view-row-unread > .tree-button-unread > img {
fill: color-mix(in srgb, var(--thread-pane-unread-fill) 50%, transparent);
stroke: var(--thread-pane-unread-stroke);
}
[is="tree-view-table-body"]:is(:focus, :focus-within) > .selected >
.tree-view-row-unread > .tree-button-unread > img,
[is="tree-view-table-body"] > .selected:focus-within > .tree-view-row-unread > .tree-button-unread > img {
fill: transparent;
stroke: currentColor;
}
[is="tree-view-table-body"]:is(:focus, :focus-within) > tr[data-properties~="unread"].selected >
.tree-view-row-unread > .tree-button-unread > img,
[is="tree-view-table-body"] > tr[data-properties~="unread"].selected:focus-within >
.tree-view-row-unread > .tree-button-unread > img {
fill: currentColor;
}
tr[data-properties~="unread"].selected .tree-view-row-unread button {
opacity: 1;
}
/* Subject column variations */
#subjectColButton {
/* TODO: make this density aware. */
padding-inline-start: 19px;
text-indent: 0;
.threaded & {
/* TODO: make this density aware. */
padding-inline-start: 41px;
}
}
tr[is="thread-row"] {
& td > .thread-container {
position: absolute;
inset: 0;
display: flex;
align-items: center;
gap: 6px;
max-height: inherit;
box-sizing: border-box;
}
& .subject-line {
margin-inline-start: calc(16px * var(--thread-level));
pointer-events: none;
/* Line height px exception to avoid vertical cut off of characters. This
should follow and match the density variation height of the row. */
line-height: 22px;
& img {
visibility: hidden;
width: 16px;
height: 16px;
vertical-align: middle;
margin-block-start: -2px;
margin-inline-end: 3px;
}
}
}
[is="tree-view-table-body"][role="treegrid"] tr[is="thread-row"]:not(.children) .subject-line {
padding-inline-start: 22px;
}
/* Icons variations for message state in subject column */
tr[data-properties~="new"] .subject-line img {
visibility: initial;
content: var(--icon-sparkle-star-xs);
fill: var(--color-yellow-40) !important; /* override the selected, focus rule */
stroke: var(--color-orange-50) !important; /* override the selected, focus rule */
}
tr[data-properties~="replied"] :is(.subject-line img, .replied) {
visibility: initial;
display: initial;
content: var(--icon-reply-col);
fill: var(--color-purple-50);
}
tr[data-properties~="redirected"] :is(.subject-line img, .redirected) {
visibility: initial;
display: initial;
content: var(--icon-redirect-col);
fill: var(--color-orange-50);
}
tr[data-properties~="forwarded"] :is(.subject-line img, .forwarded) {
visibility: initial;
display: initial;
content: var(--icon-forward-col);
fill: var(--color-blue-50);
}
tr[data-properties~="replied"][data-properties~="forwarded"] .subject-line img {
visibility: initial;
content: var(--icon-reply-forward-col);
fill: var(--color-blue-50);
stroke: var(--color-purple-50);
}
tr[data-properties~="replied"][data-properties~="redirected"] .subject-line img {
visibility: initial;
content: var(--icon-reply-redirect-col);
fill: var(--color-orange-50);
stroke: var(--color-purple-50);
}
tr[data-properties~="forwarded"][data-properties~="redirected"] .subject-line img {
visibility: initial;
content: var(--icon-forward-redirect-col);
fill: var(--color-blue-50);
stroke: var(--color-orange-50);
}
tr[data-properties~="replied"][data-properties~="forwarded"][data-properties~="redirected"]
.subject-line img {
visibility: initial;
content: var(--icon-reply-forward-redirect-col);
fill: var(--color-blue-50);
stroke: var(--color-purple-50);
}
[is="tree-view-table-body"]:is(:focus, :focus-within) >
[is="thread-row"].selected :is(.subject-line img, .state),
[is="tree-view-table-body"] > [is="thread-row"].selected:focus-within
:is(.subject-line img, .state) {
fill: currentColor !important;
stroke: currentColor !important;
}
tr[is="thread-row"] .twisty {
width: 16px;
height: 16px;
flex-shrink: 0;
color: var(--tree-view-color);
}
tr:is([is="thread-row"], [is="thread-card"]) {
&:not(.children) .twisty {
display: none;
}
& .twisty-icon {
width: 12px;
height: 12px;
content: var(--icon-nav-down-sm);
margin: 1px;
@media (prefers-reduced-motion: no-preference) {
transition: transform 200ms ease;
}
}
&.children.collapsed .twisty-icon {
transform: rotate(-90deg);
&:dir(rtl) {
transform: rotate(90deg);
}
}
}
/* Spam column variations */
#junkStatusCol img {
content: var(--icon-spam-sm);
}
:is(.tree-view-row-spam button, .button-spam) {
color: var(--tree-view-color);
opacity: 0.8;
}
.tree-view-row-spam img {
content: var(--icon-spam);
pointer-events: none;
}
.button-spam {
background-image: var(--icon-spam);
-moz-context-properties: fill, stroke;
}
#threadTree tr:is(:not([data-properties~="junk"]), [data-properties~="notjunk"]) .button-spam {
display: none;
}
:is(.tree-view-row-spam img, .button-spam) {
fill: color-mix(in srgb, currentColor 10%, transparent);
stroke: color-mix(in srgb, currentColor 30%, transparent);
@media (prefers-color-scheme: dark) {
stroke: color-mix(in srgb, currentColor 40%, transparent);
}
}
tr[data-properties~="junk"] :is(.tree-view-row-spam > .tree-button-spam > img, .button-spam) {
fill: var(--thread-pane-spam-fill);
stroke: var(--thread-pane-spam-stroke);
}
:is(.tree-view-row-spam button, .button-spam):hover {
opacity: 1;
}
/* Vertical view variations */
#threadTree tr[data-properties~="junk"] :is(.state, .attachment-icon, .button-star) {
display: none;
}
/* Delete column variations */
/* TODO: Handle delete button color variations for tagged messages */
/* Correspondent column variations */
#correspondentColButton,
.correspondentcol-column {
text-indent: 18px;
}
.correspondentcol-column {
background-repeat: no-repeat;
background-position-x: 1px;
background-position-y: center;
padding-inline-start: var(--tree-header-cell-padding) !important;
-moz-context-properties: stroke, fill-opacity;
stroke: currentColor;
fill-opacity: 0.3;
&:dir(rtl) {
background-position-x: right 1px;
}
}
tr[data-properties~="outgoing"] .correspondentcol-column {
background-image: var(--icon-nav-forward);
&:dir(rtl) {
background-image: var(--icon-nav-back);
}
}
tr[data-properties~="outgoing"].selected .correspondentcol-column {
fill-opacity: 0.6;
}
/* Header bar */
.list-header-bar:not([hidden]) {
display: flex;
align-items: center;
justify-content: space-between;
gap: 3px;
color: var(--layout-color-1);
padding-inline: var(--thread-pane-header-padding);
background-color: var(--layout-background-1);
border-bottom: 1px solid var(--layout-border-0);
}
:root[lwtheme][lwt-tree] .list-header-bar {
background-color: color-mix(in srgb, var(--toolbar-bgcolor) 50%, transparent);
color: var(--toolbar-color, inherit);
}
#threadPaneFolderCountContainer {
flex-wrap: wrap;
}
.list-header-bar-container-start,
.list-header-bar-container-end {
display: flex;
align-items: center;
gap: 6px;
overflow: hidden;
padding: var(--thread-pane-header-padding) 3px;
}
.list-header-bar-container-start {
flex-shrink: 1;
}
.list-header-bar-container-end .button:focus-visible {
outline-offset: 1px;
}
.list-header-title {
font-size: 1.2rem;
font-weight: 600;
margin-block: 0;
overflow: hidden;
white-space: nowrap;
flex-shrink: 1;
text-overflow: ellipsis;
}
.thread-pane-count-info {
white-space: nowrap;
font-size: 1rem;
font-weight: normal;
padding-inline-start: 9px;
}
#threadPaneQuickFilterButton {
background-image: var(--icon-filter);
margin: 0;
}
#threadPaneDisplayButton {
background-image: var(--icon-display-options);
margin: 0;
flex-shrink: 0;
}