summaryrefslogtreecommitdiffstats
path: root/browser/components/aboutwelcome/content/aboutwelcome.css
diff options
context:
space:
mode:
Diffstat (limited to 'browser/components/aboutwelcome/content/aboutwelcome.css')
-rw-r--r--browser/components/aboutwelcome/content/aboutwelcome.css210
1 files changed, 164 insertions, 46 deletions
diff --git a/browser/components/aboutwelcome/content/aboutwelcome.css b/browser/components/aboutwelcome/content/aboutwelcome.css
index 63608bd48a..411f6d4f9b 100644
--- a/browser/components/aboutwelcome/content/aboutwelcome.css
+++ b/browser/components/aboutwelcome/content/aboutwelcome.css
@@ -758,7 +758,7 @@ panel#feature-callout[arrow-position=inline-start-bottom] {
}
@media (prefers-contrast: no-preference) and (prefers-color-scheme: dark) {
.onboardingContainer.shopping .screen[pos=split] {
- box-shadow: 0 2px 6px #15141a;
+ box-shadow: 0 2px 6px rgb(21, 20, 26);
}
}
.onboardingContainer.shopping .screen[pos=split]::before {
@@ -813,6 +813,7 @@ panel#feature-callout[arrow-position=inline-start-bottom] {
margin-block: 0 20px;
padding-inline: 30px;
text-align: start;
+ color: inherit;
}
.onboardingContainer.shopping .screen[pos=split] .section-main .main-content .legal-paragraph a {
text-decoration: underline;
@@ -1369,10 +1370,12 @@ html {
.onboardingContainer .screen[pos=split] .section-main {
flex-direction: row;
display: block;
- margin: auto auto auto 0;
+ margin: auto;
+ margin-inline-start: 0;
}
.onboardingContainer .screen[pos=split] .section-main:dir(rtl) {
- margin: auto 0 auto auto;
+ margin: auto;
+ margin-inline-start: 0;
}
.onboardingContainer .screen[pos=split] .section-main.embedded-migration .main-content {
padding-block: 100px 0;
@@ -1390,6 +1393,22 @@ html {
.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;
+ }
+}
+@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;
}
@@ -1563,7 +1582,8 @@ html {
}
.onboardingContainer .screen[pos=split] .section-secondary:dir(rtl) {
border-radius: 0 8px 8px 0;
- margin: auto auto auto 0;
+ margin: auto;
+ margin-inline-end: 0;
}
.onboardingContainer .screen[pos=split] .section-secondary h1 {
color: var(--mr-screen-heading-color);
@@ -1631,131 +1651,222 @@ html {
.onboardingContainer .screen[pos=split] .tiles-theme-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-theme-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;
}
@media only screen and (width <= 800px) {
- .onboardingContainer .screen[pos=split] {
+ .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) {
flex-direction: column;
min-height: 550px;
}
- .onboardingContainer .screen[pos=split]::before {
+ .onboardingContainer .screen[pos=split]:where(:not([no-rdm]))::before {
width: 400px;
}
- .onboardingContainer .screen[pos=split] .section-secondary,
-.onboardingContainer .screen[pos=split] .section-main {
+ .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 {
+ 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] .section-secondary {
+ .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 auto 0;
+ margin: auto;
+ margin-bottom: 0;
height: 100px;
}
- .onboardingContainer .screen[pos=split] .section-secondary .hero-image img {
+ .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary .hero-image img {
margin: 6px 0;
}
- .onboardingContainer .screen[pos=split] .section-secondary .message-text {
+ .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary .message-text {
margin-inline: auto;
}
- .onboardingContainer .screen[pos=split] .section-secondary h1 {
+ .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] .section-secondary:dir(rtl) {
- margin: auto auto 0;
+ .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] .section-secondary.with-secondary-section-hidden {
+ .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary.with-secondary-section-hidden {
display: none;
}
- .onboardingContainer .screen[pos=split] migration-wizard::part(deck) {
+ .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) migration-wizard::part(deck) {
min-width: 330px;
margin-inline: 36px;
}
- .onboardingContainer .screen[pos=split] .section-main {
- margin: 0 auto auto;
+ .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main {
+ margin: auto;
+ margin-top: 0;
height: 450px;
}
- .onboardingContainer .screen[pos=split] .section-main migration-wizard::part(buttons) {
+ .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main migration-wizard::part(buttons) {
flex-direction: column;
margin-inline: 46px;
}
- .onboardingContainer .screen[pos=split] .section-main[hide-secondary-section=responsive] {
+ .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main[hide-secondary-section=responsive] {
height: 550px;
margin: auto;
}
- .onboardingContainer .screen[pos=split] .section-main[hide-secondary-section=responsive] .main-content {
+ .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] .section-main .main-content {
+ .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] .section-main .main-content .main-content-inner {
+ .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .main-content-inner {
align-items: center;
}
- .onboardingContainer .screen[pos=split] .section-main .main-content .logo-container {
+ .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .logo-container {
text-align: center;
}
- .onboardingContainer .screen[pos=split] .section-main .main-content .logo-container .brand-logo {
+ .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .logo-container .brand-logo {
min-height: 25px;
}
- .onboardingContainer .screen[pos=split] .section-main .main-content .logo-container .brand-logo, .onboardingContainer .screen[pos=split] .section-main .main-content .logo-container .brand-logo:dir(rtl) {
+ .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] .section-main .main-content .logo-container .logo-alt {
+ .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .logo-container .logo-alt {
width: inherit;
height: inherit;
}
- .onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text {
+ .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] .section-main .main-content .welcome-text .spacer-bottom,
-.onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text .spacer-top {
+ .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] .section-main .main-content .action-buttons {
+ .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .action-buttons {
text-align: center;
}
- .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .checkbox-container {
+ .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .action-buttons .checkbox-container {
display: none;
}
- .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta {
+ .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] .section-main .main-content .primary,
-.onboardingContainer .screen[pos=split] .section-main .main-content .secondary {
+ .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] .section-main .main-content .steps {
+ .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .steps {
padding-block: 0;
margin: 0;
}
- .onboardingContainer .screen[pos=split] .section-main .main-content .steps.progress-bar {
+ .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .steps.progress-bar {
margin-inline: 0;
}
- .onboardingContainer .screen[pos=split] .section-main .additional-cta.cta-link {
+ .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .additional-cta.cta-link {
align-self: center;
}
- .onboardingContainer .screen[pos=split] .section-main .dismiss-button {
+ .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .dismiss-button {
top: -100px;
}
- .onboardingContainer .screen[pos=split] .section-main:dir(rtl) {
- margin: 0 auto auto;
+ .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main:dir(rtl) {
+ margin: auto;
+ margin-top: 0;
}
- .onboardingContainer .screen[pos=split] .section-main:dir(rtl) .main-content {
+ .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;
+ }
}
@media only screen and (height <= 650px) and (800px <= width <= 990px) {
.onboardingContainer .screen[pos=split] .section-main .secondary-cta.top {
@@ -2273,6 +2384,9 @@ html {
.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,
@@ -2407,7 +2521,8 @@ html {
.onboardingContainer .dialog-initial .secondary,
.onboardingContainer .dialog-initial .secondary-cta,
.onboardingContainer .dialog-initial .steps,
-.onboardingContainer .dialog-initial .cta-link {
+.onboardingContainer .dialog-initial .cta-link,
+.onboardingContainer .dialog-initial .legal-paragraph {
transition-delay: 1s;
}
.onboardingContainer .screen:not(.dialog-initial) .tiles-theme-section,
@@ -2417,7 +2532,8 @@ html {
.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) .cta-link,
+.onboardingContainer .screen:not(.dialog-initial) .legal-paragraph {
transition-delay: 0.4s;
}
.onboardingContainer .screen-2 .section-main {
@@ -2473,6 +2589,7 @@ html {
.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 {
opacity: 0;
translate: 0 calc(-1 * var(--translate));
@@ -2505,7 +2622,8 @@ html {
.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) .cta-link,
+.onboardingContainer.transition-out .screen:not(.dialog-last) .legal-paragraph {
opacity: 0;
translate: 0 var(--translate);
transition-delay: 0.3s;
generated by cgit v1.2.3 (git 2.39.1) at 2024-06-03 00:48:33 +0000