summaryrefslogtreecommitdiffstats
path: root/browser/themes/shared/spotlight.css
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 09:22:09 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 09:22:09 +0000
commit43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree620249daf56c0258faa40cbdcf9cfba06de2a846 /browser/themes/shared/spotlight.css
parentInitial commit. (diff)
downloadfirefox-upstream.tar.xz
firefox-upstream.zip
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'browser/themes/shared/spotlight.css')
-rw-r--r--browser/themes/shared/spotlight.css85
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;
+}