1 files changed, 1098 insertions, 0 deletions

diff --git a/comm/mail/themes/shared/mail/preferences/preferences.css b/comm/mail/themes/shared/mail/preferences/preferences.css
new file mode 100644
index 0000000000..9f19ef5dc1
--- /dev/null
+++ b/comm/mail/themes/shared/mail/preferences/preferences.css
@@ -0,0 +1,1098 @@
+/* - 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/. */
+
+@import url("chrome://messenger/skin/shared/preferences/subdialog.css");
+@import url("chrome://messenger/skin/colors.css");
+@import url("chrome://messenger/skin/icons.css");
+
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+body {
+  font-size: 1.1rem;
+}
+
+button,
+menulist,
+html|select,
+html|input[type="color"] {
+  min-height: var(--in-content-button-height);
+}
+
+search-textbox {
+  min-height: var(--in-content-button-height);
+}
+
+button {
+  padding: 0 12px;
+}
+
+menulist {
+  padding: 0 6px;
+}
+
+button[open="true"],
+menulist[open="true"] {
+  color: var(--in-content-button-text-color-hover);
+}
+
+button,
+menulist,
+html|select,
+html|input:is([type="email"],[type="number"],[type="color"],[type="text"],[type="password"],[type="url"]),
+html|textarea,
+search-textbox {
+  border-radius: var(--in-content-button-border-radius);
+}
+
+#MailPreferences {
+  text-rendering: optimizeLegibility;
+}
+
+#prefBox {
+  position: relative;
+}
+
+#pref-category-box {
+  background-color: var(--in-content-categories-background);
+  border-inline-end: 1px solid var(--in-content-categories-border);
+  width: 18em;
+}
+
+/* Temporary styles for the supernova icons */
+.sidebar-footer-icon,
+.category-icon {
+  -moz-context-properties: fill, stroke, stroke-opacity;
+  fill: color-mix(in srgb, currentColor 20%, transparent);
+  stroke: currentColor;
+}
+
+/*
+  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: 0;
+  height: 100vh;
+}
+
+/**
+ * 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);
+  /* Avoid being hidden under the sticky container. This value is the height
+     of that container minus this element's border and padding. */
+  scroll-margin-top: calc(var(--in-content-button-height) + 33px);
+}
+
+fieldset {
+  margin: 0 0 32px;
+  padding: 0;
+  border-style: none !important;
+}
+
+fieldset > hbox,
+fieldset > vbox,
+fieldset > radiogroup {
+  width: -moz-available;
+}
+
+html|h1 {
+  margin: 0 0 8px;
+  font-size: 1.46em;
+  font-weight: 300;
+  line-height: 1.3em;
+}
+
+html|legend {
+  margin: 16px 0 4px;
+  font-size: 1.1em;
+  font-weight: 600;
+  line-height: 1.4em;
+}
+
+html|th {
+  font-weight: normal;
+  text-align: start;
+}
+
+description,
+label {
+  line-height: 1.8em;
+  margin: 0;
+}
+
+button,
+menulist::part(label-box) {
+  font-weight: 400;
+}
+
+menulist::part(icon),
+.abMenuItem > .menu-iconic-left > .menu-iconic-icon {
+  -moz-context-properties: fill, stroke;
+  fill: color-mix(in srgb, currentColor 20%, transparent);
+  stroke: currentColor;
+}
+
+menulist::part(label),
+menuitem > label,
+button > hbox > label {
+  line-height: unset;
+}
+
+menulist::part(dropmarker-icon) {
+  width: 16px;
+  height: 16px;
+  -moz-context-properties: stroke;
+  stroke: currentColor;
+}
+
+.abMenuItem > .menu-iconic-left {
+  display: block;
+}
+
+#preferencesContainer {
+  padding: 0 28px 40px;
+  overflow: auto;
+}
+
+.paneDeckContainer {
+  display: block;
+  width: min(100%, 800px);
+  min-width: min-content;
+}
+
+.sticky-container {
+  width: 100%;
+  position: sticky;
+  background-color: var(--in-content-page-background);
+  top: 0;
+  z-index: 1;
+  padding-inline: 4px;
+}
+
+#searchInput {
+  /* If these sizes change, update the scroll margin of .subcategory. */
+  min-height: var(--in-content-button-height);
+  margin: 20px 0 30px;
+}
+
+#paneDeck {
+  width: 100%;
+}
+
+.search-tooltip {
+  max-width: 150px;
+  font-size: 1.25rem;
+  position: absolute;
+  padding: 0 10px;
+  background-color: #ffe900;
+  color: #000;
+  border: 1px solid #d7b600;
+  bottom: 36px;
+  opacity: 0.85;
+}
+
+.search-tooltip:hover {
+  opacity: 0.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 {
+  user-select: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.tip-caption {
+  font-size: .9em;
+  color: var(--in-content-deemphasized-text);
+}
+
+.visually-hidden {
+  visibility: collapse;
+}
+
+tabpanel > label,
+tabpanel > description,
+tabpanel > hbox > description {
+  margin-inline-start: 0;
+}
+
+/* Web search menulist */
+#defaultWebSearch::part(icon) {
+  margin-inline: 5px 8px;
+  width: 16px;
+  height: 16px;
+}
+
+/* Category List */
+
+#categories {
+  overflow: visible;
+  min-height: auto;
+}
+
+.sidebar-footer-link {
+  margin-inline: 6px;
+  border-radius: var(--in-content-button-border-radius);
+}
+
+@media (max-width: 830px) {
+  #pref-category-box,
+  #categories {
+    width: auto;
+  }
+
+  #categories > .category {
+    padding-inline: 12px;
+  }
+
+  .sidebar-footer-link {
+    margin-inline: 12px;
+  }
+
+  #preferencesContainer {
+    padding-inline: 15px;
+  }
+}
+
+html|input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"]) {
+  padding-block: initial;
+  /* it should be --in-content-button-height but input doesn't include the border */
+  min-height: calc(var(--in-content-button-height) - 2px);
+}
+
+html|input[type="number"] {
+  margin-inline-start: 4px;
+  padding: 1px;
+  min-height: calc(var(--in-content-button-height) - 4px);
+}
+/* sizes: chars + 8px padding + 1px borders + spin buttons 25+2+10px  */
+html|input[type="number"].size2 {
+  width: calc(2ch + 55px);
+}
+html|input[type="number"].size3 {
+  width: calc(3ch + 55px);
+}
+html|input[type="number"].size4 {
+  width: calc(4ch + 55px);
+}
+html|input[type="number"].size5 {
+  width: calc(5ch + 55px);
+}
+
+html|input[type="number"]::-moz-number-spin-box {
+  padding-inline-start: 10px;
+}
+
+html|input[type="number"]::-moz-number-spin-up,
+html|input[type="number"]::-moz-number-spin-down {
+  appearance: none;
+  min-width: 25px;
+  border: 1px solid var(--in-content-box-border-color);
+  background-color: var(--in-content-button-background);
+  background-position: center;
+  background-repeat: no-repeat;
+  -moz-context-properties: stroke;
+  stroke: currentColor;
+}
+
+html|input[type="number"]::-moz-number-spin-up:hover,
+html|input[type="number"]::-moz-number-spin-down:hover {
+  background-color: var(--in-content-button-background-hover);
+}
+
+html|input[type="number"]::-moz-number-spin-up {
+  min-height: calc(var(--in-content-button-height) * 0.5 - 3px);
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  border-radius: 1px 1px 0 0;
+  background-image: url("chrome://messenger/skin/icons/new/nav-up-sm.svg");
+}
+
+html|input[type="number"]::-moz-number-spin-down {
+  min-height: calc(var(--in-content-button-height) * 0.5 - 4px);
+  border-radius: 0 0 1px 1px;
+  background-image: url("chrome://messenger/skin/icons/new/nav-down-sm.svg");
+}
+
+separator.groove:not([orient="vertical"]) {
+  border-top-color: #c1c1c1;
+  border-bottom-width: 0;
+}
+
+tab:not([selected="true"]):hover {
+  border-bottom-color: transparent;
+}
+
+tab:-moz-focusring > .tab-middle {
+  outline: none;
+}
+
+tab:focus-visible {
+  background-color: var(--in-content-button-background);
+}
+
+tab:focus-visible > .tab-middle > .tab-text {
+  outline: none;
+}
+
+#defaultWebSearchPopup > menuitem > .menu-iconic-left {
+  display: flex;
+}
+
+/* Applications Pane Styles */
+
+#filter {
+  margin-inline: 0;
+}
+
+/* XXX This style is for bug 740213 and should be removed once that
+   bug has a solution. */
+description > html|a {
+  cursor: pointer;
+}
+#previewBox {
+  height: 220px;
+}
+
+.indent,
+html|input.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;
+}
+
+checkbox {
+  margin-inline: 0;
+}
+
+.align-no-label {
+  margin-inline-start: 4px;
+}
+
+.tail-with-learn-more {
+  margin-inline-end: 10px;
+}
+
+.learnMore {
+  margin-inline-start: 0;
+  font-weight: normal;
+  white-space: nowrap;
+}
+
+#tagList {
+  height: 180px;
+}
+
+#keywordList {
+  height: 250px;
+}
+
+#signonsTree {
+  height: 20em;
+}
+
+.update-deck-container {
+  display: flex;
+  align-items: center;
+}
+
+.update-deck-container > * {
+  flex: 0 0 auto;
+}
+
+.update-deck-container.deck-selected {
+  visibility: visible;
+}
+
+.update-deck-container > button {
+  /* Align the button at the end. */
+  margin-inline-start: auto;
+}
+
+.update-throbber {
+  width: 16px;
+  height: 16px;
+  margin-inline: 6px 4px;
+  content: image-set(url("chrome://global/skin/icons/loading.png"),
+                     url("chrome://global/skin/icons/loading@2x.png") 2x);
+}
+
+/* Work around bug 560067 - animated images in visibility: hidden
+ * still eat CPU. */
+#updateDeck > *:not(.deck-selected) > .update-throbber {
+  display: none;
+}
+
+.updateSettingCrossUserWarningContainer {
+  background: var(--in-content-box-info-background);
+  border: 1px solid var(--in-content-box-info-border);
+  border-radius: 5px;
+  padding: 2px 8px 8px;
+  margin-block-end: 17px;
+}
+
+#updateSettingCrossUserWarning {
+  padding-inline-start: 30px;
+  margin-block-start: 20px;
+  line-height: 20px;
+  background-image: url("chrome://messenger/skin/icons/info.svg");
+  background-position-x: left 2px;
+  background-position-y: top 2px;
+  background-size: 16px 16px;
+  background-repeat: no-repeat;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+#updateSettingCrossUserWarning:-moz-locale-dir(rtl) {
+  background-position-x: right 2px;
+}
+
+#releasenotes {
+  margin-inline-start: 6px !important;
+}
+
+#telemetry-container {
+  border-radius: 4px;
+  background-color: rgba(12, 12, 13, 0.2);
+  font-size: 85%;
+  padding: 3px;
+  margin-block: 4px;
+  width: 100%;
+  display: flex;
+}
+
+#telemetry-container[hidden] {
+  display: none;
+}
+
+#telemetryInfoIcon {
+  flex: 0 0 auto;
+  align-self: start;
+  width: 16px;
+  height: 16px;
+  padding: 2px;
+}
+
+#telemetryDisabledDescription {
+  flex: 1 1 auto;
+  align-self: start;
+  line-height: 1.3;
+  margin-inline-start: 6px;
+}
+
+#telemetryDataDeletionLearnMore {
+  flex: 0 0 auto;
+  align-self: center;
+}
+
+#submitHealthReportBox {
+  display: inline-flex;
+}
+
+/* Remove the start margin to align these elements */
+#addCloudFileAccount,
+#chatStartupAction,
+#defaults-itemtype-menulist,
+#manageCertificatesButton {
+  margin-inline-start: 0;
+}
+
+#dictionaryList {
+  list-style-type: none;
+  padding: 0;
+  margin-block: 0.5em;
+}
+
+#dictionaryList label {
+  display: flex;
+  align-items: center;
+}
+
+/**
+ * Font dialog menulist fixes
+ */
+
+#font-chooser-group {
+  display: grid;
+  grid-template-columns: max-content 1fr max-content max-content;
+}
+
+#fontsTitle {
+  margin-block: 4px;
+}
+
+#defaultFontType,
+#serif,
+#sans-serif,
+#monospace {
+  min-width: 30ch;
+}
+
+/**
+ * toolkit element overrides
+ */
+
+#preferencesContainer richlistbox {
+  appearance: none;
+  background-color: var(--in-content-box-background);
+  color: var(--in-content-text-color);
+}
+
+#preferencesContainer richlistbox richlistitem {
+  padding: 0.3em;
+  margin: 0;
+  border: none;
+  border-radius: 0;
+  background-image: none;
+}
+
+#containerBox richlistbox richlistitem:hover,
+#identitiesList richlistbox richlistitem:hover,
+#preferencesContainer richlistbox richlistitem:hover {
+  background-color: var(--in-content-item-hover);
+}
+
+#containerBox richlistitem[selected="true"],
+#identitiesList richlistitem[selected="true"],
+#preferencesContainer richlistitem[selected="true"] {
+  background-color: var(--in-content-item-selected-unfocused);
+  color: inherit;
+}
+
+#containerBox richlistbox:focus > richlistitem[selected="true"],
+#identitiesList:focus > richlistitem[selected="true"],
+#preferencesContainer richlistbox:focus > richlistitem[selected="true"] {
+  background-color: var(--in-content-item-selected);
+  color: var(--in-content-item-selected-text) !important;
+}
+
+#defaultWebSearch {
+  margin-inline: 0 4px;
+}
+
+#defaultFontSize,
+#directoriesList,
+#localDirectoriesList,
+#defaultStartupDirList {
+  margin-inline-end: 4px;
+}
+
+#messengerLanguagesDialogPane {
+  min-height: 360px;
+}
+
+#primaryMessengerLocale {
+  margin-inline: 0 4px;
+  min-width: 20em;
+}
+
+#availableLocales {
+  margin-inline: 0;
+}
+
+#warning-message {
+  margin-top: 8px;
+}
+
+#warning-message > .message-bar-description {
+  width: 32em;
+}
+
+.action-button {
+  margin-inline-start: 8px;
+}
+
+#tagList,
+#categorieslist {
+  margin-inline-end: 4px;
+}
+
+#new-tag-button,
+#newCButton {
+  margin-top: 0;
+}
+
+/* Menulist styles */
+.label-item {
+  font-size: .8em;
+}
+
+#datePrefsBox {
+  display: grid;
+  grid-template-columns: auto 1fr 1fr;
+}
+
+#PopupAutoComplete > richlistbox {
+  margin: unset;
+  border: unset;
+  border-radius: unset;
+}
+
+/**
+ * Connection dialog
+ */
+
+#proxyExtensionContent:not([hidden]) {
+  display: flex;
+  align-items: center;
+}
+
+#proxyExtensionDescription {
+  margin-block: 0;
+  flex: 1 1 auto;
+}
+
+#proxyExtensionDescription > img {
+  height: 20px;
+  width: 20px;
+  vertical-align: text-bottom;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+#proxyExtensionDisable {
+  flex: 0 0 auto;
+}
+
+#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;
+}
+
+calendar-notifications-setting {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 9px;
+}
+
+calendar-notifications-setting .add-button {
+  list-style-image: var(--icon-add);
+  -moz-context-properties: stroke;
+  stroke: currentColor;
+}
+
+calendar-notifications-setting .add-button .button-icon {
+  margin-inline-end: 6px;
+}
+
+calendar-notifications-setting .remove-button {
+  width: 32px;
+  min-width: 0;
+  padding: 0;
+  list-style-image: var(--icon-trash);
+  -moz-context-properties: fill, stroke;
+  fill: color-mix(in srgb, currentColor 20%, transparent);
+  stroke: currentColor;
+  background: none;
+  --in-content-button-horizontal-padding: 0;
+}
+
+/**
+ * End connection dialog
+ */
+
+/**
+ * Sync Settings Page
+ */
+
+#noFxaAccount:not([hidden]) {
+  display: flex;
+  gap: 24px;
+}
+
+#noFxaInfo {
+  display: flex;
+  flex-direction: column;
+  align-self: center;
+  flex: 3;
+}
+
+#noFxaCaption {
+  margin-block: 0 4px;
+}
+
+#noFxaDescription {
+  padding-inline-end: 52px;
+  padding-bottom: 52px;
+}
+
+#noFxaSignIn {
+  margin-inline-start: 8px;
+  max-width: 151px;
+  margin: 4px 0;
+}
+
+#noFxaSyncIllustration {
+  width: 169px;
+  flex-grow: 2;
+}
+
+.sync-account-section:not([hidden]) {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  gap: 24px;
+  margin: 24px 0;
+}
+
+#fxaLoginUnverified:not([hidden]),
+#fxaLoginRejected:not([hidden]) {
+  display: flex;
+  align-items: center;
+}
+
+#photoInput {
+  display: contents;
+  place-self: center;
+}
+
+.contact-photo,
+#photoButton {
+  border-radius: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+.contact-photo {
+  width: 78px;
+  height: 78px;
+  object-fit: cover;
+  object-position: center;
+  border: 1px solid var(--in-content-button-background);
+}
+
+.contact-photo[src=""] {
+  background-color: var(--in-content-button-background);
+  background-image: var(--icon-user);
+  background-size: 48px;
+  background-position: calc(50% - 1px) calc(50% - 1px);
+  background-repeat: no-repeat;
+  -moz-context-properties: stroke;
+  stroke: color-mix(in srgb, currentColor 30%, transparent);
+}
+
+#photoButton {
+  position: relative;
+  width: 80px;
+  height: 80px;
+  min-width: 80px;
+  overflow: hidden;
+  background-color: transparent;
+  border: none;
+}
+
+#photoButton:hover {
+  background: none;
+}
+
+#photoOverlay {
+  position: absolute;
+  inset: 0;
+  border-radius: 100%;
+}
+
+#photoButton:focus-visible {
+  outline: 2px solid var(--in-content-focus-outline-color);
+  outline-offset: 2px;
+}
+
+#photoButton:is(:focus-visible, :hover) #photoOverlay {
+  background-color: color-mix(in srgb, var(--color-gray-90) 75%, transparent);
+  background-image: var(--icon-more);
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: 48px;
+  -moz-context-properties: stroke;
+  stroke: var(--color-white);
+  cursor: pointer;
+}
+
+@media (prefers-contrast) {
+  #photoButton:is(:focus-visible, :hover) #photoOverlay {
+    background-color: var(--color-black);
+  }
+}
+
+#fxaAccountInfo {
+  display: flex;
+  flex-direction: column;
+  align-self: center;
+  align-items: flex-start;
+}
+
+#fxaDisplayName {
+  font-weight: bold;
+  font-size: 1.3rem;
+}
+
+#fxaEmailAddress {
+  margin-bottom: 6px
+}
+
+.place-self-start {
+  place-self: start;
+}
+
+.place-self-center {
+  place-self: center;
+}
+
+.place-self-end {
+  place-self: end;
+}
+
+#fxaDeviceInfo {
+  display: flex;
+  gap: 6px;
+  margin: 24px 0;
+}
+
+#fxaDeviceNameInput {
+  flex-grow: 1;
+  align-self: center;
+}
+
+.sync-section {
+  margin-bottom: 24px;
+}
+
+#showSyncedHeader,
+#showSyncedListHeader {
+  display: flex;
+  justify-content: space-between;
+  gap: 24px;
+}
+
+/*
+* We usually use rem for font size but this header needs to match perfectly
+* the styling of the HTML legend coming from toolkit.
+*/
+.sync-header {
+  margin: 16px 0 4px;
+  font-size: 1.1em;
+  font-weight: 600;
+  line-height: 1.4em;
+}
+
+.sync-panel {
+  display: grid;
+  margin-block-start: 15px;
+  padding: 15px;
+  background-color: var(--in-content-box-info-background);
+  border-radius: 6px;
+}
+
+#syncDisconnected .sync-panel {
+  grid-template-columns: 1fr auto;
+  align-items: center;
+}
+
+#syncDisconnected p {
+  margin: 0;
+}
+
+#showSyncedListHeading {
+  font-size: 1.1rem;
+  font-weight: bold;
+  margin: 0;
+}
+
+.synced-list {
+  display: grid;
+  gap: 24px;
+  padding-inline-start: 12px;
+  -moz-context-properties: fill, stroke;
+  fill: color-mix(in srgb, currentColor 20%, transparent);
+  stroke: currentColor;
+}
+
+.synced-item:not([hidden]) {
+  display: inline-flex;
+  align-items: center;
+}
+
+.synced-item::before,
+.synced-item-label::before {
+  height: 16px;
+  width: 16px;
+  margin-inline-end: 6px;
+}
+
+ #showSyncedList,
+ #configSyncList {
+  grid-template-columns: 1fr 1fr;
+}
+
+/* For when we get per-account controls:
+#showSyncAccount,
+#configAccountsContainer {
+  display: grid;
+  gap: 12px;
+  grid-column: 1 / span 2;
+}
+
+#syncedAccounts,
+#configAccounts {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 24px;
+}
+
+#syncedAccounts .synced-list {
+  gap: 9px;
+}
+
+#showSyncAccountLabel::before,*/
+#showSyncAccount::before,
+#configSyncAccountLabel::before {
+  content: var(--icon-mail);
+}
+
+#showSyncAddress::before,
+#configSyncAddressLabel::before {
+  content: var(--icon-address-book);
+}
+
+#showSyncCalendar::before,
+#configSyncCalendarLabel::before {
+  content: var(--icon-calendar);
+}
+
+#showSyncIdentity::before,
+#configSyncIdentityLabel::before {
+  content: var(--icon-id);
+}
+
+#showSyncPasswords::before,
+#configSyncPasswordsLabel::before {
+  content: var(--icon-key);
+}
+
+.synced-account {
+  padding-inline-start: 21px;
+}
+
+.synced-account-name {
+  font-size: 1rem;
+  font-weight: bold;
+  margin: 0;
+  margin-block-end: 9px;
+}
+
+.synced-account-server-config::before {
+  content: var(--icon-globe);
+}
+
+.synced-account-filters::before {
+  content: var(--icon-filter);
+}
+
+.synced-account-keys::before {
+  content: var(--icon-lock);
+}
+
+#configSyncDialogHeading {
+  place-self: center;
+  margin: 0;
+}
+
+#configSyncList {
+  margin-block: 12px 24px;
+  margin-inline: 6px;
+}
+
+#configAccountsContainer {
+  gap: 9px;
+}
+
+.config-list {
+  display: grid;
+  gap: 24px;
+  padding-inline-start: 0;
+  -moz-context-properties: fill, stroke;
+  fill: color-mix(in srgb, currentColor 20%, transparent);
+  stroke: currentColor;
+}
+
+.config-list li {
+  list-style: none;
+}
+
+.synced-account .config-list {
+  gap: 0;
+  margin-inline-start: 21px;
+}
+
+.config-item {
+  display: inline-flex;
+  align-items: center;
+  line-height: 1;
+}
+
+.config-item label::before {
+  display: inline-block;
+  height: 16px;
+  width: 16px;
+  margin-inline-end: 6px;
+  vertical-align: sub;
+}