1 files changed, 211 insertions, 0 deletions
diff --git a/comm/mail/themes/shared/mail/multimessageview.css b/comm/mail/themes/shared/mail/multimessageview.css
new file mode 100644
index 0000000000..131f13f11c
--- /dev/null
+++ b/comm/mail/themes/shared/mail/multimessageview.css
@@ -0,0 +1,211 @@
+/* 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/icons.css");
+
+/* Generic (cross-platform) multimessage view CSS.  Some bits will be overridden
+  by theme specific files */
+
+:root {
+  --body-background-color: Field;
+  --body-text-color: FieldText;
+  --info-text-color: GrayText;
+  background-color: var(--body-background-color);
+  color: var(--body-text-color);
+  appearance: none;
+  user-select: auto; /* Overrides messenger.css. */
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --body-background-color: #2a2a2e;
+    --body-text-color: rgb(249, 249, 250);
+    --info-text-color: #b1b1b3;
+  }
+
+  #headingWrapper {
+    --toolbarbutton-hover-background: rgba(179, 179, 179, 0.4);
+    --toolbarbutton-hover-bordercolor: rgba(179, 179, 179, 0.4);
+    --toolbarbutton-header-bordercolor: rgba(179, 179, 179, 0.4);
+    --toolbarbutton-active-background: rgba(179, 179, 179, 0.6);
+    --toolbarbutton-active-bordercolor: rgba(179, 179, 179, 0.6);
+    --toolbarbutton-active-boxshadow: none;
+  }
+}
+
+body {
+  font-family: sans-serif;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+/* The heading area */
+
+#headingWrapper {
+  display: flex;
+  flex-direction: row-reverse;
+  gap: 6px;
+  flex-wrap: wrap;
+  padding: 9px 6px;
+  color: var(--layout-color-1);
+  background-color: var(--layout-background-1);
+  border-bottom: 1px solid var(--splitter-color);
+}
+
+#heading {
+  flex: 1;
+  font-size: large;
+  font-weight: normal;
+  margin: 0;
+  padding: 0;
+}
+
+#summary_subtitle {
+  margin-inline-start: 1em;
+  font-size: small;
+  white-space: nowrap;
+}
+
+/* The main content area */
+
+#content {
+  flex: 1 1 0;
+  overflow: auto;
+  padding: 1ex 1em;
+  font-size: initial;
+}
+
+#message_list {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+#footer {
+  margin-top: 1em;
+  padding-inline-start: 1em;
+}
+
+.info {
+  font-size: small;
+}
+
+/* The message/thread summary rows */
+
+#message_list > li {
+  position: relative;
+  margin-bottom: 1ex;
+  border-width: 2px;
+  border-radius: 2px;
+  border: 1px solid transparent;
+  border-bottom-color: lightgrey;
+}
+
+#message_list > li.thread {
+  border-color: lightgrey;
+}
+
+.star {
+  width: 16px;
+  height: 16px;
+  position: absolute;
+  background-repeat: no-repeat;
+}
+
+.starred .star {
+  background-image: url("chrome://messenger/skin/icons/flagged.svg");
+  background-size: contain;
+  -moz-context-properties: fill, fill-opacity, stroke, stroke-opacity;
+  fill: #f4bc44;
+  fill-opacity: 1;
+  stroke: #f4bc44;
+  stroke-opacity: 1;
+}
+
+.item_summary {
+  margin-inline-start: 19px;
+  padding: 0.3ex 0;
+}
+
+.item_header {
+  padding-inline-end: 18px;
+  padding-top: 6px;
+  padding-bottom: 6px;
+}
+
+.unread .primary_header  {
+  font-weight: bold;
+}
+
+.right {
+  float: inline-end;
+}
+
+.count {
+  white-space: nowrap;
+  margin-inline-start: 1ch;
+}
+
+.tags {
+  padding-top: 4px;
+  margin-inline-start: 1ch;
+}
+
+.tag {
+  display: inline-block; /* to avoid splitting 'To' and 'Do' e.g. */
+  margin-inline-start: 0;
+  margin-inline-end: 3px;
+  padding: 0 0.5ex;
+  border-radius: 3px;
+  border: 1px solid color-mix(in srgb, currentColor 50%, transparent);
+}
+
+.snippet {
+  opacity: .65;
+  padding-inline-end: 1.5em;
+  padding-bottom: 1ex;
+}
+
+.count, .info, .date,
+.message > .header > .snippet,
+.message > .header > .senders {
+  color: var(--info-text-color);
+}
+
+a {
+  color: -moz-nativehyperlinktext;
+  font-weight: bold;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+.link:hover {
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+#header-view-toolbox {
+  font: message-box;
+}
+
+#header-view-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  user-select: none;
+}
+
+@media print {
+  #header-view-toolbox {
+    display: none;
+  }
+
+  #headingWrapper {
+    position: static;
+  }
+}