Adding upstream version 1:115.7.0.upstream/1%115.7.0upstream

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

20 files changed, 2438 insertions, 0 deletions

diff --git a/browser/themes/shared/preferences/android-menu.svg b/browser/themes/shared/preferences/android-menu.svg
new file mode 100644
index 0000000000..1084f264a8
--- /dev/null
+++ b/browser/themes/shared/preferences/android-menu.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path fill="context-fill" d="M14 6a2 2 0 11-4.001-.001A2 2 0 0114 6zm0 6a2 2 0 11-4.001-.001A2 2 0 0114 12zm-2 8a2 2 0 10-.001-4.001A2 2 0 0012 20z"/>
+</svg>
diff --git a/browser/themes/shared/preferences/category-general.svg b/browser/themes/shared/preferences/category-general.svg
new file mode 100644
index 0000000000..952164e863
--- /dev/null
+++ b/browser/themes/shared/preferences/category-general.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="m10.791 20-1.574 0a2.009 2.009 0 0 1-1.922-1.448l-.51-1.777a7.641 7.641 0 0 1-1.037-.604l-1.801.448a2.01 2.01 0 0 1-2.215-.94l-.787-1.364a2.012 2.012 0 0 1 .281-2.377l1.299-1.37A6.652 6.652 0 0 1 2.528 9.4L1.241 8.067a2.008 2.008 0 0 1-.293-2.389l.787-1.363a2.009 2.009 0 0 1 2.199-.945l1.84.442c.326-.225.664-.42 1.01-.586l.51-1.777A2.011 2.011 0 0 1 9.217 0l1.574 0c.879 0 1.668.589 1.918 1.432l.535 1.805c.334.162.663.354.981.574l1.84-.442a2.02 2.02 0 0 1 2.199.945l.787 1.363c.444.768.323 1.75-.293 2.389L17.472 9.4a6.606 6.606 0 0 1 .003 1.168l1.299 1.37a2.01 2.01 0 0 1 .281 2.376l-.787 1.363a2.005 2.005 0 0 1-2.215.94l-1.801-.448a7.558 7.558 0 0 1-1.009.593l-.535 1.805A2.01 2.01 0 0 1 10.791 20zm-5.066-5.37.637.132c.423.323.872.585 1.336.778l.432.485.606 2.112a.503.503 0 0 0 .481.362l1.574 0c.22 0 .417-.147.479-.358l.632-2.134.428-.478c.45-.19.89-.448 1.307-.768l.637-.132 2.141.533a.504.504 0 0 0 .554-.236l.787-1.363a.503.503 0 0 0-.07-.594l-1.537-1.621-.201-.608c.031-.241.052-.488.052-.74a5.94 5.94 0 0 0-.056-.771l.204-.617 1.531-1.587a.5.5 0 0 0 .073-.596l-.787-1.364a.503.503 0 0 0-.55-.236l-2.175.522-.627-.131a6.042 6.042 0 0 0-1.283-.75l-.427-.478-.632-2.133a.503.503 0 0 0-.48-.359l-1.574 0a.503.503 0 0 0-.481.362L8.13 3.974l-.433.485a5.972 5.972 0 0 0-1.31.759l-.628.133-2.175-.522a.504.504 0 0 0-.55.236l-.787 1.363a.503.503 0 0 0 .073.597l1.531 1.587.204.617A6.123 6.123 0 0 0 4 10c0 .252.021.499.051.742l-.2.608-1.537 1.621a.503.503 0 0 0-.07.594l.787 1.363a.503.503 0 0 0 .554.235l2.14-.533z"/>
+  <path d="M10 13.5c-1.93 0-3.5-1.57-3.5-3.5S8.07 6.5 10 6.5s3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5zM10 8c-1.103 0-2 .897-2 2s.897 2 2 2 2-.897 2-2-.897-2-2-2z"/>
+</svg>
diff --git a/browser/themes/shared/preferences/category-privacy-security.svg b/browser/themes/shared/preferences/category-privacy-security.svg
new file mode 100644
index 0000000000..deecf8702f
--- /dev/null
+++ b/browser/themes/shared/preferences/category-privacy-security.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M15.5 9 15 9l0-4A5 5 0 0 0 5 5l0 4-.5 0A2.5 2.5 0 0 0 2 11.5l0 6A2.5 2.5 0 0 0 4.5 20l11 0a2.5 2.5 0 0 0 2.5-2.5l0-6A2.5 2.5 0 0 0 15.5 9zm-9-4c0-1.93 1.57-3.5 3.5-3.5 1.93 0 3.5 1.57 3.5 3.5l0 4-7 0 0-4zm10 12.7-.8.8-11.4 0-.8-.8 0-6.4.8-.8 11.4 0 .8.8 0 6.4z"/>
+</svg>
diff --git a/browser/themes/shared/preferences/category-search.svg b/browser/themes/shared/preferences/category-search.svg
new file mode 100644
index 0000000000..942846b673
--- /dev/null
+++ b/browser/themes/shared/preferences/category-search.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M13.685 12.074A6.957 6.957 0 0 0 15 8c0-3.859-3.14-7-7-7S1 4.141 1 8s3.14 7 7 7a6.953 6.953 0 0 0 4.087-1.324l.524-.006 5.11 5.11a.748.748 0 0 0 1.06 0 .75.75 0 0 0 0-1.061l-5.106-5.107.01-.538zM8 13.5c-3.033 0-5.5-2.468-5.5-5.5S4.967 2.5 8 2.5s5.5 2.468 5.5 5.5-2.467 5.5-5.5 5.5z"/>
+</svg>
diff --git a/browser/themes/shared/preferences/category-sync.svg b/browser/themes/shared/preferences/category-sync.svg
new file mode 100644
index 0000000000..0af29ec1e1
--- /dev/null
+++ b/browser/themes/shared/preferences/category-sync.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="m10 2.675 0-2.174a.5.5 0 0 0-.852-.355L6.295 2.97l0 .926 2.853 2.825A.5.5 0 0 0 10 6.366l0-2.191a5.823 5.823 0 0 1 4.434 9.602.75.75 0 0 0 1.141.974 7.327 7.327 0 0 0 1.749-4.75c.001-4.04-3.285-7.326-7.324-7.326z"/>
+  <path d="m10 13.634 0 2.191A5.831 5.831 0 0 1 4.175 10c0-1.372.486-2.704 1.369-3.751a.75.75 0 0 0-1.147-.967A7.328 7.328 0 0 0 2.675 10c0 4.039 3.286 7.325 7.325 7.325l0 2.174a.5.5 0 0 0 .852.355l2.853-2.825 0-.926-2.853-2.824a.5.5 0 0 0-.852.355z"/>
+</svg>
diff --git a/browser/themes/shared/preferences/containers-dialog.css b/browser/themes/shared/preferences/containers-dialog.css
new file mode 100644
index 0000000000..36e8dfd8f2
--- /dev/null
+++ b/browser/themes/shared/preferences/containers-dialog.css
@@ -0,0 +1,50 @@
+/* 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/. */
+
+@import url("chrome://browser/content/usercontext/usercontext.css");
+
+#name {
+  flex: 1;
+}
+
+.radio-buttons {
+  flex-direction: row;
+  margin-inline-start: 0.35rem;
+}
+
+.radio-buttons > radio {
+  user-select: none;
+  outline: 2px solid transparent;
+  outline-offset: 4px;
+  min-block-size: 24px;
+  min-inline-size: 24px;
+  border-radius: 50%;
+  padding: 2px;
+  margin: 9px;
+}
+
+.icon-buttons > radio > .userContext-icon {
+  fill: var(--in-content-text-color);
+}
+
+.radio-buttons > radio {
+  padding-inline-start: 2px;
+}
+
+radio > .userContext-icon {
+  inline-size: 22px;
+  block-size: 22px;
+}
+
+.radio-buttons > radio[selected=true] {
+  outline-color: var(--in-content-text-color);
+}
+
+.radio-buttons > radio[focused=true] {
+  outline-color: var(--in-content-accent-color);
+}
+
+.radio-buttons > radio:hover:active {
+  outline-color: var(--in-content-accent-color-active);
+}
diff --git a/browser/themes/shared/preferences/containers.css b/browser/themes/shared/preferences/containers.css
new file mode 100644
index 0000000000..8528bf7948
--- /dev/null
+++ b/browser/themes/shared/preferences/containers.css
@@ -0,0 +1,54 @@
+/* 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/. */
+
+@import url("chrome://browser/content/usercontext/usercontext.css");
+
+#category-containers {
+  display: none;
+}
+
+.container-header-links {
+  margin-block-end: 15px;
+}
+
+[data-identity-icon] {
+  margin: 0;
+  margin-inline-end: 16px;
+}
+
+#containersView {
+  border: 0;
+  background: transparent;
+  margin-block-end: 8px;
+}
+
+#containersView richlistitem {
+  padding-block: 4px;
+  border-block-end: 1px solid var(--in-content-border-color);
+}
+
+#containersView richlistitem > .container-buttons {
+  margin-inline-end: 4px;
+}
+
+/* Crop the label at the end using CSS. This isn't using XUL crop
+ * and a value attribute because those labels cannot be highlighted
+ * by the prefs' find-in-page feature.
+ */
+.userContext-label-inprefs {
+  display: flex;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.userContext-icon-inprefs {
+  margin-inline: 4px 10px;
+  width: 24px;
+  height: 24px;
+}
+
+#containersView richlistitem:last-of-type {
+  border-block-end: 0;
+}
diff --git a/browser/themes/shared/preferences/dialog.css b/browser/themes/shared/preferences/dialog.css
new file mode 100644
index 0000000000..92704439bc
--- /dev/null
+++ b/browser/themes/shared/preferences/dialog.css
@@ -0,0 +1,42 @@
+/* - 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/. */
+
+window,
+dialog {
+  appearance: none;
+  background-color: var(--in-content-page-background);
+  color: var(--in-content-page-color);
+  margin: 0;
+  padding: 0;
+}
+
+/* Add some padding around the contents of the dialog */
+dialog {
+  padding: 6px;
+}
+
+.contentPane,
+dialog::part(content-box) {
+  flex: 1;
+  /* This allows the focus ring to display fully when scrolling is enabled. */
+  padding: 4px;
+}
+
+.contentPane.doScroll,
+dialog.doScroll::part(content-box) {
+  overflow-y: auto;
+  contain: size;
+}
+
+tree:not(#rejectsTree) {
+  min-height: 15em;
+}
+
+.actionButtons {
+  margin: 3px 0 0;
+}
+
+menulist label {
+  font-weight: unset;
+}
diff --git a/browser/themes/shared/preferences/fxaPairDevice.css b/browser/themes/shared/preferences/fxaPairDevice.css
new file mode 100644
index 0000000000..51183b84c7
--- /dev/null
+++ b/browser/themes/shared/preferences/fxaPairDevice.css
@@ -0,0 +1,122 @@
+/* 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/. */
+
+#fxaPairDeviceDialog {
+  padding-bottom: 2em;
+}
+
+#pairTitle {
+  font-size: 2.1rem;
+  font-weight: bold;
+  padding-top: 12px;
+  text-align: center;
+}
+
+.pairHeading {
+  font-size: 1.08em;
+}
+
+.menu-icon {
+  width: 20px;
+  height: 20px;
+  vertical-align: middle;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+#qrCodeDisplay {
+  width: 450px;
+  margin: auto;
+}
+
+#qrWrapper {
+  position: relative;
+  width: 200px;
+  height: 200px;
+  margin: auto;
+  margin-top: 28px;
+}
+
+#qrContainer {
+  height: 200px;
+  width: 200px;
+  background-size: contain;
+  image-rendering: -moz-crisp-edges;
+  transition: filter 250ms cubic-bezier(.07,.95,0,1);
+}
+
+#qrWrapper:not([pairing-status="ready"]) #qrContainer {
+  opacity: 0.05;
+  filter: blur(3px);
+}
+
+#qrWrapper:not([pairing-status="loading"]) #qrSpinner {
+  opacity: 0;
+}
+
+#qrSpinner {
+  display: block;
+  position: absolute;
+  height: 250px;
+  width: 250px;
+}
+
+#qrSpinner::before {
+  background-image: url("chrome://browser/skin/fxa/fxa-spinner.svg");
+  animation: 0.9s spin infinite linear;
+  background-size: 36px;
+  background-repeat: no-repeat;
+  background-position: center;
+  display: block;
+  position: absolute;
+  height: 200px;
+  width: 200px;
+  content: "";
+  transition: opacity 250ms cubic-bezier(.07,.95,0,1);
+  will-change: transform;
+  margin-inline: auto;
+}
+
+#qrWrapper:not([pairing-status="error"]) #qrError {
+  display: none;
+}
+
+#qrError {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  width: 200px; /* Same as #qrContainer */
+  position: absolute;
+  inset: 0;
+  margin-inline: auto;
+  transition: opacity 250ms cubic-bezier(.07,.95,0,1);
+  cursor: pointer;
+}
+
+.qr-error-text {
+  text-align: center;
+  user-select: none;
+  display: block;
+  color: #2484C6;
+  cursor: pointer;
+}
+
+#refresh-qr {
+  width: 36px;
+  height: 36px;
+  background-image: url("chrome://global/skin/icons/reload.svg");
+  background-size: contain;
+  -moz-context-properties: fill;
+  fill: #2484C6;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/browser/themes/shared/preferences/ios-menu.svg b/browser/themes/shared/preferences/ios-menu.svg
new file mode 100644
index 0000000000..15183a814d
--- /dev/null
+++ b/browser/themes/shared/preferences/ios-menu.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path fill="context-fill" d="M5 5h14a1 1 0 100-2H5a1 1 0 100 2M19 11H5a1 1 0 100 2h14a1 1 0 100-2M19 19H5a1 1 0 100 2h14a1 1 0 100-2"/>
+</svg>
diff --git a/browser/themes/shared/preferences/mozilla-logo.svg b/browser/themes/shared/preferences/mozilla-logo.svg
new file mode 100644
index 0000000000..af66da5135
--- /dev/null
+++ b/browser/themes/shared/preferences/mozilla-logo.svg
@@ -0,0 +1,5 @@
+<!-- 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/. -->
+<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"><path fill="context-fill" fill-rule="evenodd" d="M0 .5h20v20H0z
+M17.702 13.46h1.256v2.04h-3.96v-5.476c0-1.72-.548-2.365-1.61-2.365-1.289 0-1.804.977-1.804 2.325v3.438h1.255v2.042H8.884V10.02c0-1.719-.547-2.365-1.61-2.365-1.289 0-2.01.977-2.01 2.325v3.438h2.002v2.046H1.474v-2.04H2.66V8.108H1.417v-2.43h3.578v1.535A3.873 3.873 0 0 1 8.3 5.505a3.03 3.03 0 0 1 3.058 2.123 3.14 3.14 0 0 1 3.06-2.123 3.123 3.123 0 0 1 3.252 3.404v4.551h.032z"/></svg>
diff --git a/browser/themes/shared/preferences/no-search-bar.svg b/browser/themes/shared/preferences/no-search-bar.svg
new file mode 100644
index 0000000000..b5c17b5f26
--- /dev/null
+++ b/browser/themes/shared/preferences/no-search-bar.svg
@@ -0,0 +1,20 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="631" height="36">
+  <style>
+    .addressBarOutline {
+      stroke: context-stroke;
+      stroke-linejoin: round;
+      stroke-width: 1px
+    }
+    .addressBarIcons {
+      fill: context-stroke;
+      fill-rule: evenodd;
+    }
+  </style>
+  <rect width="630" height="35" x=".5" y=".5" fill="context-fill" class="addressBarOutline" rx="4" ry="4"/>
+  <rect width="434" height="23" x="110.5" y="6.5" fill="rgba(255,255,255,0.05)" class="addressBarOutline" rx="4" ry="4"/>
+  <path d="M604 .5h-.5V.5zM126.41 22l-3.09-3.085a3.881 3.881 0 0 0-.64-5.2 3.855 3.855 0 0 0-5.4 5.462 3.958 3.958 0 0 0 5.21.643l3.08 3.085a.622.622 0 0 0 .9 0 .677.677 0 0 0-.06-.9zm-6.23-2.764a2.571 2.571 0 1 1 2.57-2.57 2.652 2.652 0 0 1-2.57 2.574zm500.57-1.986h-7.5a.75.75 0 0 0 0 1.5h7.5a.75.75 0 0 0 0-1.5m0 3.75h-7.5a.75.75 0 0 0 0 1.5h7.5a.75.75 0 0 0 0-1.5m0-7.5h-7.5a.75.75 0 0 0 0 1.5h7.5a.75.75 0 0 0 0-1.5m-34.98 0a.75.75 0 0 0-.52 1.28l3.18 3.22-3.18 3.22a.746.746 0 1 0 1.05 1.06l3.7-3.75a.774.774 0 0 0 0-1.06l-3.7-3.75a.754.754 0 0 0-.53-.22m4.44 0a.715.715 0 0 0-.52.22.754.754 0 0 0 0 1.06l3.17 3.22-3.17 3.22a.754.754 0 0 0 0 1.06.715.715 0 0 0 .52.22.754.754 0 0 0 .53-.22l3.69-3.75a.754.754 0 0 0 0-1.06l-3.69-3.75a.754.754 0 0 0-.53-.22m-22.84 2.25h1.5a.375.375 0 1 0 0-.75h-1.5a.375.375 0 0 0 0 .75zm2.63-3h-9a1.5 1.5 0 0 0-1.5 1.5v7.5a1.5 1.5 0 0 0 1.5 1.5h9a1.5 1.5 0 0 0 1.5-1.5v-7.5a1.5 1.5 0 0 0-1.5-1.5zm-4.5 9H561v-7.5h4.5v7.5zm4.5 0h-3.75v-7.5H570v7.5zm-2.63-4.5h1.5a.375.375 0 1 0 0-.75h-1.5a.375.375 0 0 0 0 .75zm0 1.5h.75a.375.375 0 1 0 0-.75h-.75a.375.375 0 0 0 0 .75zm-477.54 2.5a.375.375 0 1 1 .37-.375.356.356 0 0 1-.37.375m-2.6 1.5a.7.7 0 0 1-.742-.75v-4.95l2.961-3 2.97 3V22a.706.706 0 0 1-.74.75h-.74V19a.706.706 0 0 0-.74-.75h-1.49a.706.706 0 0 0-.74.75v3.75h-.739m2.219-10.5a.7.7 0 0 0-.51.225l-5.193 5.25a.738.738 0 1 0 1.037 1.05l.223-.225v4.2a1.5 1.5 0 0 0 1.482 1.5h5.931a1.491 1.491 0 0 0 1.48-1.5v-4.2l.22.225a.678.678 0 0 0 .52.225.663.663 0 0 0 .52-.225.725.725 0 0 0 0-1.05l-5.19-5.25a.709.709 0 0 0-.52-.225M70.375 13a.749.749 0 0 0-.75.75v1.808a5.245 5.245 0 1 0-.788 6.4.75.75 0 0 0-1.061-1.061 3.755 3.755 0 1 1 .776-4.151h-1.927a.75.75 0 0 0 0 1.5h3.75a.749.749 0 0 0 .75-.75v-3.75a.749.749 0 0 0-.75-.75m-34.158 4.296h8.649l-3.206-3.2a.738.738 0 0 1 1.044-1.043l4.474 4.47a.72.72 0 0 1 0 1.043l-4.474 4.47a.72.72 0 0 1-1.044 0 .72.72 0 0 1 0-1.043l3.206-3.2h-8.649a.749.749 0 1 1 0-1.497z" class="addressBarIcons"/>
+  <path d="M23.783 17.292h-8.649l3.206-3.2a.738.738 0 0 0-1.044-1.043l-4.474 4.47a.72.72 0 0 0 0 1.043l4.474 4.47a.72.72 0 0 0 1.044 0 .72.72 0 0 0 0-1.043l-3.206-3.2h8.649a.749.749 0 1 0 0-1.497z" class="addressBarIcons"/>
+</svg>
diff --git a/browser/themes/shared/preferences/preferences.css b/browser/themes/shared/preferences/preferences.css
new file mode 100644
index 0000000000..668fa2ee4f
--- /dev/null
+++ b/browser/themes/shared/preferences/preferences.css
@@ -0,0 +1,1548 @@
+/* - 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/. */
+
+@namespace html "http://www.w3.org/1999/xhtml";
+
+/* Global rules */
+:root {
+  user-select: text;
+}
+
+#preferences-root {
+  text-rendering: optimizeLegibility;
+}
+
+@media not print {
+  #preferences-root,
+  #preferences-body {
+    height: 100%;
+    overflow: hidden;
+  }
+}
+
+#preferences-root,
+#preferences-body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+
+#preferences-body {
+  vertical-align: top; /* See bug 1606130 */
+  display: flex;
+  flex-direction: column;
+
+  --main-pane-width: 664px;
+}
+
+/*
+  The stack has some very tall content but it shouldn't be taller than the
+  viewport (and we know the tall content will still be accessible via scrollbars
+  regardless if the stack has a shorter height). So we use min-height: 0 to allow
+  the stack to be smaller than its content height so it can fit the viewport size.
+*/
+#preferences-stack {
+  min-height: 0;
+}
+
+.main-content {
+  padding-top: 0;
+  /* the 32px min-height, plus 20+30px margin below, plus some leeway: */
+  scroll-padding-top: 90px;
+  contain: inline-size;
+}
+
+.pane-container {
+  /* A workaround to keep the container always float on the `top: 0` (Bug 1377009) */
+  display: block;
+  width: min(100%, var(--main-pane-width));
+  min-width: min-content;
+}
+
+#mainPrefPane {
+  width: 100%;
+  padding: 0;
+}
+
+groupbox[data-category] {
+  margin: 0 0 32px;
+}
+
+html|h1 {
+  margin: 0 0 8px;
+  font-size: 1.46em;
+  font-weight: 300;
+  line-height: 1.3em;
+}
+
+html|h2 {
+  margin: 16px 0 4px;
+  font-size: 1.14em;
+  line-height: normal;
+}
+
+description.indent,
+.indent:not(#browserPrivateEngineSelection) > description {
+  color: var(--text-color-deemphasized);
+}
+
+button,
+treecol,
+menulist,
+html|select {
+  /* override the root rule */
+  user-select: none;
+}
+
+/* Buttons get a default min-width in XUL. When they also have flex, they will
+ * be large enough anyway, and we don't want them to become smaller than their inner
+ * text which would then overflow the button. Set min-width back to auto for that:
+ */
+button[flex] {
+  min-width: auto;
+}
+
+description,
+label {
+  line-height: 1.8em;
+  margin: 0;
+}
+
+.tip-caption {
+  font-size: .9em;
+  color: var(--text-color-deemphasized);
+}
+
+menulist::part(label),
+menuitem > label,
+button > hbox > label {
+  line-height: unset;
+}
+
+.indent {
+  /* This should match the checkboxes/radiobuttons' width and inline margin,
+     such that when we have a toggle with a label followed by another element
+     with this class, the other element's text aligns with the toggle label. */
+  margin-inline-start: 22px !important;
+}
+
+checkbox {
+  margin-inline: 0;
+}
+
+.tail-with-learn-more {
+  margin-inline: 0 10px;
+}
+
+/* Add a bit of space to the end of descriptions to
+ * leave margin with e.g. additional buttons on the side. */
+.description-with-side-element {
+  margin-inline-end: 10px !important;
+}
+
+.learnMore {
+  margin-inline-start: 0;
+  font-weight: normal;
+  white-space: nowrap;
+}
+
+.accessory-button {
+  min-width: 150px;
+  margin: 4px 0;
+}
+
+.spotlight {
+  background-color: color-mix(in srgb, var(--in-content-accent-color) 15%, transparent);
+  outline: var(--in-content-accent-color) 1px dotted;
+  animation: fade-out 0.5s ease-out 2s forwards;
+  /* Show the border to spotlight the components in high-contrast mode. */
+  border: 1px solid transparent;
+  border-radius: 2px;
+}
+
+@keyframes fade-out {
+  100% {
+    background-color: transparent;
+    outline-color: transparent;
+  }
+}
+
+[data-subcategory] {
+  margin-inline: -4px;
+  padding-inline: 4px;
+}
+
+.ac-site-icon {
+  display: flex;
+}
+
+/* Subcategory title */
+
+/**
+ * The first subcategory title for each category should not have margin-top.
+ */
+
+.subcategory:not([hidden]) ~ .subcategory {
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid var(--in-content-border-color);
+}
+
+/* Category List */
+
+#categories {
+  overflow: visible;
+  min-height: auto;
+  padding: 1px; /* Adding padding around richlistitem in order to make entire keyboard focusing outline visible */
+}
+
+#category-general > .category-icon {
+  list-style-image: url("chrome://browser/skin/preferences/category-general.svg");
+}
+
+#category-home > .category-icon {
+  list-style-image: url("chrome://browser/skin/home.svg");
+}
+
+#category-search > .category-icon {
+  list-style-image: url("chrome://browser/skin/preferences/category-search.svg");
+}
+
+#category-privacy > .category-icon {
+  list-style-image: url("chrome://browser/skin/preferences/category-privacy-security.svg");
+}
+
+#category-sync > .category-icon {
+  list-style-image: url("chrome://browser/skin/preferences/category-sync.svg");
+}
+
+#category-experimental > .category-icon {
+  list-style-image: url("chrome://global/skin/icons/experiments.svg");
+}
+
+#category-more-from-mozilla > .category-icon {
+  list-style-image: url("chrome://browser/skin/preferences/mozilla-logo.svg");
+}
+
+/* All panes */
+
+.info-icon,
+.androidIcon,
+.iOSIcon {
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+/* General Pane */
+
+.is-default > #isNotDefaultPane,
+:not(.is-default) > #isDefaultPane {
+  visibility: hidden;
+}
+
+#isDefaultLabel,
+#isNotDefaultLabel {
+  font-weight: 600;
+}
+
+@supports not -moz-bool-pref("browser.migrate.preferences-entrypoint.enabled") {
+  #dataMigrationGroup {
+    display: none;
+  }
+}
+
+#dataMigration {
+  /* This should really be using baseline, but that doesn't work properly with
+   * the <description> and XUL <button> markup. */
+  align-items: center;
+}
+
+#browserContainersExtensionContent {
+  padding-block: 5px;
+}
+
+.extension-controlled {
+  margin-block: 18px;
+}
+
+.extension-controlled-icon {
+  height: 20px;
+  margin: 2px 0 6px;
+  vertical-align: middle;
+  width: 20px;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+.extension-controlled-disabled {
+  -moz-context-properties: fill;
+  color: GrayText;
+  fill: currentColor;
+}
+
+.extension-controlled-disabled > .extension-controlled-button {
+  display: none;
+}
+
+.extension-controlled-icon.close-icon {
+  height: 30px;
+  width: 30px;
+  margin-inline-start: 5px;
+}
+
+#getStarted {
+  font-size: 90%;
+}
+
+#colors {
+  margin-inline-start: 5px;
+}
+
+#FontsDialog menulist:empty {
+  /* When there's no menupopup, while the font builder is running,
+   * the height of the menulist would otherwise shrink. This throws
+   * off the height determination SubDialog.sys.mjs does, which then
+   * leads to content being cut off. Fix by enforcing a minimum height
+   * when there's no content: */
+  min-height: max(32px, calc(1.4em + 16px));
+}
+
+#useDocumentColors {
+  margin: 4px 0;
+}
+
+#translationAttributionImage {
+  width: 70px;
+  cursor: pointer;
+}
+
+#activeLanguages > richlistitem {
+  padding: 0.3em;
+}
+
+#saveWhere {
+  align-items: center;
+}
+
+#saveTo {
+  margin-inline-end: 1em;
+}
+
+#downloadFolder {
+  flex: 1;
+  margin-block: 4px;
+  margin-inline-start: 0;
+  padding-inline-start: 30px;
+  background-repeat: no-repeat;
+  background-size: 16px;
+  background-position: center left 8px;
+}
+
+#downloadFolder:-moz-locale-dir(rtl) {
+  background-position-x: right 8px;
+}
+
+#updateBox {
+  margin-block: 4px 32px;
+}
+
+/* Work around bug 560067 - animated images in visibility: hidden
+ * still eat CPU. */
+#updateDeck > *:not(.deck-selected) > .update-throbber {
+  display: none;
+}
+
+#updateDeck > hbox > button {
+  margin-block: 0;
+  margin-inline-end: 0;
+}
+
+#updateDeck > hbox > label {
+  flex: 1;
+}
+
+.manualLink {
+  margin-inline-start: 6px !important;
+}
+
+#updateRadioGroup > radio {
+  min-height: 30px;
+  margin: 2px 0;
+}
+
+#filter {
+  margin: 4px 0 8px;
+}
+
+#handlersView {
+  height: 25em;
+  margin-inline-end: 0;
+}
+
+#handlersView > richlistitem {
+  min-height: 30px;
+}
+
+#handlersView .actionsMenu {
+  margin: 0;
+  min-height: 0;
+  padding: 0;
+  border: none;
+  padding-inline-end: 8px;
+}
+
+#handlersView .actionsMenu::part(label) {
+  margin: 0;
+}
+
+.typeIcon,
+.actionIcon,
+.actionsMenu::part(icon) {
+  height: 16px;
+  width: 16px;
+}
+
+.typeIcon {
+  margin-inline: 10px 9px !important;
+}
+
+#handlersView .actionsMenu::part(icon),
+.actionIcon {
+  margin-inline: 11px 8px !important;
+}
+
+.actionsMenu > menupopup > menuitem {
+  padding-inline-start: 10px !important;
+}
+
+.actionsMenu > menupopup > menuitem > .menu-iconic-left {
+  margin-inline-end: 8px !important;
+}
+
+/* Increase the specifity to override common.inc.css */
+richlistitem[selected] .actionsMenu:focus-visible {
+  outline-offset: -3px;
+}
+
+/* Home Pane */
+
+#homepageGroup menulist,
+#homepageGroup html|input {
+  margin: 5px 0;
+}
+
+#homepageGroup html|input {
+  text-align: match-parent;
+}
+
+#homepageGroup:-moz-locale-dir(rtl) html|input {
+  unicode-bidi: plaintext;
+}
+
+#homepageAndNewWindowsOption {
+  margin-top: 20px;
+}
+
+#homepageGroup:-moz-locale-dir(rtl) panel[type="autocomplete-richlistbox"] {
+  direction: rtl;
+}
+
+.homepage-buttons > .homepage-button {
+  flex: 1 auto;
+}
+
+.homepage-button:first-of-type {
+  margin-inline-start: 0;
+}
+
+.homepage-button:last-of-type {
+  margin-inline-end: 0;
+}
+
+#homeContentsGroup .checkbox-icon[src] {
+  -moz-context-properties: fill;
+  fill: currentColor;
+  margin-inline: 2px 8px;
+  width: 16px;
+}
+
+#homeContentsGroup [data-subcategory] {
+  margin-top: 14px;
+}
+
+#homeContentsGroup [data-subcategory] .section-checkbox {
+  font-weight: 600;
+}
+
+#homeContentsGroup [data-subcategory] > vbox menulist {
+  margin-block: 0;
+}
+
+.addon-with-favicon .menu-iconic-icon {
+  margin-inline-start: 0;
+}
+
+a[is="moz-support-link"]:not(.sidebar-footer-link) {
+  display: inline-block;
+  white-space: initial;
+}
+
+/* Search Pane */
+
+#engineList {
+  margin: 2px 0 5px;
+}
+
+#engineList > treechildren::-moz-tree-image(engineShown, checked),
+#blocklistsTree > treechildren::-moz-tree-image(selectionCol, checked) {
+  list-style-image: url("chrome://global/skin/icons/check.svg");
+  -moz-context-properties: fill, stroke;
+  fill: var(--in-content-accent-color);
+}
+
+#engineList > treechildren::-moz-tree-image(engineShown, checked, selected),
+#blocklistsTree > treechildren::-moz-tree-image(selectionCol, checked, selected) {
+  fill: var(--in-content-item-selected-text);
+  stroke: var(--in-content-item-selected);
+}
+
+@media (prefers-contrast) {
+  #engineList > treechildren::-moz-tree-image(hover),
+  #blocklistsTree > treechildren::-moz-tree-image(hover) {
+    fill: var(--in-content-item-hover-text);
+    stroke: var(--in-content-item-hover);
+  }
+}
+
+#engineList > treechildren::-moz-tree-row,
+#blocklistsTree > treechildren::-moz-tree-row {
+  min-height: 36px;
+}
+
+#selectionCol {
+  min-width: 26px;
+}
+
+#addEnginesBox {
+  margin: 4px 0 0;
+}
+
+/* Privacy Pane */
+
+#allowSmartSize {
+  margin-block: 0 4px;
+}
+
+#doNotTrackLearnMoreBox {
+  margin-top: 32px;
+}
+
+#historyPane {
+  margin-top: 4px;
+}
+
+#historyButtons {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+#blockCookies,
+#keepRow {
+  margin-top: 1.5em;
+}
+
+/* Collapse the non-active vboxes in decks to use only the height the
+   active vbox needs */
+#historyPane:not([selectedIndex="1"]) > #historyDontRememberPane,
+#historyPane:not([selectedIndex="2"]) > #historyCustomPane,
+#weavePrefsDeck:not([selectedIndex="1"]) > #hasFxaAccount,
+#fxaLoginStatus:not([selectedIndex="1"]) > #fxaLoginUnverified,
+#fxaLoginStatus:not([selectedIndex="2"]) > #fxaLoginRejected,
+#syncStatus:not([selectedIndex="1"]) > #syncConfigured {
+  visibility: collapse;
+}
+
+#tabsElement {
+  margin-inline-end: 4px; /* add the 4px end-margin of other elements */
+}
+
+.text-link {
+  margin-bottom: 0;
+}
+
+.text-link[disabled="true"] {
+  pointer-events: none;
+}
+
+#showUpdateHistory {
+  margin-inline-start: 0;
+}
+
+@media (-moz-platform: windows-win7),
+       (-moz-platform: windows-win8) {
+  #windows-sso,
+  #windows-sso-caption {
+    display: none;
+  }
+}
+
+/**
+ * Dialog
+ */
+
+.dialogOverlay {
+  visibility: hidden;
+}
+
+html|dialog {
+  padding: 24px;
+}
+
+html|dialog::backdrop,
+.dialogOverlay[topmost="true"] {
+  background-color: rgba(0,0,0,0.5);
+}
+
+html|dialog,
+.dialogBox {
+  border: 1px solid transparent;
+  border-radius: 8px;
+  box-shadow: 0 2px 6px 0 rgba(0,0,0,0.3);
+}
+
+.dialogBox {
+  background-color: var(--in-content-page-background);
+  background-clip: content-box;
+  color: var(--in-content-page-color);
+  /* `transparent` will use the dialogText color in high-contrast themes and
+     when page colors are disabled */
+  display: flex;
+  margin: 0;
+  padding: 0;
+  overflow-x: auto;
+}
+
+@media (prefers-color-scheme: dark) {
+  @media not (prefers-contrast) {
+    html|dialog,
+    .dialogBox {
+      --in-content-page-background: #42414d;
+    }
+  }
+}
+
+.dialogBox[resizable="true"] {
+  resize: both;
+  overflow: hidden;
+  min-height: 20em;
+  min-width: 66ch;
+}
+
+.dialogTitleBar {
+  padding: .4em .2em;
+  border-bottom: 1px solid var(--in-content-border-color);
+}
+
+.dialogTitle {
+  font-weight: 600;
+  text-align: center;
+  user-select: none;
+}
+
+.fxaPairDeviceIcon {
+  background-image: url("chrome://browser/content/logos/fxa-logo.svg");
+  background-position: center center;
+  background-repeat: no-repeat;
+  position: relative;
+  height: 80px;
+  padding-top: 42px;
+  margin-top: -40px;
+}
+
+.fxaPairDeviceIcon .close-icon {
+  margin-top: 10px;
+}
+
+.close-icon {
+  border: none;
+  background-color: transparent; /* override common.css, but keep hover/active states */
+  min-width: 0;
+  min-height: auto;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  margin-inline: 0 8px;
+}
+
+.dialogFrame {
+  margin: 10px;
+  flex: 1;
+  /* Default dialog dimensions */
+  min-width: 66ch;
+}
+
+/**
+ * End Dialog
+ */
+
+/**
+ * Font group and font dialog menulist fixes
+ */
+
+#font-chooser-group {
+  display: grid;
+  grid-template-columns: max-content 1fr max-content max-content;
+}
+
+#defaultFont {
+  flex: 1 25ch;
+}
+
+#defaultFontType,
+#serif,
+#sans-serif,
+#monospace {
+  width: 0; /* Might be able to be removed */
+  min-width: 30ch;
+}
+
+/**
+ * Sync
+ */
+
+.fxaProfileImage {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  border: 1px solid transparent;
+  list-style-image: url(chrome://browser/skin/fxa/avatar-color.svg);
+  margin-inline-end: 24px;
+  -moz-user-focus: normal;
+}
+
+.fxaProfileImage.actionable {
+  cursor: pointer;
+}
+
+.fxaProfileImage.actionable:hover {
+  border-color: #0095DD;
+}
+
+.fxaProfileImage.actionable:hover:active {
+  border-color: #ff9500;
+}
+
+#useFirefoxSync {
+  font-size: 90%;
+  margin-inline-end: 8px !important;
+}
+
+#fxaNoLoginStatus {
+  margin-block: 46px 64px;
+}
+
+#fxaSyncComputerName {
+  flex: 1;
+  margin-block: 4px;
+  margin-inline-start: 0;
+}
+
+#fxaChangeDeviceName {
+  margin-block: 4px;
+  margin-inline-end: 0;
+}
+
+#noFxaAccount {
+  line-height: 1.2em;
+}
+
+#noFxaAccount > label:first-child {
+  margin-bottom: 0.6em;
+}
+
+#noFxaCaption {
+  line-height: 30px;
+  margin-block: 0 4px;
+}
+
+#noFxaSignIn {
+  margin-inline-start: 8px;
+}
+
+.fxaSyncIllustration {
+  list-style-image: url(chrome://browser/skin/fxa/sync-devices.svg);
+  width: 312px;
+  height: 136px;
+}
+
+#noFxaDescription {
+  padding-inline-end: 52px;
+}
+
+.separator {
+  border-bottom: 1px solid var(--in-content-box-border-color);
+}
+
+#fxaGroup {
+  margin-bottom: 32px;
+}
+
+.openLink {
+  line-height: 30px;
+  cursor: pointer;
+}
+
+.openLink:visited {
+  color: var(--in-content-link-color);
+}
+
+#fxaDisplayName {
+  margin-inline-end: 10px !important;
+}
+
+.fxaLoginRejectedWarning {
+  list-style-image: url(chrome://global/skin/icons/warning.svg);
+  -moz-context-properties: fill;
+  fill: #FFBF00;
+  margin-inline: 4px 8px;
+}
+
+#syncStatus {
+  margin-top: 32px;
+}
+
+.sync-group {
+  margin-block: 16px;
+  border: 1px solid var(--in-content-border-color);
+}
+
+.sync-configured {
+  display: block;
+}
+
+.sync-choose-dialog-description {
+  margin-block-end: 10px;
+}
+
+.sync-engines-list > div,
+.sync-engines-list + hbox {
+  margin-top: 0;
+  padding-top: 16px;
+  max-width: 300px;
+  height: auto;
+}
+
+dialog > .sync-engines-list > div,
+dialog > .sync-engines-list + hbox {
+  padding-top: 0;
+}
+
+.sync-engines-list checkbox .checkbox-icon,
+.sync-engine-image {
+  margin-inline: 2px 8px;
+  width: 16px;
+  height: 16px;
+  -moz-context-properties: fill;
+  fill: currentColor;
+  align-self: center;
+}
+
+.sync-engines-list checkbox {
+  min-width: max-content;
+  max-width: calc(50vw - 10px);
+}
+
+.sync-engines-list .checkbox-label-box {
+  align-items: center;
+}
+
+.sync-engines-list {
+  column-count: 2;
+  column-fill: balance;
+  margin-block-end: 10px;
+}
+
+.sync-engines-list > div:not([hidden]) {
+  display: flex;
+  break-inside: avoid;
+}
+
+.sync-engine-bookmarks .checkbox-icon,
+.sync-engine-bookmarks.sync-engine-image {
+  list-style-image: url("chrome://browser/skin/bookmark.svg");
+}
+
+.sync-engine-history .checkbox-icon,
+.sync-engine-history.sync-engine-image {
+  list-style-image: url("chrome://browser/skin/history.svg");
+}
+
+.sync-engine-tabs .checkbox-icon,
+.sync-engine-tabs.sync-engine-image {
+  list-style-image: url("chrome://browser/skin/synced-tabs.svg");
+}
+
+.sync-engine-passwords .checkbox-icon,
+.sync-engine-passwords.sync-engine-image {
+  list-style-image: url("chrome://browser/skin/login.svg");
+}
+
+.sync-engine-addons .checkbox-icon,
+.sync-engine-addons.sync-engine-image {
+  list-style-image: url("chrome://mozapps/skin/extensions/extension.svg");
+}
+
+.sync-engine-prefs .checkbox-icon,
+.sync-engine-prefs.sync-engine-image {
+  list-style-image: url("chrome://global/skin/icons/settings.svg");
+}
+
+.sync-engine-addresses .checkbox-icon,
+.sync-engine-addresses.sync-engine-image {
+  list-style-image: url("chrome://formautofill/content/formfill-anchor.svg");
+}
+
+.sync-engine-creditcards .checkbox-icon,
+.sync-engine-creditcards.sync-engine-image {
+  list-style-image: url("chrome://formautofill/content/icon-credit-card-generic.svg");
+}
+
+.fxaMobilePromo {
+  margin-top: 2px !important;
+}
+
+.androidIcon,
+.iOSIcon {
+  margin-inline: 2px 4px;
+  width: 20px;
+  height: 20px;
+  vertical-align: text-bottom;
+}
+
+#updateDeck > hbox > label {
+  margin-inline-end: 5px ! important;
+}
+
+.update-throbber {
+  width: 16px;
+  min-height: 16px;
+  margin-block: 7px;
+  margin-inline-end: 8px;
+  vertical-align: middle;
+}
+
+.update-throbber {
+  content: image-set(url("chrome://global/skin/icons/loading.png"), url("chrome://global/skin/icons/loading@2x.png") 2x);
+}
+
+.navigation {
+  overflow-x: hidden;
+  overflow-y: auto;
+  position: relative;
+}
+
+@media (prefers-reduced-motion) {
+  /* Setting border-inline-end on .navigation makes it a focusable element */
+  .navigation::after {
+    content: "";
+    width: 1px;
+    height: 100%;
+    background-color: var(--in-content-border-color);
+    top: 0;
+    inset-inline-end: 0;
+    position: absolute;
+  }
+}
+
+.face-sad::before {
+  content: "\01F641";
+  font-size: 1.3em;
+  margin-inline-end: 8px;
+}
+
+.face-smile::before {
+  content: "\01F600";
+  font-size: 1.3em;
+  margin-inline-end: 8px;
+}
+
+#policies-container,
+#searchInput {
+  min-height: 32px;
+  margin: 20px 0 30px;
+}
+
+#policies-container {
+  margin-inline-end: 16px;
+  /* Make sure the container is at least the same height as the searchbox.
+     This is needed in addition to the min-height above to make the info icon
+     the same height as the first line in the policies label.
+     Searchbox's height - line-height - border top and bottom */
+  padding-block: max(0px, calc((32px - 1.8em - 2px) / 2));
+}
+
+.info-box-container {
+  background-color: var(--in-content-box-info-background);
+  padding: 9px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+}
+
+.info-box-container.smaller-font-size {
+  font-size: 85%;
+}
+
+.info-icon-container {
+  display: flex;
+}
+
+.info-icon {
+  content: url("chrome://global/skin/icons/info.svg");
+  width: 16px;
+  height: 16px;
+  margin-inline-end: 6px;
+  align-self: start;
+  margin-top: 0.4em;
+  flex-shrink: 0;
+}
+
+.info-box-container.smaller-font-size .info-icon {
+  margin-top: 0.3em;
+}
+
+.sticky-container {
+  position: sticky;
+  background-color: var(--in-content-page-background);
+  top: 0;
+  z-index: 1;
+  /* The sticky-container should have the capability to cover all spotlight area. */
+  width: calc(100% + 8px);
+  margin-inline: -4px;
+  padding-inline: 4px;
+}
+
+.sticky-inner-container {
+  flex: 1;
+  max-width: var(--main-pane-width);
+}
+
+.search-tooltip {
+  max-width: 10em;
+  font-size: 1rem;
+  position: absolute;
+  padding: 0 .7em;
+  background-color: #ffe900;
+  color: #000;
+  border: 1px solid #d7b600;
+  margin-top: -18px;
+  opacity: .85;
+}
+
+.search-tooltip:hover {
+  opacity: .1;
+}
+
+.search-tooltip::before {
+  position: absolute;
+  content: "";
+  border: 7px solid transparent;
+  border-top-color: #d7b600;
+  top: 100%;
+  inset-inline-start: calc(50% - 7px);
+  forced-color-adjust: none;
+}
+
+.search-tooltip::after {
+  position: absolute;
+  content: "";
+  border: 6px solid transparent;
+  border-top-color: #ffe900;
+  top: 100%;
+  inset-inline-start: calc(50% - 6px);
+  forced-color-adjust: none;
+}
+
+@media (forced-colors: active) {
+  .search-tooltip::before {
+    border-top-color: CanvasText;
+  }
+
+  .search-tooltip::after {
+    border-top-color: Canvas;
+  }
+}
+
+.search-tooltip-parent {
+  position: relative;
+}
+
+.search-tooltip > span {
+  display: block;
+  user-select: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.visually-hidden {
+  visibility: collapse;
+}
+
+menulist[indicator=true] > menupopup menuitem:not([image]) > .menu-iconic-left {
+  display: flex;
+  min-width: auto; /* Override the min-width defined in menu.css */
+  margin-inline-end: 6px;
+}
+
+menulist[indicator=true] > menupopup menuitem:not([image]) > .menu-iconic-left > .menu-iconic-icon {
+  width: 8px;
+  height: 10px;
+  margin: 0;
+}
+
+menulist[indicator=true] > menupopup menuitem[indicator=true]:not([image]) > .menu-iconic-left > .menu-iconic-icon {
+  list-style-image: url(chrome://browser/skin/preferences/search-arrow-indicator.svg);
+}
+
+menulist[indicator=true] > menupopup menuitem[indicator=true]:not([image]) > .menu-iconic-left > .menu-iconic-icon:-moz-locale-dir(rtl) {
+  transform: scaleX(-1);
+}
+
+.menu-iconic-highlightable-text {
+  margin: 0; /* Align with the margin of xul:label.menu-iconic-text */
+}
+
+#no-results-message > label {
+  margin: 2px 0;
+  line-height: 30px;
+}
+
+/* Proxy port input */
+
+.proxy-port-input {
+  width: calc(5ch + 18px); /* 5 chars + (8px padding + 1px border) on both sides */
+  margin-inline-start: 4px;
+}
+
+#primaryBrowserLocale {
+  margin-inline-start: 0;
+  min-width: 20em;
+}
+
+#availableLanguages,
+#availableLocales {
+  margin-inline-start: 0;
+}
+
+#availableLanguages,
+#availableLocales,
+#activeLanguages,
+#selectedLocales {
+  margin-inline-end: 4px;
+}
+
+#activeLanguages,
+#selectedLocales {
+  min-height: 15em;
+  contain: size;
+}
+
+#selectedLocales > richlistitem {
+  padding-inline-start: 13px;
+}
+
+#warning-message > .message-bar-description {
+  width: 32em;
+}
+
+#warning-message {
+  margin-top: 8px;
+}
+
+.action-button {
+  margin-inline-end: 0;
+}
+
+.languages-grid {
+  flex: 1;
+  display: grid;
+  grid-template-rows: 1fr auto;
+  grid-template-columns: 1fr auto;
+}
+
+/* Menulist styles */
+.label-item {
+  font-size: 0.8em;
+}
+
+.updateSettingCrossUserWarningContainer {
+  margin-block-end: 17px;
+}
+
+#updateSettingCrossUserWarningDesc {
+  padding-inline-start: calc(16px + 6px); /* radio-check's width + margin-inline-end */
+  margin-block-start: 20px;
+}
+
+richlistitem .text-link {
+  color: inherit;
+  text-decoration: underline;
+}
+
+richlistitem .text-link:hover {
+  color: inherit;
+}
+
+#proxy-grid,
+#dnsOverHttps-grid {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+}
+
+.proxy-grid-row:not([hidden]),
+.dnsOverHttps-grid-row:not([hidden]) {
+  display: contents;
+}
+
+#proxy-grid > .thin {
+  grid-column: span 2;
+  height: 20px;
+}
+
+#pane-experimental-search-results-header,
+#pane-experimental-subtitle {
+  background-image: url("chrome://global/skin/icons/warning.svg");
+  background-repeat: no-repeat;
+  background-position: 0 center;
+  background-size: contain;
+  min-height: 30px;
+  padding-inline-start: 38px;
+  display: flex;
+  align-items: center;
+  -moz-context-properties: fill;
+  fill: #FFBF00;
+}
+
+#pane-experimental-search-results-header:-moz-locale-dir(rtl),
+#pane-experimental-subtitle:-moz-locale-dir(rtl) {
+  background-position-x: right;
+}
+
+#pane-experimental-featureGates {
+  margin-top: 16px;
+}
+
+.featureGate {
+  margin-bottom: 16px;
+}
+
+.featureGateCheckbox {
+  font-size: 1.14em;
+  align-items: center;
+}
+
+.featureGateCheckbox > .checkbox-label-box {
+  align-items: center;
+}
+
+.featureGateDescription {
+  margin-inline-start: 28px;
+}
+
+.checkbox-row {
+  display: flex;
+  align-items: baseline;
+}
+
+.checkbox-row input[type=checkbox] {
+  translate: 0 2px
+}
+
+.checkbox-row a {
+  margin-inline-start: 6px;
+}
+
+#moreFromMozillaCategory-header .title {
+  margin-block-end: 4px;
+}
+
+#moreFromMozillaCategory-header .subtitle {
+  color: var(--in-content-text-color);
+  margin-block-end: 24px;
+  line-height: 1.4em;
+}
+
+#moreFromMozillaCategory:not([hidden]) {
+  display: flex;
+  flex-direction: column;
+}
+
+#moreFromMozillaCategory .mozilla-product-item {
+  margin-top: 30px;
+}
+
+#moreFromMozillaCategory .product-title {
+  margin: 4px 0 3px;
+  background-repeat: no-repeat;
+  background-size: contain;
+  padding-inline-start: 30px;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+#moreFromMozillaCategory .product-title:-moz-locale-dir(rtl) {
+  background-position-x: right;
+}
+
+#moreFromMozillaCategory .product-description-box {
+  padding-inline-start: 30px;
+  margin: 2px 0;
+  line-height: 1.4em;
+}
+
+#moreFromMozillaCategory .description {
+  display: inline;
+}
+
+#moreFromMozillaCategory .small-button {
+  margin-block: 14px 2px;
+  margin-inline: 30px 0;
+}
+
+#firefox-mobile {
+  background-image: url("chrome://browser/skin/device-phone.svg");
+}
+
+#mozilla-vpn {
+  background-image: url("chrome://browser/skin/preferences/vpn-logo.svg");
+}
+
+#firefox-relay {
+  background-image: url("chrome://browser/skin/preferences/relay-logo.svg");
+}
+
+/*
+ * The :not clause is required because hiding an element with `display: flex` only
+ * partially hides it.
+ */
+.qr-code-box:not([hidden="true"]) {
+  max-width: 320px; /* a unit better than px for this & next? */
+  min-height: 204px;
+  margin-block: 10px 0;
+  margin-inline-start: 30px;
+  background-color: var(--in-content-box-info-background);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-evenly;
+  border-radius: 4px;
+}
+
+@media (prefers-contrast) {
+  .qr-code-box:not([hidden="true"]) {
+    border: 1px solid currentColor;
+  }
+}
+
+.qr-code-box-image {
+  border-radius: 4px;
+  padding: 2px;
+  width: 80px;
+  flex: 0 0 auto;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+.qr-code-title-label {
+  flex: 1 1 auto;
+}
+
+.qr-code-box-title {
+  font-size: .87em;
+  font-weight: normal;
+  line-height: 1.42em;
+
+  text-align: center;
+
+  margin-block: 20px 0;
+  margin-inline: 40px;
+}
+
+.simple .qr-code-box-title {
+  margin-block: 0;
+  width: 296px;
+}
+
+.simple .qr-code-box {
+  padding-inline: 24px;
+  padding-block: 20px
+}
+
+.simple .qr-code-box-image {
+  padding: 10px;
+}
+
+#moreFromMozillaCategory .qr-code-link {
+  font-size: .87em;
+  line-height: 1.42em;
+}
+
+@media (prefers-color-scheme: dark) {
+  .qr-code-box:not([hidden="true"]) {
+    background-color: rgba(91,91,102,0.45);
+  }
+
+  .qr-code-box-title {
+    color: #fbfbfe;
+  }
+}
+
+#websiteAppearanceGroup {
+  display: block;
+}
+
+#web-appearance-chooser {
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+#web-appearance-chooser,
+#web-appearance-override-warning {
+  margin: 12px 0;
+}
+
+#web-appearance-override-warning:not([hidden]) {
+  display: flex;
+}
+
+.web-appearance-choice {
+  width: 100%;
+  border: 1px solid var(--in-content-box-border-color);
+  background-color: var(--in-content-box-background-color);
+  color: var(--in-content-text-color);
+  border-radius: 4px;
+  overflow: clip;
+}
+
+.web-appearance-choice-image-container {
+  background-color: var(--in-content-button-background);
+  padding: 12px 0;
+}
+
+.web-appearance-choice:hover > .web-appearance-choice-image-container {
+  background-color: var(--in-content-button-background-hover);
+}
+
+.web-appearance-choice:hover:active > .web-appearance-choice-image-container {
+  background-color: var(--in-content-button-background-active);
+}
+
+.web-appearance-choice img {
+  display: block;
+  margin: 0 auto;
+
+  border: 1px solid var(--in-content-box-border-color);
+  border-radius: 4px;
+  box-shadow: 0 0 2px 0 rgba(0,0,0,0.2);
+
+  transform: scaleX(1);
+  content: url("chrome://browser/content/preferences/web-appearance-light.svg")
+}
+
+.web-appearance-choice.dark img {
+  content: url("chrome://browser/content/preferences/web-appearance-dark.svg")
+}
+
+.web-appearance-choice img:-moz-locale-dir(rtl) {
+  transform: scaleX(-1);
+}
+
+.web-appearance-choice-footer {
+  border-top: 1px solid var(--in-content-box-border-color);
+  padding: 4px 8px;
+  overflow-wrap: anywhere;
+  display: flex;
+}
+
+.web-appearance-choice input {
+  margin-top: 0.4em;
+}
+
+#translations-manage-install-list {
+  height: 220px;
+  overflow: scroll;
+  background-color: var(--in-content-box-background);
+  border: 1px solid var(--in-content-box-border-color);
+  border-radius: 4px;
+  resize: vertical;
+  margin: 4px 0;
+}
+
+.translations-manage-language:first-child {
+  border-bottom: 1px solid var(--in-content-box-border-color);
+  padding: 8px;
+  margin-bottom: 8px;
+}
+
+.translations-manage-language {
+	align-items: center;
+  padding: 0 8px;
+}
+
+.translations-manage-language label {
+	flex: 1;
+	margin: 0 15px;
+}
+
+#translations-manage-error {
+  color: var(--in-content-error-text-color);
+  margin: 16px 0;
+}
+
+/* Platform-specific tweaks & overrides */
+
+@media (-moz-platform: macos) {
+  tabpanels {
+    padding: 20px 7px 7px;
+  }
+
+  #browserUseCurrent,
+  #browserUseBookmark,
+  #browserUseBlank {
+    margin-top: 10px;
+  }
+
+  #privacyPrefs {
+    padding: 0 4px;
+  }
+
+  #privacyPrefs > tabpanels {
+    padding: 18px 10px 10px;
+  }
+
+  #OCSPDialogPane {
+    font: message-box !important;
+  }
+
+  /**
+   * Update Preferences
+   */
+  #autoInstallOptions {
+    margin-inline-start: 20px;
+  }
+
+  .updateControls {
+    margin-inline-start: 10px;
+  }
+}
+
+@media (-moz-platform: linux) {
+  .treecol-sortdirection {
+    /* override the Linux only toolkit rule */
+    appearance: none;
+  }
+}
diff --git a/browser/themes/shared/preferences/privacy.css b/browser/themes/shared/preferences/privacy.css
new file mode 100644
index 0000000000..0819a6db9c
--- /dev/null
+++ b/browser/themes/shared/preferences/privacy.css
@@ -0,0 +1,346 @@
+/* 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/. */
+
+/* Permissions */
+
+.highlighting-group {
+  --section-highlight-background-color: color-mix(in srgb, var(--in-content-accent-color) 20%, transparent);
+}
+
+.permission-icon {
+  width: 20px;
+  height: 20px;
+  vertical-align: middle;
+  margin-inline-end: 0.2em;
+}
+
+.permission-icon,
+.privacy-detailedoption .checkbox-label-box,
+.extra-information-label > image,
+.arrowhead,
+.reload-tabs-button,
+.content-blocking-warning-image {
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+.geo-icon {
+  list-style-image: url(chrome://browser/skin/notification-icons/geo.svg);
+}
+
+.xr-icon {
+  list-style-image: url(chrome://browser/skin/notification-icons/xr.svg);
+}
+
+.camera-icon {
+  list-style-image: url(chrome://browser/skin/notification-icons/camera.svg);
+}
+
+.microphone-icon {
+  list-style-image: url(chrome://browser/skin/notification-icons/microphone.svg);
+}
+
+.speaker-icon {
+  list-style-image: url(chrome://global/skin/media/audio.svg);
+}
+
+.desktop-notification-icon {
+  list-style-image: url(chrome://browser/skin/notification-icons/desktop-notification.svg);
+}
+
+.autoplay-icon {
+  list-style-image: url(chrome://browser/skin/notification-icons/autoplay-media.svg);
+}
+
+.midi-icon {
+  list-style-image: url(chrome://browser/skin/notification-icons/midi.svg);
+}
+
+/* Content Blocking */
+
+/* Override styling that sets descriptions as grey */
+#trackingGroup description.indent,
+#trackingGroup .indent > description {
+  color: inherit;
+}
+
+[data-subcategory="trackingprotection"] {
+  margin-top: 10px;
+}
+
+#trackingProtectionShield {
+  list-style-image: url("chrome://browser/skin/controlcenter/tracking-protection.svg");
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  fill-opacity: 0.5;
+  width: 64px;
+  height: 64px;
+  margin-inline-end: 10px;
+}
+
+.privacy-detailedoption,
+#fpiIncompatibilityWarning {
+  margin: 3px 0;
+}
+
+#fpiIncompatibilityWarning {
+  background-color: var(--section-highlight-background-color);
+}
+
+#fpiIncompatibilityWarning,
+#contentBlockingCategories {
+  margin-top: 16px;
+}
+
+.privacy-detailedoption {
+  border-color: var(--in-content-box-border-color);
+}
+
+.privacy-detailedoption.disabled {
+  opacity: 0.5;
+}
+
+.privacy-detailedoption.disabled .radio-check {
+  opacity: 1;
+}
+
+.privacy-detailedoption > .indent {
+  margin-inline-end: 22px;
+}
+
+.arrowhead {
+  border-radius: 2px;
+  min-height: 20px;
+  min-width: 20px;
+  max-height: 20px;
+  max-width: 20px;
+  list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg");
+  background-color: transparent;
+  padding: 3px;
+}
+
+.arrowhead:not([disabled]):hover {
+  cursor: pointer;
+}
+
+.arrowhead.up {
+  list-style-image: url("chrome://global/skin/icons/arrow-up-12.svg");
+}
+
+.privacy-detailedoption.expanded:not(.selected) .reload-tabs {
+  display: none;
+}
+
+.content-blocking-warning.reload-tabs:not([hidden]) {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.content-blocking-reload-desc-container {
+  /* 345px is enough for (almost) twice the size of the default English
+   * string at default font sizes. If this and the button do not fit
+   * on one line, the button will get wrapped to the next line and this
+   * item will stretch to fill all available space. */
+  flex: 1 1 345px;
+  display: flex;
+  align-self: center;
+}
+
+.content-blocking-reload-description {
+  line-height: 1.8em;
+  margin-inline-end: 5px;
+}
+
+.reload-tabs-button {
+  max-height: 30px;
+  min-height: 30px;
+  padding: 0 20px;
+  list-style-image: url("chrome://global/skin/icons/reload.svg");
+  align-self: center;
+}
+
+.reload-tabs-button .button-icon {
+  margin: 0 6px;
+  color: inherit;
+}
+
+.reload-tabs-button .button-text {
+  color: inherit;
+}
+
+.privacy-detailedoption.selected .content-blocking-warning {
+  background-color: var(--section-highlight-background-color);
+}
+
+.privacy-detailedoption.selected .arrowhead {
+  display: none;
+}
+
+.privacy-detailedoption.selected {
+  border-color: var(--in-content-accent-color);
+}
+
+@media (prefers-contrast) {
+  .privacy-detailedoption.selected {
+    outline: 2px solid var(--in-content-accent-color);
+  }
+}
+
+@media not (prefers-contrast) {
+  .privacy-detailedoption {
+    background-color: rgba(215, 215, 219, 0.1);
+  }
+
+  .privacy-detailedoption.selected {
+    background-color: var(--section-highlight-background-color);
+  }
+}
+
+.content-blocking-warning-title,
+.privacy-detailedoption .radio-label-box {
+  font-weight: bold;
+}
+
+.privacy-detailedoption:not(.expanded, .selected) .privacy-extra-information {
+  visibility: collapse;
+}
+
+.extra-information-label {
+  margin-top: 18px;
+}
+
+/* Apply display: block to the containers of all the category information, as
+ * without this the flex-wrapped blocks inside don't stretch vertically to
+ * enclose their content. */
+.privacy-detailedoption > .indent {
+  display: block;
+}
+
+.privacy-detailedoption.expanded .privacy-extra-information,
+.privacy-detailedoption.selected .privacy-extra-information {
+  display: flex;
+  flex-direction: column;
+  align-content: stretch;
+}
+
+.privacy-extra-information > .indent {
+  margin-bottom: 18px;
+}
+
+.privacy-extra-information > .custom-option {
+  margin: 10px 0;
+}
+
+.content-blocking-warning {
+  /* Match .indent's horizontal padding, minus the border added via .info-box-container: */
+  padding-inline: calc(22px - 1px);
+  margin: 10px 0;
+}
+
+.content-blocking-warning:not([hidden]) + .content-blocking-warning {
+  margin-top: 0;
+}
+
+.content-blocking-extra-blocking-desc {
+  margin-inline-start: 0.5em;
+  position: relative;
+  top: 0.65em;
+}
+
+.content-blocking-label,
+.doh-label {
+  display: list-item;
+  line-height: 1.2em;
+}
+
+.content-blocking-warning-image {
+  list-style-image: url("chrome://global/skin/icons/warning.svg");
+  width: 16px;
+  margin-inline-end: 6px;
+}
+
+#blockCookiesMenu {
+  width: 450px;
+}
+
+#blockCookiesMenu,
+#trackingProtectionMenu {
+  margin: 0;
+}
+
+#changeBlockListLink {
+  margin-inline-start: 56px;
+}
+
+#telemetry-container {
+  margin-block: 4px;
+  line-height: 1.8em;
+  width: 100%;
+}
+
+.privacy-detailedoption-description {
+  font-size: 90%;
+  opacity: 0.6;
+}
+
+.warning-description {
+  background: url(chrome://global/skin/icons/warning.svg) no-repeat 0 5px;
+  opacity: 0.6;
+  -moz-context-properties: fill, stroke;
+  fill: #d7b600;
+  stroke: white;
+  padding-inline-start: 20px;
+}
+
+.reject-trackers-warning-icon:-moz-locale-dir(rtl) {
+  background-position-x: right 0;
+}
+
+#contentBlockingChangeCookieSettings {
+  padding: 0.25em 0.75em;
+  margin: 4px 8px;
+}
+
+#deleteOnCloseNote {
+  margin-top: 8px;
+  margin-inline-end: 32px;
+}
+
+#submitHealthReportBox {
+  display: inline-flex;
+}
+
+/* Address bar */
+
+.firefoxSuggestOptionBox {
+  /* With this value we're trying to keep the apparent vertical space between
+     option boxes the same as the apparent vertical space between the labels of
+     the checkboxes above the Firefox Suggest subsection. */
+  margin-block-start: 18px;
+}
+
+.firefoxSuggestOptionBox:first-of-type {
+  /* Similar here: Make the apparent vertical space between the last checkbox
+     and first option box the same as elsewhere. */
+  margin-block-start: 11px;
+}
+
+#firefoxSuggestInfoBox {
+  margin-block-start: 16px;
+}
+
+#openSearchEnginePreferences {
+  margin-block-start: .5em;
+}
+
+#dismissedSuggestions,
+#openSearchEnginePreferences.extraMargin {
+  margin-block-start: 2em;
+}
+
+#dohDescription,
+#dohLearnMore,
+#dohStatusSection {
+  line-height: 1.8em;
+}
diff --git a/browser/themes/shared/preferences/relay-logo.svg b/browser/themes/shared/preferences/relay-logo.svg
new file mode 100644
index 0000000000..bf99230a1f
--- /dev/null
+++ b/browser/themes/shared/preferences/relay-logo.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->

