1 files changed, 140 insertions, 0 deletions
diff --git a/comm/mail/themes/shared/mail/newmailalert.css b/comm/mail/themes/shared/mail/newmailalert.css
new file mode 100644
index 0000000000..3438b48140
--- /dev/null
+++ b/comm/mail/themes/shared/mail/newmailalert.css
@@ -0,0 +1,140 @@
+/* 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/. */
+
+/* ===== alert.css =====================================================
+  == Styles specific to the alerts dialog.
+  ======================================================================= */
+
+@import url("chrome://messenger/skin/messenger.css");
+
+#alertContainer {
+  border: 1px solid threedshadow;
+  background-color: -moz-Dialog;
+  color: -moz-DialogText;
+  opacity: 0;
+}
+
+@media (prefers-color-scheme: dark) {
+  #alertContainer {
+    background-color: #2a2a2e;
+    color: #f9f9fa;
+  }
+}
+
+#alertContainer[noanimation] {
+  opacity: 1;
+}
+
+#alertContainer[fade-in] {
+  animation-timing-function: ease-out;
+  animation-duration: 2s;
+  animation-fill-mode: both;
+  animation-name: fade-in;
+}
+
+@keyframes fade-in {
+  from {opacity: 0;}
+  to {opacity: 1;}
+}
+
+#alertContainer[fade-out] {
+  animation-timing-function: ease-in;
+  animation-duration: 2s;
+  animation-fill-mode: both;
+  animation-name: fade-out;
+}
+
+@keyframes fade-out {
+  from {opacity: 1;}
+  to {opacity: 0;}
+}
+
+#alertImageBox {
+  display: block;
+  padding: 4px;
+  background-image: linear-gradient(rgba(255, 255, 255, .6),
+                                    rgba(255, 255, 255, .6));
+  border-inline-end: 1px solid rgba(0, 0, 0, .1);
+}
+
+#alertImage {
+  width: 64px;
+  height: 64px;
+}
+
+#alertTextBox {
+  padding: 4px;
+  padding-inline-end: 0;
+}
+
+#alertTitle {
+  font-weight: bold;
+  font-size: 110%;
+  padding-inline: 5px;
+}
+
+#alertSeparator {
+  margin-inline-start: 11px;
+  border-top: 1px solid -moz-DialogText;
+  height: 0;
+  margin-block: 0.4em;
+}
+
+@media (prefers-color-scheme: dark) {
+  #alertSeparator {
+    border-top-color: #f9f9fa;
+  }
+}
+
+folder-summary {
+  flex-direction: column;
+}
+
+.folderSummary-message-row {
+  /* This max width ends up dictating the overall width of the alert window
+     because it controls how large the preview, subject and sender text can be
+     before cropping kicks in */
+  max-width: 450px;
+  padding: 0 5px;
+}
+
+.folderSummary-subject {
+  font-weight: bold;
+}
+
+.folderSummary-sender, .folderSummary-subject {
+  cursor: inherit;
+}
+
+.folderSummary-sender {
+  width: 150px;
+}
+
+.folderSummary-subject {
+  width: 300px;
+  overflow-wrap: anywhere;
+}
+
+.folderSummary-previewText {
+  color: grey;
+  overflow-wrap: anywhere;
+}
+
+.folderSummaryMessage:hover > .folderSummary-message-row {
+  cursor: pointer;
+  color: -moz-hyperlinktext;
+}
+
+.folderSummaryMessage:hover:active > .folderSummary-message-row {
+  color: -moz-activehyperlinktext;
+}
+
+#closeButton {
+  align-items: flex-start;
+  width: auto;
+}
+
+#closeButton > .toolbarbutton-icon {
+  padding: 5px;
+}