update the spotlight dialog surface

resources/in-content/system.css

@@ -101,6 +101,7 @@
     --in-content-primary-button-background-hover: var(--purple-35) !important;
     --in-content-primary-button-background-active: var(--purple-30) !important;
     --in-content-primary-button-text-color: var(--light-on-dark-button-text-color) !important;
+    --in-content-primary-button-text-color-hover: var(--light-on-dark-button-text-color) !important;
     --in-content-button-border-radius: var(--general-button-border-radius) !important;
     --in-content-item-selected: var(--purple-40) !important;
     --in-content-item-hover: color-mix(in srgb, var(--purple-30) 45%, transparent) !important;

uc-globals.css

@@ -396,7 +396,7 @@ but other than that these variables should be available everywhere. */
   --uc-content-button-background-solid: hsl(240, 3%, 18%);
   --uc-content-border-hover: var(--uc-content-button-background-hover);
 
-  --uc-checkbox-border-color: var(--dialog-box-border-color);
+  --uc-checkbox-border-color: hsla(232, 100%, 85%, 0.2);
   --uc-checkbox-checked-border-color: transparent;
   --uc-checkbox-unchecked-bgcolor: var(--uc-arrowpanel-faint);
   --uc-checkbox-unchecked-hover-bgcolor: var(--uc-arrowpanel-dimmed);

uc-navbar.css

@@ -634,8 +634,8 @@ translucent with acrylic effect. enable layout.css.backdrop-filter.enabled */
   --in-content-primary-button-background-hover: var(--purple-35) !important;
   --in-content-primary-button-background-active: var(--purple-30) !important;
   --in-content-primary-button-text-color: var(--light-on-dark-button-text-color) !important;
+  --in-content-primary-button-text-color-hover: var(--light-on-dark-button-text-color) !important;
   --in-content-item-selected: var(--purple-40) !important;
-  --in-content-border-hover: var(--dialog-box-border-hover) !important;
   --checkbox-border-color: var(--in-content-box-border-color) !important;
   --checkbox-checked-border-color: transparent !important;
   --checkbox-unchecked-bgcolor: var(--in-content-button-background) !important;

uc-popups.css

@@ -642,7 +642,7 @@ panel[type="autocomplete-richlistbox"]
   z-index: 0 !important;
 }
 
-:is(.tab-prompt-dialog, #window-modal-dialog) .dialogBox {
+:is(.tab-prompt-dialog, #window-modal-dialog) .dialogBox:not(.fullScreen) {
   /* tab-prompt-dialogs are anchored to the top of the browser content area.
   this makes them look like they emerge from under the navbar. */
   margin-top: 0px !important;
@@ -682,28 +682,14 @@ rtl languages. adjust the border radius accordingly */
   border-bottom-right-radius: 5px !important;
 }
 
-/* blur backdrop filter */
-.content-prompt-dialog > .dialogOverlay[style] .dialogFrame {
-  /* temporarily disabled due to backdrop-filter being disabled.
-  see https://bugzilla.mozilla.org/show_bug.cgi?id=1741779 */
-
-  /* background-color: var(--dialog-bgcolor) !important;
-  background-image: var(--acrylic-texture) !important;
-  backdrop-filter: var(--acrylic-blur) !important;
-  border: 1px solid var(--blurred-dialog-border-color); */
-
-  background-color: var(--ui-quaternary-bg) !important;
-  border: 1px solid var(--arrowpanel-border-color);
-}
-
 /* hide the background overlay */
 .dialogOverlay[topmost="true"],
 #window-modal-dialog::backdrop {
   background-color: transparent !important;
 }
 
 /* make the box shadow even, i hate offset drop shadows */
-:is(.content-prompt-dialog, .tab-prompt-dialog, #window-modal-dialog) .dialogBox {
+:is(.content-prompt-dialog, .tab-prompt-dialog, #window-modal-dialog) .dialogBox:not(.fullScreen) {
   box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1), 0 0 8px 2px rgba(0, 0, 0, 0.1) !important;
 }
 
@@ -715,10 +701,6 @@ rtl languages. adjust the border radius accordingly */
   clip-path: inset(0 -100% -100% -100%);
 }
 
