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
@use 'sass:math';
// Don't import any styles that are not scoped to .onboardingContainer. This
// stylesheet is loaded by FeatureCallout.sys.mjs into the browser chrome. To
// add other stylesheets to about:welcome or spotlight, add them to
// aboutwelcome.html or spotlight.html. Ideally, there should be no `@import`
// statements in the built aboutwelcome.css file.
@import '../../asrouter/content-src/styles/feature-callout';
@import '../../asrouter/content-src/styles/shopping';
/* stylelint-disable max-nesting-depth */
$break-point-small: 570px;
$break-point-medium: 610px;
$break-point-large: 866px;
$container-min-width: 700px;
$logo-size: 80px;
$main-section-width: 504px;
$split-section-width: 400px;
$split-screen-height: 550px;
$small-main-section-height: 450px;
$small-secondary-section-height: 100px;
$noodle-buffer: 106px;
$double-section-width: 800px;
html {
height: 100%;
}
// Below variables are used via config JSON in AboutWelcomeDefaults
// and referenced below inside dummy class to pass test browser_parsable_css
.dummy {
background: var(--mr-welcome-background-color) var(--mr-welcome-background-gradient) var(--mr-secondary-position) var(--mr-screen-background-color);
}
// Styling for content rendered in a Spotlight messaging surface.
:root {
&[dialogroot] {
background-color: transparent;
body {
padding: 0;
}
.onboardingContainer {
// Without this, the container will be 100vh in height. When the dialog
// overflows horizontally, the horizontal scrollbar will appear. If the
// scrollbars aren't overlay scrollbars (this is controlled by
// Theme::ScrollbarStyle), they will take up vertical space in the
// viewport, causing the dialog to overflow vertically. This causes the
// vertical scrollbar to appear, which takes up horizontal space, causing
// the horizontal scrollbar to appear, and so on.
height: 100%;
background-color: transparent;
&:dir(rtl) {
transform: unset;
}
.logo-container {
pointer-events: none;
}
.screen {
&:dir(rtl) {
transform: unset;
}
}
}
}
}
// Styling for about:welcome background container
.welcome-container {
.onboardingContainer {
min-height: $break-point-medium;
min-width: fit-content;
}
}
.onboardingContainer {
--grey-subtitle-1: #696977;
--mr-welcome-background-color: #F8F6F4;
--mr-screen-heading-color: var(--in-content-text-color);
--mr-welcome-background-gradient: linear-gradient(0deg, rgba(144, 89, 255, 20%) 0%, rgba(2, 144, 238, 20%) 100%);
--mr-screen-background-color: #F8F6F4;
--single-select-border-color: #8F8F9D;
--single-select-hover-color: #DEDEDF;
@media (prefers-color-scheme: dark) {
--grey-subtitle-1: #FFF;
--mr-welcome-background-color: #333336;
--mr-welcome-background-gradient: linear-gradient(0deg, rgba(144, 89, 255, 30%) 0%, rgba(2, 144, 238, 30%) 100%);
--mr-screen-background-color: #62697A;
--single-select-hover-color: #52525E;
}
font-family: system-ui;
font-size: 16px;
position: relative;
text-align: center;
height: 100vh;
@media (prefers-contrast) {
--mr-screen-background-color: buttontext;
--mr-screen-heading-color: buttonface;
background-color: var(--in-content-page-background);
}
// Transition all of these and reduced motion effectively only does opacity.
--transition: 0.6s opacity, 0.6s scale, 0.6s rotate, 0.6s translate;
// Define some variables that are used for in/out states.
@media (prefers-reduced-motion: no-preference) {
--translate: 30px;
--rotate: 20deg;
--scale: 0.4;
--progress-bar-transition: 0.6s translate;
// Scale is used for noodles that can be flipped.
&:dir(rtl) {
--scale: -0.4 0.4;
}
}
// Use default values that match "unmoved" state to avoid motion.
@media (prefers-reduced-motion: reduce) {
--translate: 0;
--rotate: 0deg;
--scale: 1;
// To reduce motion, progress bar fades in instead of wiping in.
--progress-bar-transition: none;
&:dir(rtl) {
--scale: -1 1;
}
}
&:dir(rtl) {
transform: rotateY(180deg);
}
.section-main {
display: flex;
flex-direction: column;
justify-content: center;
width: $main-section-width;
flex-shrink: 0;
}
.section-main:not(.embedded-migration) {
position: relative;
}
.main-content {
background-color: var(--in-content-page-background);
border-radius: 20px;
box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 20%);
display: flex;
flex-direction: column;
height: 100%;
padding: 0;
transition: var(--transition);
z-index: 1;
box-sizing: border-box;
&.no-steps {
padding-bottom: 48px;
}
.main-content-inner {
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: space-around;
}
}
// Handle conditional display of steps indicator
// Don't show when there's only one screen
.main-content .no-steps {
.main-content {
padding-bottom: 48px;
}
.steps {
display: none;
}
}
@mixin arrow-icon-styles {
.arrow-icon {
-moz-context-properties: fill;
fill: currentColor;
text-decoration: none;
&::after {
content: '';
padding-inline-end: 12px;
margin-inline-start: 4px;
background: url('chrome://browser/skin/forward.svg') no-repeat center / 12px;
}
&:dir(rtl)::after {
background-image: url('chrome://browser/skin/back.svg');
}
}
}
@mixin secondary-cta-styles {
background-color: var(--in-content-button-background);
border: 1px solid var(--in-content-button-border-color);
line-height: 12px;
font-size: 0.72em;
font-weight: 600;
padding: 8px 16px;
text-decoration: none;
cursor: default;
&:hover,
&[open] {
background-color: var(--in-content-button-background-hover);
color: var(--in-content-button-text-color-hover);
&:active {
background-color: var(--in-content-button-background-active);
color: var(--in-content-button-text-color-active);
}
}
}
@mixin text-link-styles {
background: none;
text-decoration: underline;
cursor: pointer;
color: var(--link-color);
&:hover {
color: var(--link-color-hover);
}
&:active {
color: var(--link-color-active);
@media (prefers-contrast) {
text-decoration: none;
}
}
}
.screen {
display: flex;
position: relative;
flex-flow: row nowrap;
height: 100%;
min-height: 500px;
overflow: hidden;
&.light-text {
--in-content-page-color: rgb(251, 251, 254);
--in-content-primary-button-text-color: rgb(43, 42, 51);
--in-content-primary-button-text-color-hover: rgb(43, 42, 51);
--in-content-primary-button-background: rgb(0, 221, 255);
--in-content-primary-button-background-hover: rgb(128, 235, 255);
--in-content-primary-button-background-active: rgb(170, 242, 255);
--in-content-button-text-color: var(--in-content-page-color);
}
&.dark-text {
--in-content-page-color: rgb(21, 20, 26);
--in-content-primary-button-text-color: rgb(251, 251, 254);
--in-content-primary-button-text-color-hover: rgb(251, 251, 254);
--in-content-primary-button-background: #0061E0;
--in-content-primary-button-background-hover: #0250BB;
--in-content-primary-button-background-active: #053E94;
--in-content-primary-button-border-color: transparent;
--in-content-primary-button-border-hover: transparent;
--in-content-button-text-color: var(--in-content-page-color);
}
&:dir(rtl) {
transform: rotateY(180deg);
}
&[pos='center'] {
background-color: rgba(21, 20, 26, 50%);
min-width: $main-section-width;
&.with-noodles {
// Adjust for noodles partially extending out from the square modal
min-width: $main-section-width + $noodle-buffer;
min-height: $main-section-width + $noodle-buffer;
.section-main {
height: $main-section-width;
}
}
&.with-video {
justify-content: center;
background: none;
align-items: center;
.section-main {
width: $double-section-width;
height: $split-screen-height;
}
.main-content {
background-color: var(--mr-welcome-background-color);
border-radius: 8px;
box-shadow: 0 2px 14px rgba(58, 57, 68, 20%);
padding: 44px 85px 20px;
.welcome-text {
margin: 0;
}
.main-content-inner {
justify-content: space-between;
}
h1,
h2 {
align-self: start;
}
h1 {
font-size: 24px;
line-height: 28.8px;
}
h2 {
font-size: 15px;
line-height: 22px;
}
.secondary-cta {
@include arrow-icon-styles;
justify-content: end;
.secondary {
@include secondary-cta-styles;
color: var(--in-content-button-text-color);
}
}
}
}
&.addons-picker {
justify-content: center;
align-items: center;
background: none;
.section-main {
width: $double-section-width;
height: $split-screen-height;
}
.main-content {
background-color: var(--in-content-page-background);
border-radius: 8px;
box-shadow: 0 2px 14px rgba(58, 57, 68, 20%);
overflow: hidden;
.welcome-text {
display: flex;
margin: 0;
}
.main-content-inner {
padding: 25px 56px 0;
justify-content: space-between;
}
h1,
h2 {
align-self: start;
}
h2 {
font-size: 15px;
text-align: start;
}
.brand-logo {
display: block;
margin: 40px 56px 0;
transition: var(--transition);
height: 30px;
}
.additional-cta {
display: block;
margin: 8px 0;
&.cta-link {
background: none;
padding: 0;
font-weight: normal;
@include text-link-styles;
}
&.secondary {
&:hover {
background-color: var(--in-content-button-background-hover);
}
}
}
.secondary-cta {
@include arrow-icon-styles;
justify-content: end;
.secondary {
@include secondary-cta-styles;
color: var(--in-content-button-text-color);
}
}
}
.addon-container {
display: flex;
border: 1px solid var(--in-content-border-color);
box-shadow: 0 1px 2px 0 var(--in-content-border-color);
border-radius: 4px;
margin: 5px auto;
text-align: start;
.rtamo-icon {
img {
margin: 10px;
}
}
.addon-details {
display: grid;
width: 70%;
}
.addon-title {
margin: 10px 0 3px;
font-size: 16px;
font-weight: 600;
}
.addon-description {
margin: 2px 0 10px;
font-size: 13px;
font-weight: 400;
}
.install-button-wrapper {
display: flex;
}
button {
align-self: center;
width: 124px;
}
}
.loader {
width: 1em;
height: 1em;
border: 3px solid var(--in-content-primary-button-text-color);
border-bottom-color: transparent;
border-radius: 50%;
box-sizing: border-box;
animation: rotation 1s linear infinite;
justify-self: center;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loaderContainer {
display: flex;
padding: 1.5px 37.5px;
margin: auto;
}
}
}
&:not([pos='split']) {
.secondary-cta {
.secondary {
@include text-link-styles;
font-size: 14px;
font-weight: normal;
line-height: 20px;
}
&.top {
button {
color: #FFF;
&:hover {
color: #E0E0E6;
}
}
}
}
migration-wizard {
padding: 5px 60px;
&::part(header){
text-align: center;
}
&::part(buttons){
margin: 32px auto 0;
}
}
.welcome-text {
&:empty {
margin: 0;
}
}
}
&[pos='split'] {
// Prevent the drop shadow from appearing in fullscreen mode
&:where(:not([fullscreen])) {
margin: auto;
min-height: $split-screen-height;
&::before {
content: '';
position: absolute;
box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 20%);
width: $split-section-width + $split-section-width;
height: $split-screen-height;
border-radius: 8px;
inset: 0;
margin: auto;
pointer-events: none;
}
}
.section-secondary,
.section-main {
width: $split-section-width;
height: $split-screen-height;
}
.secondary-cta.top {
position: fixed;
padding-inline-end: 0;
button {
padding: 7px 15px;
}
}
.section-main {
flex-direction: row;
display: block;
margin: auto;
margin-inline-start: 0;
&:dir(rtl) {
margin: auto;
margin-inline-start: 0;
}
&.embedded-migration {
.main-content {
padding-block: 100px 0;
}
}
.main-content {
border-radius: 0 8px 8px 0;
overflow: hidden;
padding-inline: 35px 20px;
padding-block: 120px 0;
box-shadow: none;
&.no-steps {
padding-bottom: 48px;
}
&:dir(rtl) {
border-radius: 8px 0 0 8px;
}
.legal-paragraph {
text-align: start;
font-size: 11px;
line-height: 16.5px;
color: #5B5B66;
@mixin narrow-legal-paragraph {
padding-inline: 30px;
}
@media only screen and (width <= 800px) {
@include narrow-legal-paragraph;
}
[narrow] & {
@include narrow-legal-paragraph;
}
@media (prefers-color-scheme: dark) {
color: #CFCFD8;
}
}
.main-content-inner {
min-height: 330px;
.mobile-download-buttons {
padding: 0;
margin-inline-start: -5px;
display: flex;
button {
cursor: pointer;
}
}
.qr-code-image {
margin: 5px 0 10px;
display: flex;
}
.language-switcher-container {
.primary {
margin-bottom: 5px;
}
}
}
.action-buttons {
position: relative;
text-align: initial;
height: 100%;
.checkbox-container {
font-size: 13px;
margin-block: 1em;
&:not(.multi-select-item) {
transition: var(--transition);
}
input,
label {
vertical-align: middle;
}
}
.additional-cta-box {
margin: 8px 0;
.additional-cta {
margin: 0;
&.cta-link {
@include text-link-styles;
padding: 0;
font-weight: normal;
}
&.secondary {
&:hover,
&[open] {
background-color: var(--in-content-button-background-hover);
}
}
}
}
&.additional-cta-container {
flex-wrap: nowrap;
align-items: start;
}
.secondary-cta {
position: absolute;
bottom: -30px;
inset-inline-end: 0;
.secondary {
@include secondary-cta-styles;
}
@include arrow-icon-styles;
}
}
.logo-container {
text-align: start;
}
.brand-logo {
height: 25px;
margin-block: 0;
}
.logo-alt {
width: inherit;
height: inherit;
}
.welcome-text {
margin-inline: 0 10px;
margin-block: 10px 35px;
text-align: initial;
align-items: initial;
&:empty {
margin: 0;
}
h1 {
font-size: 24px;
line-height: 1.2;
width: 300px;
}
h2 {
margin: 10px 0 0;
min-height: 1em;
font-size: 15px;
line-height: 1.5;
@media (prefers-contrast: no-preference) {
color: #5B5B66;
}
}
}
.welcome-text h1,
.primary {
margin: 0;
}
.steps {
z-index: 1;
&.progress-bar {
margin-inline: -35px;
}
}
@media (prefers-contrast) {
border: 1px solid var(--in-content-page-color);
.steps.progress-bar {
border-top: 1px solid var(--in-content-page-color);
background-color: var(--in-content-page-background);
.indicator {
background-color: var(--color-accent-primary);
}
}
}
}
}
.section-secondary {
--mr-secondary-position: center center / auto 350px;
border-radius: 8px 0 0 8px;
margin: auto 0 auto auto;
display: flex;
align-items: center;
-moz-context-properties: fill, stroke, fill-opacity, stroke-opacity;
stroke: currentColor;
position: relative;
&:dir(rtl) {
border-radius: 0 8px 8px 0;
margin: auto;
margin-inline-end: 0;
}
h1 {
color: var(--mr-screen-heading-color);
font-weight: 700;
font-size: 47px;
line-height: 110%;
max-width: 340px;
text-align: initial;
white-space: pre-wrap;
text-shadow: none;
margin-inline: 40px 0;
}
.image-alt {
width: inherit;
height: inherit;
}
.hero-image {
flex: 1;
display: flex;
justify-content: center;
max-height: 100%;
img {
width: 100%;
max-width: 180px;
margin: 25px 0;
padding-bottom: 30px;
@mixin narrow-hero-img {
padding-bottom: unset;
}
@media only screen and (width <= 800px) {
@include narrow-hero-img;
}
[narrow] & {
@include narrow-hero-img;
}
}
}
}
.multi-select-container {
margin-inline: 0 10px;
.multi-select-item {
display: block;
p {
margin-block: 0.5em 0;
margin-inline-start: calc(16px + var(--checkbox-margin-inline)); // width of checkbox and its inline margin
font-size: 12px;
}
}
@mixin narrow-multi-select-container {
flex-direction: column;
align-self: center;
align-items: start;
justify-content: center;
width: 240px;
padding: 0 30px;
margin-inline: 0;
box-sizing: content-box;
.multi-select-item p {
margin-inline-start: 0;
}
}
@media only screen and (width <= 800px) {
@include narrow-multi-select-container;
}
[narrow] & {
@include narrow-multi-select-container;
}
}
.tiles-single-select-container {
margin-block: -20px auto;
align-items: initial;
.select-item {
min-width: 38px;
}
}
@media (prefers-contrast: no-preference) and (prefers-color-scheme: dark) {
.section-main .main-content {
.welcome-text h2 {
color: #CFCFD8;
}
.action-buttons .secondary {
background-color: #2B2A33;
}
}
}
@media only screen and (width >= 800px) {
.tiles-single-select-section {
margin-inline-start: -10px;
}
&[reverse-split] {
flex-direction: row-reverse;
.section-main {
.main-content {
border-radius: inherit;
}
margin: auto;
margin-inline-end: 0;
border-radius: 8px 0 0 8px;
&:dir(rtl) {
border-radius: 0 8px 8px 0;
margin: auto;
margin-inline-end: 0;
}
}
.section-secondary {
margin: auto;
margin-inline-start: 0;
border-radius: 0 8px 8px 0;
&:dir(rtl) {
border-radius: 8px 0 0 8px;
margin: auto;
margin-inline-start: 0;
}
}
}
}
// duplicate the above styles for no-rdm. unfortunately SASS won't allow
// us to combine these selectors.
&:where([no-rdm='true']) {
.tiles-single-select-section {
margin-inline-start: -10px;
}
&[reverse-split] {
flex-direction: row-reverse;
.section-main {
.main-content {
border-radius: inherit;
}
margin: auto;
margin-inline-end: 0;
border-radius: 8px 0 0 8px;
&:dir(rtl) {
border-radius: 0 8px 8px 0;
margin: auto;
margin-inline-end: 0;
}
}
.section-secondary {
margin: auto;
margin-inline-start: 0;
border-radius: 0 8px 8px 0;
&:dir(rtl) {
border-radius: 8px 0 0 8px;
margin: auto;
margin-inline-start: 0;
}
}
}
}
&[fullscreen] {
$split-section-width: 50%;
$split-screen-height: 100%;
.section-secondary,
.section-main {
width: $split-section-width;
height: $split-screen-height;
}
.section-main .main-content {
border-radius: 0;
padding: 0;
h1 {
width: auto;
}
.main-content-inner {
min-height: 0;
flex-grow: 0;
padding-inline: 110px;
margin-block: auto;
max-width: 400px;
}
.action-buttons {
position: static;
height: auto;
.secondary-cta {
inset-block-end: 26px;
inset-inline-end: 30px;
}
}
}
.section-secondary {
--mr-secondary-position: center center / 50%;
border-radius: 0;
margin: 0;
.hero-image {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
img {
width: 30%;
}
}
}
@mixin narrow-split-fullscreen {
.section-main,
.section-secondary {
width: 100%;
}
.section-main {
height: 75%;
&[hide-secondary-section='responsive'] {
height: 100%;
.main-content {
border-radius: 0;
padding: 0;
}
}
}
.section-main .main-content {
.action-buttons .secondary-cta {
inset-block-end: 0;
inset-inline-end: 0;
}
.main-content-inner {
padding-inline: 55px;
margin-inline: auto;
}
}
.section-secondary {
--mr-secondary-position: center var(--mr-secondary-background-position-y) / 50%;
.hero-image {
img {
width: 25%;
max-height: 75%;
}
}
}
}
@media only screen and (width <= 800px) {
@include narrow-split-fullscreen;
}
[narrow] & {
@include narrow-split-fullscreen;
}
}
@mixin narrow-split {
&:where(:not([no-rdm])) {
flex-direction: column;
min-height: $small-main-section-height + $small-secondary-section-height;
&::before {
width: $split-section-width;
}
&[reverse-split] {
flex-direction: column;
.section-secondary {
border-radius: 8px 8px 0 0;
margin: auto;
margin-bottom: 0;
&:dir(rtl) {
margin: auto;
margin-bottom: 0;
border-radius: 8px 8px 0 0;
}
}
.section-main {
margin: auto;
margin-top: 0;
border-radius: 0 0 8px 8px;
&:dir(rtl) {
margin: auto;
margin-top: 0;
border-radius: 0 0 8px 8px;
}
}
}
.section-secondary,
.section-main {
width: $split-section-width;
}
.section-secondary {
--mr-secondary-background-position-y: top;
--mr-secondary-position: center var(--mr-secondary-background-position-y) / 75%;
border-radius: 8px 8px 0 0;
margin: auto;
margin-bottom: 0;
height: $small-secondary-section-height;
.hero-image img {
margin: 6px 0;
}
.message-text {
margin-inline: auto;
}
h1 {
font-size: 35px;
text-align: center;
white-space: normal;
margin-inline: auto;
margin-block: 14px 6px;
}
&:dir(rtl) {
margin: auto;
margin-bottom: 0;
border-radius: 8px 8px 0 0;
}
&.with-secondary-section-hidden {
display: none;
}
}
migration-wizard {
&::part(deck){
min-width: 330px;
margin-inline: 36px;
}
}
.section-main {
margin: auto;
margin-top: 0;
height: $small-main-section-height;
migration-wizard::part(buttons) {
flex-direction: column;
margin-inline: 46px;
}
&[hide-secondary-section='responsive'] {
height: $split-screen-height;
margin: auto;
&:dir(rtl) {
margin: auto;
}
.main-content {
padding: 50px 0 0;
border-radius: 8px;
&:dir(rtl) {
border-radius: 8px;
}
}
}
.main-content {
border-radius: 0 0 8px 8px;
padding: 30px 0 0;
.main-content-inner {
align-items: center;
}
.logo-container {
text-align: center;
.brand-logo {
min-height: 25px;
&,
&:dir(rtl) {
background-position: center;
}
}
.logo-alt {
width: inherit;
height: inherit;
}
}
.welcome-text {
align-items: center;
text-align: center;
margin-inline: 0;
padding-inline: 30px;
.spacer-bottom,
.spacer-top {
display: none;
}
}
.action-buttons {
text-align: center;
.checkbox-container {
display: none;
}
.secondary-cta {
position: relative;
margin-block: 10px 0;
bottom: 0;
}
}
.primary,
.secondary {
min-width: 240px;
margin-inline: 0;
}
.steps {
padding-block: 0;
margin: 0;
&.progress-bar {
margin-inline: 0;
}
}
}
.additional-cta {
&.cta-link {
align-self: center;
}
}
.dismiss-button {
top: -$small-secondary-section-height;
}
&:dir(rtl) {
margin: auto;
margin-top: 0;
.main-content {
border-radius: 0 0 8px 8px;
}
}
}
}
&[no-rdm] {
width: 800px;
&[reverse-split] {
flex-direction: row-reverse;
.section-main {
.main-content {
border-radius: inherit;
}
margin: auto;
margin-inline-end: 0;
border-radius: 8px 0 0 8px;
&:dir(rtl) {
border-radius: 0 8px 8px 0;
margin: auto;
margin-inline-end: 0;
}
}
.section-secondary {
margin: auto;
margin-inline-start: 0;
border-radius: 0 8px 8px 0;
&:dir(rtl) {
border-radius: 8px 0 0 8px;
margin: auto;
margin-inline-start: 0;
}
}
}
}
}
@media only screen and (width <= 800px) {
@include narrow-split;
}
[narrow] & {
@include narrow-split;
}
@media only screen and (height <= 650px) {
// Hide the "Sign in" button on the welcome screen when it would
// otherwise overlap the screen. We'd reposition it, but then it would
// overlap the dismiss button. We may change the alignment so they don't
// overlap in a future revision.
@media (800px <= width <= 990px) {
.section-main .secondary-cta.top {
display: none;
}
}
// Reposition the "Sign in" button on the welcome screen to move inside
// the screen when it would otherwise overlap the screen.
@mixin extra-narrow-secondary-cta {
.section-main .secondary-cta.top {
position: absolute;
padding: 0;
top: 0;
inset-inline-end: 0;
}
}
@media (width <= 620px) {
@include extra-narrow-secondary-cta;
}
[narrow] & {
@media (width <= 620px) {
@include extra-narrow-secondary-cta;
}
}
}
}
}
.brand-logo {
margin-block: 60px 10px;
transition: var(--transition);
height: 80px;
&.cta-top {
margin-top: 25px;
}
&.hide {
visibility: hidden;
padding: unset;
margin-top: 50px;
}
}
.logo-alt {
width: inherit;
height: inherit;
}
.rtamo-theme-icon {
max-height: 30px;
border-radius: 2px;
margin-bottom: 10px;
margin-top: 24px;
}
.rtamo-icon {
text-align: start;
@mixin narrow-rtamo-icon {
text-align: center;
}
@media only screen and (width <= 800px) {
@include narrow-rtamo-icon;
}
[narrow] & {
@include narrow-rtamo-icon;
}
}
.text-link {
@include text-link-styles;
}
.welcome-text {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0.5em 1em;
transition: var(--transition);
h1,
h2 {
color: var(--in-content-page-color);
line-height: 1.5;
}
h1 {
font-size: 24px;
font-weight: 600;
margin: 0 6px;
letter-spacing: -0.02em;
outline: none;
}
h2 {
font-size: 16px;
font-weight: normal;
margin: 10px 6px 0;
max-width: 750px;
letter-spacing: -0.01em;
}
&.fancy {
h1 {
background-image: linear-gradient(90deg, #9059FF, #FF4AA2, #FF8C00, #FF4AA2, #9059FF);
background-clip: text;
background-size: 200%;
@media (prefers-contrast: no-preference) {
color: transparent;
}
@media (prefers-color-scheme: dark) {
background-image: linear-gradient(90deg, #C688FF, #FF84C0, #FFBD4F, #FF84C0, #C688FF);
&::selection {
color: #FFF;
background-color: #696977;
}
}
}
}
&.shine {
h1 {
animation: shine 50s linear infinite;
background-size: 400%;
}
@keyframes shine {
to {
background-position: 400%;
}
}
}
.cta-paragraph {
a {
margin: 0;
text-decoration: underline;
cursor: pointer;
}
}
}
// Override light and dark mode fancy title colors for use over light and dark backgrounds
.screen.light-text .welcome-text.fancy h1 {
background-image: linear-gradient(90deg, #C688FF, #FF84C0, #FFBD4F, #FF84C0, #C688FF);
}
.screen.dark-text .welcome-text.fancy h1 {
background-image: linear-gradient(90deg, #9059FF, #FF4AA2, #FF8C00, #FF4AA2, #9059FF);
}
.welcomeZap {
span {
position: relative;
z-index: 1;
white-space: nowrap;
}
.zap {
&::after {
display: block;
background-repeat: no-repeat;
background-size: 100% 100%;
content: '';
position: absolute;
top: calc(100% - 0.15em);
width: 100%;
height: 0.3em;
left: 0;
z-index: -1;
transform: scaleY(3);
}
&.short::after {
background-image: url('chrome://activity-stream/content/data/content/assets/short-zap.svg');
}
&.long::after {
background-image: url('chrome://activity-stream/content/data/content/assets/long-zap.svg');
}
}
}
.language-loader {
-moz-context-properties: fill;
fill: currentColor;
margin-inline-end: 10px;
position: relative;
top: 3px;
width: 16px;
height: 16px;
margin-top: -6px;
}
.tiles-single-select-container {
display: flex;
flex-direction: column;
align-items: center;
margin: 10px auto;
}
.sr-only {
opacity: 0;
overflow: hidden;
position: absolute;
&.input {
height: 1px;
width: 1px;
}
}
.tiles-single-select-section {
border: 0;
display: flex;
flex-wrap: wrap;
gap: 5px;
justify-content: space-evenly;
margin-inline: 10px;
padding: 10px;
transition: var(--transition);
&:hover,
&:active,
&:focus-within {
border-radius: 8px;
outline: 2px solid var(--in-content-primary-button-background);
}
// single select only specific styles
&.single-select:not(.wallpaper, .theme) {
flex-direction: row;
padding-top: 5px;
gap: 10px;
justify-content: center;
.select-item {
position: relative;
padding-top: 5px;
border: 2px solid var(--single-select-border-color);
border-radius: 12px;
&:has(.input:focus),
&:has(.selected) {
outline: none;
}
&:has(.input:focus) {
outline: 2px solid var(--in-content-primary-button-background);
outline-offset: 5px;
}
&:has(.selected) {
border: 3px solid var(--in-content-primary-button-background);
border-radius: 12px;
}
&:hover {
background-color: var(--single-select-hover-color);
}
&:focus-visible {
outline: none;
// Only highlight the image, not the frame around the image and the label
.icon {
outline: initial;
}
}
.flair {
height: 18px;
border-radius: 4px;
background-color: #9059FF;
color: #FFF;
padding: 2px 8px;
position: absolute;
right: 1px;
top: -10px;
line-height: 1;
}
.icon {
outline: none;
}
.text {
margin-block: 8px;
}
}
}
// theme and wallpaper specific styles
&.wallpaper,
&.theme {
.select-item {
width: 180px;
}
}
// single select and wallpaper specific styles
&.single-select,
&.wallpaper {
&:hover, &:focus-within {
outline: none;
}
.select-item {
transition: var(--transition);
&:has(.input:focus) {
outline: 2px solid var(--in-content-primary-button-background);
outline-offset: 2px;
}
}
}
// newtab wallpaper specific styles
&.wallpaper {
justify-content: center;
gap: 10px;
.select-item {
flex: unset;
width: unset;
.icon {
width: 116px;
height: 86px;
border-radius: 8px;
box-shadow: 0 1px 2px 0 #3A394433;
&:hover {
filter: brightness(45%);
}
// dark theme wallpapers
&.dark-landscape {
background-image: url('chrome://activity-stream/content/data/content/assets/wallpapers/dark-landscape.avif');
}
&.dark-beach {
background-image: url('chrome://activity-stream/content/data/content/assets/wallpapers/dark-beach.avif');
}
&.dark-color {
background-image: url('chrome://activity-stream/content/data/content/assets/wallpapers/dark-color.avif');
}
&.dark-mountain {
background-image: url('chrome://activity-stream/content/data/content/assets/wallpapers/dark-mountain.avif');
}
&.dark-panda {
background-image: url('chrome://activity-stream/content/data/content/assets/wallpapers/dark-panda.avif');
}
&.dark-sky {
background-image: url('chrome://activity-stream/content/data/content/assets/wallpapers/dark-sky.avif');
}
// light theme wallpapers
&.light-beach {
background-image: url('chrome://activity-stream/content/data/content/assets/wallpapers/light-beach.avif');
}
&.light-color {
background-image: url('chrome://activity-stream/content/data/content/assets/wallpapers/light-color.avif');
}
&.light-landscape {
background-image: url('chrome://activity-stream/content/data/content/assets/wallpapers/light-landscape.avif');
}
&.light-mountain {
background-image: url('chrome://activity-stream/content/data/content/assets/wallpapers/light-mountain.avif');
}
&.light-panda {
background-image: url('chrome://activity-stream/content/data/content/assets/wallpapers/light-panda.avif');
}
&.light-sky {
background-image: url('chrome://activity-stream/content/data/content/assets/wallpapers/light-sky.avif');
}
}
}
.dark {
display: none;
}
.text {
display: none;
}
@media (prefers-color-scheme: dark) {
.light {
display: none;
}
.dark {
display: block;
}
}
}
.select-item {
align-items: center;
display: flex;
flex-direction: column;
flex: 1;
padding: 0;
min-width: 50px;
color: #000;
box-shadow: none;
border-radius: 4px;
cursor: pointer;
z-index: 0;
&:focus,
&:active {
outline: initial;
outline-offset: initial;
}
.icon {
background-size: cover;
width: 40px;
height: 40px;
border-radius: 40px;
outline: 1px solid var(--in-content-border-color);
outline-offset: -0.5px;
z-index: -1;
&:dir(rtl) {
transform: scaleX(-1);
}
&:focus-visible,
&:active,
&.selected {
outline: 2px solid var(--in-content-primary-button-background);
outline-offset: 2px;
}
&.selected {
outline-color: var(--color-accent-primary-active);
}
&.light {
}
&.dark {
}
&.alpenglow {
background-image: url('resource://builtin-themes/alpenglow/icon.svg');
}
&.default,
&.automatic {
background-image: url('resource://default-theme/icon.svg');
}
}
.text {
display: flex;
color: var(--in-content-page-color);
font-size: 14px;
font-weight: normal;
line-height: 20px;
margin-inline-start: 0;
margin-top: 9px;
}
}
legend {
cursor: default;
}
}
.tiles-container {
margin: 10px auto;
&.info {
padding: 6px 12px 12px;
&:hover,
&:focus {
background-color: rgba(217, 217, 227, 30%);
border-radius: 4px;
}
}
}
.tiles-delayed {
animation: fadein 0.4s;
}
.multi-select-container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
flex-shrink: 0;
align-items: flex-start;
gap: 16px;
margin-block: -1em 2em;
margin-inline: 1em;
color: #5B5B66;
font-weight: 400;
font-size: 14px;
text-align: initial;
transition: var(--transition);
z-index: 1;
#multi-stage-multi-select-label {
// These styles are based on .welcome-text>h2 (subtitle).
color: var(--in-content-page-color);
line-height: 1.5;
font-size: 16px;
font-weight: normal;
letter-spacing: -0.01em;
// Try to get the label positioned the same way it would be if it was a
// subtitle. -0.5em for the welcome-text margin, 1em for the
// multi-select-container margin, and 10px for the desired margin between
// the label and the title.
margin: calc(-0.5em + 1em + 10px) 6px 0;
max-width: 750px;
}
@at-root .onboardingContainer .screen[pos='split'] .multi-select-container #multi-stage-multi-select-label {
margin: calc(-35px + 1em + 10px) 0 0;
min-height: 1em;
font-size: 15px;
line-height: 1.5;
@media (prefers-contrast: no-preference) {
color: #5B5B66;
}
@media (prefers-contrast: no-preference) and (prefers-color-scheme: dark) {
color: #CFCFD8;
}
}
.checkbox-container {
display: flex;
> input {
flex-grow: 0;
flex-shrink: 0;
}
}
@media (prefers-color-scheme: dark) {
color: #CFCFD8;
}
@media (prefers-contrast) {
color: var(--in-content-page-color);
}
}
.mobile-downloads {
.qr-code-image {
margin: 24px 0 10px;
width: 113px;
height: 113px;
}
.email-link {
@include text-link-styles;
font-size: 16px;
font-weight: 400;
&:hover {
background: none;
}
}
.ios button {
background-image: url('chrome://app-marketplace-icons/locale/ios.svg');
}
.android button {
background-image: url('chrome://app-marketplace-icons/locale/android.png');
}
}
.mobile-download-buttons {
list-style: none;
padding: 10px 0;
margin: 0;
li {
display: inline-block;
button {
display: inline-block;
height: 45px;
width: 152px;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
box-shadow: none;
border: 0;
}
&:not(:first-child) {
margin-inline: 5px 0;
}
}
}
.dismiss-button {
position: absolute;
z-index: 2;
top: 0;
left: auto;
right: 0;
box-sizing: border-box;
padding: 0;
margin: 16px;
display: block;
float: inline-end;
background: url('chrome://global/skin/icons/close.svg') no-repeat center / 16px;
height: 32px;
width: 32px;
align-self: end;
// override default min-height and min-width for buttons
min-height: 32px;
min-width: 32px;
-moz-context-properties: fill;
fill: currentColor;
transition: var(--transition);
&:dir(rtl) {
left: 0;
right: auto;
}
}
@keyframes fadein {
from { opacity: 0; }
}
.secondary-cta {
display: flex;
align-items: end;
flex-direction: row;
justify-content: center;
font-size: 14px;
transition: var(--transition);
&.top {
justify-content: end;
padding-inline-end: min(150px, 500px - 70vh);
padding-top: 4px;
position: absolute;
top: 10px;
inset-inline-end: 20px;
z-index: 2;
}
span {
color: var(--grey-subtitle-1);
margin: 0 4px;
}
}
.message-text {
transition: var(--transition);
}
.helptext {
padding: 1em;
text-align: center;
color: var(--grey-subtitle-1);
font-size: 12px;
line-height: 18px;
&.default {
align-self: center;
max-width: 40%;
}
span {
padding-inline-end: 4px;
}
}
.helptext-img {
height: 1.5em;
width: 1.5em;
margin-inline-end: 4px;
vertical-align: middle;
&.end {
margin: 4px;
}
&.footer {
vertical-align: bottom;
}
}
.steps {
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 0;
padding-block: 16px 0;
transition: var(--transition);
z-index: -1;
height: 48px;
box-sizing: border-box;
&.has-helptext {
padding-bottom: 0;
}
.indicator {
width: 0;
height: 0;
margin-inline-end: 4px;
margin-inline-start: 4px;
background: var(--grey-subtitle-1);
border-radius: 5px;
// using border will show up in Windows High Contrast Mode to improve accessibility.
border: 3px solid var(--in-content-button-text-color);
opacity: 0.35;
box-sizing: inherit;
&.current {
opacity: 1;
border-color: var(--in-content-primary-button-background);
// This is the only step shown, so visually hide it to maintain spacing.
&:last-of-type:first-of-type {
opacity: 0;
}
}
}
&.progress-bar {
height: 6px;
padding-block: 0;
margin-block: 42px 0;
background-color: color-mix(in srgb, var(--in-content-button-text-color) 25%, transparent);
justify-content: start;
opacity: 1;
transition: none;
.indicator {
width: 100%;
height: 100%;
margin-inline: -1px;
background-color: var(--in-content-primary-button-background);
border: 0;
border-radius: 0;
opacity: 1;
transition: var(--progress-bar-transition);
translate: calc(var(--progress-bar-progress, 0%) - 100%);
&:dir(rtl) {
translate: calc(var(--progress-bar-progress, 0%) * -1 + 100%);
}
}
}
}
.additional-cta-container {
&[flow] {
display: flex;
flex-flow: column wrap;
align-items: center;
&[flow='row'] {
flex-direction: row;
justify-content: center;
.secondary-cta {
flex-basis: 100%;
}
}
}
}
.legal-paragraph {
transition: var(--transition)
}
.primary,
.secondary,
.additional-cta,
.submenu-button {
font-size: 13px;
line-height: 16px;
padding: 11px 15px;
transition: var(--transition);
&.rtamo {
margin-top: 24px;
}
}
.secondary {
background-color: var(--in-content-button-background);
color: var(--in-content-button-text-color);
}
.split-button-container,
.screen .action-buttons .split-button-container {
align-items: stretch;
&:not([hidden]) {
display: flex;
}
.primary,
.secondary,
.additional-cta {
&:not(.submenu-button) {
border-start-end-radius: 0;
border-end-end-radius: 0;
margin-inline-end: 0;
}
&:focus-visible {
z-index: 2;
}
}
.submenu-button {
border-start-start-radius: 0;
border-end-start-radius: 0;
margin-inline-start: 1px;
padding: 8px;
min-width: 30px;
box-sizing: border-box;
background-image: url('chrome://global/skin/icons/arrow-down.svg');
background-repeat: no-repeat;
background-size: 16px;
background-position: center;
-moz-context-properties: fill;
fill: currentColor;
}
}
// Styles specific to background noodles, with screen-by-screen positions
.noodle {
display: block;
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
transition: var(--transition);
// Flip noodles in a way that combines individual transforms.
&:dir(rtl) {
scale: -1 1;
}
}
.outline-L {
background-image: url('chrome://activity-stream/content/data/content/assets/noodle-outline-L.svg');
}
.solid-L {
background-image: url('chrome://activity-stream/content/data/content/assets/noodle-solid-L.svg');
-moz-context-properties: fill;
fill: var(--in-content-page-background);
display: none;
}
.purple-C {
background-image: url('chrome://activity-stream/content/data/content/assets/noodle-C.svg');
-moz-context-properties: fill;
fill: #E7258C;
}
.orange-L {
background-image: url('chrome://activity-stream/content/data/content/assets/noodle-solid-L.svg');
-moz-context-properties: fill;
fill: #FFA437;
}
.screen-1 {
.section-main {
z-index: 1;
margin: auto;
}
// Position of noodles on second screen
.outline-L {
width: 87px;
height: 80px;
transform: rotate(10deg) translate(-30%, 200%);
transition-delay: 0.4s;
z-index: 2;
}
.orange-L {
width: 550px;
height: 660px;
transform: rotate(-155deg) translate(11%, -18%);
transition-delay: 0.2s;
}
.purple-C {
width: 310px;
height: 260px;
transform: translate(-18%, -67%);
}
.yellow-circle {
width: 165px;
height: 165px;
border-radius: 50%;
transform: translate(230%, -5%);
background: #952BB9;
transition-delay: -0.2s;
}
}
// Defining the timing of the transition-in for items within the dialog,
// These longer delays are to allow for the dialog to slide down on first screen
.dialog-initial {
.brand-logo {
transition-delay: 0.6s;
}
.welcome-text {
transition-delay: 0.8s;
}
.tiles-single-select-section,
.inline-image,
.link-paragraph,
.multi-select-container,
migration-wizard {
transition-delay: 0.9s;
}
.primary,
.secondary,
.secondary-cta,
.steps,
.cta-link,
.legal-paragraph,
.steps[above-button]:not(.progress-bar) {
transition-delay: 1s;
}
}
// Delays for transitioning-in of intermediate screens
.screen:not(.dialog-initial) {
.tiles-single-select-section,
.inline-image,
.link-paragraph,
.multi-select-container
{
transition-delay: 0.2s;
}
.primary,
.secondary,
.secondary-cta,
.cta-link,
.legal-paragraph,
.steps[above-button]:not(.progress-bar) {
transition-delay: 0.4s;
}
}
.screen-2 {
.section-main {
z-index: 1;
margin: auto;
}
// Position of noodles on third screen
.outline-L {
width: 87px;
height: 80px;
transform: rotate(250deg) translate(-420%, 425%);
transition-delay: 0.2s;
z-index: 2;
}
.orange-L {
height: 800px;
width: 660px;
transform: rotate(35deg) translate(-10%, -7%);
transition-delay: -0.4s;
}
.purple-C {
width: 392px;
height: 394px;
transform: rotate(260deg) translate(-34%, -35%);
transition-delay: -0.2s;
fill: #952BB9;
}
.yellow-circle {
width: 165px;
height: 165px;
border-radius: 50%;
transform: translate(160%, 130%);
background: #E7258C;
}
}
&.transition-in {
.noodle {
opacity: 0;
rotate: var(--rotate);
scale: var(--scale);
}
.dialog-initial {
.main-content,
.dismiss-button {
translate: 0 calc(-2 * var(--translate));
}
.brand-logo,
.steps {
opacity: 0;
translate: 0 calc(-1 * var(--translate));
}
}
.screen {
.welcome-text,
.multi-select-container,
.tiles-single-select-section,
.link-paragraph,
.inline-image,
.primary,
.checkbox-container:not(.multi-select-item),
.secondary,
.secondary-cta:not(.top),
.cta-link,
.legal-paragraph,
migration-wizard,
.steps[above-button]:not(.progress-bar) {
opacity: 0;
translate: 0 calc(-1 * var(--translate));
}
&:not(.dialog-initial) {
.steps:not(.progress-bar, [above-button]) {
opacity: 0.2;
}
}
}
}
&.transition-out {
.noodle {
opacity: 0;
rotate: var(--rotate);
scale: var(--scale);
transition-delay: 0.2s;
}
.screen:not(.dialog-last) {
.main-content {
overflow: hidden;
}
.welcome-text,
.multi-select-container {
opacity: 0;
translate: 0 var(--translate);
transition-delay: 0.1s;
}
// content that is nested between inner main content and navigation CTAs
// requires an additional 0.1s transition to avoid overlap
.tiles-single-select-section,
.inline-image,
.link-paragraph,
migration-wizard {
opacity: 0;
translate: 0 var(--translate);
transition-delay: 0.2s;
}
.primary,
.checkbox-container:not(.multi-select-item),
.secondary,
.secondary-cta:not(.top),
.cta-link,
.legal-paragraph,
.steps[above-button]:not(.progress-bar) {
opacity: 0;
translate: 0 var(--translate);
transition-delay: 0.3s;
}
.steps:not(.progress-bar, [above-button]) {
opacity: 0.2;
transition-delay: 0.5s;
}
}
.dialog-last {
.noodle {
transition-delay: 0s;
}
.main-content,
.dismiss-button {
opacity: 0;
translate: 0 calc(2 * var(--translate));
transition-delay: 0.4s;
}
}
}
.inline-image,
.link-paragraph {
transition: var(--transition);
}
migration-wizard {
width: unset;
transition: var(--transition);
&::part(buttons) {
margin-top: 24px;
justify-content: flex-start;
}
&::part(deck) {
font-size: 0.83em;
}
}
}