diff options
Diffstat (limited to 'comm/mail/themes/shared/mail/messageIcons.css')
| -rw-r--r-- | comm/mail/themes/shared/mail/messageIcons.css | 360 |
1 files changed, 360 insertions, 0 deletions
diff --git a/comm/mail/themes/shared/mail/messageIcons.css b/comm/mail/themes/shared/mail/messageIcons.css new file mode 100644 index 0000000000..9f15cdf261 --- /dev/null +++ b/comm/mail/themes/shared/mail/messageIcons.css @@ -0,0 +1,360 @@ +/* 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/. */ + +#sizeCol, +#unreadCol, +#totalCol { + text-align: end; +} + +#subjectCol { + flex: 7 7; +} + +#senderCol { + flex: 4 4; +} + +#recipientCol { + flex: 4 4; +} + +#correspondentCol { + flex: 4 4; +} + +#receivedCol { + flex: 2 2; +} + +#dateCol { + flex: 2 2; +} + +/* ..... select column ..... */ + +.selectColumnHeader { + cursor: pointer; + min-width: 28px; +} + +.selectColumnHeader > .treecol-icon, +treechildren::-moz-tree-image(selectCol) { + width: 16px; + height: 16px; + -moz-context-properties: fill, fill-opacity, stroke, stroke-opacity; + fill: currentColor; + stroke: currentColor; + fill-opacity: 0; + stroke-opacity: 0; +} + +treechildren::-moz-tree-image(selectCol) { + cursor: pointer; + list-style-image: var(--icon-checkbox); +} + +.selectColumnHeader.someselected > .treecol-icon { + stroke-opacity: 1; +} + +.selectColumnHeader.allselected > .treecol-icon, +treechildren::-moz-tree-image(selectCol, selected) { + fill-opacity: 1; +} + +treechildren::-moz-tree-image(selectCol, selected, focus) { + fill: var(--select-focus-text-color); + stroke: var(--select-focus-text-color); +} + +/* ..... delete column ..... */ + +treechildren::-moz-tree-image(deleteCol) { + list-style-image: var(--icon-trash); + -moz-context-properties: stroke, fill; + fill: color-mix(in srgb, currentColor 10%, transparent); + stroke: color-mix(in srgb, currentColor 30%, transparent); +} + +treechildren::-moz-tree-image(deleteCol, imapdeleted) { + list-style-image: var(--icon-restore); +} + +treechildren::-moz-tree-image(deleteCol, selected, focus) { + fill: color-mix(in srgb, var(--select-focus-text-color) 20%, transparent); + stroke: var(--select-focus-text-color); +} + +/* ..... thread column ..... */ + +.threadColumnHeader { + padding-inline-end: 1px; + width: 20px; +} + +treechildren::-moz-tree-image(threadCol, container) { + list-style-image: var(--icon-thread); + -moz-context-properties: stroke, fill; + fill: color-mix(in srgb, currentColor 10%, transparent); + stroke: color-mix(in srgb, currentColor 50%, transparent); +} + +treechildren::-moz-tree-image(threadCol, watch) { + list-style-image: var(--icon-eye); +} + +treechildren::-moz-tree-image(threadCol, ignore) { + list-style-image: var(--icon-thread-ignored); +} + +treechildren::-moz-tree-image(threadCol, ignoreSubthread) { + list-style-image: var(--icon-subthread-ignored); +} + +treechildren::-moz-tree-image(threadCol, selected, focus) { + fill: color-mix(in srgb, var(--select-focus-text-color) 20%, transparent); + stroke: var(--select-focus-text-color); +} + +/* ..... read column ..... */ + +treechildren::-moz-tree-image(unreadButtonColHeader) { + list-style-image: var(--icon-unread-dot); + -moz-context-properties: stroke, fill, fill-opacity; + fill: color-mix(in srgb, currentColor 20%, transparent); + stroke: currentColor; + fill-opacity: .25; +} + +treechildren::-moz-tree-image(unreadButtonColHeader, unread) { + fill: color-mix(in srgb, var(--color-green-60) 50%, transparent); + stroke: var(--color-green-60); + fill-opacity: 1; +} + +treechildren::-moz-tree-image(unreadButtonColHeader, selected, focus) { + fill: color-mix(in srgb, var(--select-focus-text-color) 20%, transparent); + stroke: var(--select-focus-text-color); +} + +treechildren::-moz-tree-image(unreadButtonColHeader, unread, selected, focus) { + fill: var(--select-focus-text-color); +} + +/* ..... attachment column ..... */ + +treechildren::-moz-tree-image(attachmentCol, attach) { + list-style-image: var(--icon-attachment); + -moz-context-properties: stroke; + stroke: currentColor; +} + +treechildren::-moz-tree-image(attachmentCol, attach, selected, focus) { + stroke: var(--select-focus-text-color); +} + +/* ..... flag column ..... */ + +treechildren::-moz-tree-image(flaggedCol) { + margin-inline-start: -2px; + list-style-image: var(--icon-star); + -moz-context-properties: stroke, fill; + fill: color-mix(in srgb, currentColor 10%, transparent); + stroke: color-mix(in srgb, currentColor 30%, transparent); +} + +treechildren::-moz-tree-image(flaggedCol, flagged) { + fill: var(--color-orange-30) !important; /* override the selected, focus rule */ + stroke: var(--color-orange-60) !important; /* override the selected, focus rule */ +} + +treechildren::-moz-tree-image(flaggedCol, selected, focus) { + fill: color-mix(in srgb, var(--select-focus-text-color) 20%, transparent); + stroke: var(--select-focus-text-color); +} + +/* ..... junkStatus column ..... */ + +/* "unknown" now looks like "not junk". see bug #182386 */ +treechildren::-moz-tree-image(junkStatusCol) { + margin-inline-start: -3px; + padding-inline-start: 0; + list-style-image: var(--icon-spam); + -moz-context-properties: stroke, fill; + fill: color-mix(in srgb, currentColor 10%, transparent); + stroke: color-mix(in srgb, currentColor 30%, transparent); +} + +treechildren::-moz-tree-image(junkStatusCol, junk) { + fill: var(--color-red-50) !important; /* override the selected, focus rule */ + stroke: var(--color-red-70) !important; /* override the selected, focus rule */ +} + +treechildren::-moz-tree-image(junkStatusCol, notjunk) { + fill: color-mix(in srgb, currentColor 10%, transparent); + stroke: color-mix(in srgb, currentColor 30%, transparent); +} + +treechildren::-moz-tree-image(junkStatusCol, selected, focus) { + fill: color-mix(in srgb, var(--select-focus-text-color) 20%, transparent); + stroke: var(--select-focus-text-color); +} + +/* ..... correspondent column ..... */ + +treechildren::-moz-tree-cell-text(subjectCol) { + padding-inline-start: 0; +} + +treechildren::-moz-tree-image(correspondentCol) { + list-style-image: var(--icon-nav-forward); + -moz-context-properties: stroke, fill-opacity; + stroke: currentColor; + fill-opacity: 0; +} + +treechildren::-moz-tree-image(correspondentCol, outgoing) { + fill-opacity: 0.3; +} + +#threadTree:-moz-locale-dir(rtl) > treechildren::-moz-tree-image(correspondentCol, outgoing) { + list-style-image: var(--icon-nav-back); +} + +treechildren::-moz-tree-image(correspondentCol, outgoing, focus, selected) { + stroke: var(--select-focus-text-color); + fill-opacity: 0.5; +} + +/* ..... subject column ..... */ + +treechildren::-moz-tree-image(subjectCol) { + margin-inline-end: 2px; + -moz-context-properties: fill, stroke; + width: 16px; + height: 16px; +} + +treechildren::-moz-tree-image(subjectCol, replied) { + list-style-image: var(--icon-reply-col); + fill: var(--color-purple-50); +} + +treechildren::-moz-tree-image(subjectCol, forwarded) { + list-style-image: var(--icon-forward-col); + fill: var(--color-blue-50); +} + +treechildren::-moz-tree-image(subjectCol, redirected) { + list-style-image: var(--icon-redirect-col); + fill: var(--color-orange-50); +} + +treechildren::-moz-tree-image(subjectCol, replied, forwarded) { + list-style-image: var(--icon-reply-forward-col); + fill: var(--color-blue-50); + stroke: var(--color-purple-50); +} + +treechildren::-moz-tree-image(subjectCol, replied, redirected) { + list-style-image: var(--icon-reply-redirect-col); + fill: var(--color-orange-50); + stroke: var(--color-purple-50); +} + +treechildren::-moz-tree-image(subjectCol, forwarded, redirected) { + list-style-image: var(--icon-forward-redirect-col); + fill: var(--color-blue-50); + stroke: var(--color-orange-50); +} + +treechildren::-moz-tree-image(subjectCol, replied, forwarded, redirected) { + list-style-image: var(--icon-reply-forward-redirect-col); + fill: var(--color-blue-50); + stroke: var(--color-purple-50); +} + +treechildren::-moz-tree-image(subjectCol, new) { + list-style-image: var(--icon-notify); + fill: var(--color-yellow-50) !important; /* override the selected, focus rule */ + stroke: var(--color-orange-50) !important; /* override the selected, focus rule */ +} + +treechildren::-moz-tree-image(subjectCol, selected, focus) { + fill: var(--select-focus-text-color); + stroke: var(--select-focus-text-color); +} + +@media (prefers-color-scheme: dark) { + treechildren::-moz-tree-image(unreadButtonColHeader, unread) { + fill: color-mix(in srgb, var(--color-green-50) 50%, transparent) !important; /* override the selected, focus rule */ + stroke: var(--color-green-50) !important; /* override the selected, focus rule */ + } + + treechildren::-moz-tree-image(flaggedCol, flagged) { + fill: var(--color-orange-40) !important; /* override the selected, focus rule */ + stroke: var(--color-orange-50) !important; /* override the selected, focus rule */ + } + + treechildren::-moz-tree-image(junkStatusCol, junk) { + fill: var(--color-red-40) !important; /* override the selected, focus rule */ + stroke: var(--color-red-50) !important; /* override the selected, focus rule */ + } + + /* ..... subject column, dark color scheme ..... */ + + treechildren::-moz-tree-image(subjectCol, replied) { + fill: var(--color-purple-40); + stroke: var(--color-purple-40); + } + + treechildren::-moz-tree-image(subjectCol, forwarded) { + fill: var(--color-blue-40); + } + + treechildren::-moz-tree-image(subjectCol, redirected) { + fill: var(--color-orange-40); + } + + treechildren::-moz-tree-image(subjectCol, replied, forwarded) { + fill: var(--color-blue-40); + stroke: var(--color-purple-40); + } + + treechildren::-moz-tree-image(subjectCol, replied, redirected) { + fill: var(--color-orange-40); + stroke: var(--color-purple-40); + } + + treechildren::-moz-tree-image(subjectCol, forwarded, redirected) { + fill: var(--color-blue-40); + stroke: var(--color-orange-40); + } + + treechildren::-moz-tree-image(subjectCol, replied, forwarded, redirected) { + fill: var(--color-blue-40); + stroke: var(--color-purple-40); + } + + treechildren::-moz-tree-image(subjectCol, selected, focus) { + fill: var(--select-focus-text-color); + stroke: var(--select-focus-text-color); + } + + treechildren::-moz-tree-image(subjectCol, new) { + fill: var(--color-yellow-40) !important; /* override the selected, focus rule */ + stroke: var(--color-orange-30) !important; /* override the selected, focus rule */ + } +} + +/* ..... do not show icons ..... */ + +treechildren::-moz-tree-image(subjectCol, dummy), +treechildren::-moz-tree-image(flaggedCol, dummy), +treechildren::-moz-tree-image(junkStatusCol, dummy) , +treechildren::-moz-tree-image(correspondentCol, dummy), +treechildren::-moz-tree-image(unreadButtonColHeader, dummy) { + list-style-image: none !important; +} |