-:is(#window-modal-dialog, .tab-prompt-dialog) > .dialogOverlay[style] .dialogFrame {
-  background-color: var(--ui-quaternary-bg) !important;
-}
-
 /* center text in any dialog box */
 .dialog-content-box {
   -moz-box-pack: center;
@@ -749,7 +731,7 @@ rtl languages. adjust the border radius accordingly */
   #commonDialogWindow[dialogroot],
   #commonDialogWindow[dialogroot] *,
   .dialog-button-box {
-    --in-content-page-background: transparent !important;
+    --in-content-page-background: var(--ui-quaternary-bg) !important;
     --in-content-page-color: var(--uc-parent-page-color) !important;
     --in-content-box-background: var(--dialog-box-bgcolor) !important;
     --in-content-box-background-dim: var(--dialog-box-bgcolor-dim) !important;
@@ -1129,8 +1111,10 @@ rtl languages. adjust the border radius accordingly */
 {
   :root[dialogroot],
   :root[dialogroot] dialog,
-  :root[dialogroot] richlistbox[id]:not(#categories) > richlistitem[selected] {
-    --in-content-page-background: transparent !important;
+  :root[dialogroot] richlistbox[id]:not(#categories) > richlistitem[selected],
+  :root[dialogroot] .onboardingContainer,
+  :root[dialogroot] .onboardingContainer .screen {
+    --in-content-page-background: var(--ui-quaternary-bg) !important;
     --in-content-page-color: var(--uc-parent-page-color) !important;
     --in-content-box-background: var(--dialog-box-bgcolor) !important;
     --in-content-box-background-dim: var(--dialog-box-bgcolor-dim) !important;
@@ -1163,6 +1147,23 @@ rtl languages. adjust the border radius accordingly */
     --dropdown-bgcolor: var(--arrowpanel-background) !important;
     --in-content-button-border-radius: var(--general-button-border-radius) !important;
     --in-content-button-vertical-padding: 5px !important;
+    --mr-welcome-background-color: var(--in-content-page-background) !important;
+  }
+
+  .onboardingContainer .screen.light-text {
+    --in-content-page-color: var(--ui-text-100) !important;
+    --in-content-primary-button-text-color: var(--ui-text-100) !important;
+    --in-content-primary-button-text-color-hover: var(--ui-text-100) !important;
+  }
+
+  /* remove spotlight backdrop overlay */
+  .onboardingContainer .screen[pos="center"] {
+    background-color: transparent !important;
+  }
+
+  .onboardingContainer .main-content {
+    border: 1px solid var(--arrowpanel-border-color);
+    background-color: var(--in-content-page-background) !important;
   }
 
   :root[dialogroot] input[type="checkbox"]:checked {

uc-tabs.css

@@ -727,16 +727,41 @@ hover the general area of the tabs, but will show if audio is muted. */
   transform: translateX(25px) scale(0.5) !important;
 }
 
+.tab-throbber[busy] {
+  fill: var(--busy-throbber-fill) !important;
+}
+
+.tab-throbber[progress] {
+  fill: var(--loading-throbber-fill) !important;
+}
+
 .tab-throbber[busy]::before {
   opacity: 0.8 !important;
-  fill: var(--busy-throbber-fill) !important;
 }
 
 .tab-throbber[progress]::before {
   opacity: 1 !important;
-  fill: var(--loading-throbber-fill) !important;
 }
 
+:root[sessionrestored] .tab-throbber[fadein] {
+  display: block !important;
+  position: relative !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root[sessionrestored] .tab-throbber[fadein] {
+    background-image: url("chrome://browser/skin/tabbrowser/hourglass.svg");
+    background-position: center;
+    background-repeat: no-repeat;
+    -moz-context-properties: fill, fill-opacity !important;
+  }
+
+  .tab-throbber[busy] {
+    opacity: 0.8 !important;
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
 /* tabLoadingSpinner.uc.js enables a special loading throbber animation
 that spins instead of bouncing horizontally */
 @keyframes uc-tab-throbber-spinner-css {
@@ -763,10 +788,6 @@ that spins instead of bouncing horizontally */
   }
 }
 
-:root[sessionrestored] .tab-throbber[fadein] {
-  display: block !important;
-  position: relative !important;
-}
 
 /* I made different versions of this animation to circumvent an SVG issue. if
 you update Firefox and the throbber animation stops working, uncomment one of
@@ -781,6 +802,7 @@ thing with the all-tabs-menu loading icons in the next ruleset below. */
   animation: none !important;
   background-position: center !important;
   background-repeat: no-repeat !important;
+  fill: inherit !important;
 
   /* ANIMATION METHOD #1: this version of the animation is implemented by an
      <animateTransform> tag. it's the most efficient method but it has broken
@@ -855,6 +877,7 @@ thing with the all-tabs-menu loading icons in the next ruleset below. */
   opacity: 1 !important;
   fill: var(--loading-throbber-fill) !important;
 }
+}
 
 /* hide the close button for pinned tabs. if the last visible tab is pinned, it
 doesn't hide the close button since the tab doesn't get shrunk in that case.

uc-variables.css

@@ -124,6 +124,7 @@ menupopup {
   --in-content-primary-button-background-hover: var(--purple-35) !important;
   --in-content-primary-button-background-active: var(--purple-30) !important;
   --in-content-primary-button-text-color: var(--light-on-dark-button-text-color) !important;
+  --in-content-primary-button-text-color-hover: var(--light-on-dark-button-text-color) !important;
 
   --menu-background-color: var(--arrowpanel-background) !important;
   --menu-color: var(--ui-text-80) !important;

userChrome.au.css

@@ -314,9 +314,11 @@ so of this stylesheet is dedicated to restoring pre-proton content. */
     fill: var(--warning-color);
   }
 
-  .tab-icon-image[sharing]:not([selected]),
-  .tab-sharing-icon-overlay {
-    animation: 3s linear uc-tab-sharing-icon-pulse infinite;
+  @media (prefers-reduced-motion: no-preference) {
+    .tab-icon-image[sharing]:not([selected]),
+    .tab-sharing-icon-overlay {
+      animation: 3s linear uc-tab-sharing-icon-pulse infinite;
+    }
   }
 
   /* without this, when hovering a tab, the sharing icon and tab icon will just