1 files changed, 85 insertions, 0 deletions
diff --git a/browser/themes/shared/spotlight.css b/browser/themes/shared/spotlight.css
new file mode 100644
index 0000000000..8f09943238
--- /dev/null
+++ b/browser/themes/shared/spotlight.css
@@ -0,0 +1,85 @@
+/* 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/. */
+
+/* Whether this is actually still required
+ * is not totally clear, but better to be safe than sorry:
+ *
+ * For some reason SubDialog browser sizing can result in scrollbars, so just
+ * hide the horizontal scrollbar that would have then required vertical
+ * scrollbar. This should be okay as we wrap content for this fixed width
+ * dialog unless the window is actually narrow and really does need
+ * horizontal scrollbars. */
+@media (min-width: 544px) {
+body {
+  overflow-x: hidden;
+}
+}
+
+body {
+  padding: 20px 40px;
+  /* Keep as multiple of 4px. Match min-width media query above + padding. */
+  width: 464px;
+}
+
+#dialog-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+  text-align: center;
+}
+
+.logo {
+  width: 100px;
+  height: 100px;
+  object-fit: contain;
+  margin-bottom: 8px;
+}
+
+#title {
+  font-weight: 500;
+  font-size: 26px;
+  margin-bottom: 0;
+  white-space: pre-wrap;
+}
+
+#content {
+  font-weight: 400;
+  font-size: 13px;
+  margin-block: 10px 18px;
+}
+
+#learn-more-toggle::after {
+  background: url("chrome://global/skin/icons/arrow-right.svg") center / 12px no-repeat;
+  content: "";
+  -moz-context-properties: fill;
+  fill: currentColor;
+  padding-inline: .5em;
+}
+
+#learn-more-toggle:dir(rtl)::after {
+  background-image: url("chrome://global/skin/icons/arrow-left.svg");
+}
+
+#learn-more-toggle[aria-expanded="true"]::after {
+  background-image: url("chrome://global/skin/icons/arrow-down.svg");
+}
+
+#learn-more-toggle[aria-expanded="false"] + .expanded {
+  visibility: hidden;
+}
+
+.expanded {
+  margin-bottom: 0;
+}
+
+#primary {
+  font-size: 13px;
+}
+
+#secondary {
+  /* make the font look like the mock */
+  font-size: 13px;
+  padding: 4px;
+}