Source code
Revision control
Copy as Markdown
Other Tools
/* 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
/**
* 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/aboutwelcome/content-src/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 {
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 {
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;
}