diff options
Diffstat (limited to 'browser/components/aboutwelcome/content/aboutwelcome.css')
| -rw-r--r-- | browser/components/aboutwelcome/content/aboutwelcome.css | 2536 |
1 files changed, 2536 insertions, 0 deletions
diff --git a/browser/components/aboutwelcome/content/aboutwelcome.css b/browser/components/aboutwelcome/content/aboutwelcome.css new file mode 100644 index 0000000000..63608bd48a --- /dev/null +++ b/browser/components/aboutwelcome/content/aboutwelcome.css @@ -0,0 +1,2536 @@ +/* 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/. */ +/* stylelint-disable max-nesting-depth */ +#feature-callout { + --fc-background: var(--fc-background-light, #fff); + --fc-color: var(--fc-color-light, rgb(21, 20, 26)); + --fc-border: var(--fc-border-light, #CFCFD8); + --fc-accent-color: var(--fc-accent-color-light, rgb(0, 97, 224)); + --fc-button-background: var(--fc-button-background-light, #F0F0F4); + --fc-button-color: var(--fc-button-color-light, rgb(21, 20, 26)); + --fc-button-border: var(--fc-button-border-light, transparent); + --fc-button-background-hover: var(--fc-button-background-hover-light, #E0E0E6); + --fc-button-color-hover: var(--fc-button-color-hover-light, rgb(21, 20, 26)); + --fc-button-border-hover: var(--fc-button-border-hover-light, transparent); + --fc-button-background-active: var(--fc-button-background-active-light, #CFCFD8); + --fc-button-color-active: var(--fc-button-color-active-light, rgb(21, 20, 26)); + --fc-button-border-active: var(--fc-button-border-active-light, transparent); + --fc-primary-button-background: var(--fc-primary-button-background-light, #0061e0); + --fc-primary-button-color: var(--fc-primary-button-color-light, rgb(251,251,254)); + --fc-primary-button-border: var(--fc-primary-button-border-light, transparent); + --fc-primary-button-background-hover: var(--fc-primary-button-background-hover-light, #0250bb); + --fc-primary-button-color-hover: var(--fc-primary-button-color-hover-light, rgb(251,251,254)); + --fc-primary-button-border-hover: var(--fc-primary-button-border-hover-light, transparent); + --fc-primary-button-background-active: var(--fc-primary-button-background-active-light, #053e94); + --fc-primary-button-color-active: var(--fc-primary-button-color-active-light, rgb(251,251,254)); + --fc-primary-button-border-active: var(--fc-primary-button-border-active-light, transparent); + --fc-step-color: color-mix(in srgb, currentColor 50%, transparent); + --fc-link-color: var(--fc-link-color-light, #0061E0); + --fc-link-color-hover: var(--fc-link-color-hover-light, #0250BB); + --fc-link-color-active: var(--fc-link-color-active-light, #053E94); + position: absolute; + z-index: 2147483647; + outline: none; + color: var(--fc-color); + accent-color: var(--fc-accent-color); + -moz-theme: non-native; + --arrow-width: 33.9411px; + --arrow-square-size: calc(var(--arrow-width) / sqrt(2)); + --extra-width-from-rotation: calc(var(--arrow-width) - var(--arrow-square-size)); + --arrow-visible-height: calc(var(--arrow-width) / 2); + --arrow-visible-size: calc(var(--arrow-square-size) / 2); + --arrow-center-inset: calc(50% - var(--arrow-visible-size)); + --arrow-offset: calc(1.5px - var(--arrow-visible-size)); + --arrow-corner-distance: 12px; + --arrow-corner-inset: calc(var(--arrow-corner-distance) + (var(--extra-width-from-rotation) / 2)); + --arrow-overlap-magnitude: 5px; +} +@media (prefers-color-scheme: dark) { + #feature-callout { + --fc-background: var(--fc-background-dark, rgb(43, 42, 51)); + --fc-color: var(--fc-color-dark, rgb(251, 251, 254)); + --fc-border: var(--fc-border-dark, #3A3944); + --fc-accent-color: var(--fc-accent-color-dark, rgb(0, 221, 255)); + --fc-button-background: var(--fc-button-background-dark, #2B2A33); + --fc-button-color: var(--fc-button-color-dark, rgb(251, 251, 254)); + --fc-button-border: var(--fc-button-border-dark, transparent); + --fc-button-background-hover: var(--fc-button-background-hover-dark, #52525E); + --fc-button-color-hover: var(--fc-button-color-hover-dark, rgb(251, 251, 254)); + --fc-button-border-hover: var(--fc-button-border-hover-dark, transparent); + --fc-button-background-active: var(--fc-button-background-active-dark, #5B5B66); + --fc-button-color-active: var(--fc-button-color-active-dark, rgb(251, 251, 254)); + --fc-button-border-active: var(--fc-button-border-active-dark, transparent); + --fc-primary-button-background: var(--fc-primary-button-background-dark, rgb(0,221,255)); + --fc-primary-button-color: var(--fc-primary-button-color-dark, rgb(43,42,51)); + --fc-primary-button-border: var(--fc-primary-button-border-dark, transparent); + --fc-primary-button-background-hover: var(--fc-primary-button-background-hover-dark, rgb(128,235,255)); + --fc-primary-button-color-hover: var(--fc-primary-button-color-hover-dark, rgb(43,42,51)); + --fc-primary-button-border-hover: var(--fc-primary-button-border-hover-dark, transparent); + --fc-primary-button-background-active: var(--fc-primary-button-background-active-dark, rgb(170,242,255)); + --fc-primary-button-color-active: var(--fc-primary-button-color-active-dark, rgb(43,42,51)); + --fc-primary-button-border-active: var(--fc-primary-button-border-active-dark, transparent); + --fc-link-color: var(--fc-link-color-dark, #00DDFF); + --fc-link-color-hover: var(--fc-link-color-hover-dark, #80EBFF); + --fc-link-color-active: var(--fc-link-color-hover-active, #AAF2FF); + } +} +@media (prefers-contrast) { + #feature-callout { + --fc-background: var(--fc-background-hcm, -moz-dialog); + --fc-color: var(--fc-color-hcm, -moz-dialogtext); + --fc-border: var(--fc-border-hcm, -moz-dialogtext); + --fc-accent-color: var(--fc-accent-color-hcm, LinkText); + --fc-button-background: var(--fc-button-background-hcm, ButtonFace); + --fc-button-color: var(--fc-button-color-hcm, ButtonText); + --fc-button-border: var(--fc-button-border-hcm, ButtonText); + --fc-button-background-hover: var(--fc-button-background-hover-hcm, ButtonText); + --fc-button-color-hover: var(--fc-button-color-hover-hcm, ButtonFace); + --fc-button-border-hover: var(--fc-button-border-hover-hcm, ButtonText); + --fc-button-background-active: var(--fc-button-background-active-hcm, ButtonText); + --fc-button-color-active: var(--fc-button-color-active-hcm, ButtonFace); + --fc-button-border-active: var(--fc-button-border-active-hcm, ButtonText); + --fc-primary-button-background: var(--fc-primary-button-background-hcm, ButtonText); + --fc-primary-button-color: var(--fc-primary-button-color-hcm, ButtonFace); + --fc-primary-button-border: var(--fc-primary-button-border-hcm, ButtonFace); + --fc-primary-button-background-hover: var(--fc-primary-button-background-hover-hcm, SelectedItem); + --fc-primary-button-color-hover: var(--fc-primary-button-color-hover-hcm, SelectedItemText); + --fc-primary-button-border-hover: var(--fc-primary-button-border-hover-hcm, SelectedItemText); + --fc-primary-button-background-active: var(--fc-primary-button-background-active-hcm, SelectedItemText); + --fc-primary-button-color-active: var(--fc-primary-button-color-active-hcm, SelectedItem); + --fc-primary-button-border-active: var(--fc-primary-button-border-active-hcm, SelectedItem); + --fc-step-color: var(--fc-accent-color-hcm, LinkText); + --fc-link-color: var(--fc-link-color-hcm, LinkText); + --fc-link-color-hover: var(--fc-link-color-hover-hcm, LinkText); + --fc-link-color-active: var(--fc-link-color-active-hcm, ActiveText); + } +} +#feature-callout.simulateContent { + color-scheme: env(-moz-content-preferred-color-scheme); +} +@media (-moz-content-prefers-color-scheme: light) { + #feature-callout.simulateContent { + --fc-background: var(--fc-background-light, #fff); + --fc-color: var(--fc-color-light, rgb(21, 20, 26)); + --fc-border: var(--fc-border-light, #CFCFD8); + --fc-accent-color: var(--fc-accent-color-light, rgb(0, 97, 224)); + --fc-button-background: var(--fc-button-background-light, #F0F0F4); + --fc-button-color: var(--fc-button-color-light, rgb(21, 20, 26)); + --fc-button-border: var(--fc-button-border-light, transparent); + --fc-button-background-hover: var(--fc-button-background-hover-light, #E0E0E6); + --fc-button-color-hover: var(--fc-button-color-hover-light, rgb(21, 20, 26)); + --fc-button-border-hover: var(--fc-button-border-hover-light, transparent); + --fc-button-background-active: var(--fc-button-background-active-light, #CFCFD8); + --fc-button-color-active: var(--fc-button-color-active-light, rgb(21, 20, 26)); + --fc-button-border-active: var(--fc-button-border-active-light, transparent); + --fc-primary-button-background: var(--fc-primary-button-background-light, #0061e0); + --fc-primary-button-color: var(--fc-primary-button-color-light, rgb(251,251,254)); + --fc-primary-button-border: var(--fc-primary-button-border-light, transparent); + --fc-primary-button-background-hover: var(--fc-primary-button-background-hover-light, #0250bb); + --fc-primary-button-color-hover: var(--fc-primary-button-color-hover-light, rgb(251,251,254)); + --fc-primary-button-border-hover: var(--fc-primary-button-border-hover-light, transparent); + --fc-primary-button-background-active: var(--fc-primary-button-background-active-light, #053e94); + --fc-primary-button-color-active: var(--fc-primary-button-color-active-light, rgb(251,251,254)); + --fc-primary-button-border-active: var(--fc-primary-button-border-active-light, transparent); + --fc-step-color: color-mix(in srgb, currentColor 50%, transparent); + --fc-link-color: var(--fc-link-color-light, #0061E0); + --fc-link-color-hover: var(--fc-link-color-hover-light, #0250BB); + --fc-link-color-active: var(--fc-link-color-active-light, #053E94); + } +} +@media (-moz-content-prefers-color-scheme: dark) { + #feature-callout.simulateContent { + --fc-background: var(--fc-background-dark, rgb(43, 42, 51)); + --fc-color: var(--fc-color-dark, rgb(251, 251, 254)); + --fc-border: var(--fc-border-dark, #3A3944); + --fc-accent-color: var(--fc-accent-color-dark, rgb(0, 221, 255)); + --fc-button-background: var(--fc-button-background-dark, #2B2A33); + --fc-button-color: var(--fc-button-color-dark, rgb(251, 251, 254)); + --fc-button-border: var(--fc-button-border-dark, transparent); + --fc-button-background-hover: var(--fc-button-background-hover-dark, #52525E); + --fc-button-color-hover: var(--fc-button-color-hover-dark, rgb(251, 251, 254)); + --fc-button-border-hover: var(--fc-button-border-hover-dark, transparent); + --fc-button-background-active: var(--fc-button-background-active-dark, #5B5B66); + --fc-button-color-active: var(--fc-button-color-active-dark, rgb(251, 251, 254)); + --fc-button-border-active: var(--fc-button-border-active-dark, transparent); + --fc-primary-button-background: var(--fc-primary-button-background-dark, rgb(0,221,255)); + --fc-primary-button-color: var(--fc-primary-button-color-dark, rgb(43,42,51)); + --fc-primary-button-border: var(--fc-primary-button-border-dark, transparent); + --fc-primary-button-background-hover: var(--fc-primary-button-background-hover-dark, rgb(128,235,255)); + --fc-primary-button-color-hover: var(--fc-primary-button-color-hover-dark, rgb(43,42,51)); + --fc-primary-button-border-hover: var(--fc-primary-button-border-hover-dark, transparent); + --fc-primary-button-background-active: var(--fc-primary-button-background-active-dark, rgb(170,242,255)); + --fc-primary-button-color-active: var(--fc-primary-button-color-active-dark, rgb(43,42,51)); + --fc-primary-button-border-active: var(--fc-primary-button-border-active-dark, transparent); + --fc-link-color: var(--fc-link-color-dark, #00DDFF); + --fc-link-color-hover: var(--fc-link-color-hover-dark, #80EBFF); + --fc-link-color-active: var(--fc-link-color-hover-active, #AAF2FF); + } +} +@media (prefers-contrast) { + #feature-callout.simulateContent { + --fc-background: var(--fc-background-hcm, -moz-dialog); + --fc-color: var(--fc-color-hcm, -moz-dialogtext); + --fc-border: var(--fc-border-hcm, -moz-dialogtext); + --fc-accent-color: var(--fc-accent-color-hcm, LinkText); + --fc-button-background: var(--fc-button-background-hcm, ButtonFace); + --fc-button-color: var(--fc-button-color-hcm, ButtonText); + --fc-button-border: var(--fc-button-border-hcm, ButtonText); + --fc-button-background-hover: var(--fc-button-background-hover-hcm, ButtonText); + --fc-button-color-hover: var(--fc-button-color-hover-hcm, ButtonFace); + --fc-button-border-hover: var(--fc-button-border-hover-hcm, ButtonText); + --fc-button-background-active: var(--fc-button-background-active-hcm, ButtonText); + --fc-button-color-active: var(--fc-button-color-active-hcm, ButtonFace); + --fc-button-border-active: var(--fc-button-border-active-hcm, ButtonText); + --fc-primary-button-background: var(--fc-primary-button-background-hcm, ButtonText); + --fc-primary-button-color: var(--fc-primary-button-color-hcm, ButtonFace); + --fc-primary-button-border: var(--fc-primary-button-border-hcm, ButtonFace); + --fc-primary-button-background-hover: var(--fc-primary-button-background-hover-hcm, SelectedItem); + --fc-primary-button-color-hover: var(--fc-primary-button-color-hover-hcm, SelectedItemText); + --fc-primary-button-border-hover: var(--fc-primary-button-border-hover-hcm, SelectedItemText); + --fc-primary-button-background-active: var(--fc-primary-button-background-active-hcm, SelectedItemText); + --fc-primary-button-color-active: var(--fc-primary-button-color-active-hcm, SelectedItem); + --fc-primary-button-border-active: var(--fc-primary-button-border-active-hcm, SelectedItem); + --fc-step-color: var(--fc-accent-color-hcm, LinkText); + --fc-link-color: var(--fc-link-color-hcm, LinkText); + --fc-link-color-hover: var(--fc-link-color-hover-hcm, LinkText); + --fc-link-color-active: var(--fc-link-color-active-hcm, ActiveText); + } +} +panel#feature-callout { + --panel-color: var(--fc-color); + --panel-shadow: none; + --panel-shadow-margin: 6px; + --panel-arrow-space: calc(var(--panel-shadow-margin) + var(--arrow-visible-height) - 1.5px); + --panel-margin-offset: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-corner-distance) + (var(--arrow-width) / 2))); +} + +panel#feature-callout::part(content) { + width: initial; + border: 0; + border-radius: 0; + padding: 0; + margin: var(--panel-shadow-margin); + background: none; + color: inherit; + overflow: visible !important; +} + +div#feature-callout { + transition: opacity 0.5s ease; +} +div#feature-callout.hidden { + opacity: 0; + pointer-events: none; +} + +#feature-callout .onboardingContainer, +#feature-callout .onboardingContainer .outer-wrapper { + --transition: none; + height: auto; +} +#feature-callout:dir(rtl) { + transform: none; + direction: ltr; +} +#feature-callout .outer-wrapper:dir(rtl) { + transform: none; + direction: rtl; +} +#feature-callout .screen:dir(rtl) { + transform: none; +} +#feature-callout .screen[pos=callout] { + height: fit-content; + min-height: unset; + overflow: visible; +} +#feature-callout .screen[pos=callout][layout=inline] .section-main .main-content, +#feature-callout .screen[pos=callout][layout=inline] .section-main .main-content.no-steps { + width: 18em; + padding-inline: 16px; + padding-block: 0; +} +#feature-callout .screen[pos=callout][layout=inline] .section-main .main-content .welcome-text, +#feature-callout .screen[pos=callout][layout=inline] .section-main .main-content.no-steps .welcome-text { + height: 24px; + margin-block: 12px; + margin-inline: 0; + padding: 0; + white-space: nowrap; +} +#feature-callout .screen[pos=callout][layout=inline] .section-main .dismiss-button { + height: 24px; + width: 24px; + min-height: 24px; + min-width: 24px; + margin: 0; + top: calc(50% - 12px); + inset-inline-end: 12px; +} +#feature-callout .screen[pos=callout] .logo-container { + display: flex; + justify-content: center; +} +#feature-callout .screen[pos=callout] .logo-container .brand-logo { + margin: 0; +} +#feature-callout .screen[pos=callout] .logo-container .brand-logo:dir(rtl) { + transform: rotateY(180deg); +} +#feature-callout .screen[pos=callout] .welcome-text { + align-items: baseline; + text-align: start; + margin: 0; + padding: 0; + gap: 8px; +} +#feature-callout .screen[pos=callout] .welcome-text h1, +#feature-callout .screen[pos=callout] .welcome-text h2 { + font-size: 0.813em; + margin: 0; + color: inherit; +} +#feature-callout .screen[pos=callout] .welcome-text h1 { + font-weight: 600; +} +#feature-callout .screen[pos=callout] .welcome-text .inline-icon-container { + display: flex; + flex-flow: row wrap; + align-items: center; +} +#feature-callout .screen[pos=callout] .welcome-text .inline-icon-container .logo-container { + height: 16px; + width: 16px; + margin-inline-end: 6px; + box-sizing: border-box; + -moz-context-properties: fill; + fill: currentColor; +} +#feature-callout .screen[pos=callout] .welcome-text .inline-icon-container .logo-container img { + height: 16px; + width: 16px; + margin: 0; +} +#feature-callout .screen[pos=callout] .welcome-text .inline-icon-container[alignment=top], #feature-callout .screen[pos=callout] .welcome-text .inline-icon-container[alignment=bottom] { + flex-wrap: nowrap; +} +#feature-callout .screen[pos=callout] .welcome-text .inline-icon-container[alignment=top] .logo-container, #feature-callout .screen[pos=callout] .welcome-text .inline-icon-container[alignment=bottom] .logo-container { + height: 1.5em; + align-items: center; + padding-bottom: 0.15em; + box-sizing: border-box; +} +#feature-callout .screen[pos=callout] .welcome-text .inline-icon-container[alignment=top] { + align-items: start; +} +#feature-callout .screen[pos=callout] .welcome-text .inline-icon-container[alignment=bottom] { + align-items: end; +} +#feature-callout .screen[pos=callout] .multi-select-container { + margin: 0; + font-size: 0.813em; + row-gap: 12px; + color: inherit; + overflow: visible; +} +#feature-callout .screen[pos=callout] .multi-select-container #multi-stage-multi-select-label { + font-size: inherit; + margin: -4px 0 0; + color: inherit; +} +#feature-callout .screen[pos=callout] .cta-link { + background: none; + text-decoration: underline; + cursor: pointer; + border: none; + padding: 0; + color: var(--fc-link-color); + order: -1; + margin-inline-end: auto; + margin-block: 8px; +} +#feature-callout .screen[pos=callout] .cta-link:hover { + color: var(--fc-link-color-hover); +} +#feature-callout .screen[pos=callout] .cta-link:active { + color: var(--fc-link-color-active); +} +#feature-callout .screen[pos=callout] .section-secondary { + display: none; +} +#feature-callout .screen[pos=callout] .section-main { + height: fit-content; + width: fit-content; +} +#feature-callout .screen[pos=callout] .section-main .main-content { + position: relative; + overflow: hidden; + border: 1px solid var(--fc-border); + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); + border-radius: 4px; + padding: var(--callout-padding, 24px); + width: 25em; + gap: 16px; + background-color: var(--fc-background); +} +#feature-callout .screen[pos=callout] .section-main .main-content .main-content-inner { + gap: 12px; +} +#feature-callout .screen[pos=callout] .section-main .main-content .steps { + height: auto; + position: absolute; + bottom: calc(var(--callout-padding, 24px) + 12px); + padding-block: 0; +} +#feature-callout .screen[pos=callout] .section-main .main-content .steps .indicator { + border: 4px solid var(--fc-step-color); +} +#feature-callout .screen[pos=callout] .section-main .main-content .steps .indicator.current { + border-color: var(--fc-accent-color); +} +#feature-callout .screen[pos=callout] .section-main .main-content .steps:not(.progress-bar) { + flex-flow: row nowrap; + gap: 8px; +} +#feature-callout .screen[pos=callout] .section-main .main-content .steps:not(.progress-bar) .indicator { + margin: 0; +} +#feature-callout .screen[pos=callout] .section-main .main-content .steps .indicator.current, #feature-callout .screen[pos=callout] .section-main .main-content .steps.progress-bar .indicator.complete { + border-color: var(--fc-accent-color); +} +#feature-callout .screen[pos=callout] .section-main .dismiss-button { + font-size: 1em; + inset-block: 0 auto; + inset-inline: auto 0; + margin-block: 16px 0; + margin-inline: 0 16px; + background-color: var(--fc-background); +} +#feature-callout .screen[pos=callout] .section-main .dismiss-button[button-size=small] { + height: 24px; + width: 24px; + min-height: 24px; + min-width: 24px; +} +#feature-callout .screen[pos=callout] .action-buttons { + display: flex; + flex-flow: row nowrap; + align-items: stretch; + justify-content: end; + gap: 10px; + margin-top: 4px; +} +#feature-callout .screen[pos=callout] .action-buttons[alignment=start] { + justify-content: start; +} +#feature-callout .screen[pos=callout] .action-buttons[alignment=space-between] { + justify-content: space-between; +} +#feature-callout .screen[pos=callout] .action-buttons .secondary-cta { + font-size: inherit; +} +#feature-callout .screen[pos=callout] .action-buttons .primary, +#feature-callout .screen[pos=callout] .action-buttons .secondary { + padding: 4px 16px; + margin: 0; + font-size: 0.813em; + font-weight: 600; + line-height: 16px; + min-height: 32px; + text-decoration: none; + cursor: default; +} +#feature-callout .screen[pos=callout] .action-buttons .secondary { + background-color: var(--fc-button-background); +} +#feature-callout .screen[pos=callout] .action-buttons .primary { + background-color: var(--fc-primary-button-background); +} +#feature-callout .screen[pos=callout] .action-buttons .split-button-container { + align-items: stretch; +} +#feature-callout .screen[pos=callout] .action-buttons .split-button-container:not([hidden]) { + display: flex; +} +#feature-callout .screen[pos=callout] .action-buttons .split-button-container .primary:not(.submenu-button), +#feature-callout .screen[pos=callout] .action-buttons .split-button-container .secondary:not(.submenu-button), +#feature-callout .screen[pos=callout] .action-buttons .split-button-container .additional-cta:not(.submenu-button) { + border-start-end-radius: 0; + border-end-end-radius: 0; + margin-inline-end: 0; +} +#feature-callout .screen[pos=callout] .action-buttons .split-button-container .primary:focus-visible, +#feature-callout .screen[pos=callout] .action-buttons .split-button-container .secondary:focus-visible, +#feature-callout .screen[pos=callout] .action-buttons .split-button-container .additional-cta:focus-visible { + z-index: 2; +} +#feature-callout .screen[pos=callout] .action-buttons .split-button-container .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; +} +#feature-callout .screen[pos=callout] .action-buttons .primary, +#feature-callout .screen[pos=callout] .action-buttons .secondary, +#feature-callout .screen[pos=callout] .dismiss-button { + border-radius: 4px; +} +#feature-callout .screen[pos=callout] .action-buttons .primary:focus-visible, +#feature-callout .screen[pos=callout] .action-buttons .secondary:focus-visible, +#feature-callout .screen[pos=callout] .dismiss-button:focus-visible { + box-shadow: none; + outline: 2px solid var(--fc-accent-color); + outline-offset: 2px; +} +#feature-callout .screen[pos=callout] .action-buttons .primary:disabled, +#feature-callout .screen[pos=callout] .action-buttons .secondary:disabled, +#feature-callout .screen[pos=callout] .dismiss-button:disabled { + opacity: 0.4; + cursor: auto; +} +#feature-callout .screen[pos=callout] .action-buttons .secondary, +#feature-callout .screen[pos=callout] .dismiss-button { + border: 1px solid var(--fc-button-border); + color: var(--fc-button-color); +} +#feature-callout .screen[pos=callout] .action-buttons .secondary:hover:not(:disabled), #feature-callout .screen[pos=callout] .action-buttons .secondary[open], +#feature-callout .screen[pos=callout] .dismiss-button:hover:not(:disabled), +#feature-callout .screen[pos=callout] .dismiss-button[open] { + background-color: var(--fc-button-background-hover); + color: var(--fc-button-color-hover); + border: 1px solid var(--fc-button-border-hover); +} +#feature-callout .screen[pos=callout] .action-buttons .secondary:hover:not(:disabled):active, #feature-callout .screen[pos=callout] .action-buttons .secondary[open]:active, +#feature-callout .screen[pos=callout] .dismiss-button:hover:not(:disabled):active, +#feature-callout .screen[pos=callout] .dismiss-button[open]:active { + background-color: var(--fc-button-background-active); + color: var(--fc-button-color-active); + border: 1px solid var(--fc-button-border-active); +} +#feature-callout .screen[pos=callout] .action-buttons .primary { + border: 1px solid var(--fc-primary-button-border); + color: var(--fc-primary-button-color); +} +#feature-callout .screen[pos=callout] .action-buttons .primary:hover:not(:disabled), #feature-callout .screen[pos=callout] .action-buttons .primary[open] { + background-color: var(--fc-primary-button-background-hover); + color: var(--fc-primary-button-color-hover); + border: 1px solid var(--fc-primary-button-border-hover); +} +#feature-callout .screen[pos=callout] .action-buttons .primary:hover:not(:disabled):active, #feature-callout .screen[pos=callout] .action-buttons .primary[open]:active { + background-color: var(--fc-primary-button-background-active); + color: var(--fc-primary-button-color-active); + border: 1px solid var(--fc-primary-button-border-active); +} +panel#feature-callout:is([side=top], [side=bottom]):not([hide-arrow=permanent]) { + margin-inline: var(--panel-margin-offset); +} + +panel#feature-callout:is([side=left], [side=right]):not([hide-arrow=permanent]) { + margin-block: var(--panel-margin-offset); +} + +panel#feature-callout::part(content) { + position: relative; +} + +#feature-callout .arrow-box { + position: absolute; + overflow: visible; + transform: rotate(45deg); + transform-style: preserve-3d; +} +#feature-callout:not([arrow-position]) .arrow-box, #feature-callout[hide-arrow] .arrow-box { + display: none; +} +#feature-callout .arrow { + width: var(--arrow-square-size); + height: var(--arrow-square-size); +} +#feature-callout .shadow-arrow-box { + z-index: -1; +} +#feature-callout .shadow-arrow { + background: transparent; + outline: 1px solid var(--fc-border); + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); +} +#feature-callout .background-arrow-box { + z-index: 1; + pointer-events: none; +} +#feature-callout .background-arrow { + background-color: var(--fc-background); + clip-path: var(--fc-arrow-clip-path); +} +#feature-callout[arrow-position=top] .arrow-box { + top: var(--arrow-offset); + inset-inline-start: var(--arrow-center-inset); + --fc-arrow-clip-path: polygon(100% 0, 100% 2%, 2% 100%, 0 100%, 0 0); +} +panel#feature-callout[arrow-position=top]::part(content) { + margin-top: var(--panel-arrow-space); +} + +panel#feature-callout[arrow-position=top] { + margin-top: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude))); +} + +#feature-callout[arrow-position=bottom] .arrow-box { + bottom: var(--arrow-offset); + inset-inline-start: var(--arrow-center-inset); + --fc-arrow-clip-path: polygon(100% 0, 98% 0, 0 98%, 0 100%, 100% 100%); +} +panel#feature-callout[arrow-position=bottom]::part(content) { + margin-bottom: var(--panel-arrow-space); +} + +panel#feature-callout[arrow-position=bottom] { + margin-bottom: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude))); +} + +#feature-callout[arrow-position=inline-end] .arrow-box { + top: var(--arrow-center-inset); + inset-inline-end: var(--arrow-offset); + --fc-arrow-clip-path: polygon(100% 0, 100% 100%, 98% 100%, 0 2%, 0 0); +} +panel#feature-callout[arrow-position=inline-end]::part(content) { + margin-inline-end: var(--panel-arrow-space); +} + +panel#feature-callout[arrow-position=inline-end] { + margin-inline-end: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude))); +} + +#feature-callout[arrow-position=inline-start] .arrow-box { + top: var(--arrow-center-inset); + inset-inline-start: var(--arrow-offset); + --fc-arrow-clip-path: polygon(0 100%, 100% 100%, 100% 98%, 2% 0, 0 0); +} +panel#feature-callout[arrow-position=inline-start]::part(content) { + margin-inline-start: var(--panel-arrow-space); +} + +panel#feature-callout[arrow-position=inline-start] { + margin-inline-start: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude))); +} + +#feature-callout[arrow-position=top-end] .arrow-box { + top: var(--arrow-offset); + inset-inline-end: var(--arrow-corner-inset); + --fc-arrow-clip-path: polygon(100% 0, 100% 2%, 2% 100%, 0 100%, 0 0); +} +panel#feature-callout[arrow-position=top-end]::part(content) { + margin-top: var(--panel-arrow-space); +} + +panel#feature-callout[arrow-position=top-end] { + margin-top: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude))); +} + +#feature-callout[arrow-position=top-start] .arrow-box { + top: var(--arrow-offset); + inset-inline-start: var(--arrow-corner-inset); + --fc-arrow-clip-path: polygon(100% 0, 100% 2%, 2% 100%, 0 100%, 0 0); +} +panel#feature-callout[arrow-position=top-start]::part(content) { + margin-top: var(--panel-arrow-space); +} + +panel#feature-callout[arrow-position=top-start] { + margin-top: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude))); +} + +#feature-callout[arrow-position=bottom-end] .arrow-box { + bottom: var(--arrow-offset); + inset-inline-end: var(--arrow-corner-inset); + --fc-arrow-clip-path: polygon(100% 0, 98% 0, 0 98%, 0 100%, 100% 100%); +} +panel#feature-callout[arrow-position=bottom-end]::part(content) { + margin-bottom: var(--panel-arrow-space); +} + +panel#feature-callout[arrow-position=bottom-end] { + margin-bottom: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude))); +} + +#feature-callout[arrow-position=bottom-start] .arrow-box { + bottom: var(--arrow-offset); + inset-inline-start: var(--arrow-corner-inset); + --fc-arrow-clip-path: polygon(100% 0, 98% 0, 0 98%, 0 100%, 100% 100%); +} +panel#feature-callout[arrow-position=bottom-start]::part(content) { + margin-bottom: var(--panel-arrow-space); +} + +panel#feature-callout[arrow-position=bottom-start] { + margin-bottom: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude))); +} + +#feature-callout[arrow-position=inline-end-top] .arrow-box { + top: var(--arrow-corner-inset); + inset-inline-end: var(--arrow-offset); + --fc-arrow-clip-path: polygon(100% 0, 100% 100%, 98% 100%, 0 2%, 0 0); +} +panel#feature-callout[arrow-position=inline-end-top]::part(content) { + margin-inline-end: var(--panel-arrow-space); +} + +panel#feature-callout[arrow-position=inline-end-top] { + margin-inline-end: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude))); +} + +#feature-callout[arrow-position=inline-end-bottom] .arrow-box { + bottom: var(--arrow-corner-inset); + inset-inline-end: var(--arrow-offset); + --fc-arrow-clip-path: polygon(100% 0, 100% 100%, 98% 100%, 0 2%, 0 0); +} +panel#feature-callout[arrow-position=inline-end-bottom]::part(content) { + margin-inline-end: var(--panel-arrow-space); +} + +panel#feature-callout[arrow-position=inline-end-bottom] { + margin-inline-end: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude))); +} + +#feature-callout[arrow-position=inline-start-top] .arrow-box { + top: var(--arrow-corner-inset); + inset-inline-start: var(--arrow-offset); + --fc-arrow-clip-path: polygon(0 100%, 100% 100%, 100% 98%, 2% 0, 0 0); +} +panel#feature-callout[arrow-position=inline-start-top]::part(content) { + margin-inline-start: var(--panel-arrow-space); +} + +panel#feature-callout[arrow-position=inline-start-top] { + margin-inline-start: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude))); +} + +#feature-callout[arrow-position=inline-start-bottom] .arrow-box { + bottom: var(--arrow-corner-inset); + inset-inline-start: var(--arrow-offset); + --fc-arrow-clip-path: polygon(0 100%, 100% 100%, 100% 98%, 2% 0, 0 0); +} +panel#feature-callout[arrow-position=inline-start-bottom]::part(content) { + margin-inline-start: var(--panel-arrow-space); +} + +panel#feature-callout[arrow-position=inline-start-bottom] { + margin-inline-start: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude))); +} + +#feature-callout:focus-visible .screen[pos=callout] .section-main .main-content { + outline: 2px solid var(--fc-accent-color); + border-color: transparent; +} +@media (prefers-contrast) { + #feature-callout:focus-visible .screen[pos=callout] .section-main .main-content { + border-color: var(--fc-background); + } +} +#feature-callout:focus-visible .shadow-arrow { + outline: 2px solid var(--fc-accent-color); +} + +/* stylelint-disable max-nesting-depth */ +.onboardingContainer.shopping { + height: auto; +} +.onboardingContainer.shopping .outer-wrapper { + height: auto; +} + +.onboardingContainer.shopping .screen[pos=split] { + height: auto; + margin: 0 auto; + min-height: fit-content; + border-radius: 8px; + box-shadow: 0 2px 6px rgba(58, 57, 68, 0.2); + overflow-x: auto; +} +@media (prefers-contrast: no-preference) and (prefers-color-scheme: dark) { + .onboardingContainer.shopping .screen[pos=split] { + box-shadow: 0 2px 6px #15141a; + } +} +.onboardingContainer.shopping .screen[pos=split]::before { + display: none; +} +.onboardingContainer.shopping .screen[pos=split] .section-main { + width: auto; + height: auto; + margin: 0 auto; +} +.onboardingContainer.shopping .screen[pos=split] .section-main .main-content { + border-radius: 4px; + color: inherit; + font: menu; +} +@media (prefers-contrast: no-preference) and (prefers-color-scheme: dark) { + .onboardingContainer.shopping .screen[pos=split] .section-main .main-content { + background-color: #52525E; + } +} +.onboardingContainer.shopping .screen[pos=split] .section-main .main-content.no-steps { + padding: 16px 0 36px; +} +.onboardingContainer.shopping .screen[pos=split] .section-main .main-content .welcome-text { + text-align: start; + margin-block: 10px 12px; +} +.onboardingContainer.shopping .screen[pos=split] .section-main .main-content .welcome-text h1 { + width: auto; + font-weight: 400; + line-height: 1.5; + font-size: 1.7em; +} +.onboardingContainer.shopping .screen[pos=split] .section-main .main-content .welcome-text h2 { + color: inherit; + font-size: 1em; +} +.onboardingContainer.shopping .screen[pos=split] .section-main .main-content .action-buttons .primary, +.onboardingContainer.shopping .screen[pos=split] .section-main .main-content .action-buttons .secondary { + min-width: auto; +} +.onboardingContainer.shopping .screen[pos=split] .section-main .main-content .action-buttons .primary { + font-weight: 400; + padding: 4px 16px; +} +.onboardingContainer.shopping .screen[pos=split] .section-main .main-content .action-buttons.additional-cta-container { + align-items: center; +} +.onboardingContainer.shopping .screen[pos=split] .section-main .main-content .legal-paragraph { + font-size: 0.85em; + line-height: 1.5; + margin-block: 0 20px; + padding-inline: 30px; + text-align: start; +} +.onboardingContainer.shopping .screen[pos=split] .section-main .main-content .legal-paragraph a { + text-decoration: underline; +} +.onboardingContainer.shopping .screen[pos=split] .section-main .main-content .brand-logo { + width: 100%; + max-width: 294px; + max-height: 290px; + height: auto; +} +.onboardingContainer.shopping .screen[pos=split] .section-main .dismiss-button { + top: 0; + margin: 14px 10px; +} +.onboardingContainer.shopping .screen[pos=split] .section-secondary { + display: none; +} +.onboardingContainer.shopping .screen[pos=split] .info-text, .onboardingContainer.shopping .screen[pos=split] .link-paragraph { + font-size: 1em; + margin: 10px auto; + line-height: 1.5; +} +.onboardingContainer.shopping .screen[pos=split] .link-paragraph { + margin-block: 0 10px; + padding-inline: 30px; + text-align: start; +} +.onboardingContainer.shopping .screen[pos=split] .link-paragraph a { + text-decoration: underline; +} + +.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content { + padding: 12px; +} +.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content .main-content-inner { + min-height: auto; + align-items: initial; +} +.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content .main-content-inner .welcome-text { + align-items: initial; + padding: 0; + margin-top: 0; +} +.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content .main-content-inner .welcome-text h1, +.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content .main-content-inner .welcome-text h2 { + line-height: 20px; +} +.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content .main-content-inner .welcome-text h1 { + font-size: 1em; + font-weight: 590; + margin: 0; + margin-inline-end: 28px; +} +.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content .main-content-inner .welcome-text h2 { + color: inherit; + margin-block: 10px 0; +} +.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content .main-content-inner .action-buttons .cta-link { + padding: 4px; + margin-block: -4px; + outline-offset: 0; + min-height: revert; +} +.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content .main-content-inner .multi-select-container { + color: inherit; + padding: 0; + margin-block: 0 24px; + align-items: center; + overflow: visible; + font-size: 1em; + gap: 12px; + width: 100%; +} +.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content .main-content-inner .multi-select-container #multi-stage-multi-select-label { + color: inherit; + line-height: 20px; + margin-block: -2px 0; + font-size: 1em; +} +.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content .main-content-inner .multi-select-container .multi-select-item input { + margin-block: 0; +} +.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content .main-content-inner .steps { + height: auto; + margin-bottom: 12px; +} +.onboardingContainer.shopping .screen[pos=split][layout=survey] .dismiss-button { + width: 24px; + height: 24px; + min-width: 24px; + min-height: 24px; + margin: 10px; +} + +.onboardingContainer.shopping shopping-message-bar { + font: menu; +} + +/* stylelint-disable max-nesting-depth */ +html { + height: 100%; +} + +.dummy { + background: var(--mr-welcome-background-color) var(--mr-welcome-background-gradient) var(--mr-secondary-position) var(--mr-screen-background-color); +} + +:root[dialogroot] { + background-color: transparent; +} +:root[dialogroot] body { + padding: 0; +} +:root[dialogroot] .onboardingContainer { + height: 100%; + background-color: transparent; +} +:root[dialogroot] .onboardingContainer:dir(rtl) { + transform: unset; +} +:root[dialogroot] .onboardingContainer .logo-container { + pointer-events: none; +} +:root[dialogroot] .onboardingContainer .screen:dir(rtl) { + transform: unset; +} + +.welcome-container .onboardingContainer { + min-height: 610px; + min-width: fit-content; +} + +.onboardingContainer { + --grey-subtitle-1: #696977; + --mr-welcome-background-color: #F8F6F4; + --mr-screen-heading-color: var(--in-content-text-color); + --mr-welcome-background-gradient: linear-gradient(0deg, rgba(144, 89, 255, 20%) 0%, rgba(2, 144, 238, 20%) 100%); + --mr-screen-background-color: #F8F6F4; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif; + font-size: 16px; + position: relative; + text-align: center; + height: 100vh; + --transition: 0.6s opacity, 0.6s scale, 0.6s rotate, 0.6s translate; +} +@media (prefers-color-scheme: dark) { + .onboardingContainer { + --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; + } +} +@media (prefers-contrast) { + .onboardingContainer { + --mr-screen-background-color: buttontext; + --mr-screen-heading-color: buttonface; + background-color: var(--in-content-page-background); + } +} +@media (prefers-reduced-motion: no-preference) { + .onboardingContainer { + --translate: 30px; + --rotate: 20deg; + --scale: 0.4; + --progress-bar-transition: 0.6s translate; + } + .onboardingContainer:dir(rtl) { + --scale: -0.4 0.4; + } +} +@media (prefers-reduced-motion: reduce) { + .onboardingContainer { + --translate: 0; + --rotate: 0deg; + --scale: 1; + --progress-bar-transition: none; + } + .onboardingContainer:dir(rtl) { + --scale: -1 1; + } +} +.onboardingContainer:dir(rtl) { + transform: rotateY(180deg); +} +.onboardingContainer .section-main { + display: flex; + flex-direction: column; + justify-content: center; + width: 504px; + flex-shrink: 0; +} +.onboardingContainer .section-main:not(.embedded-migration) { + position: relative; +} +.onboardingContainer .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; + box-sizing: border-box; +} +.onboardingContainer .main-content.no-steps { + padding-bottom: 48px; +} +.onboardingContainer .main-content .main-content-inner { + display: flex; + flex-direction: column; + flex-grow: 1; + justify-content: space-around; +} +.onboardingContainer .main-content .no-steps .main-content { + padding-bottom: 48px; +} +.onboardingContainer .main-content .no-steps .steps { + display: none; +} +.onboardingContainer .screen { + display: flex; + position: relative; + flex-flow: row nowrap; + height: 100%; + min-height: 500px; + overflow: hidden; +} +.onboardingContainer .screen.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); +} +.onboardingContainer .screen.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); +} +.onboardingContainer .screen:dir(rtl) { + transform: rotateY(180deg); +} +.onboardingContainer .screen[pos=center] { + background-color: rgba(21, 20, 26, 0.5); + min-width: 504px; +} +.onboardingContainer .screen[pos=center].with-noodles { + min-width: 610px; + min-height: 610px; +} +.onboardingContainer .screen[pos=center].with-noodles .section-main { + height: 504px; +} +.onboardingContainer .screen[pos=center].with-video { + justify-content: center; + background: none; + align-items: center; +} +.onboardingContainer .screen[pos=center].with-video .section-main { + width: 800px; + height: 550px; +} +.onboardingContainer .screen[pos=center].with-video .main-content { + background-color: var(--mr-welcome-background-color); + border-radius: 8px; + box-shadow: 0 2px 14px rgba(58, 57, 68, 0.2); + padding: 44px 85px 20px; +} +.onboardingContainer .screen[pos=center].with-video .main-content .welcome-text { + margin: 0; +} +.onboardingContainer .screen[pos=center].with-video .main-content .main-content-inner { + justify-content: space-between; +} +.onboardingContainer .screen[pos=center].with-video .main-content h1, +.onboardingContainer .screen[pos=center].with-video .main-content h2 { + align-self: start; +} +.onboardingContainer .screen[pos=center].with-video .main-content h1 { + font-size: 24px; + line-height: 28.8px; +} +.onboardingContainer .screen[pos=center].with-video .main-content h2 { + font-size: 15px; + line-height: 22px; +} +.onboardingContainer .screen[pos=center].with-video .main-content .secondary-cta { + justify-content: end; +} +.onboardingContainer .screen[pos=center].with-video .main-content .secondary-cta .arrow-icon { + -moz-context-properties: fill; + fill: currentColor; + text-decoration: none; +} +.onboardingContainer .screen[pos=center].with-video .main-content .secondary-cta .arrow-icon::after { + content: ""; + padding-inline-end: 12px; + margin-inline-start: 4px; + background: url("chrome://browser/skin/forward.svg") no-repeat center/12px; +} +.onboardingContainer .screen[pos=center].with-video .main-content .secondary-cta .arrow-icon:dir(rtl)::after { + background-image: url("chrome://browser/skin/back.svg"); +} +.onboardingContainer .screen[pos=center].with-video .main-content .secondary-cta .secondary { + 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; + color: var(--in-content-button-text-color); +} +.onboardingContainer .screen[pos=center].with-video .main-content .secondary-cta .secondary:hover, .onboardingContainer .screen[pos=center].with-video .main-content .secondary-cta .secondary[open] { + background-color: var(--in-content-button-background-hover); + color: var(--in-content-button-text-color-hover); +} +.onboardingContainer .screen[pos=center].with-video .main-content .secondary-cta .secondary:hover:active, .onboardingContainer .screen[pos=center].with-video .main-content .secondary-cta .secondary[open]:active { + background-color: var(--in-content-button-background-active); + color: var(--in-content-button-text-color-active); +} +.onboardingContainer .screen[pos=center].addons-picker { + justify-content: center; + align-items: center; + background: none; +} +.onboardingContainer .screen[pos=center].addons-picker .section-main { + width: 800px; + height: 550px; +} +.onboardingContainer .screen[pos=center].addons-picker .main-content { + background-color: var(--in-content-page-background); + border-radius: 8px; + box-shadow: 0 2px 14px rgba(58, 57, 68, 0.2); + overflow: hidden; +} +.onboardingContainer .screen[pos=center].addons-picker .main-content .welcome-text { + display: flex; + margin: 0; +} +.onboardingContainer .screen[pos=center].addons-picker .main-content .main-content-inner { + padding: 25px 56px 0; + justify-content: space-between; +} +.onboardingContainer .screen[pos=center].addons-picker .main-content h1, +.onboardingContainer .screen[pos=center].addons-picker .main-content h2 { + align-self: start; +} +.onboardingContainer .screen[pos=center].addons-picker .main-content h2 { + font-size: 15px; + text-align: start; +} +.onboardingContainer .screen[pos=center].addons-picker .main-content .brand-logo { + display: block; + margin: 40px 56px 0; + transition: var(--transition); + height: 30px; +} +.onboardingContainer .screen[pos=center].addons-picker .main-content .additional-cta { + display: block; + margin: 8px 0; +} +.onboardingContainer .screen[pos=center].addons-picker .main-content .additional-cta.cta-link { + background: none; + padding: 0; + font-weight: normal; + background: none; + text-decoration: underline; + cursor: pointer; + color: var(--link-color); +} +.onboardingContainer .screen[pos=center].addons-picker .main-content .additional-cta.cta-link:hover { + color: var(--link-color-hover); +} +.onboardingContainer .screen[pos=center].addons-picker .main-content .additional-cta.cta-link:active { + color: var(--link-color-active); +} +@media (prefers-contrast) { + .onboardingContainer .screen[pos=center].addons-picker .main-content .additional-cta.cta-link:active { + text-decoration: none; + } +} +.onboardingContainer .screen[pos=center].addons-picker .main-content .additional-cta.secondary:hover { + background-color: var(--in-content-button-background-hover); +} +.onboardingContainer .screen[pos=center].addons-picker .main-content .secondary-cta { + justify-content: end; +} +.onboardingContainer .screen[pos=center].addons-picker .main-content .secondary-cta .arrow-icon { + -moz-context-properties: fill; + fill: currentColor; + text-decoration: none; +} +.onboardingContainer .screen[pos=center].addons-picker .main-content .secondary-cta .arrow-icon::after { + content: ""; + padding-inline-end: 12px; + margin-inline-start: 4px; + background: url("chrome://browser/skin/forward.svg") no-repeat center/12px; +} +.onboardingContainer .screen[pos=center].addons-picker .main-content .secondary-cta .arrow-icon:dir(rtl)::after { + background-image: url("chrome://browser/skin/back.svg"); +} +.onboardingContainer .screen[pos=center].addons-picker .main-content .secondary-cta .secondary { + 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; + color: var(--in-content-button-text-color); +} +.onboardingContainer .screen[pos=center].addons-picker .main-content .secondary-cta .secondary:hover, .onboardingContainer .screen[pos=center].addons-picker .main-content .secondary-cta .secondary[open] { + background-color: var(--in-content-button-background-hover); + color: var(--in-content-button-text-color-hover); +} +.onboardingContainer .screen[pos=center].addons-picker .main-content .secondary-cta .secondary:hover:active, .onboardingContainer .screen[pos=center].addons-picker .main-content .secondary-cta .secondary[open]:active { + background-color: var(--in-content-button-background-active); + color: var(--in-content-button-text-color-active); +} +.onboardingContainer .screen[pos=center].addons-picker .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; +} +.onboardingContainer .screen[pos=center].addons-picker .addon-container .rtamo-icon img { + margin: 10px; +} +.onboardingContainer .screen[pos=center].addons-picker .addon-container .addon-details { + display: grid; + width: 70%; +} +.onboardingContainer .screen[pos=center].addons-picker .addon-container .addon-title { + margin: 10px 0 3px; + font-size: 16px; + font-weight: 600; +} +.onboardingContainer .screen[pos=center].addons-picker .addon-container .addon-description { + margin: 2px 0 10px; + font-size: 13px; + font-weight: 400; +} +.onboardingContainer .screen[pos=center].addons-picker .addon-container .install-button-wrapper { + display: flex; +} +.onboardingContainer .screen[pos=center].addons-picker .addon-container button { + align-self: center; + width: 124px; +} +.onboardingContainer .screen[pos=center].addons-picker .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); + } +} +.onboardingContainer .screen[pos=center].addons-picker .loaderContainer { + display: flex; + padding: 1.5px 37.5px; + margin: auto; +} +.onboardingContainer .screen:not([pos=split]) .secondary-cta .secondary { + background: none; + text-decoration: underline; + cursor: pointer; + color: var(--link-color); + font-size: 14px; + font-weight: normal; + line-height: 20px; +} +.onboardingContainer .screen:not([pos=split]) .secondary-cta .secondary:hover { + color: var(--link-color-hover); +} +.onboardingContainer .screen:not([pos=split]) .secondary-cta .secondary:active { + color: var(--link-color-active); +} +@media (prefers-contrast) { + .onboardingContainer .screen:not([pos=split]) .secondary-cta .secondary:active { + text-decoration: none; + } +} +.onboardingContainer .screen:not([pos=split]) .secondary-cta.top button { + color: #FFF; +} +.onboardingContainer .screen:not([pos=split]) .secondary-cta.top button:hover { + color: #E0E0E6; +} +.onboardingContainer .screen:not([pos=split]) migration-wizard { + padding: 5px 60px; +} +.onboardingContainer .screen:not([pos=split]) migration-wizard::part(header) { + text-align: center; +} +.onboardingContainer .screen:not([pos=split]) migration-wizard::part(buttons) { + margin: 32px auto 0; +} +.onboardingContainer .screen:not([pos=split]) .welcome-text:empty { + margin: 0; +} +.onboardingContainer .screen[pos=split] { + margin: auto; + min-height: 550px; +} +.onboardingContainer .screen[pos=split]::before { + content: ""; + position: absolute; + box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.2); + width: 800px; + height: 550px; + border-radius: 8px; + inset: 0; + margin: auto; + pointer-events: none; +} +.onboardingContainer .screen[pos=split] .section-secondary, +.onboardingContainer .screen[pos=split] .section-main { + width: 400px; + height: 550px; +} +.onboardingContainer .screen[pos=split] .secondary-cta.top { + position: fixed; + padding-inline-end: 0; +} +.onboardingContainer .screen[pos=split] .secondary-cta.top button { + padding: 7px 15px; +} +.onboardingContainer .screen[pos=split] .section-main { + flex-direction: row; + display: block; + margin: auto auto auto 0; +} +.onboardingContainer .screen[pos=split] .section-main:dir(rtl) { + margin: auto 0 auto auto; +} +.onboardingContainer .screen[pos=split] .section-main.embedded-migration .main-content { + padding-block: 100px 0; +} +.onboardingContainer .screen[pos=split] .section-main .main-content { + border-radius: 0 8px 8px 0; + overflow: hidden; + padding-inline: 35px 20px; + padding-block: 120px 0; + box-shadow: none; +} +.onboardingContainer .screen[pos=split] .section-main .main-content.no-steps { + padding-bottom: 48px; +} +.onboardingContainer .screen[pos=split] .section-main .main-content:dir(rtl) { + border-radius: 8px 0 0 8px; +} +.onboardingContainer .screen[pos=split] .section-main .main-content .main-content-inner { + min-height: 330px; +} +.onboardingContainer .screen[pos=split] .section-main .main-content .main-content-inner .mobile-download-buttons { + padding: 0; + margin-inline-start: -5px; + display: flex; +} +.onboardingContainer .screen[pos=split] .section-main .main-content .main-content-inner .mobile-download-buttons button { + cursor: pointer; +} +.onboardingContainer .screen[pos=split] .section-main .main-content .main-content-inner .qr-code-image { + margin: 5px 0 10px; + display: flex; +} +.onboardingContainer .screen[pos=split] .section-main .main-content .main-content-inner .language-switcher-container .primary { + margin-bottom: 5px; +} +.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons { + position: relative; + text-align: initial; + height: 100%; +} +.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .checkbox-container { + font-size: 13px; + margin-block: 1em; +} +.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .checkbox-container:not(.multi-select-item) { + transition: var(--transition); +} +.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .checkbox-container input, +.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .checkbox-container label { + vertical-align: middle; +} +.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .additional-cta-box { + margin: 8px 0; +} +.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .additional-cta-box .additional-cta { + margin: 0; +} +.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .additional-cta-box .additional-cta.cta-link { + background: none; + text-decoration: underline; + cursor: pointer; + color: var(--link-color); + padding: 0; + font-weight: normal; +} +.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .additional-cta-box .additional-cta.cta-link:hover { + color: var(--link-color-hover); +} +.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .additional-cta-box .additional-cta.cta-link:active { + color: var(--link-color-active); +} +@media (prefers-contrast) { + .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .additional-cta-box .additional-cta.cta-link:active { + text-decoration: none; + } +} +.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .additional-cta-box .additional-cta.secondary:hover, .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .additional-cta-box .additional-cta.secondary[open] { + background-color: var(--in-content-button-background-hover); +} +.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons.additional-cta-container { + flex-wrap: nowrap; + align-items: start; +} +.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta { + position: absolute; + bottom: -30px; + inset-inline-end: 0; +} +.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta .secondary { + 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; +} +.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta .secondary:hover, .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta .secondary[open] { + background-color: var(--in-content-button-background-hover); + color: var(--in-content-button-text-color-hover); +} +.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta .secondary:hover:active, .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta .secondary[open]:active { + background-color: var(--in-content-button-background-active); + color: var(--in-content-button-text-color-active); +} +.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta .arrow-icon { + -moz-context-properties: fill; + fill: currentColor; + text-decoration: none; +} +.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta .arrow-icon::after { + content: ""; + padding-inline-end: 12px; + margin-inline-start: 4px; + background: url("chrome://browser/skin/forward.svg") no-repeat center/12px; +} +.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta .arrow-icon:dir(rtl)::after { + background-image: url("chrome://browser/skin/back.svg"); +} +.onboardingContainer .screen[pos=split] .section-main .main-content .logo-container { + text-align: start; +} +.onboardingContainer .screen[pos=split] .section-main .main-content .brand-logo { + height: 25px; + margin-block: 0; +} +.onboardingContainer .screen[pos=split] .section-main .main-content .logo-alt { + width: inherit; + height: inherit; +} +.onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text { + margin-inline: 0 10px; + margin-block: 10px 35px; + text-align: initial; + align-items: initial; +} +.onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text:empty { + margin: 0; +} +.onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text h1 { + font-size: 24px; + line-height: 1.2; + width: 300px; +} +.onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text h2 { + margin: 10px 0 0; + min-height: 1em; + font-size: 15px; + line-height: 1.5; +} +@media (prefers-contrast: no-preference) { + .onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text h2 { + color: #5B5B66; + } +} +.onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text h1, +.onboardingContainer .screen[pos=split] .section-main .main-content .primary { + margin: 0; +} +.onboardingContainer .screen[pos=split] .section-main .main-content .steps { + z-index: 1; +} +.onboardingContainer .screen[pos=split] .section-main .main-content .steps.progress-bar { + width: 400px; + margin-inline: -35px; +} +@media (prefers-contrast) { + .onboardingContainer .screen[pos=split] .section-main .main-content { + border: 1px solid var(--in-content-page-color); + } + .onboardingContainer .screen[pos=split] .section-main .main-content .steps.progress-bar { + border-top: 1px solid var(--in-content-page-color); + background-color: var(--in-content-page-background); + } + .onboardingContainer .screen[pos=split] .section-main .main-content .steps.progress-bar .indicator { + background-color: var(--in-content-accent-color); + } +} +.onboardingContainer .screen[pos=split] .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; +} +.onboardingContainer .screen[pos=split] .section-secondary:dir(rtl) { + border-radius: 0 8px 8px 0; + margin: auto auto auto 0; +} +.onboardingContainer .screen[pos=split] .section-secondary 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; +} +.onboardingContainer .screen[pos=split] .section-secondary .image-alt { + width: inherit; + height: inherit; +} +.onboardingContainer .screen[pos=split] .section-secondary .hero-image { + flex: 1; + display: flex; + justify-content: center; + max-height: 100%; +} +.onboardingContainer .screen[pos=split] .section-secondary .hero-image img { + width: 100%; + max-width: 180px; + margin: 25px 0; + padding-bottom: 30px; +} +@media only screen and (width <= 800px) { + .onboardingContainer .screen[pos=split] .section-secondary .hero-image img { + padding-bottom: unset; + } +} +.onboardingContainer .screen[pos=split] .multi-select-container { + margin-inline: 0 10px; +} +@media only screen and (width <= 800px) { + .onboardingContainer .screen[pos=split] .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; + } +} +.onboardingContainer .screen[pos=split] .tiles-theme-container { + margin-block: -20px auto; + align-items: initial; +} +.onboardingContainer .screen[pos=split] .tiles-theme-container .theme { + min-width: 38px; +} +@media (prefers-contrast: no-preference) and (prefers-color-scheme: dark) { + .onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text h2 { + color: #CFCFD8; + } + .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary { + background-color: #2B2A33; + } +} +@media only screen and (width >= 800px) { + .onboardingContainer .screen[pos=split] .tiles-theme-section { + margin-inline-start: -10px; + } +} +@media only screen and (width <= 800px) { + .onboardingContainer .screen[pos=split] { + flex-direction: column; + min-height: 550px; + } + .onboardingContainer .screen[pos=split]::before { + width: 400px; + } + .onboardingContainer .screen[pos=split] .section-secondary, +.onboardingContainer .screen[pos=split] .section-main { + width: 400px; + } + .onboardingContainer .screen[pos=split] .section-secondary { + --mr-secondary-background-position-y: top; + --mr-secondary-position: center var(--mr-secondary-background-position-y) / 75%; + border-radius: 8px 8px 0 0; + margin: auto auto 0; + height: 100px; + } + .onboardingContainer .screen[pos=split] .section-secondary .hero-image img { + margin: 6px 0; + } + .onboardingContainer .screen[pos=split] .section-secondary .message-text { + margin-inline: auto; + } + .onboardingContainer .screen[pos=split] .section-secondary h1 { + font-size: 35px; + text-align: center; + white-space: normal; + margin-inline: auto; + margin-block: 14px 6px; + } + .onboardingContainer .screen[pos=split] .section-secondary:dir(rtl) { + margin: auto auto 0; + border-radius: 8px 8px 0 0; + } + .onboardingContainer .screen[pos=split] .section-secondary.with-secondary-section-hidden { + display: none; + } + .onboardingContainer .screen[pos=split] migration-wizard::part(deck) { + min-width: 330px; + margin-inline: 36px; + } + .onboardingContainer .screen[pos=split] .section-main { + margin: 0 auto auto; + height: 450px; + } + .onboardingContainer .screen[pos=split] .section-main migration-wizard::part(buttons) { + flex-direction: column; + margin-inline: 46px; + } + .onboardingContainer .screen[pos=split] .section-main[hide-secondary-section=responsive] { + height: 550px; + margin: auto; + } + .onboardingContainer .screen[pos=split] .section-main[hide-secondary-section=responsive] .main-content { + padding: 50px 0 0; + border-radius: 8px; + } + .onboardingContainer .screen[pos=split] .section-main .main-content { + border-radius: 0 0 8px 8px; + padding: 30px 0 0; + } + .onboardingContainer .screen[pos=split] .section-main .main-content .main-content-inner { + align-items: center; + } + .onboardingContainer .screen[pos=split] .section-main .main-content .logo-container { + text-align: center; + } + .onboardingContainer .screen[pos=split] .section-main .main-content .logo-container .brand-logo { + min-height: 25px; + } + .onboardingContainer .screen[pos=split] .section-main .main-content .logo-container .brand-logo, .onboardingContainer .screen[pos=split] .section-main .main-content .logo-container .brand-logo:dir(rtl) { + background-position: center; + } + .onboardingContainer .screen[pos=split] .section-main .main-content .logo-container .logo-alt { + width: inherit; + height: inherit; + } + .onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text { + align-items: center; + text-align: center; + margin-inline: 0; + padding-inline: 30px; + } + .onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text .spacer-bottom, +.onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text .spacer-top { + display: none; + } + .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons { + text-align: center; + } + .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .checkbox-container { + display: none; + } + .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta { + position: relative; + margin-block: 10px 0; + bottom: 0; + } + .onboardingContainer .screen[pos=split] .section-main .main-content .primary, +.onboardingContainer .screen[pos=split] .section-main .main-content .secondary { + min-width: 240px; + margin-inline: 0; + } + .onboardingContainer .screen[pos=split] .section-main .main-content .steps { + padding-block: 0; + margin: 0; + } + .onboardingContainer .screen[pos=split] .section-main .main-content .steps.progress-bar { + margin-inline: 0; + } + .onboardingContainer .screen[pos=split] .section-main .additional-cta.cta-link { + align-self: center; + } + .onboardingContainer .screen[pos=split] .section-main .dismiss-button { + top: -100px; + } + .onboardingContainer .screen[pos=split] .section-main:dir(rtl) { + margin: 0 auto auto; + } + .onboardingContainer .screen[pos=split] .section-main:dir(rtl) .main-content { + border-radius: 0 0 8px 8px; + } +} +@media only screen and (height <= 650px) and (800px <= width <= 990px) { + .onboardingContainer .screen[pos=split] .section-main .secondary-cta.top { + display: none; + } +} +@media only screen and (height <= 650px) and (width <= 620px) { + .onboardingContainer .screen[pos=split] .section-main .secondary-cta.top { + position: absolute; + padding: 0; + top: 0; + inset-inline-end: 0; + } +} +.onboardingContainer .brand-logo { + margin-block: 60px 10px; + transition: var(--transition); + height: 80px; +} +.onboardingContainer .brand-logo.cta-top { + margin-top: 25px; +} +.onboardingContainer .brand-logo.hide { + visibility: hidden; + padding: unset; + margin-top: 50px; +} +.onboardingContainer .logo-alt { + width: inherit; + height: inherit; +} +.onboardingContainer .rtamo-theme-icon { + max-height: 30px; + border-radius: 2px; + margin-bottom: 10px; + margin-top: 24px; +} +.onboardingContainer .rtamo-icon { + text-align: start; +} +@media only screen and (width <= 800px) { + .onboardingContainer .rtamo-icon { + text-align: center; + } +} +.onboardingContainer .text-link { + background: none; + text-decoration: underline; + cursor: pointer; + color: var(--link-color); +} +.onboardingContainer .text-link:hover { + color: var(--link-color-hover); +} +.onboardingContainer .text-link:active { + color: var(--link-color-active); +} +@media (prefers-contrast) { + .onboardingContainer .text-link:active { + text-decoration: none; + } +} +.onboardingContainer .welcome-text { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin: 0.5em 1em; + transition: var(--transition); +} +.onboardingContainer .welcome-text h1, +.onboardingContainer .welcome-text h2 { + color: var(--in-content-page-color); + line-height: 1.5; +} +.onboardingContainer .welcome-text h1 { + font-size: 24px; + font-weight: 600; + margin: 0 6px; + letter-spacing: -0.02em; + outline: none; +} +.onboardingContainer .welcome-text h2 { + font-size: 16px; + font-weight: normal; + margin: 10px 6px 0; + max-width: 750px; + letter-spacing: -0.01em; +} +.onboardingContainer .welcome-text.fancy h1 { + background-image: linear-gradient(90deg, #9059FF, #FF4AA2, #FF8C00, #FF4AA2, #9059FF); + background-clip: text; + background-size: 200%; +} +@media (prefers-contrast: no-preference) { + .onboardingContainer .welcome-text.fancy h1 { + color: transparent; + } +} +@media (prefers-color-scheme: dark) { + .onboardingContainer .welcome-text.fancy h1 { + background-image: linear-gradient(90deg, #C688FF, #FF84C0, #FFBD4F, #FF84C0, #C688FF); + } + .onboardingContainer .welcome-text.fancy h1::selection { + color: #FFF; + background-color: #696977; + } +} +.onboardingContainer .welcome-text.shine h1 { + animation: shine 50s linear infinite; + background-size: 400%; +} +@keyframes shine { + to { + background-position: 400%; + } +} +.onboardingContainer .welcome-text .cta-paragraph a { + margin: 0; + text-decoration: underline; + cursor: pointer; +} +.onboardingContainer .screen.light-text .welcome-text.fancy h1 { + background-image: linear-gradient(90deg, #C688FF, #FF84C0, #FFBD4F, #FF84C0, #C688FF); +} +.onboardingContainer .screen.dark-text .welcome-text.fancy h1 { + background-image: linear-gradient(90deg, #9059FF, #FF4AA2, #FF8C00, #FF4AA2, #9059FF); +} +.onboardingContainer .welcomeZap span { + position: relative; + z-index: 1; + white-space: nowrap; +} +.onboardingContainer .welcomeZap .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); +} +.onboardingContainer .welcomeZap .zap.short::after { + background-image: url("chrome://activity-stream/content/data/content/assets/short-zap.svg"); +} +.onboardingContainer .welcomeZap .zap.long::after { + background-image: url("chrome://activity-stream/content/data/content/assets/long-zap.svg"); +} +.onboardingContainer .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) { + .onboardingContainer .language-loader { + filter: invert(0); + } +} +.onboardingContainer .tiles-theme-container { + display: flex; + flex-direction: column; + align-items: center; + margin: 10px auto; +} +.onboardingContainer .sr-only { + opacity: 0; + overflow: hidden; + position: absolute; +} +.onboardingContainer .sr-only.input { + height: 1px; + width: 1px; +} +.onboardingContainer .tiles-theme-section { + border: 0; + display: flex; + flex-wrap: wrap; + gap: 5px; + justify-content: space-evenly; + margin-inline: 10px; + padding: 10px; + transition: var(--transition); +} +.onboardingContainer .tiles-theme-section:hover, .onboardingContainer .tiles-theme-section:active, .onboardingContainer .tiles-theme-section:focus-within { + border-radius: 8px; + outline: 2px solid var(--in-content-primary-button-background); +} +.onboardingContainer .tiles-theme-section .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; +} +.onboardingContainer .tiles-theme-section .theme:focus, .onboardingContainer .tiles-theme-section .theme:active { + outline: initial; + outline-offset: initial; +} +.onboardingContainer .tiles-theme-section .theme .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; +} +.onboardingContainer .tiles-theme-section .theme .icon:dir(rtl) { + transform: scaleX(-1); +} +.onboardingContainer .tiles-theme-section .theme .icon:focus, .onboardingContainer .tiles-theme-section .theme .icon:active, .onboardingContainer .tiles-theme-section .theme .icon.selected { + outline: 2px solid var(--in-content-primary-button-background); + outline-offset: 2px; +} +.onboardingContainer .tiles-theme-section .theme .icon.light { + background-image: url("resource://builtin-themes/light/icon.svg"); +} +.onboardingContainer .tiles-theme-section .theme .icon.dark { + background-image: url("resource://builtin-themes/dark/icon.svg"); +} +.onboardingContainer .tiles-theme-section .theme .icon.alpenglow { + background-image: url("resource://builtin-themes/alpenglow/icon.svg"); +} +.onboardingContainer .tiles-theme-section .theme .icon.default, .onboardingContainer .tiles-theme-section .theme .icon.automatic { + background-image: url("resource://default-theme/icon.svg"); +} +.onboardingContainer .tiles-theme-section .theme .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; +} +.onboardingContainer .tiles-theme-section legend { + cursor: default; +} +.onboardingContainer .tiles-container { + margin: 10px auto; +} +.onboardingContainer .tiles-container.info { + padding: 6px 12px 12px; +} +.onboardingContainer .tiles-container.info:hover, .onboardingContainer .tiles-container.info:focus { + background-color: rgba(217, 217, 227, 0.3); + border-radius: 4px; +} +.onboardingContainer .tiles-delayed { + animation: fadein 0.4s; +} +.onboardingContainer .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; +} +.onboardingContainer .multi-select-container #multi-stage-multi-select-label { + color: var(--in-content-page-color); + line-height: 1.5; + font-size: 16px; + font-weight: normal; + letter-spacing: -0.01em; + margin: calc(0.5em + 10px) 6px 0; + max-width: 750px; +} +.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) { + .onboardingContainer .screen[pos=split] .multi-select-container #multi-stage-multi-select-label { + color: #5B5B66; + } +} +@media (prefers-contrast: no-preference) and (prefers-color-scheme: dark) { + .onboardingContainer .screen[pos=split] .multi-select-container #multi-stage-multi-select-label { + color: #CFCFD8; + } +} + +.onboardingContainer .multi-select-container .checkbox-container { + display: flex; +} +@media (prefers-contrast: no-preference) and (prefers-color-scheme: dark) { + .onboardingContainer .multi-select-container { + color: #CFCFD8; + } +} +.onboardingContainer .mobile-downloads .qr-code-image { + margin: 24px 0 10px; + width: 113px; + height: 113px; +} +.onboardingContainer .mobile-downloads .email-link { + background: none; + text-decoration: underline; + cursor: pointer; + color: var(--link-color); + font-size: 16px; + font-weight: 400; +} +.onboardingContainer .mobile-downloads .email-link:hover { + color: var(--link-color-hover); +} +.onboardingContainer .mobile-downloads .email-link:active { + color: var(--link-color-active); +} +@media (prefers-contrast) { + .onboardingContainer .mobile-downloads .email-link:active { + text-decoration: none; + } +} +.onboardingContainer .mobile-downloads .email-link:hover { + background: none; +} +.onboardingContainer .mobile-downloads .ios button { + background-image: url("chrome://app-marketplace-icons/locale/ios.svg"); +} +.onboardingContainer .mobile-downloads .android button { + background-image: url("chrome://app-marketplace-icons/locale/android.png"); +} +.onboardingContainer .mobile-download-buttons { + list-style: none; + padding: 10px 0; + margin: 0; +} +.onboardingContainer .mobile-download-buttons li { + display: inline-block; +} +.onboardingContainer .mobile-download-buttons li button { + display: inline-block; + height: 45px; + width: 152px; + background-repeat: no-repeat; + background-size: contain; + background-position: center; + box-shadow: none; + border: 0; +} +.onboardingContainer .mobile-download-buttons li:not(:first-child) { + margin-inline: 5px 0; +} +.onboardingContainer .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; + min-height: 32px; + min-width: 32px; + -moz-context-properties: fill; + fill: currentColor; + transition: var(--transition); +} +.onboardingContainer .dismiss-button:dir(rtl) { + left: 0; + right: auto; +} +@keyframes fadein { + from { + opacity: 0; + } +} +.onboardingContainer .secondary-cta { + display: flex; + align-items: end; + flex-direction: row; + justify-content: center; + font-size: 14px; + transition: var(--transition); +} +.onboardingContainer .secondary-cta.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; +} +.onboardingContainer .secondary-cta span { + color: var(--grey-subtitle-1); + margin: 0 4px; +} +.onboardingContainer .message-text { + transition: var(--transition); +} +.onboardingContainer .helptext { + padding: 1em; + text-align: center; + color: var(--grey-subtitle-1); + font-size: 12px; + line-height: 18px; +} +.onboardingContainer .helptext.default { + align-self: center; + max-width: 40%; +} +.onboardingContainer .helptext span { + padding-inline-end: 4px; +} +.onboardingContainer .helptext-img { + height: 1.5em; + width: 1.5em; + margin-inline-end: 4px; + vertical-align: middle; +} +.onboardingContainer .helptext-img.end { + margin: 4px; +} +.onboardingContainer .helptext-img.footer { + vertical-align: bottom; +} +.onboardingContainer .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; +} +.onboardingContainer .steps.has-helptext { + padding-bottom: 0; +} +.onboardingContainer .steps .indicator { + width: 0; + height: 0; + margin-inline-end: 4px; + margin-inline-start: 4px; + background: var(--grey-subtitle-1); + border-radius: 5px; + border: 3px solid var(--in-content-button-text-color); + opacity: 0.35; + box-sizing: inherit; +} +.onboardingContainer .steps .indicator.current { + opacity: 1; + border-color: var(--in-content-primary-button-background); +} +.onboardingContainer .steps .indicator.current:last-of-type:first-of-type { + opacity: 0; +} +.onboardingContainer .steps.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; +} +.onboardingContainer .steps.progress-bar .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%); +} +.onboardingContainer .steps.progress-bar .indicator:dir(rtl) { + translate: calc(var(--progress-bar-progress, 0%) * -1 + 100%); +} +.onboardingContainer .additional-cta-container[flow] { + display: flex; + flex-flow: column wrap; + align-items: center; +} +.onboardingContainer .additional-cta-container[flow][flow=row] { + flex-direction: row; + justify-content: center; +} +.onboardingContainer .additional-cta-container[flow][flow=row] .secondary-cta { + flex-basis: 100%; +} +.onboardingContainer .primary, +.onboardingContainer .secondary, +.onboardingContainer .additional-cta, +.onboardingContainer .submenu-button { + font-size: 13px; + line-height: 16px; + padding: 11px 15px; + transition: var(--transition); +} +.onboardingContainer .primary.rtamo, +.onboardingContainer .secondary.rtamo, +.onboardingContainer .additional-cta.rtamo, +.onboardingContainer .submenu-button.rtamo { + margin-top: 24px; +} +.onboardingContainer .secondary { + background-color: var(--in-content-button-background); + color: var(--in-content-button-text-color); +} +.onboardingContainer .split-button-container, +.onboardingContainer .screen .action-buttons .split-button-container { + align-items: stretch; +} +.onboardingContainer .split-button-container:not([hidden]), +.onboardingContainer .screen .action-buttons .split-button-container:not([hidden]) { + display: flex; +} +.onboardingContainer .split-button-container .primary:not(.submenu-button), +.onboardingContainer .split-button-container .secondary:not(.submenu-button), +.onboardingContainer .split-button-container .additional-cta:not(.submenu-button), +.onboardingContainer .screen .action-buttons .split-button-container .primary:not(.submenu-button), +.onboardingContainer .screen .action-buttons .split-button-container .secondary:not(.submenu-button), +.onboardingContainer .screen .action-buttons .split-button-container .additional-cta:not(.submenu-button) { + border-start-end-radius: 0; + border-end-end-radius: 0; + margin-inline-end: 0; +} +.onboardingContainer .split-button-container .primary:focus-visible, +.onboardingContainer .split-button-container .secondary:focus-visible, +.onboardingContainer .split-button-container .additional-cta:focus-visible, +.onboardingContainer .screen .action-buttons .split-button-container .primary:focus-visible, +.onboardingContainer .screen .action-buttons .split-button-container .secondary:focus-visible, +.onboardingContainer .screen .action-buttons .split-button-container .additional-cta:focus-visible { + z-index: 2; +} +.onboardingContainer .split-button-container .submenu-button, +.onboardingContainer .screen .action-buttons .split-button-container .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; +} +.onboardingContainer .noodle { + display: block; + background-repeat: no-repeat; + background-size: 100% 100%; + position: absolute; + transition: var(--transition); +} +.onboardingContainer .noodle:dir(rtl) { + scale: -1 1; +} +.onboardingContainer .outline-L { + background-image: url("chrome://activity-stream/content/data/content/assets/noodle-outline-L.svg"); +} +.onboardingContainer .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; +} +.onboardingContainer .purple-C { + background-image: url("chrome://activity-stream/content/data/content/assets/noodle-C.svg"); + -moz-context-properties: fill; + fill: #E7258C; +} +.onboardingContainer .orange-L { + background-image: url("chrome://activity-stream/content/data/content/assets/noodle-solid-L.svg"); + -moz-context-properties: fill; + fill: #FFA437; +} +.onboardingContainer .screen-1 .section-main { + z-index: 1; + margin: auto; +} +.onboardingContainer .screen-1 .outline-L { + width: 87px; + height: 80px; + transform: rotate(10deg) translate(-30%, 200%); + transition-delay: 0.4s; + z-index: 2; +} +.onboardingContainer .screen-1 .orange-L { + width: 550px; + height: 660px; + transform: rotate(-155deg) translate(11%, -18%); + transition-delay: 0.2s; +} +.onboardingContainer .screen-1 .purple-C { + width: 310px; + height: 260px; + transform: translate(-18%, -67%); +} +.onboardingContainer .screen-1 .yellow-circle { + width: 165px; + height: 165px; + border-radius: 50%; + transform: translate(230%, -5%); + background: #952BB9; + transition-delay: -0.2s; +} +.onboardingContainer .dialog-initial .brand-logo { + transition-delay: 0.6s; +} +.onboardingContainer .dialog-initial .welcome-text { + transition-delay: 0.8s; +} +.onboardingContainer .dialog-initial .tiles-theme-section, +.onboardingContainer .dialog-initial .multi-select-container, +.onboardingContainer .dialog-initial migration-wizard { + transition-delay: 0.9s; +} +.onboardingContainer .dialog-initial .primary, +.onboardingContainer .dialog-initial .secondary, +.onboardingContainer .dialog-initial .secondary-cta, +.onboardingContainer .dialog-initial .steps, +.onboardingContainer .dialog-initial .cta-link { + transition-delay: 1s; +} +.onboardingContainer .screen:not(.dialog-initial) .tiles-theme-section, +.onboardingContainer .screen:not(.dialog-initial) .multi-select-container { + transition-delay: 0.2s; +} +.onboardingContainer .screen:not(.dialog-initial) .primary, +.onboardingContainer .screen:not(.dialog-initial) .secondary, +.onboardingContainer .screen:not(.dialog-initial) .secondary-cta, +.onboardingContainer .screen:not(.dialog-initial) .cta-link { + transition-delay: 0.4s; +} +.onboardingContainer .screen-2 .section-main { + z-index: 1; + margin: auto; +} +.onboardingContainer .screen-2 .outline-L { + width: 87px; + height: 80px; + transform: rotate(250deg) translate(-420%, 425%); + transition-delay: 0.2s; + z-index: 2; +} +.onboardingContainer .screen-2 .orange-L { + height: 800px; + width: 660px; + transform: rotate(35deg) translate(-10%, -7%); + transition-delay: -0.4s; +} +.onboardingContainer .screen-2 .purple-C { + width: 392px; + height: 394px; + transform: rotate(260deg) translate(-34%, -35%); + transition-delay: -0.2s; + fill: #952BB9; +} +.onboardingContainer .screen-2 .yellow-circle { + width: 165px; + height: 165px; + border-radius: 50%; + transform: translate(160%, 130%); + background: #E7258C; +} +.onboardingContainer.transition-in .noodle { + opacity: 0; + rotate: var(--rotate); + scale: var(--scale); +} +.onboardingContainer.transition-in .dialog-initial .main-content, +.onboardingContainer.transition-in .dialog-initial .dismiss-button { + translate: 0 calc(-2 * var(--translate)); +} +.onboardingContainer.transition-in .dialog-initial .brand-logo, +.onboardingContainer.transition-in .dialog-initial .steps { + opacity: 0; + translate: 0 calc(-1 * var(--translate)); +} +.onboardingContainer.transition-in .screen .welcome-text, +.onboardingContainer.transition-in .screen .multi-select-container, +.onboardingContainer.transition-in .screen .tiles-theme-section, +.onboardingContainer.transition-in .screen .primary, +.onboardingContainer.transition-in .screen .checkbox-container:not(.multi-select-item), +.onboardingContainer.transition-in .screen .secondary, +.onboardingContainer.transition-in .screen .secondary-cta:not(.top), +.onboardingContainer.transition-in .screen .cta-link, +.onboardingContainer.transition-in .screen migration-wizard { + opacity: 0; + translate: 0 calc(-1 * var(--translate)); +} +.onboardingContainer.transition-in .screen:not(.dialog-initial) .steps:not(.progress-bar) { + opacity: 0.2; +} +.onboardingContainer.transition-out .noodle { + opacity: 0; + rotate: var(--rotate); + scale: var(--scale); + transition-delay: 0.2s; +} +.onboardingContainer.transition-out .screen:not(.dialog-last) .main-content { + overflow: hidden; +} +.onboardingContainer.transition-out .screen:not(.dialog-last) .welcome-text, +.onboardingContainer.transition-out .screen:not(.dialog-last) .multi-select-container { + opacity: 0; + translate: 0 var(--translate); + transition-delay: 0.1s; +} +.onboardingContainer.transition-out .screen:not(.dialog-last) .tiles-theme-section, +.onboardingContainer.transition-out .screen:not(.dialog-last) migration-wizard { + opacity: 0; + translate: 0 var(--translate); + transition-delay: 0.2s; +} +.onboardingContainer.transition-out .screen:not(.dialog-last) .primary, +.onboardingContainer.transition-out .screen:not(.dialog-last) .checkbox-container:not(.multi-select-item), +.onboardingContainer.transition-out .screen:not(.dialog-last) .secondary, +.onboardingContainer.transition-out .screen:not(.dialog-last) .secondary-cta:not(.top), +.onboardingContainer.transition-out .screen:not(.dialog-last) .cta-link { + opacity: 0; + translate: 0 var(--translate); + transition-delay: 0.3s; +} +.onboardingContainer.transition-out .screen:not(.dialog-last) .steps:not(.progress-bar) { + opacity: 0.2; + transition-delay: 0.5s; +} +.onboardingContainer.transition-out .dialog-last .noodle { + transition-delay: 0s; +} +.onboardingContainer.transition-out .dialog-last .main-content, +.onboardingContainer.transition-out .dialog-last .dismiss-button { + opacity: 0; + translate: 0 calc(2 * var(--translate)); + transition-delay: 0.4s; +} +.onboardingContainer migration-wizard { + width: unset; + transition: var(--transition); +} +.onboardingContainer migration-wizard::part(buttons) { + margin-top: 24px; + justify-content: flex-start; +} +.onboardingContainer migration-wizard::part(deck) { + font-size: 0.83em; +} |