forked from mirrors/gecko-dev
1814 lines
40 KiB
SCSS
1814 lines
40 KiB
SCSS
// sass-lint:disable no-css-comments
|
|
/* 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';
|
|
@import '../styles/normalize';
|
|
@import '../styles/feature-callout';
|
|
|
|
$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;
|
|
$noodle-buffer: 106px;
|
|
|
|
html {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
// sass-lint:disable no-color-literals
|
|
|
|
--grey-subtitle-1: #696977;
|
|
--newtab-button-secondary-color: #0060DF;
|
|
--mr-welcome-background-color: #F8F6F4;
|
|
--mr-welcome-background-gradient: linear-gradient(0deg, rgba(144, 89, 255, 0.2) 0%, rgba(2, 144, 238, 0.2) 100%);
|
|
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Ubuntu',
|
|
'Helvetica Neue', sans-serif;
|
|
font-size: 16px;
|
|
position: relative;
|
|
|
|
&[lwt-newtab-brighttext] {
|
|
--grey-subtitle-1: #FFF;
|
|
--newtab-button-secondary-color: #FFF;
|
|
--mr-welcome-background-color: #333336;
|
|
--mr-welcome-background-gradient: linear-gradient(0deg, rgba(144, 89, 255, 0.3) 0%, rgba(2, 144, 238, 0.3) 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);
|
|
}
|
|
|
|
// Styling for content rendered in a Spotlight messaging surface.
|
|
:root {
|
|
&[dialogroot] {
|
|
background-color: transparent;
|
|
|
|
body {
|
|
padding: 0;
|
|
}
|
|
|
|
.onboardingContainer {
|
|
&:dir(rtl) {
|
|
transform: unset;
|
|
}
|
|
|
|
.logo-container {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.screen {
|
|
&:dir(rtl) {
|
|
transform: unset;
|
|
}
|
|
|
|
&:not([pos='split']) {
|
|
.section-main {
|
|
margin-block: $noodle-buffer auto;
|
|
}
|
|
}
|
|
|
|
&.with-noodles {
|
|
.section-main,
|
|
.section-secondary {
|
|
margin-block: 50px + $noodle-buffer auto;
|
|
}
|
|
}
|
|
|
|
&[pos='split'] {
|
|
@media only screen and (min-width: 800px) {
|
|
.section-main,
|
|
.section-secondary {
|
|
margin-block: 50px + $noodle-buffer auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Styling for about:welcome background container
|
|
.welcome-container {
|
|
.onboardingContainer {
|
|
min-height: $break-point-medium;
|
|
min-width: fit-content;
|
|
}
|
|
}
|
|
|
|
.onboardingContainer {
|
|
text-align: center;
|
|
height: 100vh;
|
|
|
|
@media (prefers-contrast: more) {
|
|
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;
|
|
|
|
// 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;
|
|
|
|
&: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;
|
|
}
|
|
|
|
.main-content {
|
|
background-color: var(--in-content-page-background);
|
|
border-radius: 20px;
|
|
box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.2);
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
padding: 0;
|
|
transition: var(--transition);
|
|
z-index: 1;
|
|
|
|
&.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 on corner screen or when there's
|
|
// only one centered screen
|
|
.main-content .no-steps,
|
|
.screen {
|
|
&[pos='corner'],
|
|
&[pos='center'].dialog-initial.dialog-last {
|
|
.main-content {
|
|
padding-bottom: 48px;
|
|
}
|
|
|
|
.steps {
|
|
display: 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-link-color: var(--in-content-primary-button-background);
|
|
--in-content-link-color-hover: var(--in-content-primary-button-background-hover);
|
|
--in-content-link-color-active: var(--in-content-primary-button-background-active);
|
|
--in-content-link-color-visited: var(--in-content-link-color);
|
|
--checkbox-checked-bgcolor: var(--in-content-primary-button-background);
|
|
--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-link-color: var(--blue-60);
|
|
--in-content-link-color-hover: var(--blue-70);
|
|
--in-content-link-color-active: var(--blue-80);
|
|
--in-content-link-color-visited: var(--blue-60);
|
|
--checkbox-checked-bgcolor: var(--in-content-primary-button-background);
|
|
--in-content-button-text-color: var(--in-content-page-color);
|
|
}
|
|
|
|
&:dir(rtl) {
|
|
transform: rotateY(180deg);
|
|
}
|
|
|
|
&[pos='center'] {
|
|
background-color: rgba(21, 20, 26, 0.5);
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
|
|
&[pos='split'] {
|
|
margin: auto;
|
|
|
|
.section-secondary,
|
|
.section-main {
|
|
width: 400px;
|
|
height: 550px;
|
|
}
|
|
|
|
.secondary-cta.top {
|
|
padding-inline-end: 0;
|
|
|
|
@media (max-height: 650px) and (max-width: 990px) {
|
|
display: none;
|
|
}
|
|
|
|
button {
|
|
color: var(--in-content-page-color);
|
|
}
|
|
}
|
|
|
|
.section-main {
|
|
flex-direction: row;
|
|
display: block;
|
|
margin: auto auto auto 0;
|
|
|
|
&:dir(rtl) {
|
|
margin: auto 0 auto auto;
|
|
}
|
|
|
|
.main-content {
|
|
border-radius: 0 8px 8px 0;
|
|
overflow: hidden;
|
|
padding-inline: 35px 20px;
|
|
padding-block: 120px 0;
|
|
|
|
&:dir(rtl) {
|
|
border-radius: 8px 0 0 8px;
|
|
}
|
|
|
|
.main-content-inner {
|
|
min-height: 330px;
|
|
|
|
.language-switcher-container {
|
|
.secondary {
|
|
margin-inline-start: 0;
|
|
margin: 5px 0;
|
|
color: var(--in-content-primary-button-text-color);
|
|
background-color: var(--in-content-primary-button-background);
|
|
|
|
&:hover {
|
|
background-color: var(--in-content-primary-button-background-hover);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.action-buttons {
|
|
position: relative;
|
|
text-align: initial;
|
|
height: 100%;
|
|
|
|
.checkbox-container {
|
|
font-size: 13px;
|
|
margin-block: 1em;
|
|
transition: var(--transition);
|
|
|
|
input,
|
|
label {
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
&.dual-action-buttons {
|
|
|
|
button {
|
|
padding: 8px 16px;
|
|
}
|
|
|
|
.secondary-cta {
|
|
display: block;
|
|
position: relative;
|
|
bottom: unset;
|
|
margin-block: 5px 0;
|
|
|
|
.secondary {
|
|
margin-inline: 0;
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.secondary-cta {
|
|
position: absolute;
|
|
bottom: -30px;
|
|
inset-inline-end: 0;
|
|
|
|
.secondary {
|
|
// sass-lint:disable-block no-important
|
|
background-color: var(--in-content-button-background) !important;
|
|
color: var(--in-content-button-text-color);
|
|
line-height: 12px;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
padding: 8px 16px;
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
// sass-lint:disable-block no-important
|
|
background-color: var(--in-content-button-background-hover) !important;
|
|
}
|
|
}
|
|
|
|
.arrow-icon {
|
|
background: url('chrome://browser/skin/forward.svg') no-repeat right 8px center;
|
|
background-size: 12px;
|
|
padding-inline-end: 24px;
|
|
|
|
&:dir(rtl) {
|
|
background-image: url('chrome://browser/skin/back.svg');
|
|
background-position-x: left 8px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.logo-container {
|
|
text-align: start;
|
|
}
|
|
|
|
.brand-logo {
|
|
height: 25px;
|
|
margin-block: 0;
|
|
}
|
|
|
|
.welcome-text {
|
|
margin-inline: 0 10px;
|
|
margin-block: 10px 35px;
|
|
text-align: initial;
|
|
align-items: initial;
|
|
|
|
h1 {
|
|
font-size: 24px;
|
|
line-height: 1.2;
|
|
width: 300px;
|
|
}
|
|
|
|
h2 {
|
|
color: #5B5B66;
|
|
margin: 10px 0 0;
|
|
min-height: 1em;
|
|
font-size: 15px;
|
|
line-height: 1.5;
|
|
}
|
|
}
|
|
|
|
.welcome-text h1,
|
|
.primary {
|
|
margin: 0;
|
|
}
|
|
|
|
.steps {
|
|
z-index: 1;
|
|
|
|
&.progress-bar {
|
|
width: 400px;
|
|
margin-inline: -35px;
|
|
|
|
.indicator {
|
|
border-radius: 0;
|
|
width: -moz-available;
|
|
margin-inline: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.section-secondary {
|
|
--mr-secondary-position: center center / contain;
|
|
border-radius: 8px 0 0 8px;
|
|
box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.2);
|
|
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 {
|
|
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;
|
|
}
|
|
|
|
.hero-image {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: center;
|
|
max-height: 100%;
|
|
|
|
img {
|
|
width: 100%;
|
|
max-width: 150px;
|
|
margin: 25px 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tiles-theme-container {
|
|
margin-block: -20px auto;
|
|
align-items: initial;
|
|
|
|
.colorway-text {
|
|
text-align: initial;
|
|
transition: var(--transition);
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
margin-block: 10px 20px;
|
|
}
|
|
|
|
.theme {
|
|
min-width: 38px;
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.section-main .main-content {
|
|
.welcome-text h2 {
|
|
color: #CFCFD8;
|
|
}
|
|
|
|
.action-buttons .secondary {
|
|
background-color: #2B2A33;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media only screen and (min-width: 800px) {
|
|
.tiles-theme-section {
|
|
margin-inline-start: -10px;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 800px) {
|
|
flex-direction: column;
|
|
|
|
.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) / cover;
|
|
border-radius: 8px 8px 0 0;
|
|
margin: auto auto 0;
|
|
height: 100px;
|
|
|
|
.hero-image img {
|
|
margin: 6px 0;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 35px;
|
|
text-align: center;
|
|
white-space: normal;
|
|
}
|
|
|
|
&:dir(rtl) {
|
|
margin: auto auto 0;
|
|
border-radius: 8px 8px 0 0;
|
|
}
|
|
}
|
|
|
|
.section-main {
|
|
margin: 0 auto auto;
|
|
height: 400px;
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.colorway-text {
|
|
text-align: center;
|
|
margin-inline: 30px;
|
|
}
|
|
|
|
.steps {
|
|
padding-block: 0;
|
|
margin: 0;
|
|
|
|
&.progress-bar {
|
|
margin-inline: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:dir(rtl) {
|
|
margin: 0 auto auto;
|
|
|
|
.main-content {
|
|
border-radius: 0 0 8px 8px;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.brand-logo {
|
|
margin-block: 60px 10px;
|
|
transition: var(--transition);
|
|
height: 80px;
|
|
|
|
&.cta-top {
|
|
margin-top: 25px;
|
|
}
|
|
|
|
&.hide {
|
|
visibility: hidden;
|
|
padding: unset;
|
|
margin-top: 50px;
|
|
}
|
|
}
|
|
|
|
.rtamo-theme-icon {
|
|
max-height: 30px;
|
|
border-radius: 2px;
|
|
margin-bottom: 10px;
|
|
margin-top: 24px;
|
|
}
|
|
|
|
.hide-rtamo-icon {
|
|
display: none;
|
|
}
|
|
|
|
.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;
|
|
|
|
&.colorway {
|
|
flex-direction: column-reverse;
|
|
}
|
|
}
|
|
|
|
.sr-only {
|
|
opacity: 0;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
|
|
&.input {
|
|
height: 1px;
|
|
width: 1px;
|
|
}
|
|
}
|
|
|
|
.colorway-variations {
|
|
align-items: center;
|
|
color: #000;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 190px;
|
|
margin-bottom: 10px;
|
|
padding-top: 34px;
|
|
position: relative;
|
|
transition: var(--transition);
|
|
width: 190px;
|
|
|
|
/* Show a custom background image that transitions for each theme. */
|
|
&::before {
|
|
background-size: 100%;
|
|
content: '';
|
|
height: 197px;
|
|
left: -48px;
|
|
margin: auto;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
top: -7px;
|
|
transition: 0.5s opacity, 0.5s rotate, 0.5s scale;
|
|
width: 286px;
|
|
z-index: -1;
|
|
}
|
|
|
|
&.in::before {
|
|
rotate: calc(-4.5 * var(--rotate));
|
|
transition: none;
|
|
}
|
|
|
|
&:where(.in, .out)::before {
|
|
opacity: 0;
|
|
rotate: calc(4.5 * var(--rotate));
|
|
scale: var(--scale);
|
|
}
|
|
|
|
/* Stack a disc background above the custom background image and below other
|
|
* content so that we can transform the parent variations element. Use a
|
|
* similar ::after disc to cover up content while transitioning. */
|
|
.variations-disc,
|
|
&::after {
|
|
background: center / cover;
|
|
border-radius: 100%;
|
|
height: 190px;
|
|
left: 0;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 190px;
|
|
}
|
|
|
|
.variations-disc {
|
|
z-index: -1;
|
|
}
|
|
|
|
&::after {
|
|
content: '';
|
|
opacity: 0;
|
|
transition: 0.4s opacity;
|
|
}
|
|
|
|
&.out::after {
|
|
opacity: 1;
|
|
}
|
|
|
|
&.default .variations-disc,
|
|
&[next='default']::after {
|
|
/* Gradients aren't used for high contrast, so show a solid color instead. */
|
|
background-color: var(--in-content-page-background);
|
|
background-image: linear-gradient(#F0F0F4, #9F9FAD);
|
|
outline: 2px solid var(--in-content-button-border-color);
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
&.default::before {
|
|
background-image: url('chrome://browser/skin/upgradeDialog/default.png');
|
|
}
|
|
|
|
&.abstract .variations-disc,
|
|
&[next='abstract']::after {
|
|
background-image: url('resource://builtin-themes/colorways/2021abstract/balanced/icon.svg');
|
|
}
|
|
|
|
&.abstract::before {
|
|
background-image: url('chrome://browser/skin/upgradeDialog/abstract.png');
|
|
}
|
|
|
|
&.cheers .variations-disc,
|
|
&[next='cheers']::after {
|
|
background-image: url('resource://builtin-themes/colorways/2021cheers/balanced/icon.svg');
|
|
}
|
|
|
|
&.cheers::before {
|
|
background-image: url('chrome://browser/skin/upgradeDialog/cheers.png');
|
|
}
|
|
|
|
&.elemental .variations-disc,
|
|
&[next='elemental']::after {
|
|
background-image: url('resource://builtin-themes/colorways/2021elemental/balanced/icon.svg');
|
|
}
|
|
|
|
&.elemental::before {
|
|
background-image: url('chrome://browser/skin/upgradeDialog/elemental.png');
|
|
}
|
|
|
|
&.foto .variations-disc,
|
|
&[next='foto']::after {
|
|
background-image: url('resource://builtin-themes/colorways/2021foto/balanced/icon.svg');
|
|
}
|
|
|
|
&.foto::before {
|
|
background-image: url('chrome://browser/skin/upgradeDialog/foto.png');
|
|
}
|
|
|
|
&.graffiti .variations-disc,
|
|
&[next='graffiti']::after {
|
|
background-image: url('resource://builtin-themes/colorways/2021graffiti/balanced/icon.svg');
|
|
}
|
|
|
|
&.graffiti::before {
|
|
background-image: url('chrome://browser/skin/upgradeDialog/graffiti.png');
|
|
}
|
|
|
|
&.lush .variations-disc,
|
|
&[next='lush']::after {
|
|
background-image: url('resource://builtin-themes/colorways/2021lush/balanced/icon.svg');
|
|
}
|
|
|
|
&.lush::before {
|
|
background-image: url('chrome://browser/skin/upgradeDialog/lush.png');
|
|
}
|
|
|
|
.colorway:focus-within {
|
|
border-radius: 4px;
|
|
outline: 2px solid rgba(0, 0, 0, 0.64);
|
|
outline-offset: -1px;
|
|
}
|
|
|
|
.colorway-text {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
line-height: 24px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.variation-button {
|
|
font-size: 12px;
|
|
line-height: 12px;
|
|
padding: 6px 12px;
|
|
width: auto;
|
|
height: 24px;
|
|
margin: 3px;
|
|
min-height: 24px;
|
|
|
|
&:hover {
|
|
background: rgba(0, 0, 0, 0.2);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
&.selected,
|
|
&:active {
|
|
background: rgba(0, 0, 0, 0.64);
|
|
border-radius: 2px;
|
|
color: #FFF;
|
|
}
|
|
|
|
@media (prefers-contrast: more) {
|
|
outline: 2px solid var(--in-content-button-border-color);
|
|
border-radius: 2px;
|
|
|
|
&.selected,
|
|
&:active {
|
|
background: var(--in-content-box-background);
|
|
color: var(--in-content-text-color);
|
|
}
|
|
|
|
&:hover {
|
|
background: var(--in-content-primary-button-background);
|
|
color: var(--in-content-primary-button-text-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
.colorway-text,
|
|
.variation-button {
|
|
transition: 0.4s opacity, 0.4s translate;
|
|
}
|
|
|
|
&.in :is(.colorway-text, .variation-button) {
|
|
opacity: 0;
|
|
transition: none;
|
|
translate: 0 calc(var(--translate) / -3);
|
|
}
|
|
|
|
&.out :is(.colorway-text, .variation-button) {
|
|
opacity: 0;
|
|
translate: 0 calc(var(--translate) / 3);
|
|
}
|
|
|
|
.colorway:nth-of-type(1) .variation-button {
|
|
transition-delay: 0.1s;
|
|
}
|
|
|
|
.colorway:nth-of-type(2) .variation-button {
|
|
transition-delay: 0.2s;
|
|
}
|
|
|
|
.colorway:nth-of-type(3) .variation-button {
|
|
transition-delay: 0.3s;
|
|
}
|
|
}
|
|
|
|
.tiles-theme-section {
|
|
border: 0;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 5px; // sass-lint:disable-line no-misspelled-properties
|
|
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;
|
|
|
|
&.colorway {
|
|
width: auto;
|
|
}
|
|
|
|
&:focus,
|
|
&:active {
|
|
outline: initial;
|
|
outline-offset: initial;
|
|
}
|
|
|
|
.icon.colorway,
|
|
.label.colorway {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.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');
|
|
|
|
&.colorway {
|
|
background-image: url('chrome://activity-stream/content/data/content/assets/default.svg');
|
|
}
|
|
}
|
|
|
|
&.abstract {
|
|
background-image: url('resource://builtin-themes/colorways/2021abstract/balanced/icon.svg');
|
|
}
|
|
|
|
&.cheers {
|
|
background-image: url('resource://builtin-themes/colorways/2021cheers/balanced/icon.svg');
|
|
}
|
|
|
|
&.elemental {
|
|
background-image: url('resource://builtin-themes/colorways/2021elemental/balanced/icon.svg');
|
|
}
|
|
|
|
&.foto {
|
|
background-image: url('resource://builtin-themes/colorways/2021foto/balanced/icon.svg');
|
|
}
|
|
|
|
&.graffiti {
|
|
background-image: url('resource://builtin-themes/colorways/2021graffiti/balanced/icon.svg');
|
|
}
|
|
|
|
&.lush {
|
|
background-image: url('resource://builtin-themes/colorways/2021lush/balanced/icon.svg');
|
|
}
|
|
|
|
&.playmaker {
|
|
background-image: url('resource://builtin-themes/colorways/2022playmaker/balanced/icon.svg');
|
|
}
|
|
|
|
&.expressionist {
|
|
background-image: url('resource://builtin-themes/colorways/2022expressionist/balanced/icon.svg');
|
|
}
|
|
|
|
&.visionary {
|
|
background-image: url('resource://builtin-themes/colorways/2022visionary/balanced/icon.svg');
|
|
}
|
|
|
|
&.dreamer {
|
|
background-image: url('resource://builtin-themes/colorways/2022dreamer/balanced/icon.svg');
|
|
}
|
|
|
|
&.innovator {
|
|
background-image: url('resource://builtin-themes/colorways/2022innovator/balanced/icon.svg');
|
|
}
|
|
|
|
&.activist {
|
|
background-image: url('resource://builtin-themes/colorways/2022activist/balanced/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, 0.3);
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tiles-delayed {
|
|
animation: fadein 0.4s;
|
|
}
|
|
|
|
.mobile-downloads {
|
|
|
|
.qr-code-image {
|
|
margin: 24px 0 10px;
|
|
width: 113px;
|
|
height: 113px;
|
|
}
|
|
|
|
.email-link {
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
text-decoration: underline;
|
|
color: var(--in-content-link-color);
|
|
|
|
&: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 {
|
|
padding: 0;
|
|
margin-block: 30px -45px;
|
|
margin-inline: 0 30px;
|
|
display: block;
|
|
float: inline-end;
|
|
background: url('chrome://global/skin/icons/close.svg') no-repeat center / cover;
|
|
height: 15px;
|
|
width: 15px;
|
|
align-self: end;
|
|
// override default min-height and min-width for buttons
|
|
min-height: 15px;
|
|
min-width: 15px;
|
|
-moz-context-properties: fill;
|
|
fill: currentColor;
|
|
}
|
|
|
|
@keyframes fadein {
|
|
from { opacity: 0; }
|
|
}
|
|
|
|
.secondary-cta {
|
|
display: flex;
|
|
align-items: end;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
transition: var(--transition);
|
|
|
|
.secondary {
|
|
background: none;
|
|
color: var(--in-content-link-color);
|
|
font-size: 14px;
|
|
font-weight: normal;
|
|
line-height: 20px;
|
|
}
|
|
|
|
&.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;
|
|
|
|
button {
|
|
color: #FFF;
|
|
|
|
&:hover {
|
|
color: #E0E0E6;
|
|
}
|
|
}
|
|
}
|
|
|
|
span {
|
|
color: var(--grey-subtitle-1);
|
|
margin: 0 4px;
|
|
}
|
|
}
|
|
|
|
.message-text,
|
|
.attrib-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;
|
|
|
|
&.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.25;
|
|
|
|
&.current {
|
|
opacity: 1;
|
|
border-color: var(--checkbox-checked-bgcolor);
|
|
|
|
// 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;
|
|
|
|
.indicator {
|
|
border-radius: 0;
|
|
width: -moz-available;
|
|
margin-inline: 0;
|
|
}
|
|
}
|
|
|
|
& .indicator.current,
|
|
&.progress-bar .indicator.complete {
|
|
opacity: 1;
|
|
border-color: var(--checkbox-checked-bgcolor);
|
|
|
|
// This is the only step shown, so visually hide it to maintain spacing.
|
|
&:last-of-type:first-of-type {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.primary,
|
|
.secondary {
|
|
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);
|
|
}
|
|
|
|
// 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;
|
|
}
|
|
|
|
[pos='corner'] {
|
|
min-width: $container-min-width;
|
|
|
|
.section-secondary {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-inline-start: 6vw;
|
|
|
|
.message-text {
|
|
flex-grow: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
|
|
.spacer-top {
|
|
flex: 1;
|
|
}
|
|
|
|
.spacer-bottom {
|
|
flex: 1;
|
|
}
|
|
|
|
h1 {
|
|
color: #FFF;
|
|
font-weight: bold;
|
|
font-size: clamp(48px, 7vw, 104px);
|
|
line-height: 1em;
|
|
margin: 0 6px;
|
|
max-width: 5em;
|
|
text-align: initial;
|
|
white-space: pre-wrap;
|
|
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
|
|
}
|
|
}
|
|
|
|
.attrib-text {
|
|
height: 18px;
|
|
margin-bottom: 25px;
|
|
text-align: initial;
|
|
font-size: 12px;
|
|
line-height: 18px;
|
|
color: #F9F9FB;
|
|
text-shadow: 0 0 7px rgba(0, 0, 0, 0.6);
|
|
transition-delay: 0.5s;
|
|
}
|
|
}
|
|
|
|
.section-main {
|
|
z-index: 1;
|
|
|
|
.main-content {
|
|
background: transparent;
|
|
box-shadow: none;
|
|
display: flex;
|
|
position: absolute;
|
|
height: auto;
|
|
width: 350px;
|
|
bottom: 0;
|
|
inset-inline-end: 30px;
|
|
overflow: visible;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.brand-logo {
|
|
margin-top: 0;
|
|
transition-delay: 1.2s;
|
|
}
|
|
|
|
.primary,
|
|
.secondary-cta:not(.top) {
|
|
transition-delay: 1.7s;
|
|
}
|
|
|
|
.secondary-cta.top {
|
|
transition-delay: 0.5s;
|
|
}
|
|
|
|
.welcome-text {
|
|
transition-delay: 1.2s;
|
|
|
|
h2 {
|
|
margin: 10px 6px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Position noodles on first screen
|
|
// and show solid L for corner positioned screen
|
|
.solid-L {
|
|
display: block;
|
|
width: 1300px;
|
|
height: 1050px;
|
|
bottom: -390px;
|
|
inset-inline-end: -640px;
|
|
transform: rotate(-80deg);
|
|
transition-delay: 0.5s;
|
|
}
|
|
|
|
.orange-L {
|
|
width: 466px;
|
|
height: 356px;
|
|
bottom: 270px;
|
|
inset-inline-end: -245px;
|
|
transition-delay: 0.8s;
|
|
}
|
|
|
|
.purple-C {
|
|
width: 467px;
|
|
height: 382px;
|
|
bottom: -100px;
|
|
inset-inline-end: 125px;
|
|
transform: rotate(-75deg);
|
|
transition-delay: 0.8s;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.colorway-variations,
|
|
.tiles-theme-section {
|
|
transition-delay: 0.9s;
|
|
}
|
|
|
|
.primary,
|
|
.secondary,
|
|
.secondary-cta,
|
|
.steps {
|
|
transition-delay: 1s;
|
|
}
|
|
}
|
|
|
|
// Delays for transitioning-in of intermediate screens
|
|
.screen:not(.dialog-initial):not([pos='corner']) {
|
|
.colorway-variations,
|
|
.tiles-theme-section,
|
|
.colorway-text {
|
|
transition-delay: 0.2s;
|
|
}
|
|
|
|
.primary,
|
|
.secondary,
|
|
.secondary-cta {
|
|
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);
|
|
}
|
|
|
|
[pos='corner'] {
|
|
.brand-logo,
|
|
.welcome-text,
|
|
.primary,
|
|
.checkbox-container,
|
|
.secondary,
|
|
.secondary-cta:not(.top),
|
|
.message-text {
|
|
opacity: 0;
|
|
translate: 0 var(--translate);
|
|
}
|
|
|
|
.attrib-text,
|
|
.secondary-cta.top {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.dialog-initial {
|
|
.main-content {
|
|
translate: 0 calc(-2 * var(--translate));
|
|
}
|
|
|
|
.brand-logo,
|
|
.steps {
|
|
opacity: 0;
|
|
translate: 0 calc(-1 * var(--translate));
|
|
}
|
|
}
|
|
|
|
.screen:not(.dialog-initial):not([pos='corner']) {
|
|
.steps {
|
|
opacity: 0.2;
|
|
}
|
|
}
|
|
|
|
.screen:not([pos='corner']) {
|
|
.welcome-text,
|
|
.colorway-variations,
|
|
.tiles-theme-section,
|
|
.colorway-text,
|
|
.primary,
|
|
.checkbox-container,
|
|
.secondary,
|
|
.secondary-cta:not(.top) {
|
|
opacity: 0;
|
|
translate: 0 calc(-1 * var(--translate));
|
|
}
|
|
}
|
|
}
|
|
|
|
&.transition-out {
|
|
.noodle {
|
|
opacity: 0;
|
|
rotate: var(--rotate);
|
|
scale: var(--scale);
|
|
transition-delay: 0.2s;
|
|
}
|
|
|
|
[pos='corner'] {
|
|
.message-text {
|
|
opacity: 0;
|
|
translate: 0 var(--translate);
|
|
}
|
|
|
|
.main-content {
|
|
opacity: 0;
|
|
translate: 0 var(--translate);
|
|
transition-delay: 0.2s;
|
|
}
|
|
|
|
.solid-L {
|
|
transition-delay: 0.4s;
|
|
}
|
|
|
|
.attrib-text,
|
|
.secondary-cta.top {
|
|
opacity: 0;
|
|
transition-delay: 0.2s;
|
|
}
|
|
}
|
|
|
|
.screen:not(.dialog-last):not([pos='corner']) {
|
|
.main-content {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.welcome-text {
|
|
opacity: 0;
|
|
translate: 0 var(--translate);
|
|
transition-delay: 0.1s;
|
|
}
|
|
|
|
.colorway-variations,
|
|
.tiles-theme-section,
|
|
.colorway-text {
|
|
opacity: 0;
|
|
translate: 0 var(--translate);
|
|
transition-delay: 0.2s;
|
|
|
|
}
|
|
|
|
.primary,
|
|
.checkbox-container,
|
|
.secondary,
|
|
.secondary-cta:not(.top) {
|
|
opacity: 0;
|
|
translate: 0 var(--translate);
|
|
transition-delay: 0.3s;
|
|
}
|
|
|
|
.steps {
|
|
opacity: 0.2;
|
|
transition-delay: 0.5s;
|
|
}
|
|
}
|
|
|
|
.dialog-last {
|
|
.noodle {
|
|
transition-delay: 0s;
|
|
}
|
|
|
|
.main-content {
|
|
opacity: 0;
|
|
translate: 0 calc(2 * var(--translate));
|
|
transition-delay: 0.4s;
|
|
}
|
|
}
|
|
}
|
|
}
|