+<svg width="22" height="22" viewBox="0 0 22 22" fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg">

+	<path

+		d="M20.054,4.777l-8.112-4.542c-0.579-0.313-1.277-0.313-1.856,0l-8.14,4.542C1.347,5.115,0.977,5.748,0.975,6.434v9.112c-0.005,0.689,0.368,1.324,0.971,1.655l8.112,4.542c0.283,0.17,0.61,0.26,0.942,0.257c0.331-0.001,0.657-0.089,0.943-0.257l8.112-4.542c0.598-0.337,0.969-0.969,0.971-1.655V6.434C21.022,5.748,20.652,5.115,20.054,4.777z M6.421,14.289c-0.054,0.194-0.183,0.357-0.359,0.455l-0.485,0.285c-0.115,0.055-0.243,0.085-0.371,0.087c-0.275-0.004-0.528-0.158-0.657-0.4c-0.1-0.173-0.126-0.381-0.073-0.573c0.054-0.194,0.183-0.357,0.359-0.454l0.481-0.283c0.371-0.228,0.826-0.087,1.033,0.312C6.449,13.889,6.475,14.095,6.421,14.289z M6.348,8.205c-0.131,0.242-0.382,0.396-0.657,0.4C5.562,8.603,5.435,8.574,5.32,8.519L4.834,8.233C4.649,8.141,4.508,7.978,4.447,7.78C4.385,7.582,4.408,7.367,4.51,7.186c0.102-0.18,0.274-0.312,0.474-0.362C5.185,6.773,5.398,6.809,5.573,6.92l0.485,0.285C6.431,7.404,6.572,7.861,6.348,8.205z M9.416,12.576c-0.054,0.193-0.183,0.357-0.357,0.454l-1.001,0.572c-0.115,0.055-0.242,0.084-0.37,0.085c-0.276-0.004-0.527-0.157-0.657-0.4c-0.1-0.173-0.126-0.381-0.073-0.573c0.054-0.192,0.183-0.356,0.359-0.454l1-0.572c0.177-0.095,0.386-0.115,0.579-0.056c0.192,0.059,0.355,0.193,0.448,0.371C9.442,12.176,9.468,12.382,9.416,12.576z M9.343,9.918c-0.131,0.243-0.381,0.396-0.656,0.4c-0.128-0.001-0.256-0.03-0.371-0.085l-1-0.572C6.952,9.442,6.827,8.976,7.03,8.605c0.098-0.176,0.261-0.304,0.454-0.357c0.194-0.054,0.4-0.028,0.573,0.073l1,0.571c0.176,0.098,0.304,0.261,0.357,0.455C9.469,9.537,9.443,9.745,9.343,9.918z M12.342,11.604c-0.081,0.164-0.225,0.287-0.4,0.342v5.793c0,0.426-0.345,0.771-0.771,0.771s-0.771-0.345-0.771-0.771v-5.767c-0.173-0.055-0.318-0.179-0.4-0.342c-0.107-0.203-0.118-0.445-0.028-0.657c-0.091-0.212-0.08-0.454,0.029-0.657c0.081-0.164,0.225-0.287,0.4-0.342V4.206c0-0.426,0.345-0.771,0.771-0.771s0.771,0.345,0.771,0.771v5.741c0.175,0.055,0.319,0.179,0.4,0.344c0.109,0.203,0.12,0.444,0.029,0.656C12.461,11.158,12.45,11.4,12.342,11.604z M15.313,13.26c-0.131,0.242-0.382,0.395-0.657,0.4c-0.128-0.001-0.256-0.03-0.371-0.085l-1-0.572c-0.349-0.212-0.467-0.661-0.267-1.017s0.648-0.487,1.009-0.297l1,0.572C15.398,12.46,15.513,12.946,15.313,13.26z M15.385,9.207c-0.054,0.194-0.183,0.357-0.359,0.455l-1,0.571c-0.115,0.055-0.242,0.085-0.371,0.085c-0.275-0.004-0.527-0.157-0.657-0.4c-0.099-0.173-0.125-0.379-0.071-0.573c0.054-0.194,0.183-0.357,0.359-0.455l1-0.571c0.179-0.095,0.386-0.115,0.58-0.056c0.192,0.059,0.355,0.192,0.45,0.371C15.414,8.807,15.44,9.014,15.385,9.207z M17.798,14.657c-0.131,0.242-0.382,0.396-0.657,0.4c-0.128-0.001-0.256-0.03-0.371-0.085l-0.487-0.286c-0.344-0.213-0.459-0.66-0.258-1.013c0.199-0.352,0.642-0.484,1.002-0.298l0.485,0.285C17.883,13.887,17.997,14.345,17.798,14.657z M17.868,7.806c-0.054,0.192-0.181,0.356-0.356,0.455l-0.485,0.286c-0.115,0.055-0.242,0.084-0.371,0.085c-0.271,0.01-0.525-0.135-0.657-0.371c-0.1-0.173-0.126-0.381-0.073-0.573s0.183-0.356,0.358-0.454l0.487-0.286c0.175-0.099,0.379-0.124,0.573-0.07c0.192,0.054,0.356,0.181,0.455,0.356C17.895,7.407,17.922,7.613,17.868,7.806z"/>

