Adding upstream version 125.0.1.upstream/125.0.1

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

1 files changed, 255 insertions, 112 deletions

diff --git a/browser/components/aboutwelcome/content-src/aboutwelcome.scss b/browser/components/aboutwelcome/content-src/aboutwelcome.scss
index aa49a04799..9174fe2439 100644
--- a/browser/components/aboutwelcome/content-src/aboutwelcome.scss
+++ b/browser/components/aboutwelcome/content-src/aboutwelcome.scss
@@ -570,10 +570,12 @@ html {
       .section-main {
         flex-direction: row;
         display: block;
-        margin: auto auto auto 0;
+        margin: auto;
+        margin-inline-start: 0;
 
         &:dir(rtl) {
-          margin: auto 0 auto auto;
+          margin: auto;
+          margin-inline-start: 0;
         }
 
         &.embedded-migration {
@@ -597,6 +599,21 @@ html {
             border-radius: 8px 0 0 8px;
           }
 
+          .legal-paragraph {
+            text-align: start;
+            font-size: 11px;
+            line-height: 16.5px;
+            color: #5B5B66;
+
+            @media only screen and (width <= 800px) {
+              padding-inline: 30px;
+            }
+
+            @media (prefers-color-scheme: dark) {
+              color: #CFCFD8;
+            }
+          }
+
           .main-content-inner {
             min-height: 330px;
 
@@ -764,7 +781,8 @@ html {
 
         &:dir(rtl) {
           border-radius: 0 8px 8px 0;
-          margin: auto auto auto 0;
+          margin: auto;
+          margin-inline-end: 0;
         }
 
         h1 {
@@ -843,168 +861,285 @@ html {
         .tiles-theme-section {
           margin-inline-start: -10px;
         }
-      }
 
-      @media only screen and (width <= 800px) {
-        flex-direction: column;
-        min-height: $small-main-section-height + $small-secondary-section-height;
+        &[reverse-split] {
+          flex-direction: row-reverse;
 
-        &::before {
-          width: $split-section-width;
-        }
+          .section-main {
+            .main-content {
+              border-radius: inherit;
+            }
 
-        .section-secondary,
-        .section-main {
-          width: $split-section-width;
-        }
+            margin: auto;
+            margin-inline-end: 0;
+            border-radius: 8px 0 0 8px;
 
-        .section-secondary {
-          --mr-secondary-background-position-y: top;
-          --mr-secondary-position: center var(--mr-secondary-background-position-y) / 75%;
+            &:dir(rtl) {
+              border-radius: 0 8px 8px 0;
+              margin: auto;
+              margin-inline-end: 0;
+            }
+          }
 
-          border-radius: 8px 8px 0 0;
-          margin: auto auto 0;
-          height: $small-secondary-section-height;
+          .section-secondary {
+            margin: auto;
+            margin-inline-start: 0;
+            border-radius: 0 8px 8px 0;
 
-          .hero-image img {
-            margin: 6px 0;
+            &:dir(rtl) {
+              border-radius: 8px 0 0 8px;
+              margin: auto;
+              margin-inline-start: 0;
+            }
           }
+        }
+      }
 
-          .message-text {
-            margin-inline: auto;
-          }
+      // duplicate the above styles for no-rdm. unfortunately SASS won't allow
+      // us to combine these selectors.
+      &:where([no-rdm='true']) {
+        .tiles-theme-section {
+          margin-inline-start: -10px;
+        }
 
-          h1 {
-            font-size: 35px;
-            text-align: center;
-            white-space: normal;
-            margin-inline: auto;
-            margin-block: 14px 6px;
-          }
+        &[reverse-split] {
+          flex-direction: row-reverse;
 
-          &:dir(rtl) {
-            margin: auto auto 0;
-            border-radius: 8px 8px 0 0;
-          }
+          .section-main {
+            .main-content {
+              border-radius: inherit;
+            }
 
-          &.with-secondary-section-hidden {
-            display: none;
+            margin: auto;
+            margin-inline-end: 0;
+            border-radius: 8px 0 0 8px;
+
+            &:dir(rtl) {
+              border-radius: 0 8px 8px 0;
+              margin: auto;
+              margin-inline-end: 0;
+            }
           }
-        }
 
-        migration-wizard {
-          &::part(deck){
-            min-width: 330px;
-            margin-inline: 36px;
+          .section-secondary {
+            margin: auto;
+            margin-inline-start: 0;
+            border-radius: 0 8px 8px 0;
+
+            &:dir(rtl) {
+              border-radius: 8px 0 0 8px;
+              margin: auto;
+              margin-inline-start: 0;
+            }
           }
         }
+      }
 
-        .section-main {
-          margin: 0 auto auto;
-          height: $small-main-section-height;
+      @media only screen and (width <= 800px) {
+        &:where(:not([no-rdm])) {
+          flex-direction: column;
+          min-height: $small-main-section-height + $small-secondary-section-height;
+
+          &::before {
+            width: $split-section-width;
+          }
 
-          migration-wizard::part(buttons) {
+          &[reverse-split] {
             flex-direction: column;
-            margin-inline: 46px;
+
+            .section-secondary {
+              border-radius: 8px 8px 0 0;
+              margin: auto;
+              margin-bottom: 0;
+
+              &:dir(rtl) {
+                margin: auto;
+                margin-bottom: 0;
+                border-radius: 8px 8px 0 0;
+              }
+            }
+
+            .section-main {
+              margin: auto;
+              margin-top: 0;
+              border-radius: 0 0 8px 8px;
+
+              &:dir(rtl) {
+                margin: auto;
+                margin-top: 0;
+                border-radius: 0 0 8px 8px;
+              }
+            }
+          }
+
+          .section-secondary,
+          .section-main {
+            width: $split-section-width;
           }
 
-          &[hide-secondary-section='responsive'] {
-            height: $split-screen-height;
+          .section-secondary {
+            --mr-secondary-background-position-y: top;
+            --mr-secondary-position: center var(--mr-secondary-background-position-y) / 75%;
+
+            border-radius: 8px 8px 0 0;
             margin: auto;
+            margin-bottom: 0;
+            height: $small-secondary-section-height;
 
-            .main-content {
-              padding: 50px 0 0;
-              border-radius: 8px;
+            .hero-image img {
+              margin: 6px 0;
+            }
+
+            .message-text {
+              margin-inline: auto;
+            }
+
+            h1 {
+              font-size: 35px;
+              text-align: center;
+              white-space: normal;
+              margin-inline: auto;
+              margin-block: 14px 6px;
+            }
+
+            &:dir(rtl) {
+              margin: auto;
+              margin-bottom: 0;
+              border-radius: 8px 8px 0 0;
+            }
+
+            &.with-secondary-section-hidden {
+              display: none;
             }
           }
 
-          .main-content {
-            border-radius: 0 0 8px 8px;
-            padding: 30px 0 0;
+          migration-wizard {
+            &::part(deck){
+              min-width: 330px;
+              margin-inline: 36px;
+            }
+          }
+
+          .section-main {
+            margin: auto;
+            margin-top: 0;
+            height: $small-main-section-height;
 
-            .main-content-inner {
-              align-items: center;
+            migration-wizard::part(buttons) {
+              flex-direction: column;
+              margin-inline: 46px;
             }
 
-            .logo-container {
-              text-align: center;
+            &[hide-secondary-section='responsive'] {
+              height: $split-screen-height;
+              margin: auto;
+
+              &:dir(rtl) {
+                margin: auto;
+              }
 
-              .brand-logo {
-                min-height: 25px;
+              .main-content {
+                padding: 50px 0 0;
+                border-radius: 8px;
 
-                &,
                 &:dir(rtl) {
-                  background-position: center;
+                  border-radius: 8px;
                 }
               }
-
-              .logo-alt {
-                width: inherit;
-                height: inherit;
-              }
             }
 
-            .welcome-text {
-              align-items: center;
-              text-align: center;
-              margin-inline: 0;
-              padding-inline: 30px;
+            .main-content {
+              border-radius: 0 0 8px 8px;
+              padding: 30px 0 0;
 
-              .spacer-bottom,
-              .spacer-top {
-                display: none;
+              .main-content-inner {
+                align-items: center;
               }
-            }
 
-            .action-buttons {
-              text-align: center;
+              .logo-container {
+                text-align: center;
+
+                .brand-logo {
+                  min-height: 25px;
 
-              .checkbox-container {
-                display: none;
+                  &,
+                  &:dir(rtl) {
+                    background-position: center;
+                  }
+                }
+
+                .logo-alt {
+                  width: inherit;
+                  height: inherit;
+                }
               }
 
-              .secondary-cta {
-                position: relative;
-                margin-block: 10px 0;
-                bottom: 0;
+              .welcome-text {
+                align-items: center;
+                text-align: center;
+                margin-inline: 0;
+                padding-inline: 30px;
+
+                .spacer-bottom,
+                .spacer-top {
+                  display: none;
+                }
               }
-            }
 
-            .primary,
-            .secondary {
-              min-width: 240px;
-              margin-inline: 0;
-            }
+              .action-buttons {
+                text-align: center;
 
-            .steps {
-              padding-block: 0;
-              margin: 0;
+                .checkbox-container {
+                  display: none;
+                }
 
-              &.progress-bar {
+                .secondary-cta {
+                  position: relative;
+                  margin-block: 10px 0;
+                  bottom: 0;
+                }
+              }
+
+              .primary,
+              .secondary {
+                min-width: 240px;
                 margin-inline: 0;
               }
+
+              .steps {
+                padding-block: 0;
+                margin: 0;
+
+                &.progress-bar {
+                  margin-inline: 0;
+                }
+              }
             }
-          }
 
-          .additional-cta {
-            &.cta-link {
-              align-self: center;
+            .additional-cta {
+              &.cta-link {
+                align-self: center;
+              }
             }
-          }
 
-          .dismiss-button {
-            top: -$small-secondary-section-height;
-          }
+            .dismiss-button {
+              top: -$small-secondary-section-height;
+            }
 
-          &:dir(rtl) {
-            margin: 0 auto auto;
+            &:dir(rtl) {
+              margin: auto;
+              margin-top: 0;
 
-            .main-content {
-              border-radius: 0 0 8px 8px;
+              .main-content {
+                border-radius: 0 0 8px 8px;
+              }
             }
           }
         }
 
+        &[no-rdm] {
+          width: 800px;
+        }
       }
 
       @media only screen and (height <= 650px) {
@@ -1610,6 +1745,10 @@ html {
     }
   }
 
+  .legal-paragraph {
+    transition: var(--transition)
+  }
+
   .primary,
   .secondary,
   .additional-cta,
@@ -1763,7 +1902,8 @@ html {
     .secondary,
     .secondary-cta,
     .steps,
-    .cta-link {
+    .cta-link,
+    .legal-paragraph {
       transition-delay: 1s;
     }
   }
@@ -1772,14 +1912,15 @@ html {
   .screen:not(.dialog-initial) {
     .tiles-theme-section,
     .multi-select-container
-    {
+     {
       transition-delay: 0.2s;
     }
 
     .primary,
     .secondary,
     .secondary-cta,
-    .cta-link {
+    .cta-link,
+    .legal-paragraph {
       transition-delay: 0.4s;
     }
   }
@@ -1852,6 +1993,7 @@ html {
       .secondary,
       .secondary-cta:not(.top),
       .cta-link,
+      .legal-paragraph,
       migration-wizard {
         opacity: 0;
         translate: 0 calc(-1 * var(--translate));
@@ -1898,7 +2040,8 @@ html {
       .checkbox-container:not(.multi-select-item),
       .secondary,
       .secondary-cta:not(.top),
-      .cta-link {
+      .cta-link,
+      .legal-paragraph {
         opacity: 0;
         translate: 0 var(--translate);
         transition-delay: 0.3s;