1 files changed, 187 insertions, 0 deletions
diff --git a/comm/mail/base/content/aboutDialog.css b/comm/mail/base/content/aboutDialog.css
new file mode 100644
index 0000000000..36a6332030
--- /dev/null
+++ b/comm/mail/base/content/aboutDialog.css
@@ -0,0 +1,187 @@
+/* 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/. */
+
+:root {
+  --dialog-background: #fefefe;
+  --dialog-box-color: #222;
+  --client-box-background: #f7f7f7;
+  --link-color: -moz-nativehyperlinktext;
+  --link-decoration: inherit;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --dialog-background: #222;
+    --dialog-box-color: #f7f7f7;
+    --client-box-background: #444;
+    --link-color: #f7f7f7;
+    --link-decoration: underline;
+  }
+}
+
+@media (prefers-contrast) {
+  :root {
+    --dialog-background: -moz-Dialog;
+    --dialog-box-color: -moz-DialogText;
+    --client-box-background: -moz-Dialog;
+    --link-color: -moz-nativehyperlinktext;
+    --link-decoration: inherit;
+  }
+}
+
+body {
+  margin: 0;
+  overflow: hidden;
+}
+
+#aboutDialog {
+  /* Set an explicit line-height to avoid discrepancies in 'auto' spacing
+     across screens with different device DPI, which may cause font metrics
+     to round differently. */
+  line-height: 1.5;
+}
+
+#aboutDialogContainer {
+  width: 670px;
+  color: var(--dialog-box-color);
+  background-color: var(--dialog-background);
+}
+
+#rightBox {
+  background-image: url("chrome://branding/content/about-wordmark.svg");
+  background-repeat: no-repeat;
+  /* padding-top creates room for the wordmark */
+  padding-top: 38px;
+  margin-top: 20px;
+  margin-inline: 30px;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+#detailsBox {
+  padding-top: 10px;
+}
+
+#updateDeck {
+  align-items: center;
+  min-height: 33px;
+}
+
+.update-throbber {
+  width: 16px;
+  min-height: 16px;
+  margin-inline-end: 3px;
+  content: image-set(url("chrome://global/skin/icons/loading.png"),
+                     url("chrome://global/skin/icons/loading@2x.png") 2x);
+  vertical-align: middle;
+}
+
+#rightBox:-moz-locale-dir(rtl) {
+  background-position: 100% 0;
+}
+
+#bottomBox {
+  padding: 15px 10px 0;
+}
+
+#version {
+  font-weight: bold;
+  margin-top: 10px;
+  margin-inline-start: 0;
+  user-select: text;
+  -moz-user-focus: normal;
+  cursor: text;
+}
+
+#releasenotes {
+  margin-inline-start: 0.5em;
+}
+
+#distribution,
+#distributionId {
+  display: none;
+  margin-block: 0;
+}
+
+.text-blurb {
+  margin-bottom: 10px;
+  margin-inline-start: 0;
+  padding-inline-start: 0;
+}
+
+.update-deck-container {
+  display: flex;
+  align-items: center;
+  position: fixed;
+}
+
+.update-deck-container > * {
+  flex: 0 0 fit-content;
+}
+
+.update-deck-container.deck-selected {
+  visibility: visible;
+}
+
+.update-deck-container span {
+  font-style: italic;
+}
+
+.update-deck-container span > a {
+  font-style: normal;
+}
+
+.update-throbber {
+  width: 16px;
+  height: 16px;
+  margin-inline-end: 3px;
+}
+
+.trademark-label,
+.text-link,
+.text-link:focus {
+  margin: 0;
+  padding: 0;
+}
+
+.bottom-link,
+.bottom-link:focus {
+  text-align: center;
+  margin: 0 40px;
+}
+
+.text-link {
+  color: var(--link-color);
+}
+
+.text-link:not(:hover) {
+  text-decoration: var(--link-decoration);
+}
+
+#updateNotes {
+  margin-inline-start: 5px;
+}
+
+#currentChannel {
+  margin: 0;
+  padding: 0;
+  font-weight: bold;
+}
+
+#icons > .icon {
+  -moz-context-properties: fill;
+  margin: 10px 5px;
+  width: 16px;
+  height: 16px;
+}
+
+#icons:not(.checkingForUpdates, .downloading, .applying, .restarting) > .update-throbber,
+#icons:not(.noUpdatesFound) > .noUpdatesFound,
+#icons:not(.apply) > .apply {
+  display: none;
+}
+
+#icons > .noUpdatesFound {
+  fill: #16a34a;
+}