summaryrefslogtreecommitdiffstats
path: root/browser/components/urlbar/content/quicksuggestOnboarding.css
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--browser/components/urlbar/content/quicksuggestOnboarding.css311
1 files changed, 311 insertions, 0 deletions
diff --git a/browser/components/urlbar/content/quicksuggestOnboarding.css b/browser/components/urlbar/content/quicksuggestOnboarding.css
new file mode 100644
index 0000000000..6ed8454398
--- /dev/null
+++ b/browser/components/urlbar/content/quicksuggestOnboarding.css
@@ -0,0 +1,311 @@
+/* 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/. */
+
+/**
+ * When making changes, follow the example of the AboutWelcome messaging surface for font sizes, line heights,
+ * etc. See: https://searchfox.org/mozilla-central/source/browser/components/newtab/content-src/aboutwelcome/aboutwelcome.scss
+ */
+
+:root {
+ --introduction-magglass-logo-height: 128px;
+ --introduction-firefox-logo-height: 72px;
+ --introduction-image-height: 224px;
+ --main-magglass-logo-height: 64px;
+ --main-firefox-logo-height: 50px;
+ --x-large-margin: 40px;
+ --large-margin: 24px;
+ --large-margin-const: 24px;
+ --small-margin: 16px;
+ --small-margin-const: 16px;
+ --x-small-margin-const: 8px;
+ --section-vertical-padding: 32px;
+ --section-horizontal-padding: 64px;
+}
+
+body.compact {
+ --introduction-image-height: 183px;
+ --main-magglass-logo-height: 48px;
+ --main-firefox-logo-height: 32px;
+ --x-large-margin: 20px;
+ --large-margin: 12px;
+ --small-margin: 8px;
+ --section-vertical-padding: 16px;
+ --section-horizontal-padding: 32px;
+
+ /* 15px is the non-compact font-size. */
+ font-size: 13px;
+}
+
+body,
+section {
+ width: 536px;
+}
+
+section {
+ display: flex;
+ align-items: stretch;
+ justify-content: center;
+ flex-direction: column;
+ text-align: center;
+ padding: var(--section-vertical-padding) var(--section-horizontal-padding);
+ /* This is the largest approximate natural height of the main section across
+ platforms and dialog variations, erring on the side of being slightly
+ larger than necessary. If you change this, also update COMPACT_MODE_HEIGHT
+ in the JS. */
+ min-height: 650px;
+}
+
+body.compact section {
+ /* This is the largest approximate natural height of the main section across
+ platforms and dialog variations in compact mode, erring on the side of
+ being slightly larger than necessary. */
+ min-height: 510px;
+}
+
+a {
+ cursor: pointer;
+ font-weight: normal;
+}
+
+.title {
+ font-size: 1.6em;
+ font-weight: 600;
+ line-height: 1.5;
+ white-space: pre-line;
+}
+
+.logo {
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: contain;
+ border: none;
+}
+
+.description-section {
+ /* The effective visual margin between the description and first option should
+ be --large-margin-const. Each child in the description has a bottom margin
+ of --small-margin, so subtract it from --large-margin-const. */
+ margin-block: 0 calc(var(--large-margin-const) - var(--small-margin));
+}
+
+.description {
+ font-size: 1.1em;
+ font-weight: 400;
+ line-height: 1.6;
+ margin-block: 0 var(--small-margin);
+ white-space: pre-line;
+}
+
+.privacy-first {
+ font-size: 1.1em;
+ font-weight: 700;
+ margin-block: 0 var(--small-margin);
+}
+
+.pager > span {
+ display: inline-block;
+ border-radius: 3px;
+ width: 6px;
+ height: 6px;
+ background-color: var(--in-content-border-color);
+ margin-inline: 4px;
+}
+
+.pager > .current {
+ background-color: var(--in-content-primary-button-background);
+}
+
+#introduction-section .logo {
+ background-image: url("quicksuggestOnboarding_magglass.svg");
+ height: var(--introduction-magglass-logo-height);
+ margin-block-end: var(--large-margin);
+}
+
+#introduction-section .logo.firefox {
+ background-image: url("chrome://branding/content/about-logo.svg");
+ height: var(--introduction-firefox-logo-height);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ #introduction-section .logo {
+ background-image: url("quicksuggestOnboarding_magglass_animation.svg");
+ }
+}
+
+#introduction-section .title {
+ margin-block-end: var(--x-large-margin);
+}
+
+#introduction-image {
+ height: var(--introduction-image-height);
+ background-image: url("suggest-example.svg");
+ background-size: contain;
+ background-repeat: no-repeat;
+ background-position: center;
+ margin-block: var(--large-margin);
+}
+
+/* fx100 layout */
+#introduction-section.layout-100 .logo {
+ height: var(--main-firefox-logo-height);
+}
+
+#introduction-section.layout-100 .title {
+ margin-block: 0 var(--small-margin);
+}
+
+#introduction-section:not(.layout-100) .description-section {
+ display: none;
+}
+
+#onboardingClose {
+ position: absolute;
+ top: 0;
+ inset-inline-end: 0;
+ margin: 16px;
+ padding: 0;
+ line-height: 0;
+ min-width: 20px;
+ min-height: 20px;
+}
+
+#onboardingClose img {
+ -moz-context-properties: fill;
+ fill: currentColor;
+}
+
+#main-section:not(.active) {
+ display: none;
+}
+
+#main-section .logo {
+ background-image: url("quicksuggestOnboarding_magglass.svg");
+ height: var(--main-magglass-logo-height);
+ margin-block-end: var(--large-margin);
+}
+
+#main-section .logo.firefox {
+ background-image: url("chrome://branding/content/about-logo.svg");
+ height: var(--main-firefox-logo-height);
+}
+
+#main-section .title {
+ margin-block: 0 var(--small-margin);
+}
+
+#main-section .privacy-first:not(.active) {
+ display: none;
+}
+
+#main-section .option {
+ border-radius: 4px;
+ border: 2px solid var(--in-content-box-info-background);
+ display: flex;
+ text-align: start;
+ /* Use --small-margin-const for the horizontal padding to make the option's
+ horizontal padding larger than the vertical padding in compact mode. The
+ radio button and text are too close to the left and right edges of the
+ option's border otherwise. */
+ padding: var(--small-margin) var(--small-margin-const);
+ flex-direction: row;
+}
+
+#main-section .option.selected {
+ border-color: var(--in-content-primary-button-background);
+}
+
+#main-section .option.accept {
+ margin-block-end: var(--small-margin);
+}
+
+#main-section .option.reject {
+ margin-block-end: var(--large-margin-const);
+}
+
+#main-section .option > label {
+ /* Make the whole option area selectable for the radio button. 22px is the
+ width of the radio button and its inline margin. */
+ padding-block: var(--small-margin);
+ padding-inline-start: calc(22px + var(--small-margin-const));
+ padding-inline-end: var(--small-margin-const);
+ margin-block: calc(-1 * var(--small-margin));
+ margin-inline-start: calc(-1 * (22px + var(--small-margin-const)));
+ margin-inline-end: calc(-1 * var(--small-margin-const));
+}
+
+body:not(.compact) #main-section .option > input {
+ /* Vertically align the radio button with the .option-label. */
+ margin-block-start: 0.25em;
+}
+
+#main-section .option-label {
+ font-size: 1.1em;
+ font-weight: 600;
+ margin-block-end: 2px;
+}
+
+#main-section .option-description {
+ font-size: 1em;
+}
+
+.buttonBox {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+button {
+ margin-block-end: var(--large-margin);
+}
+
+#onboardingSkipLink {
+ margin-block-end: var(--x-small-margin-const);
+}
+
+/* transition from introduction to main */
+#introduction-section.inactive {
+ /* Avoid including this section size */
+ position: fixed;
+ pointer-events: none;
+ animation: fadeout 0.3s forwards;
+}
+
+#main-section.active {
+ animation: fadein 0.3s forwards;
+}
+
+@keyframes fadeout {
+ 0% {
+ opacity: 1;
+ }
+ 100% {
+ visibility: hidden;
+ opacity: 0;
+ }
+}
+
+@keyframes fadein {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ pointer-events: initial;
+ opacity: 1;
+ }
+}
+
+/* Show main only without transition */
+body.skip-introduction #introduction-section.inactive {
+ animation: none;
+ display: none;
+}
+
+body.skip-introduction #main-section.active {
+ animation: none;
+ pointer-events: initial;
+}
+
+body.skip-introduction .pager {
+ display: none;
+}