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
/* stylelint-disable max-nesting-depth */
.onboardingContainer.shopping {
height: auto;
.outer-wrapper {
height: auto;
}
}
.onboardingContainer.shopping .screen[pos='split'] {
height: auto;
margin: 0 auto;
min-height: fit-content;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(58, 57, 68, 20%);
overflow-x: auto;
@media (prefers-contrast: no-preference) and (prefers-color-scheme: dark) {
box-shadow: 0 2px 6px rgba(21, 20, 26, 100%);
}
&::before {
display: none;
}
&.FS_OPT_IN_SIDEBAR_VARIANT {
box-shadow: none;
.section-main .main-content {
background-color: transparent;
&.no-steps {
padding: 0;
}
.main-content-inner {
justify-content: unset;
}
.welcome-text {
padding-inline: 16px;
margin-block: 20px 8px;
text-align: center;
h1 {
font-weight: var(--font-weight-bold);
}
}
.link-paragraph {
padding-inline: 16px;
margin-block: 0 20px;
text-align: center;
}
.legal-paragraph {
padding-inline: 16px;
margin-block: 0 40px;
color: var(--text-color-deemphasized);
text-align: center;
}
}
}
.section-main {
width: auto;
height: auto;
margin: 0 auto;
.main-content {
border-radius: 4px;
color: inherit;
font: menu;
@media (prefers-contrast: no-preference) and (prefers-color-scheme: dark) {
background-color: #42414D;
}
&.no-steps {
padding: 16px 0 36px;
}
.welcome-text {
text-align: start;
margin-block: 10px 12px;
h1 {
width: auto;
font-weight: 400;
line-height: 1.5;
font-size: 1.7em;
}
h2 {
color: inherit;
font-size: 1em;
}
}
.action-buttons {
.primary,
.secondary {
min-width: auto;
}
.primary {
font-weight: 400;
padding: 4px 16px;
}
&.additional-cta-container {
align-items: center;
}
}
.legal-paragraph {
font-size: 0.85em;
line-height: 1.5;
margin-block: 0 20px;
padding-inline: 30px;
text-align: start;
color: inherit;
a {
text-decoration: underline;
}
}
.brand-logo {
width: 100%;
max-width: 294px;
max-height: 290px;
height: auto;
}
}
.dismiss-button {
top: 0;
margin: 14px 10px;
}
}
.section-secondary {
display: none;
}
.info-text, .link-paragraph {
font-size: 1em;
margin: 10px auto;
line-height: 1.5;
}
.link-paragraph {
margin-block: 0 10px;
padding-inline: 30px;
text-align: start;
a {
text-decoration: underline;
}
}
}
.onboardingContainer.shopping .screen[pos='split'][layout='survey'] {
box-shadow: 0 2px 6px rgba(0, 0, 0, 15%);
@media (prefers-contrast: no-preference) and (prefers-color-scheme: dark) {
box-shadow: 0 2px 6px rgba(0, 0, 0, 15%);
}
.main-content {
padding: 12px;
.main-content-inner {
min-height: auto;
align-items: initial;
.welcome-text {
align-items: initial;
padding: 0;
margin-top: 0;
h1,
h2 {
line-height: 20px;
}
h1 {
font-size: 1em;
font-weight: 590;
margin: 0;
margin-inline-end: 28px;
}
h2 {
color: inherit;
margin-block: 10px 0;
}
}
.action-buttons {
.cta-link {
padding: 4px;
margin-block: -4px;
outline-offset: 0;
min-height: revert;
}
}
.multi-select-container {
color: inherit;
padding: 0;
margin-block: 0 24px;
align-items: center;
overflow: visible;
font-size: 1em;
gap: 12px;
width: 100%;
#multi-stage-multi-select-label {
color: inherit;
line-height: 20px;
margin-block: -2px 0;
font-size: 1em;
}
.multi-select-item input {
margin-block: 0;
}
}
.steps {
height: auto;
margin-bottom: 12px;
}
}
}
.dismiss-button {
width: 24px;
height: 24px;
min-width: 24px;
min-height: 24px;
margin: 10px;
}
}
.onboardingContainer.shopping shopping-message-bar {
font: menu;
}