3591 lines
137 KiB
CSS
3591 lines
137 KiB
CSS
/* 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);
|
|
--fc-icon-success-color: var(--fc-icon-success-color-light, #2AC3A2);
|
|
--fc-dismiss-button-bg: var(--fc-dismiss-button-bg-light, #FFF);
|
|
--fc-dismiss-button-bg-hover: var(--fc-dismiss-button-bg-hover-light, color-mix(in srgb, currentColor 14%, #FFF));
|
|
--fc-dismiss-button-bg-active: var(--fc-dismiss-button-bg-active-light, color-mix(in srgb, currentColor 14%, #FFF));
|
|
position: absolute;
|
|
z-index: 2147483647;
|
|
outline: none;
|
|
color: var(--fc-color);
|
|
accent-color: var(--fc-accent-color);
|
|
-moz-theme: non-native;
|
|
-moz-window-shadow: none;
|
|
--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;
|
|
--button-min-height: 24px;
|
|
}
|
|
@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);
|
|
--fc-icon-success-color: var(--fc-icon-success-color-dark, #54FFBD);
|
|
--fc-dismiss-button-bg: var(--fc-dismiss-button-bg-dark, rgb(66, 65, 77));
|
|
--fc-dismiss-button-bg-hover: var(--fc-dismiss-button-bg-hover-dark, color-mix(in srgb, currentColor 14%, rgb(66, 65, 77)));
|
|
--fc-dismiss-button-bg-active: var(--fc-dismiss-button-bg-active-dark, color-mix(in srgb, currentColor 14%, rgb(66, 65, 77)));
|
|
}
|
|
}
|
|
:root[lwt-popup=light] #feature-callout:not(.simulateContent) {
|
|
color-scheme: light;
|
|
--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);
|
|
--fc-icon-success-color: var(--fc-icon-success-color-light, #2AC3A2);
|
|
--fc-dismiss-button-bg: var(--fc-dismiss-button-bg-light, #FFF);
|
|
--fc-dismiss-button-bg-hover: var(--fc-dismiss-button-bg-hover-light, color-mix(in srgb, currentColor 14%, #FFF));
|
|
--fc-dismiss-button-bg-active: var(--fc-dismiss-button-bg-active-light, color-mix(in srgb, currentColor 14%, #FFF));
|
|
}
|
|
|
|
:root[lwt-popup=dark] #feature-callout:not(.simulateContent) {
|
|
color-scheme: dark;
|
|
--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);
|
|
--fc-icon-success-color: var(--fc-icon-success-color-dark, #54FFBD);
|
|
--fc-dismiss-button-bg: var(--fc-dismiss-button-bg-dark, rgb(66, 65, 77));
|
|
--fc-dismiss-button-bg-hover: var(--fc-dismiss-button-bg-hover-dark, color-mix(in srgb, currentColor 14%, rgb(66, 65, 77)));
|
|
--fc-dismiss-button-bg-active: var(--fc-dismiss-button-bg-active-dark, color-mix(in srgb, currentColor 14%, rgb(66, 65, 77)));
|
|
}
|
|
|
|
@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);
|
|
--fc-icon-success-color: var(--fc-icon-success-color-hcm, LinkText);
|
|
--fc-dismiss-button-bg: var(--fc-dismiss-button-bg-hcm, -moz-dialog);
|
|
--fc-dismiss-button-bg-hover: var(--fc-dismiss-button-bg-hover-hcm, color-mix(in srgb, currentColor 14%, -moz-dialog));
|
|
--fc-dismiss-button-bg-active: var(--fc-dismiss-button-bg-active-hcm, color-mix(in srgb, currentColor 14%, -moz-dialog));
|
|
}
|
|
}
|
|
#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);
|
|
--fc-icon-success-color: var(--fc-icon-success-color-light, #2AC3A2);
|
|
--fc-dismiss-button-bg: var(--fc-dismiss-button-bg-light, #FFF);
|
|
--fc-dismiss-button-bg-hover: var(--fc-dismiss-button-bg-hover-light, color-mix(in srgb, currentColor 14%, #FFF));
|
|
--fc-dismiss-button-bg-active: var(--fc-dismiss-button-bg-active-light, color-mix(in srgb, currentColor 14%, #FFF));
|
|
}
|
|
}
|
|
@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);
|
|
--fc-icon-success-color: var(--fc-icon-success-color-dark, #54FFBD);
|
|
--fc-dismiss-button-bg: var(--fc-dismiss-button-bg-dark, rgb(66, 65, 77));
|
|
--fc-dismiss-button-bg-hover: var(--fc-dismiss-button-bg-hover-dark, color-mix(in srgb, currentColor 14%, rgb(66, 65, 77)));
|
|
--fc-dismiss-button-bg-active: var(--fc-dismiss-button-bg-active-dark, color-mix(in srgb, currentColor 14%, rgb(66, 65, 77)));
|
|
}
|
|
}
|
|
:root[lwt-newtab-brighttext] #feature-callout.simulateContent.lwtNewtab {
|
|
color-scheme: dark;
|
|
--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);
|
|
--fc-icon-success-color: var(--fc-icon-success-color-dark, #54FFBD);
|
|
--fc-dismiss-button-bg: var(--fc-dismiss-button-bg-dark, rgb(66, 65, 77));
|
|
--fc-dismiss-button-bg-hover: var(--fc-dismiss-button-bg-hover-dark, color-mix(in srgb, currentColor 14%, rgb(66, 65, 77)));
|
|
--fc-dismiss-button-bg-active: var(--fc-dismiss-button-bg-active-dark, color-mix(in srgb, currentColor 14%, rgb(66, 65, 77)));
|
|
}
|
|
|
|
@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);
|
|
--fc-icon-success-color: var(--fc-icon-success-color-hcm, LinkText);
|
|
--fc-dismiss-button-bg: var(--fc-dismiss-button-bg-hcm, -moz-dialog);
|
|
--fc-dismiss-button-bg-hover: var(--fc-dismiss-button-bg-hover-hcm, color-mix(in srgb, currentColor 14%, -moz-dialog));
|
|
--fc-dismiss-button-bg-active: var(--fc-dismiss-button-bg-active-hcm, color-mix(in srgb, currentColor 14%, -moz-dialog));
|
|
}
|
|
}
|
|
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;
|
|
transform: none;
|
|
}
|
|
#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: start;
|
|
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 5px rgba(0, 0, 0, 0.15);
|
|
border-radius: 4px;
|
|
padding: var(--callout-padding, 16px);
|
|
width: 25em;
|
|
gap: 16px;
|
|
background: 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 .main-content-inner .legal-paragraph .text-link {
|
|
color: var(--fc-color);
|
|
}
|
|
#feature-callout .screen[pos=callout] .section-main .main-content .steps {
|
|
height: auto;
|
|
position: absolute;
|
|
bottom: calc(var(--callout-padding, 16px) + var(--cta-height, 24px) / 2 - 4px);
|
|
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: transparent;
|
|
}
|
|
#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] .section-main .dismiss-button.with-background {
|
|
background: url("chrome://global/skin/icons/close.svg") no-repeat center/16px, var(--fc-dismiss-button-bg);
|
|
}
|
|
#feature-callout .screen[pos=callout] .section-main .dismiss-button.with-background:hover {
|
|
background: url("chrome://global/skin/icons/close.svg") no-repeat center/16px, var(--fc-dismiss-button-bg-hover);
|
|
}
|
|
#feature-callout .screen[pos=callout] .section-main .dismiss-button.with-background:hover:active {
|
|
background: url("chrome://global/skin/icons/close.svg") no-repeat center/16px, var(--fc-dismiss-button-bg-active);
|
|
}
|
|
#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: var(--button-min-height);
|
|
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-height: var(--button-min-height);
|
|
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);
|
|
}
|
|
#feature-callout .screen[pos=callout] .action-checklist {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
#feature-callout .screen[pos=callout] .action-checklist .action-checklist-subtitle {
|
|
text-align: start;
|
|
margin-block-end: 8px;
|
|
}
|
|
#feature-callout .screen[pos=callout] .action-checklist .action-checklist-divider {
|
|
margin-block: 0;
|
|
width: 100%;
|
|
color: var(--fc-button-background);
|
|
}
|
|
#feature-callout .screen[pos=callout] .action-checklist .action-checklist-progress-bar {
|
|
width: 100%;
|
|
height: 6px;
|
|
padding-block: 0;
|
|
background-color: color-mix(in srgb, var(--fc-color) 25%, transparent);
|
|
opacity: 1;
|
|
transition: none;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
margin-block-end: 16px;
|
|
}
|
|
#feature-callout .screen[pos=callout] .action-checklist .action-checklist-progress-bar:dir(rtl) {
|
|
justify-content: flex-end;
|
|
}
|
|
#feature-callout .screen[pos=callout] .action-checklist .action-checklist-progress-bar .indicator {
|
|
width: var(--action-checklist-progress-bar-progress);
|
|
height: 100%;
|
|
background-color: var(--fc-accent-color);
|
|
border: 0;
|
|
border-radius: 8px;
|
|
opacity: 1;
|
|
transition: var(--progress-bar-transition);
|
|
}
|
|
#feature-callout .screen[pos=callout] .action-checklist .action-checklist-items {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
#feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button {
|
|
background: none;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-inline: 0;
|
|
margin-block: 4px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
padding-block: 8px;
|
|
}
|
|
#feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button:first-child {
|
|
margin-block-start: 0;
|
|
}
|
|
#feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button:last-child {
|
|
margin-block-end: 0;
|
|
}
|
|
#feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button:not(:disabled):hover {
|
|
background-color: var(--fc-button-background-hover);
|
|
}
|
|
#feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button:disabled {
|
|
color: var(--fc-color);
|
|
}
|
|
#feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button .action-checklist-label-container {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
#feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button .action-checklist-label-container span {
|
|
text-align: start;
|
|
}
|
|
#feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button .action-checklist-label-container .check-icon-container {
|
|
margin-block-start: 2px;
|
|
}
|
|
#feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button .action-checklist-label-container .check-empty, #feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button .action-checklist-label-container .check-filled {
|
|
margin-inline-end: 8px;
|
|
flex-shrink: 0;
|
|
}
|
|
#feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button .action-checklist-label-container .check-empty {
|
|
border-radius: 50%;
|
|
width: 0.75em;
|
|
height: 0.75em;
|
|
border: 2px solid color-mix(in srgb, var(--fc-color) 25%, transparent);
|
|
}
|
|
#feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button .action-checklist-label-container .check-filled {
|
|
background-image: url("chrome://global/skin/icons/check-filled.svg");
|
|
fill: var(--fc-icon-success-color);
|
|
}
|
|
#feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button .external-link-icon, #feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button .check-filled {
|
|
border: none;
|
|
width: 1em;
|
|
height: 1em;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: contain;
|
|
-moz-context-properties: fill;
|
|
}
|
|
#feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button .external-link-icon-container .external-link-icon {
|
|
background-image: url("chrome://global/skin/icons/open-in-new.svg");
|
|
fill: var(--fc-color);
|
|
}
|
|
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 5px rgba(0, 0, 0, 0.15);
|
|
}
|
|
#feature-callout .background-arrow-box {
|
|
z-index: 1;
|
|
pointer-events: none;
|
|
}
|
|
#feature-callout .background-arrow {
|
|
background: 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)));
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
.welcome-container .onboardingContainer: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);
|
|
font-family: system-ui;
|
|
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;
|
|
--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) {
|
|
.onboardingContainer {
|
|
--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;
|
|
}
|
|
}
|
|
@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;
|
|
}
|
|
@media (prefers-contrast) {
|
|
.onboardingContainer .main-content {
|
|
border: 1px solid var(--in-content-page-color);
|
|
}
|
|
}
|
|
.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]:where(:not([fullscreen])) {
|
|
margin: auto;
|
|
min-height: 550px;
|
|
}
|
|
.onboardingContainer .screen[pos=split]:where(:not([fullscreen]))::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] #content-tiles-container {
|
|
margin: 0;
|
|
}
|
|
.onboardingContainer .screen[pos=split] #content-tiles-container .content-tile:not(:only-child) {
|
|
margin-block: 0 24px;
|
|
}
|
|
.onboardingContainer .screen[pos=split] #content-tiles-container .content-tile:last-child {
|
|
margin-block: 0 40px;
|
|
}
|
|
.onboardingContainer .screen[pos=split] #content-tiles-container .multi-select-container {
|
|
padding: 0;
|
|
}
|
|
.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;
|
|
margin-inline-start: 0;
|
|
}
|
|
.onboardingContainer .screen[pos=split] .section-main:dir(rtl) {
|
|
margin: auto;
|
|
margin-inline-start: 0;
|
|
}
|
|
.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 .legal-paragraph {
|
|
text-align: start;
|
|
font-size: 11px;
|
|
line-height: 16.5px;
|
|
color: #5B5B66;
|
|
}
|
|
@media only screen and (width <= 800px) {
|
|
.onboardingContainer .screen[pos=split] .section-main .main-content .legal-paragraph {
|
|
padding-inline: 30px;
|
|
}
|
|
}
|
|
[narrow] .onboardingContainer .screen[pos=split] .section-main .main-content .legal-paragraph {
|
|
padding-inline: 30px;
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
.onboardingContainer .screen[pos=split] .section-main .main-content .legal-paragraph {
|
|
color: #CFCFD8;
|
|
}
|
|
}
|
|
.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 .action-buttons .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=split] .section-main .main-content .action-buttons .loaderContainer {
|
|
display: flex;
|
|
padding: 1.5px 37.5px;
|
|
margin: auto;
|
|
}
|
|
.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;
|
|
max-width: 400px;
|
|
}
|
|
.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 {
|
|
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(--color-accent-primary);
|
|
}
|
|
}
|
|
.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;
|
|
position: relative;
|
|
}
|
|
.onboardingContainer .screen[pos=split] .section-secondary:dir(rtl) {
|
|
border-radius: 0 8px 8px 0;
|
|
margin: auto;
|
|
margin-inline-end: 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;
|
|
}
|
|
}
|
|
[narrow] .onboardingContainer .screen[pos=split] .section-secondary .hero-image img {
|
|
padding-bottom: unset;
|
|
}
|
|
.onboardingContainer .screen[pos=split] .multi-select-container {
|
|
margin-inline: 0 10px;
|
|
}
|
|
.onboardingContainer .screen[pos=split] .multi-select-container .checkbox-container {
|
|
display: grid;
|
|
}
|
|
.onboardingContainer .screen[pos=split] .multi-select-container .checkbox-container label, .onboardingContainer .screen[pos=split] .multi-select-container .checkbox-container p {
|
|
grid-column: 2;
|
|
}
|
|
.onboardingContainer .screen[pos=split] .multi-select-container .checkbox-container p {
|
|
margin-block: 0.5em 0;
|
|
}
|
|
@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;
|
|
}
|
|
}
|
|
[narrow] .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-single-select-container {
|
|
margin-block: -20px auto;
|
|
align-items: initial;
|
|
}
|
|
.onboardingContainer .screen[pos=split] .tiles-single-select-container .select-item {
|
|
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-single-select-section {
|
|
margin-inline-start: -10px;
|
|
}
|
|
.onboardingContainer .screen[pos=split][reverse-split] {
|
|
flex-direction: row-reverse;
|
|
}
|
|
.onboardingContainer .screen[pos=split][reverse-split] .section-main {
|
|
margin: auto;
|
|
margin-inline-end: 0;
|
|
border-radius: 8px 0 0 8px;
|
|
}
|
|
.onboardingContainer .screen[pos=split][reverse-split] .section-main .main-content {
|
|
border-radius: inherit;
|
|
}
|
|
.onboardingContainer .screen[pos=split][reverse-split] .section-main:dir(rtl) {
|
|
border-radius: 0 8px 8px 0;
|
|
margin: auto;
|
|
margin-inline-end: 0;
|
|
}
|
|
.onboardingContainer .screen[pos=split][reverse-split] .section-secondary {
|
|
margin: auto;
|
|
margin-inline-start: 0;
|
|
border-radius: 0 8px 8px 0;
|
|
}
|
|
.onboardingContainer .screen[pos=split][reverse-split] .section-secondary:dir(rtl) {
|
|
border-radius: 8px 0 0 8px;
|
|
margin: auto;
|
|
margin-inline-start: 0;
|
|
}
|
|
}
|
|
.onboardingContainer .screen[pos=split]:where([no-rdm=true]) .tiles-single-select-section {
|
|
margin-inline-start: -10px;
|
|
}
|
|
.onboardingContainer .screen[pos=split]:where([no-rdm=true])[reverse-split] {
|
|
flex-direction: row-reverse;
|
|
}
|
|
.onboardingContainer .screen[pos=split]:where([no-rdm=true])[reverse-split] .section-main {
|
|
margin: auto;
|
|
margin-inline-end: 0;
|
|
border-radius: 8px 0 0 8px;
|
|
}
|
|
.onboardingContainer .screen[pos=split]:where([no-rdm=true])[reverse-split] .section-main .main-content {
|
|
border-radius: inherit;
|
|
}
|
|
.onboardingContainer .screen[pos=split]:where([no-rdm=true])[reverse-split] .section-main:dir(rtl) {
|
|
border-radius: 0 8px 8px 0;
|
|
margin: auto;
|
|
margin-inline-end: 0;
|
|
}
|
|
.onboardingContainer .screen[pos=split]:where([no-rdm=true])[reverse-split] .section-secondary {
|
|
margin: auto;
|
|
margin-inline-start: 0;
|
|
border-radius: 0 8px 8px 0;
|
|
}
|
|
.onboardingContainer .screen[pos=split]:where([no-rdm=true])[reverse-split] .section-secondary:dir(rtl) {
|
|
border-radius: 8px 0 0 8px;
|
|
margin: auto;
|
|
margin-inline-start: 0;
|
|
}
|
|
.onboardingContainer .screen[pos=split][fullscreen] .section-secondary,
|
|
.onboardingContainer .screen[pos=split][fullscreen] .section-main {
|
|
width: 50%;
|
|
height: 100%;
|
|
}
|
|
.onboardingContainer .screen[pos=split][fullscreen] .section-main .main-content {
|
|
border-radius: 0;
|
|
padding: 0;
|
|
}
|
|
.onboardingContainer .screen[pos=split][fullscreen] .section-main .main-content h1 {
|
|
width: auto;
|
|
}
|
|
.onboardingContainer .screen[pos=split][fullscreen] .section-main .main-content .main-content-inner {
|
|
min-height: 0;
|
|
flex-grow: 0;
|
|
padding-inline: 110px;
|
|
margin-block: auto;
|
|
}
|
|
@media only screen and (width <= 800px) {
|
|
.onboardingContainer .screen[pos=split][fullscreen] .section-main .main-content .main-content-inner {
|
|
padding-block: 20px;
|
|
}
|
|
}
|
|
.onboardingContainer .screen[pos=split][fullscreen] .section-main .main-content .main-content-inner .steps:not(.progress-bar) {
|
|
justify-content: start;
|
|
padding-top: 24px;
|
|
}
|
|
.onboardingContainer .screen[pos=split][fullscreen] .section-main .main-content .action-buttons {
|
|
position: static;
|
|
height: auto;
|
|
}
|
|
.onboardingContainer .screen[pos=split][fullscreen] .section-main .main-content .action-buttons .secondary-cta {
|
|
inset-block-end: 26px;
|
|
inset-inline-end: 30px;
|
|
}
|
|
.onboardingContainer .screen[pos=split][fullscreen] .section-secondary {
|
|
--mr-secondary-position: center center / 50%;
|
|
border-radius: 0;
|
|
margin: 0;
|
|
}
|
|
.onboardingContainer .screen[pos=split][fullscreen] .section-secondary .hero-image {
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.onboardingContainer .screen[pos=split][fullscreen] .section-secondary .hero-image img {
|
|
width: 30%;
|
|
}
|
|
.onboardingContainer .screen[pos=split][fullscreen] .section-secondary .message-text.hero-text {
|
|
margin-block: auto;
|
|
margin-inline: 17% auto;
|
|
text-align: start;
|
|
width: 100%;
|
|
max-width: 450px;
|
|
}
|
|
.onboardingContainer .screen[pos=split][fullscreen] .section-secondary .message-text.hero-text h1 {
|
|
font-weight: 510;
|
|
font-size: 80px;
|
|
margin: 0;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
.onboardingContainer .screen[pos=split][fullscreen] .section-secondary .message-text.hero-text h2 {
|
|
font-size: 20px;
|
|
margin: 0;
|
|
margin-block-start: 24px;
|
|
font-weight: 510;
|
|
width: 100%;
|
|
}
|
|
.onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container {
|
|
background: none;
|
|
}
|
|
.onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .addon-container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
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;
|
|
}
|
|
@media (800px <= width <= 990px) {
|
|
.onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .addon-container {
|
|
flex-flow: row wrap;
|
|
}
|
|
}
|
|
.onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .addon-container .rtamo-icon img {
|
|
margin-inline: 0 16px;
|
|
}
|
|
.onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .addon-container .addon-rows-container {
|
|
flex-grow: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .addon-container .addon-rows-container .addon-row {
|
|
display: flex;
|
|
flex-grow: 1;
|
|
justify-content: space-between;
|
|
}
|
|
.onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .addon-container .addon-rows-container .addon-row .install-button-wrapper {
|
|
display: block;
|
|
}
|
|
.onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .addon-container .addon-rows-container .addon-row .install-button-wrapper 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;
|
|
}
|
|
.onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .addon-container .addon-rows-container .addon-row .install-button-wrapper button:hover {
|
|
background-color: var(--in-content-button-background-hover);
|
|
}
|
|
.onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .addon-container .addon-rows-container .addon-row .install-button-wrapper button:active {
|
|
background-color: var(--in-content-button-background-active);
|
|
}
|
|
.onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .addon-container .addon-rows-container .addon-row:not(:last-child) {
|
|
margin-block: 0 12px;
|
|
}
|
|
.onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .addon-container .addon-rows-container .addon-row .addon-author-details {
|
|
margin-block: 0 4px;
|
|
}
|
|
.onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .addon-container .addon-rows-container .addon-row .addon-author-details .addon-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
}
|
|
.onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .addon-container .addon-rows-container .addon-row .addon-author-details .addon-author {
|
|
font-size: 12px;
|
|
margin-block: 2px 0;
|
|
}
|
|
.onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .addon-container .addon-rows-container .addon-row .addon-author-details .addon-author .author-link {
|
|
background: none;
|
|
padding: 0;
|
|
font-weight: normal;
|
|
min-width: auto;
|
|
min-height: auto;
|
|
margin: 0;
|
|
text-align: start;
|
|
background: none;
|
|
text-decoration: underline;
|
|
cursor: pointer;
|
|
color: var(--link-color);
|
|
}
|
|
.onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .addon-container .addon-rows-container .addon-row .addon-author-details .addon-author .author-link:hover {
|
|
color: var(--link-color-hover);
|
|
}
|
|
.onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .addon-container .addon-rows-container .addon-row .addon-author-details .addon-author .author-link:active {
|
|
color: var(--link-color-active);
|
|
}
|
|
@media (prefers-contrast) {
|
|
.onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .addon-container .addon-rows-container .addon-row .addon-author-details .addon-author .author-link:active {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
.onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .addon-container .addon-rows-container .addon-row .addon-author-details .addon-author .addon-by-line {
|
|
margin-inline: 0 4px;
|
|
}
|
|
.onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .addon-container .addon-rows-container .addon-row .addon-description {
|
|
font-size: 14px;
|
|
}
|
|
.onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .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=split][fullscreen] .addons-picker-container .loaderContainer {
|
|
display: flex;
|
|
padding: 1.5px 37.5px;
|
|
margin: auto;
|
|
}
|
|
@media only screen and (width <= 800px) {
|
|
.onboardingContainer .screen[pos=split][fullscreen] .section-main,
|
|
.onboardingContainer .screen[pos=split][fullscreen] .section-secondary {
|
|
width: 100%;
|
|
}
|
|
.onboardingContainer .screen[pos=split][fullscreen] .section-main {
|
|
height: 75%;
|
|
}
|
|
.onboardingContainer .screen[pos=split][fullscreen] .section-main[hide-secondary-section=responsive] {
|
|
height: 100%;
|
|
}
|
|
.onboardingContainer .screen[pos=split][fullscreen] .section-main[hide-secondary-section=responsive] .main-content {
|
|
border-radius: 0;
|
|
padding: 0;
|
|
}
|
|
.onboardingContainer .screen[pos=split][fullscreen] .section-main .main-content .action-buttons .secondary-cta {
|
|
inset-block-end: 0;
|
|
inset-inline-end: 0;
|
|
}
|
|
.onboardingContainer .screen[pos=split][fullscreen] .section-main .main-content .main-content-inner {
|
|
padding-inline: 55px;
|
|
margin-inline: auto;
|
|
}
|
|
.onboardingContainer .screen[pos=split][fullscreen] .section-secondary {
|
|
--mr-secondary-position: center var(--mr-secondary-background-position-y) / 50%;
|
|
}
|
|
.onboardingContainer .screen[pos=split][fullscreen] .section-secondary .hero-image img {
|
|
width: 25%;
|
|
max-height: 75%;
|
|
}
|
|
}
|
|
[narrow] .onboardingContainer .screen[pos=split][fullscreen] .section-main,
|
|
[narrow] .onboardingContainer .screen[pos=split][fullscreen] .section-secondary {
|
|
width: 100%;
|
|
}
|
|
[narrow] .onboardingContainer .screen[pos=split][fullscreen] .section-main {
|
|
height: 75%;
|
|
}
|
|
[narrow] .onboardingContainer .screen[pos=split][fullscreen] .section-main[hide-secondary-section=responsive] {
|
|
height: 100%;
|
|
}
|
|
[narrow] .onboardingContainer .screen[pos=split][fullscreen] .section-main[hide-secondary-section=responsive] .main-content {
|
|
border-radius: 0;
|
|
padding: 0;
|
|
}
|
|
[narrow] .onboardingContainer .screen[pos=split][fullscreen] .section-main .main-content .action-buttons .secondary-cta {
|
|
inset-block-end: 0;
|
|
inset-inline-end: 0;
|
|
}
|
|
[narrow] .onboardingContainer .screen[pos=split][fullscreen] .section-main .main-content .main-content-inner {
|
|
padding-inline: 55px;
|
|
margin-inline: auto;
|
|
}
|
|
[narrow] .onboardingContainer .screen[pos=split][fullscreen] .section-secondary {
|
|
--mr-secondary-position: center var(--mr-secondary-background-position-y) / 50%;
|
|
}
|
|
[narrow] .onboardingContainer .screen[pos=split][fullscreen] .section-secondary .hero-image img {
|
|
width: 25%;
|
|
max-height: 75%;
|
|
}
|
|
@media only screen and (width <= 800px) {
|
|
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) {
|
|
flex-direction: column;
|
|
min-height: 550px;
|
|
}
|
|
.onboardingContainer .screen[pos=split]:where(:not([no-rdm]))::before {
|
|
width: 400px;
|
|
}
|
|
.onboardingContainer .screen[pos=split]:where(:not([no-rdm]))[reverse-split] {
|
|
flex-direction: column;
|
|
}
|
|
.onboardingContainer .screen[pos=split]:where(:not([no-rdm]))[reverse-split] .section-secondary {
|
|
border-radius: 8px 8px 0 0;
|
|
margin: auto;
|
|
margin-bottom: 0;
|
|
}
|
|
.onboardingContainer .screen[pos=split]:where(:not([no-rdm]))[reverse-split] .section-secondary:dir(rtl) {
|
|
margin: auto;
|
|
margin-bottom: 0;
|
|
border-radius: 8px 8px 0 0;
|
|
}
|
|
.onboardingContainer .screen[pos=split]:where(:not([no-rdm]))[reverse-split] .section-main {
|
|
height: auto;
|
|
margin: auto;
|
|
margin-top: 0;
|
|
border-radius: 0 0 8px 8px;
|
|
}
|
|
.onboardingContainer .screen[pos=split]:where(:not([no-rdm]))[reverse-split] .section-main:dir(rtl) {
|
|
margin: auto;
|
|
margin-top: 0;
|
|
border-radius: 0 0 8px 8px;
|
|
}
|
|
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary,
|
|
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main {
|
|
width: 400px;
|
|
}
|
|
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .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: 100px;
|
|
}
|
|
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary .hero-image img {
|
|
margin: 6px 0;
|
|
}
|
|
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary .message-text {
|
|
margin-inline: auto;
|
|
}
|
|
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary h1 {
|
|
font-size: 35px;
|
|
text-align: center;
|
|
white-space: normal;
|
|
margin-inline: auto;
|
|
margin-block: 14px 6px;
|
|
}
|
|
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary:dir(rtl) {
|
|
margin: auto;
|
|
margin-bottom: 0;
|
|
border-radius: 8px 8px 0 0;
|
|
}
|
|
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary.with-secondary-section-hidden {
|
|
display: none;
|
|
}
|
|
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) migration-wizard::part(deck) {
|
|
min-width: 330px;
|
|
margin-inline: 36px;
|
|
}
|
|
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main {
|
|
margin: auto;
|
|
margin-top: 0;
|
|
height: 450px;
|
|
}
|
|
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main migration-wizard::part(buttons) {
|
|
flex-direction: column;
|
|
margin-inline: 46px;
|
|
}
|
|
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main[hide-secondary-section=responsive] {
|
|
height: 550px;
|
|
margin: auto;
|
|
}
|
|
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main[hide-secondary-section=responsive]:dir(rtl) {
|
|
margin: auto;
|
|
}
|
|
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main[hide-secondary-section=responsive] .main-content {
|
|
padding: 50px 0 0;
|
|
border-radius: 8px;
|
|
}
|
|
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main[hide-secondary-section=responsive] .main-content:dir(rtl) {
|
|
border-radius: 8px;
|
|
}
|
|
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content {
|
|
border-radius: 0 0 8px 8px;
|
|
padding: 30px 0 0;
|
|
}
|
|
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .main-content-inner {
|
|
align-items: center;
|
|
}
|
|
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .logo-container {
|
|
text-align: center;
|
|
}
|
|
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .logo-container .brand-logo {
|
|
min-height: 25px;
|
|
}
|
|
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .logo-container .brand-logo, .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .logo-container .brand-logo:dir(rtl) {
|
|
background-position: center;
|
|
}
|
|
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .logo-container .logo-alt {
|
|
width: inherit;
|
|
height: inherit;
|
|
}
|
|
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .welcome-text {
|
|
align-items: center;
|
|
text-align: center;
|
|
margin-inline: 0;
|
|
padding-inline: 30px;
|
|
}
|
|
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .welcome-text .spacer-bottom,
|
|
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .welcome-text .spacer-top {
|
|
display: none;
|
|
}
|
|
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .action-buttons {
|
|
text-align: center;
|
|
}
|
|
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .action-buttons .checkbox-container {
|
|
display: none;
|
|
}
|
|
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .action-buttons .secondary-cta {
|
|
position: relative;
|
|
margin-block: 10px 0;
|
|
bottom: 0;
|
|
}
|
|
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .primary,
|
|
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .secondary {
|
|
min-width: 240px;
|
|
margin-inline: 0;
|
|
}
|
|
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .steps {
|
|
padding-block: 0;
|
|
margin: 0;
|
|
}
|
|
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .steps.progress-bar {
|
|
margin-inline: 0;
|
|
}
|
|
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .additional-cta.cta-link {
|
|
align-self: center;
|
|
}
|
|
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .dismiss-button {
|
|
top: -100px;
|
|
}
|
|
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main:dir(rtl) {
|
|
margin: auto;
|
|
margin-top: 0;
|
|
}
|
|
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main:dir(rtl) .main-content {
|
|
border-radius: 0 0 8px 8px;
|
|
}
|
|
.onboardingContainer .screen[pos=split][no-rdm] {
|
|
width: 800px;
|
|
}
|
|
.onboardingContainer .screen[pos=split][no-rdm][reverse-split] {
|
|
flex-direction: row-reverse;
|
|
}
|
|
.onboardingContainer .screen[pos=split][no-rdm][reverse-split] .section-main {
|
|
margin: auto;
|
|
margin-inline-end: 0;
|
|
border-radius: 8px 0 0 8px;
|
|
}
|
|
.onboardingContainer .screen[pos=split][no-rdm][reverse-split] .section-main .main-content {
|
|
border-radius: inherit;
|
|
}
|
|
.onboardingContainer .screen[pos=split][no-rdm][reverse-split] .section-main:dir(rtl) {
|
|
border-radius: 0 8px 8px 0;
|
|
margin: auto;
|
|
margin-inline-end: 0;
|
|
}
|
|
.onboardingContainer .screen[pos=split][no-rdm][reverse-split] .section-secondary {
|
|
margin: auto;
|
|
margin-inline-start: 0;
|
|
border-radius: 0 8px 8px 0;
|
|
}
|
|
.onboardingContainer .screen[pos=split][no-rdm][reverse-split] .section-secondary:dir(rtl) {
|
|
border-radius: 8px 0 0 8px;
|
|
margin: auto;
|
|
margin-inline-start: 0;
|
|
}
|
|
}
|
|
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) {
|
|
flex-direction: column;
|
|
min-height: 550px;
|
|
}
|
|
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm]))::before {
|
|
width: 400px;
|
|
}
|
|
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm]))[reverse-split] {
|
|
flex-direction: column;
|
|
}
|
|
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm]))[reverse-split] .section-secondary {
|
|
border-radius: 8px 8px 0 0;
|
|
margin: auto;
|
|
margin-bottom: 0;
|
|
}
|
|
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm]))[reverse-split] .section-secondary:dir(rtl) {
|
|
margin: auto;
|
|
margin-bottom: 0;
|
|
border-radius: 8px 8px 0 0;
|
|
}
|
|
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm]))[reverse-split] .section-main {
|
|
height: auto;
|
|
margin: auto;
|
|
margin-top: 0;
|
|
border-radius: 0 0 8px 8px;
|
|
}
|
|
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm]))[reverse-split] .section-main:dir(rtl) {
|
|
margin: auto;
|
|
margin-top: 0;
|
|
border-radius: 0 0 8px 8px;
|
|
}
|
|
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary,
|
|
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main {
|
|
width: 400px;
|
|
}
|
|
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .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: 100px;
|
|
}
|
|
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary .hero-image img {
|
|
margin: 6px 0;
|
|
}
|
|
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary .message-text {
|
|
margin-inline: auto;
|
|
}
|
|
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary h1 {
|
|
font-size: 35px;
|
|
text-align: center;
|
|
white-space: normal;
|
|
margin-inline: auto;
|
|
margin-block: 14px 6px;
|
|
}
|
|
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary:dir(rtl) {
|
|
margin: auto;
|
|
margin-bottom: 0;
|
|
border-radius: 8px 8px 0 0;
|
|
}
|
|
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary.with-secondary-section-hidden {
|
|
display: none;
|
|
}
|
|
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) migration-wizard::part(deck) {
|
|
min-width: 330px;
|
|
margin-inline: 36px;
|
|
}
|
|
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main {
|
|
margin: auto;
|
|
margin-top: 0;
|
|
height: 450px;
|
|
}
|
|
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main migration-wizard::part(buttons) {
|
|
flex-direction: column;
|
|
margin-inline: 46px;
|
|
}
|
|
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main[hide-secondary-section=responsive] {
|
|
height: 550px;
|
|
margin: auto;
|
|
}
|
|
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main[hide-secondary-section=responsive]:dir(rtl) {
|
|
margin: auto;
|
|
}
|
|
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main[hide-secondary-section=responsive] .main-content {
|
|
padding: 50px 0 0;
|
|
border-radius: 8px;
|
|
}
|
|
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main[hide-secondary-section=responsive] .main-content:dir(rtl) {
|
|
border-radius: 8px;
|
|
}
|
|
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content {
|
|
border-radius: 0 0 8px 8px;
|
|
padding: 30px 0 0;
|
|
}
|
|
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .main-content-inner {
|
|
align-items: center;
|
|
}
|
|
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .logo-container {
|
|
text-align: center;
|
|
}
|
|
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .logo-container .brand-logo {
|
|
min-height: 25px;
|
|
}
|
|
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .logo-container .brand-logo, [narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .logo-container .brand-logo:dir(rtl) {
|
|
background-position: center;
|
|
}
|
|
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .logo-container .logo-alt {
|
|
width: inherit;
|
|
height: inherit;
|
|
}
|
|
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .welcome-text {
|
|
align-items: center;
|
|
text-align: center;
|
|
margin-inline: 0;
|
|
padding-inline: 30px;
|
|
}
|
|
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .welcome-text .spacer-bottom,
|
|
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .welcome-text .spacer-top {
|
|
display: none;
|
|
}
|
|
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .action-buttons {
|
|
text-align: center;
|
|
}
|
|
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .action-buttons .checkbox-container {
|
|
display: none;
|
|
}
|
|
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .action-buttons .secondary-cta {
|
|
position: relative;
|
|
margin-block: 10px 0;
|
|
bottom: 0;
|
|
}
|
|
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .primary,
|
|
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .secondary {
|
|
min-width: 240px;
|
|
margin-inline: 0;
|
|
}
|
|
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .steps {
|
|
padding-block: 0;
|
|
margin: 0;
|
|
}
|
|
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .steps.progress-bar {
|
|
margin-inline: 0;
|
|
}
|
|
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .additional-cta.cta-link {
|
|
align-self: center;
|
|
}
|
|
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .dismiss-button {
|
|
top: -100px;
|
|
}
|
|
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main:dir(rtl) {
|
|
margin: auto;
|
|
margin-top: 0;
|
|
}
|
|
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main:dir(rtl) .main-content {
|
|
border-radius: 0 0 8px 8px;
|
|
}
|
|
[narrow] .onboardingContainer .screen[pos=split][no-rdm] {
|
|
width: 800px;
|
|
}
|
|
[narrow] .onboardingContainer .screen[pos=split][no-rdm][reverse-split] {
|
|
flex-direction: row-reverse;
|
|
}
|
|
[narrow] .onboardingContainer .screen[pos=split][no-rdm][reverse-split] .section-main {
|
|
margin: auto;
|
|
margin-inline-end: 0;
|
|
border-radius: 8px 0 0 8px;
|
|
}
|
|
[narrow] .onboardingContainer .screen[pos=split][no-rdm][reverse-split] .section-main .main-content {
|
|
border-radius: inherit;
|
|
}
|
|
[narrow] .onboardingContainer .screen[pos=split][no-rdm][reverse-split] .section-main:dir(rtl) {
|
|
border-radius: 0 8px 8px 0;
|
|
margin: auto;
|
|
margin-inline-end: 0;
|
|
}
|
|
[narrow] .onboardingContainer .screen[pos=split][no-rdm][reverse-split] .section-secondary {
|
|
margin: auto;
|
|
margin-inline-start: 0;
|
|
border-radius: 0 8px 8px 0;
|
|
}
|
|
[narrow] .onboardingContainer .screen[pos=split][no-rdm][reverse-split] .section-secondary:dir(rtl) {
|
|
border-radius: 8px 0 0 8px;
|
|
margin: auto;
|
|
margin-inline-start: 0;
|
|
}
|
|
@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;
|
|
}
|
|
}
|
|
@media only screen and (height <= 650px) and (width <= 620px) {
|
|
[narrow] .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;
|
|
user-select: none;
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
[narrow] .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 {
|
|
-moz-context-properties: fill;
|
|
fill: currentColor;
|
|
margin-inline-end: 10px;
|
|
position: relative;
|
|
top: 3px;
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-top: -6px;
|
|
}
|
|
.onboardingContainer .tiles-single-select-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-single-select-section {
|
|
border: 0;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 5px;
|
|
justify-content: space-evenly;
|
|
margin-inline: 10px;
|
|
padding: 10px;
|
|
transition: var(--transition);
|
|
}
|
|
.onboardingContainer .tiles-single-select-section:hover, .onboardingContainer .tiles-single-select-section:active, .onboardingContainer .tiles-single-select-section:focus-within {
|
|
border-radius: 8px;
|
|
outline: 2px solid var(--in-content-primary-button-background);
|
|
}
|
|
.onboardingContainer .tiles-single-select-section.single-select, .onboardingContainer .tiles-single-select-section.theme {
|
|
flex-direction: row;
|
|
padding-top: 5px;
|
|
gap: 10px;
|
|
justify-content: center;
|
|
}
|
|
.onboardingContainer .tiles-single-select-section.single-select .select-item, .onboardingContainer .tiles-single-select-section.theme .select-item {
|
|
position: relative;
|
|
padding-top: 5px;
|
|
border: 2px solid var(--single-select-border-color);
|
|
border-radius: 12px;
|
|
}
|
|
.onboardingContainer .tiles-single-select-section.single-select .select-item:has(.input:focus), .onboardingContainer .tiles-single-select-section.single-select .select-item:has(.selected), .onboardingContainer .tiles-single-select-section.theme .select-item:has(.input:focus), .onboardingContainer .tiles-single-select-section.theme .select-item:has(.selected) {
|
|
outline: none;
|
|
}
|
|
.onboardingContainer .tiles-single-select-section.single-select .select-item:has(.input:focus), .onboardingContainer .tiles-single-select-section.theme .select-item:has(.input:focus) {
|
|
outline: 2px solid var(--in-content-primary-button-background);
|
|
outline-offset: 5px;
|
|
}
|
|
.onboardingContainer .tiles-single-select-section.single-select .select-item:has(.selected), .onboardingContainer .tiles-single-select-section.theme .select-item:has(.selected) {
|
|
border: 3px solid var(--in-content-primary-button-background);
|
|
border-radius: 12px;
|
|
}
|
|
.onboardingContainer .tiles-single-select-section.single-select .select-item:hover, .onboardingContainer .tiles-single-select-section.theme .select-item:hover {
|
|
background-color: var(--single-select-hover-color);
|
|
}
|
|
.onboardingContainer .tiles-single-select-section.single-select .select-item:focus-visible, .onboardingContainer .tiles-single-select-section.theme .select-item:focus-visible {
|
|
outline: none;
|
|
}
|
|
.onboardingContainer .tiles-single-select-section.single-select .select-item:focus-visible .icon, .onboardingContainer .tiles-single-select-section.theme .select-item:focus-visible .icon {
|
|
outline: initial;
|
|
}
|
|
.onboardingContainer .tiles-single-select-section.single-select .select-item .flair, .onboardingContainer .tiles-single-select-section.theme .select-item .flair {
|
|
height: 18px;
|
|
border-radius: 4px;
|
|
background-color: #9059FF;
|
|
color: #FFF;
|
|
padding: 2px 8px;
|
|
position: absolute;
|
|
right: 1px;
|
|
top: -10px;
|
|
line-height: 1;
|
|
}
|
|
.onboardingContainer .tiles-single-select-section.single-select .select-item .icon, .onboardingContainer .tiles-single-select-section.theme .select-item .icon {
|
|
outline: none;
|
|
}
|
|
.onboardingContainer .tiles-single-select-section.single-select .select-item .text, .onboardingContainer .tiles-single-select-section.theme .select-item .text {
|
|
margin-block: 8px;
|
|
}
|
|
.onboardingContainer .tiles-single-select-section.single-select:hover, .onboardingContainer .tiles-single-select-section.single-select:focus-within, .onboardingContainer .tiles-single-select-section.theme:hover, .onboardingContainer .tiles-single-select-section.theme:focus-within {
|
|
outline: none;
|
|
}
|
|
.onboardingContainer .tiles-single-select-section.single-select .select-item, .onboardingContainer .tiles-single-select-section.theme .select-item {
|
|
transition: var(--transition);
|
|
}
|
|
.onboardingContainer .tiles-single-select-section.single-select .select-item:has(.input:focus), .onboardingContainer .tiles-single-select-section.theme .select-item:has(.input:focus) {
|
|
outline: 2px solid var(--in-content-primary-button-background);
|
|
outline-offset: 2px;
|
|
}
|
|
.onboardingContainer .tiles-single-select-section .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;
|
|
}
|
|
.onboardingContainer .tiles-single-select-section .select-item:focus, .onboardingContainer .tiles-single-select-section .select-item:active {
|
|
outline: initial;
|
|
outline-offset: initial;
|
|
}
|
|
.onboardingContainer .tiles-single-select-section .select-item .icon {
|
|
background-size: cover;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 5px;
|
|
z-index: -1;
|
|
}
|
|
.onboardingContainer .tiles-single-select-section .select-item .icon:dir(rtl) {
|
|
transform: scaleX(-1);
|
|
}
|
|
.onboardingContainer .tiles-single-select-section .select-item .icon.light {
|
|
background-image: url("resource://builtin-themes/light/icon.svg");
|
|
}
|
|
.onboardingContainer .tiles-single-select-section .select-item .icon.dark {
|
|
background-image: url("resource://builtin-themes/dark/icon.svg");
|
|
}
|
|
.onboardingContainer .tiles-single-select-section .select-item .icon.alpenglow {
|
|
background-image: url("resource://builtin-themes/alpenglow/icon.svg");
|
|
}
|
|
.onboardingContainer .tiles-single-select-section .select-item .icon.default, .onboardingContainer .tiles-single-select-section .select-item .icon.automatic {
|
|
background-image: url("resource://default-theme/icon.svg");
|
|
}
|
|
.onboardingContainer .tiles-single-select-section .select-item .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-single-select-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;
|
|
}
|
|
.onboardingContainer .multi-select-container .checkbox-container > input {
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
.onboardingContainer .multi-select-container {
|
|
color: #CFCFD8;
|
|
}
|
|
}
|
|
@media (prefers-contrast) {
|
|
.onboardingContainer .multi-select-container {
|
|
color: var(--in-content-page-color);
|
|
}
|
|
}
|
|
.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 .onboardingContainer .main-content.no-steps:has(button.content-tiles-header[aria-expanded=false]) {
|
|
padding-bottom: 0;
|
|
}
|
|
.onboardingContainer #content-tiles-container button.tile-header,
|
|
.onboardingContainer 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;
|
|
cursor: pointer;
|
|
outline-offset: -12px;
|
|
}
|
|
@media (prefers-contrast: no-preference) {
|
|
.onboardingContainer #content-tiles-container button.tile-header,
|
|
.onboardingContainer button.content-tiles-header {
|
|
background-color: var(--in-content-page-background);
|
|
border-color: var(--in-content-border-color);
|
|
}
|
|
}
|
|
.onboardingContainer #content-tiles-container button.tile-header .arrow-icon,
|
|
.onboardingContainer button.content-tiles-header .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;
|
|
}
|
|
.onboardingContainer #content-tiles-container button.tile-header[aria-expanded=true],
|
|
.onboardingContainer button.content-tiles-header[aria-expanded=true] {
|
|
border-end-start-radius: 0;
|
|
border-end-end-radius: 0;
|
|
}
|
|
.onboardingContainer #content-tiles-container button.tile-header[aria-expanded=true] .arrow-icon,
|
|
.onboardingContainer button.content-tiles-header[aria-expanded=true] .arrow-icon {
|
|
background: url("chrome://global/skin/icons/arrow-up.svg") center center/100% no-repeat;
|
|
}
|
|
.onboardingContainer 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) {
|
|
.onboardingContainer button.content-tiles-header {
|
|
color: #5B5B66;
|
|
}
|
|
}
|
|
@media (prefers-contrast: no-preference) and (prefers-color-scheme: dark) {
|
|
.onboardingContainer button.content-tiles-header {
|
|
color: #CFCFD8;
|
|
}
|
|
}
|
|
@media (prefers-contrast) {
|
|
.onboardingContainer button.content-tiles-header {
|
|
color: var(--in-content-page-color);
|
|
}
|
|
}
|
|
.onboardingContainer button.content-tiles-header .arrow-icon {
|
|
margin-inline: 1em;
|
|
}
|
|
.onboardingContainer #content-tiles-container {
|
|
--tiles-container-border-radius: 8px;
|
|
margin: 24px 48px;
|
|
}
|
|
.onboardingContainer #content-tiles-container .content-tile {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.onboardingContainer #content-tiles-container .content-tile.has-header:first-of-type button.tile-header, .onboardingContainer #content-tiles-container .content-tile: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);
|
|
}
|
|
.onboardingContainer #content-tiles-container .content-tile.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);
|
|
}
|
|
.onboardingContainer #content-tiles-container .content-tile.has-header:not(:has(+ .content-tile.has-header)) button.tile-header[aria-expanded=true] {
|
|
border-end-start-radius: 0;
|
|
border-end-end-radius: 0;
|
|
}
|
|
.onboardingContainer #content-tiles-container .content-tile.has-header:not(:has(+ .content-tile.has-header)) button.tile-header[aria-expanded=true] + .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);
|
|
}
|
|
.onboardingContainer #content-tiles-container .content-tile.has-header:has(+ .content-tile.has-header) button.tile-header[aria-expanded=false] {
|
|
border-bottom: none;
|
|
}
|
|
.onboardingContainer #content-tiles-container .content-tile button.tile-header {
|
|
font-size: 13px;
|
|
justify-content: space-between;
|
|
}
|
|
.onboardingContainer #content-tiles-container .content-tile button.tile-header + .tile-content {
|
|
border-inline-start: 1px solid var(--in-content-border-color);
|
|
border-inline-end: 1px solid var(--in-content-border-color);
|
|
}
|
|
.onboardingContainer #content-tiles-container .content-tile button.tile-header .header-text-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.onboardingContainer #content-tiles-container .content-tile button.tile-header .header-text-container .header-title {
|
|
font-weight: var(--font-weight-bold);
|
|
line-height: 1.5;
|
|
}
|
|
.onboardingContainer #content-tiles-container .content-tile button.tile-header .header-text-container .header-subtitle {
|
|
font-weight: 400;
|
|
line-height: 1.5;
|
|
}
|
|
.onboardingContainer #content-tiles-container .content-tile .multi-select-container {
|
|
padding: 24px;
|
|
margin: 0;
|
|
}
|
|
.onboardingContainer #content-tiles-container .content-tile .multi-select-container.picker {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
box-sizing: border-box;
|
|
}
|
|
.onboardingContainer #content-tiles-container .content-tile .multi-select-container.picker input[type=checkbox] {
|
|
position: absolute;
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
.onboardingContainer #content-tiles-container .content-tile .multi-select-container.picker .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;
|
|
}
|
|
.onboardingContainer #content-tiles-container .content-tile .multi-select-container.picker .checkbox-container:has(input:checked) {
|
|
border-color: var(--picker-checked-border-color);
|
|
border-width: 3px;
|
|
margin: -2px;
|
|
}
|
|
.onboardingContainer #content-tiles-container .content-tile .multi-select-container.picker .checkbox-container:has(input:checked):hover {
|
|
border-color: var(--picker-hover-border-color);
|
|
}
|
|
.onboardingContainer #content-tiles-container .content-tile .multi-select-container.picker .checkbox-container:hover {
|
|
background-color: var(--picker-hover-background-color);
|
|
border-color: var(--picker-hover-border-color);
|
|
}
|
|
.onboardingContainer #content-tiles-container .content-tile .multi-select-container.picker .checkbox-container:hover .picker-icon.picker-checked {
|
|
background-color: var(--picker-checkbox-hover-color);
|
|
}
|
|
.onboardingContainer #content-tiles-container .content-tile .multi-select-container.picker .checkbox-container:focus-visible {
|
|
outline: 2px solid var(--picker-focus-ring-color);
|
|
outline-offset: 6px;
|
|
}
|
|
.onboardingContainer #content-tiles-container .content-tile .multi-select-container.picker .checkbox-container:focus-visible:has(input:checked) {
|
|
outline-offset: 4px;
|
|
}
|
|
.onboardingContainer #content-tiles-container .content-tile .multi-select-container.picker .checkbox-container .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;
|
|
}
|
|
.onboardingContainer #content-tiles-container .content-tile .multi-select-container.picker .checkbox-container .picker-icon.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);
|
|
}
|
|
.onboardingContainer #content-tiles-container .content-tile .multi-select-container .checkbox-container {
|
|
display: grid;
|
|
}
|
|
.onboardingContainer #content-tiles-container .content-tile .multi-select-container .checkbox-container label,
|
|
.onboardingContainer #content-tiles-container .content-tile .multi-select-container .checkbox-container p {
|
|
grid-column: 2;
|
|
}
|
|
.onboardingContainer #content-tiles-container .content-tile .multi-select-container .checkbox-container p {
|
|
margin-block: 0.5em 0;
|
|
}
|
|
.onboardingContainer .tile-title-container {
|
|
margin-inline: 0;
|
|
margin-block: 10px 24px;
|
|
text-align: start;
|
|
transition: var(--transition);
|
|
}
|
|
.onboardingContainer .tile-title {
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
margin-block: 0;
|
|
}
|
|
.onboardingContainer .tile-title:not(:last-child) {
|
|
margin-block-end: 16px;
|
|
}
|
|
.onboardingContainer .tile-subtitle {
|
|
font-size: 16px;
|
|
margin-block: 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;
|
|
}
|
|
.onboardingContainer .dismiss-button.with-background {
|
|
background-color: var(--in-content-page-background);
|
|
}
|
|
.onboardingContainer .dismiss-button.with-background:hover {
|
|
background-color: var(--button-background-color-hover);
|
|
}
|
|
.onboardingContainer .dismiss-button.with-background:active {
|
|
background-color: var(--button-background-color-active);
|
|
}
|
|
@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 .legal-paragraph {
|
|
transition: var(--transition);
|
|
}
|
|
.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 .section-main.system-prompt-spotlight {
|
|
margin-top: 100px;
|
|
margin-inline: 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-single-select-section,
|
|
.onboardingContainer .dialog-initial .inline-image,
|
|
.onboardingContainer .dialog-initial .link-paragraph,
|
|
.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,
|
|
.onboardingContainer .dialog-initial .legal-paragraph,
|
|
.onboardingContainer .dialog-initial .steps[above-button]:not(.progress-bar) {
|
|
transition-delay: 1s;
|
|
}
|
|
.onboardingContainer .screen:not(.dialog-initial) .tiles-single-select-section,
|
|
.onboardingContainer .screen:not(.dialog-initial) .inline-image,
|
|
.onboardingContainer .screen:not(.dialog-initial) .link-paragraph,
|
|
.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,
|
|
.onboardingContainer .screen:not(.dialog-initial) .legal-paragraph,
|
|
.onboardingContainer .screen:not(.dialog-initial) .steps[above-button]:not(.progress-bar) {
|
|
transition-delay: 0.4s;
|
|
}
|
|
.onboardingContainer .screen-2 .section-main {
|
|
z-index: 1;
|
|
margin: auto;
|
|
}
|
|
.onboardingContainer .screen-2 .section-main.system-prompt-spotlight {
|
|
margin-top: 100px;
|
|
margin-inline: 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-single-select-section,
|
|
.onboardingContainer.transition-in .screen .link-paragraph,
|
|
.onboardingContainer.transition-in .screen .inline-image,
|
|
.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 .legal-paragraph,
|
|
.onboardingContainer.transition-in .screen migration-wizard,
|
|
.onboardingContainer.transition-in .screen .tile-title-container,
|
|
.onboardingContainer.transition-in .screen .steps[above-button]:not(.progress-bar) {
|
|
opacity: 0;
|
|
translate: 0 calc(-1 * var(--translate));
|
|
}
|
|
.onboardingContainer.transition-in .screen:not(.dialog-initial) .steps:not(.progress-bar, [above-button]) {
|
|
opacity: 0.2;
|
|
}
|
|
.onboardingContainer .system-prompt-spotlight .inline-icon-container {
|
|
display: flex;
|
|
}
|
|
.onboardingContainer .system-prompt-spotlight .welcome-text {
|
|
align-items: flex-start;
|
|
padding: 5px;
|
|
}
|
|
.onboardingContainer .system-prompt-spotlight .welcome-text h2 {
|
|
text-align: start;
|
|
margin: 0;
|
|
margin-block: 10px 15px;
|
|
}
|
|
.onboardingContainer .system-prompt-spotlight .brand-logo {
|
|
margin-block: 2px;
|
|
}
|
|
.onboardingContainer .system-prompt-spotlight .multi-select-container {
|
|
margin-inline-start: 23px;
|
|
margin-block-end: 17px;
|
|
}
|
|
.onboardingContainer .system-prompt-spotlight .additional-cta-container {
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
padding-inline-end: 15px;
|
|
}
|
|
.onboardingContainer .system-prompt-spotlight .main-content.no-steps {
|
|
padding-bottom: 12px;
|
|
margin-inline: auto;
|
|
}
|
|
.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-single-select-section,
|
|
.onboardingContainer.transition-out .screen:not(.dialog-last) .inline-image,
|
|
.onboardingContainer.transition-out .screen:not(.dialog-last) .link-paragraph,
|
|
.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,
|
|
.onboardingContainer.transition-out .screen:not(.dialog-last) .legal-paragraph,
|
|
.onboardingContainer.transition-out .screen:not(.dialog-last) .steps[above-button]:not(.progress-bar) {
|
|
opacity: 0;
|
|
translate: 0 var(--translate);
|
|
transition-delay: 0.3s;
|
|
}
|
|
.onboardingContainer.transition-out .screen:not(.dialog-last) .steps:not(.progress-bar, [above-button]) {
|
|
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 .inline-image,
|
|
.onboardingContainer .link-paragraph {
|
|
transition: var(--transition);
|
|
}
|
|
.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;
|
|
}
|