summaryrefslogtreecommitdiffstats
path: root/browser/components/aboutwelcome/content-src/aboutwelcome.scss
diff options
context:
space:
mode:
Diffstat (limited to 'browser/components/aboutwelcome/content-src/aboutwelcome.scss')
-rw-r--r--browser/components/aboutwelcome/content-src/aboutwelcome.scss1940
1 files changed, 1940 insertions, 0 deletions
diff --git a/browser/components/aboutwelcome/content-src/aboutwelcome.scss b/browser/components/aboutwelcome/content-src/aboutwelcome.scss
new file mode 100644
index 0000000000..aa49a04799
--- /dev/null
+++ b/browser/components/aboutwelcome/content-src/aboutwelcome.scss
@@ -0,0 +1,1940 @@
+/* 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/. */
+@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;
+
+ @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;
+ }
+
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Ubuntu,
+ 'Helvetica Neue', sans-serif;
+ 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'] {
+ 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 auto auto 0;
+
+ &:dir(rtl) {
+ margin: auto 0 auto auto;
+ }
+
+ &.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;
+ }
+
+ .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 {
+ width: $split-section-width;
+ 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(--in-content-accent-color);
+ }
+ }
+ }
+ }
+ }
+
+ .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;
+
+ &:dir(rtl) {
+ border-radius: 0 8px 8px 0;
+ margin: auto auto auto 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;
+
+ @media only screen and (width <= 800px) {
+ padding-bottom: unset;
+ }
+ }
+ }
+ }
+
+ .multi-select-container {
+ margin-inline: 0 10px;
+
+ @media only screen and (width <= 800px) {
+ flex-direction: column;
+ align-self: center;
+ align-items: start;
+ justify-content: center;
+ width: 240px;
+ padding: 0 30px;
+ margin-inline: 0;
+ box-sizing: content-box;
+ }
+ }
+
+ .tiles-theme-container {
+ margin-block: -20px auto;
+ align-items: initial;
+
+ .theme {
+ 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-theme-section {
+ margin-inline-start: -10px;
+ }
+ }
+
+ @media only screen and (width <= 800px) {
+ flex-direction: column;
+ min-height: $small-main-section-height + $small-secondary-section-height;
+
+ &::before {
+ width: $split-section-width;
+ }
+
+ .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 auto 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 auto 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: 0 auto auto;
+ 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;
+
+ .main-content {
+ padding: 50px 0 0;
+ 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: 0 auto auto;
+
+ .main-content {
+ border-radius: 0 0 8px 8px;
+ }
+ }
+ }
+
+ }
+
+ @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.
+ @media (width <= 620px) {
+ .section-main .secondary-cta.top {
+ position: absolute;
+ padding: 0;
+ top: 0;
+ inset-inline-end: 0;
+ }
+ }
+ }
+ }
+ }
+
+ .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;
+
+ @media only screen and (width <= 800px) {
+ text-align: center;
+ }
+ }
+
+ .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 {
+ filter: invert(1);
+ margin-inline-end: 10px;
+ position: relative;
+ top: 3px;
+ width: 16px;
+ height: 16px;
+ margin-top: -6px;
+ }
+
+ @media (prefers-color-scheme: dark) {
+ .language-loader {
+ filter: invert(0);
+ }
+ }
+
+ .tiles-theme-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-theme-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);
+ }
+
+ .theme {
+ align-items: center;
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ padding: 0;
+ min-width: 50px;
+ width: 180px;
+ 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,
+ &:active,
+ &.selected {
+ outline: 2px solid var(--in-content-primary-button-background);
+ outline-offset: 2px;
+ }
+
+ &.light {
+ background-image: url('resource://builtin-themes/light/icon.svg');
+ }
+
+ &.dark {
+ background-image: url('resource://builtin-themes/dark/icon.svg');
+ }
+
+ &.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;
+ }
+
+ @media (prefers-contrast: no-preference) and (prefers-color-scheme: dark) {
+ color: #CFCFD8;
+ }
+ }
+
+ .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%;
+ }
+ }
+ }
+ }
+
+ .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-theme-section,
+ .multi-select-container,
+ migration-wizard {
+ transition-delay: 0.9s;
+ }
+
+ .primary,
+ .secondary,
+ .secondary-cta,
+ .steps,
+ .cta-link {
+ transition-delay: 1s;
+ }
+ }
+
+ // Delays for transitioning-in of intermediate screens
+ .screen:not(.dialog-initial) {
+ .tiles-theme-section,
+ .multi-select-container
+ {
+ transition-delay: 0.2s;
+ }
+
+ .primary,
+ .secondary,
+ .secondary-cta,
+ .cta-link {
+ 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-theme-section,
+ .primary,
+ .checkbox-container:not(.multi-select-item),
+ .secondary,
+ .secondary-cta:not(.top),
+ .cta-link,
+ migration-wizard {
+ opacity: 0;
+ translate: 0 calc(-1 * var(--translate));
+ }
+
+ &:not(.dialog-initial) {
+ .steps:not(.progress-bar) {
+ 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-theme-section,
+ 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 {
+ opacity: 0;
+ translate: 0 var(--translate);
+ transition-delay: 0.3s;
+ }
+
+ .steps:not(.progress-bar) {
+ 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;
+ }
+ }
+ }
+
+ migration-wizard {
+ width: unset;
+ transition: var(--transition);
+
+ &::part(buttons) {
+ margin-top: 24px;
+ justify-content: flex-start;
+ }
+
+ &::part(deck) {
+ font-size: 0.83em;
+ }
+ }
+}
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-27 09:01:36 +0000