+</svg>

diff --git a/browser/themes/shared/preferences/search-arrow-indicator.svg b/browser/themes/shared/preferences/search-arrow-indicator.svg
new file mode 100644
index 0000000000..8ac83df260
--- /dev/null
+++ b/browser/themes/shared/preferences/search-arrow-indicator.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 10">
+  <defs>
+    <path id="anchor" d="M33 20l5 8H28z"/>
+  </defs>
+  <g fill="none" fill-rule="evenodd" transform="rotate(90 28 0)">
+    <use fill="#FFEB19" href="#anchor"/>
+    <path stroke="#0C0C0D" stroke-opacity=".2" d="M33 20.94l-4.1 6.56h8.2L33 20.94z"/>
+  </g>
+</svg>
diff --git a/browser/themes/shared/preferences/search-bar.svg b/browser/themes/shared/preferences/search-bar.svg
new file mode 100644
index 0000000000..0f592bf476
--- /dev/null
+++ b/browser/themes/shared/preferences/search-bar.svg
@@ -0,0 +1,25 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="631" height="36">
+  <style>
+    .addressBarOutline {
+      stroke: context-stroke;
+      stroke-linejoin: round;
+      stroke-width: 1px;
+    }
+    .addressBarIcons {
+      fill: context-stroke;
+      fill-rule: evenodd;
+    }
+    .searchBarFill {
+      fill: #0a84ff;
+    }
+  </style>
+  <rect width="630" height="35" x=".5" y=".5" fill="context-fill" class="addressBarOutline" rx="4" ry="4"/>
+  <rect width="314" height="23" x="110.5" y="6.5" fill="rgba(255,255,255,0.05)" class="addressBarOutline" rx="4" ry="4"/>
+  <path d="M604 .5h-.5V.5zM126.41 22l-3.09-3.085a3.881 3.881 0 0 0-.64-5.2 3.855 3.855 0 0 0-5.4 5.462 3.958 3.958 0 0 0 5.21.643l3.08 3.085a.622.622 0 0 0 .9 0 .677.677 0 0 0-.06-.9zm-6.23-2.764a2.571 2.571 0 1 1 2.57-2.57 2.652 2.652 0 0 1-2.57 2.574z" class="addressBarIcons"/>  <rect width="115" height="23" x="429.5" y="6.5" fill-opacity=".2" stroke="#0a84ff" rx="4" ry="4" class="searchBarFill"/>
+  <path fill-rule="evenodd" d="M445.41 22l-3.09-3.085a3.881 3.881 0 0 0-.64-5.2 3.855 3.855 0 0 0-5.4 5.462 3.958 3.958 0 0 0 5.21.643l3.08 3.085a.622.622 0 0 0 .9 0 .677.677 0 0 0-.06-.9zm-6.23-2.764a2.571 2.571 0 1 1 2.57-2.57 2.652 2.652 0 0 1-2.57 2.574z" class="searchBarFill"/>
+  <path d="M620.75 17.25h-7.5a.75.75 0 0 0 0 1.5h7.5a.75.75 0 0 0 0-1.5m0 3.75h-7.5a.75.75 0 0 0 0 1.5h7.5a.75.75 0 0 0 0-1.5m0-7.5h-7.5a.75.75 0 0 0 0 1.5h7.5a.75.75 0 0 0 0-1.5m-34.98 0a.75.75 0 0 0-.52 1.28l3.18 3.22-3.18 3.22a.746.746 0 1 0 1.05 1.06l3.7-3.75a.774.774 0 0 0 0-1.06l-3.7-3.75a.754.754 0 0 0-.53-.22m4.44 0a.715.715 0 0 0-.52.22.754.754 0 0 0 0 1.06l3.17 3.22-3.17 3.22a.754.754 0 0 0 0 1.06.715.715 0 0 0 .52.22.754.754 0 0 0 .53-.22l3.69-3.75a.754.754 0 0 0 0-1.06l-3.69-3.75a.754.754 0 0 0-.53-.22m-22.84 2.25h1.5a.375.375 0 1 0 0-.75h-1.5a.375.375 0 0 0 0 .75zm2.63-3h-9a1.5 1.5 0 0 0-1.5 1.5v7.5a1.5 1.5 0 0 0 1.5 1.5h9a1.5 1.5 0 0 0 1.5-1.5v-7.5a1.5 1.5 0 0 0-1.5-1.5zm-4.5 9H561v-7.5h4.5v7.5zm4.5 0h-3.75v-7.5H570v7.5zm-2.63-4.5h1.5a.375.375 0 1 0 0-.75h-1.5a.375.375 0 0 0 0 .75zm0 1.5h.75a.375.375 0 1 0 0-.75h-.75a.375.375 0 0 0 0 .75zm-477.54 2.5a.375.375 0 1 1 .37-.375.356.356 0 0 1-.37.375m-2.6 1.5a.7.7 0 0 1-.742-.75v-4.95l2.961-3 2.97 3V22a.706.706 0 0 1-.74.75h-.74V19a.706.706 0 0 0-.74-.75h-1.49a.706.706 0 0 0-.74.75v3.75h-.739m2.219-10.5a.7.7 0 0 0-.51.225l-5.193 5.25a.738.738 0 1 0 1.037 1.05l.223-.225v4.2a1.5 1.5 0 0 0 1.482 1.5h5.931a1.491 1.491 0 0 0 1.48-1.5v-4.2l.22.225a.678.678 0 0 0 .52.225.663.663 0 0 0 .52-.225.725.725 0 0 0 0-1.05l-5.19-5.25a.709.709 0 0 0-.52-.225M70.375 13a.749.749 0 0 0-.75.75v1.808a5.245 5.245 0 1 0-.788 6.4.75.75 0 0 0-1.061-1.061 3.755 3.755 0 1 1 .776-4.151h-1.927a.75.75 0 0 0 0 1.5h3.75a.749.749 0 0 0 .75-.75v-3.75a.749.749 0 0 0-.75-.75m-34.158 4.296h8.649l-3.206-3.2a.738.738 0 0 1 1.044-1.043l4.474 4.47a.72.72 0 0 1 0 1.043l-4.474 4.47a.72.72 0 0 1-1.044 0 .72.72 0 0 1 0-1.043l3.206-3.2h-8.649a.749.749 0 1 1 0-1.497z" class="addressBarIcons"/>
+  <path d="M23.783 17.292h-8.649l3.206-3.2a.738.738 0 0 0-1.044-1.043l-4.474 4.47a.72.72 0 0 0 0 1.043l4.474 4.47a.72.72 0 0 0 1.044 0 .72.72 0 0 0 0-1.043l-3.206-3.2h8.649a.749.749 0 1 0 0-1.497z" class="addressBarIcons"/>
+</svg>
diff --git a/browser/themes/shared/preferences/search.css b/browser/themes/shared/preferences/search.css
new file mode 100644
index 0000000000..010c8d5679
--- /dev/null
+++ b/browser/themes/shared/preferences/search.css
@@ -0,0 +1,100 @@
+/* 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/. */
+
+.searchBarImage {
+  height: 36px;
+  width: 631px;
+  -moz-context-properties: fill, stroke;
+  fill: var(--in-content-box-background);
+  stroke: var(--in-content-box-border-color);
+}
+
+.searchBarImage,
+#searchShowSearchTermCheckbox {
+  margin-inline-start: 33px;
+}
+
+.searchBarImage:-moz-locale-dir(rtl) {
+  transform: scaleX(-1);
+}
+
+.searchBarHiddenImage {
+  list-style-image: url("chrome://browser/skin/preferences/no-search-bar.svg");
+}
+
+#searchBarShownRadio {
+  /* Allow a little visual space to separate the radio from the image above it. */
+  margin-top: 10px;
+}
+
+.searchBarShownImage {
+  list-style-image: url("chrome://browser/skin/preferences/search-bar.svg");
+}
+
+#defaultEngine,
+#defaultPrivateEngine {
+  margin-inline-start: 0;
+}
+
+#defaultEngine::part(icon),
+#defaultPrivateEngine::part(icon) {
+  height: 16px;
+  width: 16px;
+}
+
+/* work around a display: none in Linux's menu.css, see bug 1112310 */
+.searchengine-menuitem > .menu-iconic-left {
+  display: flex;
+}
+
+#engineList {
+  margin: .5em 0;
+}
+
+#engineList treechildren::-moz-tree-image(engineName) {
+  margin-inline: 1px 10px;
+  width: 16px;
+  height: 16px;
+}
+
+#engineList treechildren::-moz-tree-drop-feedback {
+  background-color: SelectedItem;
+  width: 10000px; /* 100% doesn't work; 10k is hopefully larger than any window
+                     we may have, overflow isn't visible. */
+  height: 2px;
+  margin-inline-start: 0;
+}
+
+#engineList treechildren::-moz-tree-image(bookmarks),
+#engineList treechildren::-moz-tree-image(tabs),
+#engineList treechildren::-moz-tree-image(history) {
+  -moz-context-properties: fill;
+}
+
+/* Local search shortcut icon colors.  These should match the values in
+   urlbarView.inc.css. */
+#engineList treechildren::-moz-tree-image(bookmarks) {
+  fill: #0060df; /* Blue-60 */
+}
+#engineList treechildren::-moz-tree-image(tabs) {
+  fill: #008eaf; /* Teal-70 */
+}
+#engineList treechildren::-moz-tree-image(history),
+#engineList treechildren::-moz-tree-image(bookmarks, selected),
+#engineList treechildren::-moz-tree-image(tabs, selected) {
+  fill: currentColor;
+}
+
+#engineShown {
+  min-width: 26px;
+}
+
+#addEnginesBox {
+  margin-bottom: 1em;
+}
+
+#removeEngineButton,
+#restoreDefaultSearchEngines {
+  margin-inline: 0;
+}
diff --git a/browser/themes/shared/preferences/siteDataSettings.css b/browser/themes/shared/preferences/siteDataSettings.css
new file mode 100644
index 0000000000..e4a989cefd
--- /dev/null
+++ b/browser/themes/shared/preferences/siteDataSettings.css
@@ -0,0 +1,64 @@
+/* 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/. */
+
+/**
+ * Site Data - Settings dialog
+ */
+#sitesList {
+  flex: 1 auto;
+  height: 20em;
+}
+
+/* Show selected items in high contrast mode. */
+#sitesList > richlistitem[selected] {
+  outline: 1px solid transparent;
+}
+
+#sitesList > richlistitem > hbox,
+.item-box > label {
+  flex: 1;
+}
+
+.item-box {
+  padding: 5px 8px;
+  align-items: center;
+  width: 50px;
+}
+
+/**
+ * Confirmation dialog of removing sites selected
+ */
+#SiteDataRemoveSelectedDialog {
+  padding: 16px;
+  min-width: 50px;
+}
+
+#SiteDataRemoveSelectedDialog.single-entry {
+  min-height: 8em;
+}
+
+#SiteDataRemoveSelectedDialog.single-entry .multi-site {
+  display: none;
+}
+
+#SiteDataRemoveSelectedDialog.multi-entry #removalList {
+  max-height: 20em;
+}
+
+#SiteDataRemoveSelectedDialog > dialog {
+  padding: 0; /* override dialog.css */
+}
+
+#contentContainer {
+  font-size: 1.2em;
+  margin-bottom: 10px;
+}
+
+.question-icon {
+  margin: 6px;
+}
+
+#removing-label {
+  font-weight: bold;
+}
diff --git a/browser/themes/shared/preferences/vpn-logo.svg b/browser/themes/shared/preferences/vpn-logo.svg
new file mode 100644
index 0000000000..5300d3bf5c
--- /dev/null
+++ b/browser/themes/shared/preferences/vpn-logo.svg
@@ -0,0 +1,4 @@
+<!-- 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/. -->
+<svg width="22" height="22" fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 2.256a1.692 1.692 0 1 0 0 3.384 1.692 1.692 0 0 0 0-3.384zM7.05 3.948a3.949 3.949 0 1 1 2.071 3.474l-1.7 1.7c.13.236.234.487.313.75h6.533a3.948 3.948 0 1 1 1.906 4.602l-1.7 1.7a3.949 3.949 0 1 1-1.595-1.597l1.7-1.699a3.916 3.916 0 0 1-.311-.75H7.734a3.95 3.95 0 1 1-1.907-4.603l1.698-1.698a3.931 3.931 0 0 1-.474-1.879zm2.258 14.103a1.692 1.692 0 1 1 3.384 0 1.692 1.692 0 0 1-3.384 0zm-5.36-8.744a1.693 1.693 0 1 0 0 3.385 1.693 1.693 0 0 0 0-3.385zM16.36 11a1.692 1.692 0 1 1 3.384 0 1.692 1.692 0 0 1-3.384 0z"/></svg>