1 files changed, 152 insertions, 0 deletions
diff --git a/browser/base/content/aboutDialog.css b/browser/base/content/aboutDialog.css
new file mode 100644
index 0000000000..24ce653cb7
--- /dev/null
+++ b/browser/base/content/aboutDialog.css
@@ -0,0 +1,152 @@
+/* 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/. */
+@namespace html "http://www.w3.org/1999/xhtml";
+
+:root { -moz-box-layout: flex }
+
+#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 {
+  -moz-box-flex: 1;
+}
+
+#rightBox {
+  background-image: url("chrome://branding/content/about-wordmark.svg");
+  background-repeat: no-repeat;
+  background-size: 288px auto;
+  /* padding-top creates room for the wordmark */
+  padding-top: 38px;
+  margin-top: 20px;
+}
+
+#rightBox:-moz-locale-dir(rtl) {
+  background-position: 100% 0;
+}
+
+#bottomBox {
+  padding: 15px 10px 0;
+  min-height: 52px;
+}
+
+#release {
+  font-weight: bold;
+  font-size: 125%;
+  margin-top: 10px;
+  margin-inline-start: 0;
+}
+
+#version {
+  font-weight: bold;
+  margin-inline-start: 0;
+  user-select: text;
+  -moz-user-focus: normal;
+  cursor: text;
+}
+
+#version.update {
+  font-weight: normal;
+}
+
+#distribution,
+#distributionId {
+  display: none;
+  margin-block: 0;
+}
+
+.text-blurb {
+  margin-bottom: 10px;
+  margin-inline-start: 0;
+  padding-inline-start: 0;
+}
+
+#updateDeck {
+  align-items: center;
+}
+
+#updateButton {
+  margin-inline-start: 0;
+  padding-inline-start: 0;
+}
+
+#updateDeck description {
+  margin: 0;
+}
+
+#rightBox {
+  /* We don't want this box to contribute arbitrarily to the intrinsic size of
+   * the dialog, so set the width to a reasonable size, but let it flex to take
+   * all available space. */
+  width: 430px;
+  -moz-box-flex: 1;
+}
+
+.update-throbber {
+  width: 16px;
+  min-height: 16px;
+  margin-inline-end: 3px;
+}
+
+html|img.update-throbber {
+  vertical-align: middle;
+}
+
+image.update-throbber {
+  list-style-image: url("chrome://global/skin/icons/loading.png");
+}
+
+@media (min-resolution: 1.1dppx) {
+  .update-throbber {
+    list-style-image: url("chrome://global/skin/icons/loading@2x.png");
+  }
+}
+
+description > .text-link {
+  margin: 0;
+  padding: 0;
+}
+
+#submit-feedback {
+  margin-inline-start: .9em;
+}
+
+.bottom-link {
+  text-align: center;
+  margin: 0 40px;
+}
+
+#currentChannel {
+  margin: 0;
+  padding: 0;
+  font-weight: bold;
+}
+
+#updateBox {
+  line-height: normal;
+}
+
+#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: #30e60b;
+}
+
+#icons > .apply {
+  fill: white;
+}