2905 lines
66 KiB
SCSS
2905 lines
66 KiB
SCSS
/* 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;
|
|
|
|
// Change the height at which the scrollbar appears
|
|
// for the addons picker since its content is
|
|
// much taller than other onboarding content
|
|
&:has(.addons-picker-container) {
|
|
min-height: 1080px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
--picker-background-color: color-mix(in srgb, transparent 98%, black 2%);
|
|
--picker-hover-background-color: color-mix(in srgb, transparent 95%, black 5%);
|
|
--picker-border-color: var(--in-content-border-color);
|
|
--picker-checked-border-color: var(--in-content-item-selected);
|
|
--picker-hover-border-color: var(--picker-border-color);
|
|
--picker-focus-ring-color: var(--in-content-item-selected);
|
|
--picker-checkbox-color: var(--in-content-item-selected);
|
|
--picker-checkbox-hover-color: var(--picker-checkbox-color);
|
|
|
|
@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;
|
|
--picker-background-color: color-mix(in srgb, transparent 98%, white 2%);
|
|
--picker-hover-background-color: color-mix(in srgb, transparent 95%, white 5%);
|
|
}
|
|
|
|
@media (forced-colors: active) {
|
|
--picker-background-color: ButtonFace;
|
|
--picker-hover-background-color: SelectedItemText;
|
|
--picker-border-color: ButtonText;
|
|
--picker-checked-border-color: var(--picker-border-color);
|
|
--picker-hover-border-color: SelectedItem;
|
|
--picker-focus-ring-color: CanvasText;
|
|
--picker-checkbox-color: ButtonText;
|
|
--picker-checkbox-hover-color: SelectedItem;
|
|
}
|
|
|
|
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;
|
|
}
|
|
}
|
|
|
|
#content-tiles-container {
|
|
margin: 0;
|
|
|
|
.content-tile:not(:only-child) {
|
|
margin-block: 0 24px;
|
|
}
|
|
|
|
.content-tile:last-child {
|
|
margin-block: 0 40px;
|
|
}
|
|
|
|
.multi-select-container {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
max-width: 400px;
|
|
|
|
&: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;
|
|
|
|
.checkbox-container {
|
|
display: grid;
|
|
|
|
label, p {
|
|
grid-column: 2;
|
|
}
|
|
|
|
p {
|
|
margin-block: 0.5em 0;
|
|
}
|
|
}
|
|
|
|
@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;
|
|
}
|
|
|
|
@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;
|
|
|
|
@media only screen and (width <= 800px) {
|
|
padding-block: 20px;
|
|
}
|
|
|
|
.steps:not(.progress-bar) {
|
|
justify-content: start;
|
|
padding-top: 24px;
|
|
}
|
|
}
|
|
|
|
.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%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.addons-picker-container {
|
|
background: none;
|
|
|
|
.addon-container {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
border: 1px solid var(--in-content-border-color);
|
|
box-shadow: 0 1px 2px 0 var(--in-content-border-color);
|
|
border-radius: 4px;
|
|
margin-block: 0 16px;
|
|
text-align: start;
|
|
padding: 16px;
|
|
max-width: 800px;
|
|
|
|
.rtamo-icon {
|
|
img {
|
|
margin-inline: 0 16px;
|
|
}
|
|
}
|
|
|
|
.addon-rows-container {
|
|
flex-grow: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.addon-row {
|
|
display: flex;
|
|
flex-grow: 1;
|
|
justify-content: space-between;
|
|
|
|
.install-button-wrapper {
|
|
display: block;
|
|
|
|
button {
|
|
padding-inline: 16px;
|
|
font-size: 12px;
|
|
padding-block: 0;
|
|
background-color: var(--in-content-button-background);
|
|
color: var(--in-content-button-text-color);
|
|
min-width: 0;
|
|
|
|
&:hover {
|
|
background-color: var(--in-content-button-background-hover);
|
|
}
|
|
|
|
&:active {
|
|
background-color: var(--in-content-button-background-active);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
&:not(:last-child) {
|
|
margin-block: 0 12px;
|
|
}
|
|
|
|
.addon-author-details {
|
|
margin-block: 0 4px;
|
|
|
|
.addon-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.addon-author {
|
|
font-size: 12px;
|
|
margin-block: 2px 0;
|
|
|
|
.author-link {
|
|
background: none;
|
|
padding: 0;
|
|
font-weight: normal;
|
|
min-width: auto;
|
|
min-height: auto;
|
|
margin: 0;
|
|
text-align: start;
|
|
|
|
@include text-link-styles;
|
|
}
|
|
|
|
.addon-by-line {
|
|
margin-inline: 0 4px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.addon-description {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
@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 {
|
|
height: auto;
|
|
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(.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 specific styles
|
|
&.theme {
|
|
.select-item {
|
|
width: 180px;
|
|
}
|
|
}
|
|
|
|
// single select specific styles
|
|
&.single-select {
|
|
&: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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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 {
|
|
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;
|
|
|
|
> 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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.onboardingContainer .main-content.no-steps:has(button.content-tiles-header[aria-expanded='false']) {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
#content-tiles-container button.tile-header,
|
|
button.content-tiles-header {
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: 12px 16px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
border-width: 1px;
|
|
border-radius: 0;
|
|
|
|
@media (prefers-contrast: no-preference) {
|
|
background-color: var(--in-content-page-background);
|
|
border-color: var(--in-content-border-color);
|
|
}
|
|
|
|
cursor: pointer;
|
|
// ensures focus ring is fully visible
|
|
outline-offset: -12px;
|
|
|
|
.arrow-icon {
|
|
width: 1em;
|
|
height: 1.5em;
|
|
-moz-context-properties: fill;
|
|
fill: currentColor;
|
|
background: url('chrome://global/skin/icons/arrow-down.svg') center center / 100% no-repeat;
|
|
}
|
|
|
|
&[aria-expanded='true'] {
|
|
border-end-start-radius: 0;
|
|
border-end-end-radius: 0;
|
|
|
|
.arrow-icon {
|
|
background: url('chrome://global/skin/icons/arrow-up.svg') center center / 100% no-repeat;
|
|
}
|
|
}
|
|
}
|
|
|
|
button.content-tiles-header {
|
|
margin: 0.5em 0 0;
|
|
font-size: 11px;
|
|
font-weight: 400;
|
|
justify-content: center;
|
|
border-width: 1px 0;
|
|
|
|
@media (prefers-contrast: no-preference) {
|
|
color: #5B5B66;
|
|
}
|
|
|
|
@media (prefers-contrast: no-preference) and (prefers-color-scheme: dark) {
|
|
color: #CFCFD8;
|
|
}
|
|
|
|
@media (prefers-contrast) {
|
|
color: var(--in-content-page-color);
|
|
}
|
|
|
|
.arrow-icon {
|
|
margin-inline: 1em
|
|
}
|
|
}
|
|
|
|
#content-tiles-container {
|
|
--tiles-container-border-radius: 8px;
|
|
|
|
margin: 24px 48px;
|
|
|
|
.content-tile {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
&.has-header:first-of-type button.tile-header,
|
|
&:not(.has-header) + .content-tile.has-header button.tile-header {
|
|
border-start-start-radius: var(--tiles-container-border-radius);
|
|
border-start-end-radius: var(--tiles-container-border-radius);
|
|
}
|
|
|
|
&.has-header {
|
|
&:not(:has(+ .content-tile.has-header)) {
|
|
button.tile-header {
|
|
border-end-start-radius: var(--tiles-container-border-radius);
|
|
border-end-end-radius: var(--tiles-container-border-radius);
|
|
|
|
&[aria-expanded='true'] {
|
|
border-end-start-radius: 0;
|
|
border-end-end-radius: 0;
|
|
|
|
& + .tile-content {
|
|
border: 1px solid var(--in-content-border-color);
|
|
border-top: none;
|
|
border-radius: 0 0 var(--tiles-container-border-radius) var(--tiles-container-border-radius);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&:has(+ .content-tile.has-header) {
|
|
button.tile-header[aria-expanded='false'] {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
button.tile-header {
|
|
font-size: 13px;
|
|
justify-content: space-between;
|
|
|
|
& + .tile-content {
|
|
border-inline-start: 1px solid var(--in-content-border-color);
|
|
border-inline-end: 1px solid var(--in-content-border-color);
|
|
}
|
|
|
|
.header-text-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.header-title {
|
|
font-weight: 590;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.header-subtitle {
|
|
font-weight: 400;
|
|
line-height: 1.5;
|
|
}
|
|
}
|
|
}
|
|
|
|
.multi-select-container {
|
|
padding: 24px;
|
|
margin: 0;
|
|
|
|
&.picker {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
box-sizing: border-box;
|
|
|
|
input[type='checkbox'] {
|
|
position: absolute;
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.checkbox-container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
background-color: var(--picker-background-color);
|
|
border: 1px solid var(--picker-border-color);
|
|
padding: 8px 12px;
|
|
border-radius: 100px;
|
|
user-select: none;
|
|
|
|
&:has(input:checked) {
|
|
border-color: var(--picker-checked-border-color);
|
|
border-width: 3px;
|
|
margin: -2px;
|
|
|
|
&:hover {
|
|
border-color: var(--picker-hover-border-color);
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
background-color: var(--picker-hover-background-color);
|
|
border-color: var(--picker-hover-border-color);
|
|
|
|
.picker-icon.picker-checked {
|
|
background-color: var(--picker-checkbox-hover-color);
|
|
}
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline: 2px solid var(--picker-focus-ring-color);
|
|
outline-offset: 6px;
|
|
|
|
&:has(input:checked) {
|
|
outline-offset: 4px;
|
|
}
|
|
}
|
|
|
|
.picker-icon {
|
|
border-radius: 100%;
|
|
width: 27px;
|
|
height: 27px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
margin-inline-end: 8px;
|
|
font-size: 12px;
|
|
forced-color-adjust: none;
|
|
|
|
&.picker-checked {
|
|
forced-color-adjust: auto;
|
|
background-color: var(--picker-checkbox-color);
|
|
mask: url('chrome://global/skin/icons/check.svg') center / 15px no-repeat exclude, linear-gradient(#000 0 0);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.checkbox-container {
|
|
display: grid;
|
|
|
|
label,
|
|
p {
|
|
grid-column: 2;
|
|
}
|
|
|
|
p {
|
|
margin-block: 0.5em 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tile-title-container {
|
|
margin-inline: 0;
|
|
margin-block: 10px 24px;
|
|
text-align: start;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.tile-title {
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
margin-block: 0;
|
|
|
|
&:not(:last-child) {
|
|
margin-block-end: 16px;
|
|
}
|
|
}
|
|
|
|
.tile-subtitle {
|
|
font-size: 16px;
|
|
margin-block: 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;
|
|
}
|
|
|
|
&.with-background {
|
|
background-color: var(--in-content-page-background);
|
|
|
|
&:hover {
|
|
background-color: var(--button-background-color-hover);
|
|
}
|
|
|
|
&:active {
|
|
background-color: var(--button-background-color-active);
|
|
}
|
|
}
|
|
}
|
|
|
|
@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;
|
|
}
|
|
|
|
.section-main.system-prompt-spotlight {
|
|
margin-top: 100px;
|
|
margin-inline: 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;
|
|
}
|
|
|
|
.section-main.system-prompt-spotlight {
|
|
margin-top: 100px;
|
|
margin-inline: 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,
|
|
.tile-title-container,
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.system-prompt-spotlight {
|
|
.inline-icon-container {
|
|
display: flex;
|
|
}
|
|
|
|
.welcome-text {
|
|
align-items: flex-start;
|
|
padding: 5px;
|
|
|
|
h2 {
|
|
text-align: start;
|
|
margin: 0;
|
|
margin-block: 10px 15px;
|
|
}
|
|
}
|
|
|
|
.brand-logo {
|
|
margin-block: 2px;
|
|
}
|
|
|
|
.multi-select-container {
|
|
margin-inline-start: 23px;
|
|
margin-block-end: 17px;
|
|
}
|
|
|
|
.additional-cta-container {
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
padding-inline-end: 15px;
|
|
}
|
|
|
|
.main-content.no-steps {
|
|
padding-bottom: 12px;
|
|
margin-inline: auto;
|
|
}
|
|
}
|
|
|
|
&.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;
|
|
}
|
|
}
|
|
}
|