From 5575b1c9e4c2aa3cf07ec03a139895df34ee544a Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Mon, 20 Dec 2021 09:12:55 +0900
Subject: [PATCH] Clean: Separated proton_chrome

---
 .../proton_contents/_proton_commons.scss      |    6 +-
 src/theme/_proton_chrome.scss                 | 1186 +----------------
 src/theme/proton_chrome/_cert.scss            |   58 +
 src/theme/proton_chrome/_library_popup.scss   |  392 ++++++
 src/theme/proton_chrome/_page_info.scss       |  141 ++
 src/theme/proton_chrome/_proton_commons.scss  |  588 ++++++++
 6 files changed, 1186 insertions(+), 1185 deletions(-)
 create mode 100644 src/theme/proton_chrome/_cert.scss
 create mode 100644 src/theme/proton_chrome/_library_popup.scss
 create mode 100644 src/theme/proton_chrome/_page_info.scss
 create mode 100644 src/theme/proton_chrome/_proton_commons.scss

diff --git a/src/contents/proton_contents/_proton_commons.scss b/src/contents/proton_contents/_proton_commons.scss
index 6b00641..cde8934 100644
--- a/src/contents/proton_contents/_proton_commons.scss
+++ b/src/contents/proton_contents/_proton_commons.scss
@@ -212,15 +212,15 @@
 }
 
 @-moz-document url-prefix("about:plugins"),
-                 url-prefix("about:cache"),
-                 url-prefix("about:checkerboard") {
+               url-prefix("about:cache"),
+               url-prefix("about:checkerboard") {
   table {
     border: 1px solid var(--in-content-border-color) !important;
     border-radius: 0 !important;
   }
 }
 @-moz-document url-prefix("about:cache"),
-                 url-prefix("about:checkerboard") {
+               url-prefix("about:checkerboard") {
   th,
   td {
     border: 1px solid var(--in-content-border-color) !important;
diff --git a/src/theme/_proton_chrome.scss b/src/theme/_proton_chrome.scss
index a47d772..1babec1 100644
--- a/src/theme/_proton_chrome.scss
+++ b/src/theme/_proton_chrome.scss
@@ -1,1182 +1,4 @@
-/*= Proton Commons ===========================================================*/
-@-moz-document url("chrome://global/content/commonDialog.xhtml"),
-  url("chrome://pippki/content/editcacert.xhtml"),
-  url("chrome://pippki/content/deletecert.xhtml"),
-  url("chrome://pippki/content/exceptionDialog.xhtml"),
-  url("chrome://mozapps/content/downloads/unknownContentType.xhtml"),
-  url("chrome://global/content/appPicker.xhtml"),
-  url("chrome://browser/content/pageinfo/pageInfo.xhtml")
-{
-  /*- Overwrite --------------------------------------------------------------*/
-  @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
-    :root {
-      --in-content-page-background: #42414d;
-    }
-  }
-
-  :root:not(:-moz-lwtheme),
-  :root[lwt-default-theme-in-dark-mode] {
-    --checkbox-unchecked-bgcolor: var(--in-content-button-background) !important;
-    --checkbox-unchecked-hover-bgcolor: var(--in-content-button-background-hover) !important;
-    --checkbox-unchecked-active-bgcolor: var(--in-content-button-background-active) !important;
-    --checkbox-checked-bgcolor: var(--in-content-primary-button-background) !important;
-    --checkbox-checked-color: var(--in-content-primary-button-text-color) !important;
-    --checkbox-checked-hover-bgcolor: var(--in-content-primary-button-background-hover) !important;
-    --checkbox-checked-active-bgcolor: var(--in-content-primary-button-background-active) !important;
-  }
-
-  /*- Dialog -----------------------------------------------------------------*/
-  #commonDialog,
-    #editCaCert,
-    #deleteCertificate,
-    #exceptiondialog,
-    #unknownContentType,
-    #app-picker,
-    #topBar, /* #topBar, #mainDeck: Page Info */
-    #mainDeck {
-    -moz-appearance: none !important; /* For Mac */
-    color: var(--in-content-page-color) !important;
-    background-color: var(--in-content-page-background) !important;
-    /* border-radius: 0 0 8px 8px !important; */
-  }
-
-  /*- Button -----------------------------------------------------------------*/
-  button {
-    -moz-appearance: none !important;
-    color: var(--in-content-button-text-color) !important;
-    background-color: var(--in-content-button-background) !important;
-    font: inherit;
-    font-size: 1em !important;
-    font-weight: 600 !important;
-    min-height: 32px !important;
-    border: 1px solid transparent !important; /* shows up in high-contrast mode */
-    border-radius: var(--in-content-button-border-radius) !important;
-    padding: var(--in-content-button-vertical-padding) var(--in-content-button-horizontal-padding) !important;
-
-    min-height: 32px !important;
-    /* Use the same margin of other elements for the alignment */
-    margin-inline: 4px !important;
-    min-width: 6.3em !important;
-  }
-
-  /* Medium and small buttons get sized to 7/14 and 6/12px padding (when adding
-     * the 1px border): */
-  button.medium {
-    padding: 6px 13px !important;
-    min-height: 28px !important;
-    font-size: 0.95em !important;
-  }
-  button.small {
-    padding: 5px 11px !important;
-    min-height: 24px !important;
-    font-size: 0.9em !important;
-  }
-
-  /* Remove margin added by button.css */
-  xul|button > .button-box > .button-text {
-    margin: 0 !important;
-  }
-
-  button:-moz-focusring,
-    xul|menulist:-moz-focusring,
-    xul|checkbox:-moz-focusring > .checkbox-check, /* :not([native]) to win specificity over checkbox.css */
-    xul|radio[focused="true"]:-moz-focusring {
-    box-shadow: none !important;
-    outline: 2px solid var(--in-content-focus-outline-color) !important;
-    outline-offset: 2px !important;
-  }
-  button:not([disabled="true"]):hover {
-    background-color: var(--in-content-button-background-hover) !important;
-    color: var(--in-content-button-text-color-hover) !important;
-    border-color: transparent !important;
-  }
-
-  xul|button:not([disabled="true"]):hover:active,
-  xul|button[open],
-  xul|button[open]:hover,
-  xul|menulist[open="true"]:not([disabled="true"]) {
-    background-color: var(--in-content-button-background-active) !important;
-  }
-
-  xul|button[default] {
-    background-color: var(--in-content-primary-button-background) !important;
-    color: var(--in-content-primary-button-text-color) !important;
-  }
-  xul|button[default]:not([disabled="true"]):hover {
-    background-color: var(--in-content-primary-button-background-hover) !important;
-    color: var(--in-content-primary-button-text-color) !important;
-  }
-  xul|button[default]:not([disabled="true"]):hover:active {
-    background-color: var(--in-content-primary-button-background-active) !important;
-  }
-
-  xul|button[disabled="true"],
-  xul|menulist[disabled="true"] {
-    opacity: 0.4 !important;
-  }
-  xul|button:not([disabled="true"]):hover,
-  xul|menulist:not([disabled="true"]):hover {
-    background-color: var(--in-content-button-background-hover) !important;
-    color: var(--in-content-button-text-color-hover) !important;
-    border-color: transparent !important;
-  }
-
-  @media (prefers-contrast) {
-    xul|button[default]:not([disabled="true"]):hover {
-      border-color: currentColor !important;
-    }
-
-    button:focus {
-      color: var(--in-content-button-text-color) !important;
-    }
-
-    xul|button[default]:focus,
-    button.primary:focus {
-      color: var(--in-content-primary-button-text-color) !important;
-    }
-  }
-
-  /*- Radio Button -----------------------------------------------------------*/
-  xul|radio {
-    /* margin-inline-start: 0 !important; */
-    appearance: none !important;
-  }
-
-  xul|*.radio-check {
-    appearance: none !important;
-    width: 16px !important;
-    height: 16px !important;
-    padding: 0 !important;
-    border: 1px solid var(--in-content-box-border-color) !important;
-    border-radius: 100% !important;
-    margin-block: 2px !important; /* extend the vertical clicktarget */
-    margin-inline: 0 6px !important;
-    background-color: var(--in-content-button-background) !important;
-    background-position: center !important;
-    flex-shrink: 0 !important; /* avoid shrinking inside flex container */
-  }
-
-  xul|radio:not([disabled="true"]):hover > xul|*.radio-check {
-    background-color: var(--in-content-button-background-hover) !important;
-    color: var(--in-content-button-text-color-hover) !important;
-  }
-
-  xul|radio:not([disabled="true"]):hover:active > xul|*.radio-check {
-    background-color: var(--in-content-button-background-active) !important;
-  }
-
-  xul|*.radio-check[selected] {
-    -moz-context-properties: fill !important;
-    fill: currentColor !important;
-    color: var(--in-content-primary-button-text-color) !important;
-    background-color: var(--in-content-primary-button-background) !important;
-    background-image: url("chrome://global/skin/icons/radio.svg") !important;
-    border-color: transparent !important;
-
-    /* Style the button also when printing with "Print Backgrounds" unchecked */
-    color-adjust: exact !important;
-  }
-
-  xul|radio:not([disabled="true"])[selected]:hover > xul|*.radio-check {
-    background-color: var(--in-content-primary-button-background-hover) !important;
-    color: var(--in-content-primary-button-text-color-hover) !important;
-  }
-
-  xul|radio:not([disabled="true"])[selected]:hover:active > xul|*.radio-check {
-    background-color: var(--in-content-primary-button-background-active) !important;
-  }
-
-  xul|*.radio-label-box {
-    margin-inline: 0 8px !important;
-    padding-inline-start: 0 !important;
-  }
-
-  /* Disabled checkboxes, radios and labels */
-  xul|checkbox[disabled="true"],
-  xul|radio[disabled="true"],
-  xul|label[disabled="true"] {
-    color: inherit !important;
-  }
-
-  xul|checkbox[disabled="true"],
-  xul|radio[disabled="true"],
-  xul|label[disabled="true"] {
-    opacity: 0.5 !important;
-  }
-
-  /*- Check Box --------------------------------------------------------------*/
-  /* From checkbox.css */
-  checkbox {
-    appearance: none !important;
-    -moz-box-align: center !important;
-    margin: 4px 2px !important;
-  }
-
-  .checkbox-icon[src] {
-    margin-inline-end: 2px !important;
-  }
-  .checkbox-label {
-    margin: 1px 0 !important;
-  }
-
-  checkbox[disabled="true"] {
-    opacity: 0.4 !important;
-  }
-
-  .checkbox-check {
-    appearance: none !important;
-    color: var(--checkbox-border-color, ThreeDDarkShadow) !important;
-    background-color: var(--checkbox-unchecked-bgcolor, Field) !important;
-    border: 1px solid currentColor !important;
-    border-radius: 2px !important;
-    margin-inline-end: 6px !important;
-  }
-
-  .checkbox-check {
-    height: 16px !important;
-    width: 16px !important;
-  }
-
-  checkbox:not([disabled="true"]):hover > .checkbox-check {
-    background-color: var(
-      --checkbox-unchecked-hover-bgcolor,
-      color-mix(in srgb, -moz-accent-color 4%, Field)
-    ) !important;
-  }
-
-  checkbox:not([disabled="true"]):hover:active > .checkbox-check {
-    background-color: var(
-      --checkbox-unchecked-active-bgcolor,
-      color-mix(in srgb, -moz-accent-color 8%, Field)
-    ) !important;
-  }
-
-  .checkbox-check[checked] {
-    border-color: var(--checkbox-checked-border-color, transparent) !important;
-    background-color: var(--checkbox-checked-bgcolor, -moz-accent-color) !important;
-    background-image: url("chrome://global/skin/icons/check.svg") !important;
-    background-position: center !important;
-    background-repeat: no-repeat !important;
-    -moz-context-properties: fill !important;
-    fill: currentColor !important;
-    color: var(--checkbox-checked-color, -moz-accent-color-foreground) !important;
-    /* Style the button also when printing with "Print Backgrounds" unchecked */
-    color-adjust: exact !important;
-  }
-
-  checkbox:not([disabled="true"]):hover > .checkbox-check[checked] {
-    background-color: var(
-      --checkbox-checked-hover-bgcolor,
-      color-mix(in srgb, currentColor 12.5%, -moz-accent-color)
-    ) !important;
-  }
-
-  checkbox:not([disabled="true"]):hover:active > .checkbox-check[checked] {
-    background-color: var(
-      --checkbox-checked-active-bgcolor,
-      color-mix(in srgb, currentColor 25%, -moz-accent-color)
-    ) !important;
-  }
-
-  checkbox:-moz-focusring > .checkbox-check {
-    outline: 2px solid var(--focus-outline-color, -moz-accent-color) !important;
-    outline-offset: var(--focus-outline-offset, 2px) !important;
-  }
-
-  @media (prefers-contrast) {
-    checkbox:not([disabled="true"]):hover > .checkbox-check {
-      /* color will set the border-color on the check due to how HCM works for in-content pages. */
-      color: var(--checkbox-checked-border-color, color-mix(in srgb, -moz-accent-color 4%, Field)) !important;
-    }
-
-    .checkbox-check[checked] {
-      color: var(--checkbox-checked-border-color, currentColor) !important;
-      fill: var(--checkbox-checked-color, -moz-accent-color-foreground) !important;
-    }
-
-    checkbox:not([disabled="true"]):hover:active > .checkbox-check[checked],
-    checkbox:not([disabled="true"]):hover > .checkbox-check[checked] {
-      color: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important;
-      fill: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important;
-    }
-  }
-
-  /* From common.css */
-  xul|*.checkbox-check {
-    margin-block: 2px !important;
-  }
-  xul|richlistitem > xul|*.checkbox-check {
-    margin: 3px 6px !important;
-  }
-
-  /*- Menulist ---------------------------------------------------------------*/
-  /* From mulist.css */
-  xul|menulist {
-    appearance: none !important;
-    background-color: var(--in-content-button-background, ButtonFace) !important;
-    color: var(--in-content-button-text-color, ButtonText) !important;
-    border-radius: 4px !important;
-    padding-block: 4px !important;
-    padding-inline: 12px 8px !important;
-    margin: 5px 2px 3px !important;
-  }
-
-  xul|menulist[size="medium"] {
-    padding-block: 6px !important;
-    padding-inline: 16px 10px !important;
-  }
-
-  xul|menulist[size="large"] {
-    padding-block: 8px !important;
-    padding-inline: 16px 12px !important;
-  }
-
-  xul|menulist:hover {
-    background-color: var(--button-hover-bgcolor, color-mix(in srgb, currentColor 10%, ButtonFace)) !important;
-  }
-
-  xul|menulist:hover:active {
-    background-color: var(--button-active-bgcolor, color-mix(in srgb, currentColor 20%, ButtonFace)) !important;
-  }
-
-  xul|menulist:-moz-focusring {
-    outline: 2px solid var(--focus-outline-color, -moz-accent-color) !important;
-    outline-offset: var(--focus-outline-offset, 2px) !important;
-  }
-
-  #label-box {
-    -moz-box-align: center !important;
-    -moz-box-pack: center !important;
-    font-weight: 600 !important;
-  }
-
-  dropmarker {
-    display: -moz-box !important;
-    appearance: none !important;
-    width: 12px !important;
-    height: 12px !important;
-  }
-
-  dropmarker::part(icon) {
-    list-style-image: url("chrome://global/skin/icons/arrow-down.svg") !important;
-    -moz-context-properties: fill !important;
-    fill: currentColor !important;
-  }
-
-  #highlightable-label:not([highlightable="true"]),
-  #label[highlightable="true"] {
-    display: none !important;
-  }
-
-  xul|menuitem > label:not(.menu-text) {
-    margin: 0 3px !important;
-  }
-
-  /* From common.css */
-  xul|menulist > xul|menupopup {
-    appearance: none !important;
-
-    /* Reset native styles on Windows and macOS */
-    border: none !important;
-    background-color: transparent !important;
-
-    --panel-border-color: var(--in-content-box-border-color) !important;
-    --panel-border-radius: 2px !important;
-    --panel-background: var(--in-content-box-background) !important;
-    --panel-color: var(--in-content-text-color) !important;
-    --panel-padding: 0 !important;
-  }
-
-  xul|menulist > xul|menupopup xul|menu,
-  xul|menulist > xul|menupopup xul|menuitem {
-    appearance: none !important;
-    font-size: 1em !important;
-    padding-block: 0.2em !important;
-    padding-inline: 10px 30px !important;
-  }
-
-  xul|menulist > xul|menupopup > xul|menu:not([disabled="true"])[_moz-menuactive="true"],
-  xul|menulist > xul|menupopup > xul|menuitem:not([disabled="true"])[_moz-menuactive="true"] {
-    color: var(--in-content-item-hover-text) !important;
-    background-color: var(--in-content-item-hover) !important;
-  }
-
-  xul|menulist > xul|menupopup > xul|menu:not([disabled="true"])[selected="true"],
-  xul|menulist > xul|menupopup > xul|menuitem:not([disabled="true"])[selected="true"] {
-    color: var(--in-content-item-selected-text) !important;
-    background-color: var(--in-content-item-selected) !important;
-  }
-
-  xul|menulist > xul|menupopup > xul|menu[disabled="true"],
-  xul|menulist > xul|menupopup > xul|menuitem[disabled="true"] {
-    color: #999 !important;
-    /* override the [_moz-menuactive="true"] background color from
-         global/menu.css */
-    background-color: transparent !important;
-  }
-
-  xul|menulist > xul|menupopup xul|menuseparator {
-    appearance: none !important;
-    margin: 0 !important;
-    padding: 0 !important;
-    border-top: 1px solid var(--in-content-box-border-color) !important;
-    border-bottom: none !important;
-  }
-
-  xul|menulist::part(dropmarker) {
-    margin-block: 1px !important;
-  }
-
-  /* Override menulist.css */
-  xul|menulist[disabled="true"] {
-    background-color: var(--in-content-button-background) !important;
-  }
-
-  xul|menulist:-moz-focusring > xul|*.menulist-label-box {
-    outline: none !important;
-  }
-
-  /*- List Boxes -------------------------------------------------------------*/
-  html|select[size][multiple],
-  xul|listheader,
-  xul|richlistbox {
-    appearance: none !important;
-    margin-inline: 0 !important;
-    background-color: var(--in-content-box-background) !important;
-    border: 1px solid var(--in-content-box-border-color) !important;
-    border-radius: 4px !important;
-    color: var(--in-content-text-color) !important;
-  }
-
-  xul|listheader {
-    border-bottom: none !important;
-    border-bottom-left-radius: 0 !important;
-    border-bottom-right-radius: 0 !important;
-    padding-bottom: 1px !important;
-    box-shadow: inset 0 -1px var(--in-content-border-color) !important;
-    overflow: clip !important; /* Clip border-radius */
-  }
-
-  xul|listheader + xul|richlistbox {
-    margin-top: 0 !important;
-    border-top: none !important;
-    border-top-left-radius: 0 !important;
-    border-top-right-radius: 0 !important;
-  }
-
-  html|select[size][multiple] > html|option,
-  xul|treechildren::-moz-tree-row {
-    padding: 0.3em inherit !important;
-    margin: 0 !important;
-    border: none !important;
-    border-radius: 0 !important;
-    background-image: none !important;
-  }
-
-  xul|treechildren::-moz-tree-row(multicol, odd) {
-    background-color: var(--in-content-box-background-odd);
-  }
-
-  html|select[size][multiple] > html|option:hover,
-  xul|richlistbox > xul|richlistitem:not([disabled="true"], [selected]):hover,
-  xul|treechildren::-moz-tree-row(hover) {
-    background-color: var(--in-content-item-hover) !important;
-    color: var(--in-content-item-hover-text) !important;
-  }
-
-  xul|richlistbox > xul|richlistitem[selected],
-  xul|treechildren::-moz-tree-row(selected) {
-    background-color: var(--in-content-item-selected) !important;
-    color: var(--in-content-item-selected-text) !important;
-  }
-
-  xul|richlistbox:not(#categories) > xul|richlistitem[selected] {
-    /* Ensure buttons/menulists inside richlistitems (containers, applications) look OK */
-    --in-content-button-background: color-mix(in srgb, currentColor 15%, transparent) !important;
-    --in-content-button-background-hover: color-mix(in srgb, currentColor 30%, transparent) !important;
-    --in-content-button-background-active: color-mix(in srgb, currentColor 45%, transparent) !important;
-    --in-content-button-text-color: var(--in-content-item-selected-text) !important;
-    --in-content-button-text-color-hover: var(--in-content-item-selected-text) !important;
-    --in-content-focus-outline-color: var(--in-content-item-selected-text) !important;
-  }
-
-  xul|richlistitem[selected] xul|menulist:focus-visible {
-    outline-offset: -2px !important;
-  }
-
-  /* Use a 2px border so that selected row highlight is still visible behind
-        an existing high-contrast border that uses the background color */
-  @media (prefers-contrast) {
-    xul|treechildren::-moz-tree-row(selected) {
-      border: 2px solid currentColor !important;
-      border-radius: 4px !important;
-    }
-  }
-
-  xul|panel[type="autocomplete-richlistbox"] {
-    background-color: var(--in-content-box-background) !important;
-    border: 1px solid var(--in-content-box-border-color) !important;
-    color: var(--in-content-text-color) !important;
-  }
-
-  /*- Each OS ----------------------------------------------------------------*/
-  @include OS($win) {
-    xul|checkbox,
-    xul|radio {
-      padding-inline-start: 0 !important;
-    }
-
-    /* Override menulist.css */
-    xul|menulist[disabled="true"] {
-      background-color: var(--in-content-button-background) !important;
-    }
-
-    xul|menulist:-moz-focusring > xul|*.menulist-label-box {
-      outline: none !important;
-    }
-  }
-
-  @include OS($linux) {
-    /* Overriding appearance also avoids incorrect selection background color with light text. */
-    xul|button > xul|*.button-box,
-    xul|menulist::part(label-box),
-    xul|*.radio-label-box,
-    xul|*.checkbox-label-box {
-      appearance: none !important;
-    }
-
-    xul|button[type="menu"] > xul|*.button-box > xul|*.button-menu-dropmarker {
-      appearance: none !important;
-    }
-    xul|menulist {
-      font-size: inherit !important;
-    }
-    xul|menulist::part(dropmarker) {
-      display: -moz-box;
-      margin-block: 6px !important;
-    }
-    xul|menulist:-moz-focusring::part(label-box) {
-      outline: none !important;
-    }
-  }
-
-  @include OS($mac) {
-    xul|menulist > xul|menupopup > xul|menuitem[checked="true"]::before,
-    xul|menulist > xul|menupopup > xul|menuitem[selected="true"]::before {
-      display: none !important;
-    }
-
-    xul|menulist::part(dropmarker) {
-      display: -moz-box !important;
-      margin-block: 1px !important;
-    }
-
-    xul|menulist > xul|menupopup xul|menu,
-    xul|menulist > xul|menupopup xul|menuitem {
-      padding-inline-end: 34px !important;
-    }
-
-    xul|*.checkbox-icon,
-    xul|*.radio-icon {
-      margin-inline-end: 0 !important;
-    }
-
-    xul|*.text-link:-moz-focusring {
-      box-shadow: none !important;
-    }
-  }
-}
-
-/*= Delete Cert ==============================================================*/
-@-moz-document url("chrome://pippki/content/deletecert.xhtml")
-{
-  :root {
-    --in-content-border-color: color-mix(in srgb, currentColor 41%, transparent) !important;
-  }
-  #certlist {
-    border: 1px solid var(--in-content-border-color) !important;
-    border-radius: 4px !important;
-  }
-}
-
-/*= Cert Exeption Dialog =====================================================*/
-@-moz-document url("chrome://pippki/content/exceptionDialog.xhtml")
-{
-  :root {
-    --in-content-border-color: color-mix(in srgb, currentColor 41%, transparent) !important;
-  }
-  #locationTextBox {
-    appearance: none !important;
-    border: 1px solid var(--in-content-box-border-color) !important;
-    border-radius: 4px !important;
-    color: inherit !important;
-    background-color: var(--in-content-box-background) !important;
-
-    font-family: inherit !important;
-    font-size: inherit !important;
-    padding: 8px !important;
-    margin: 2px 4px !important;
-  }
-  #locationTextBox:focus {
-    border-color: transparent !important;
-    outline: 2px solid var(--in-content-focus-outline-color) !important;
-    outline-offset: -1px !important; /* Prevents antialising around the corners */
-  }
-  #locationTextBox:-moz-ui-invalid {
-    border-color: transparent !important;
-    outline: 2px solid var(--in-content-border-invalid) !important;
-    outline-offset: -1px !important; /* Prevents antialising around the corners */
-  }
-  #locationTextBox:disabled {
-    opacity: 0.4 !important;
-  }
-
-  #exceptiondialog:first-child > hbox > vbox:not([flex="1"]) {
-    width: 48px !important;
-    height: 48px !important;
-    background-image: url("chrome://global/skin/icons/warning.svg") !important;
-    background-size: 48px !important;
-    background-repeat: no-repeat !important;
-
-    -moz-context-properties: fill !important;
-    fill: currentColor !important;
-  }
-  #exceptiondialog:first-child > hbox > vbox > image {
-    display: none !important;
-  }
-}
-
-/*= Page Info ================================================================*/
-@-moz-document url("chrome://browser/content/pageinfo/pageInfo.xhtml")
-{
-  :root {
-    --in-content-border-color: color-mix(in srgb, currentColor 41%, transparent) !important;
-  }
-
-  #viewGroup > radio {
-    border-radius: 8px !important;
-    padding: var(--in-content-button-vertical-padding) var(--in-content-button-horizontal-padding) !important;
-    margin: 4px !important;
-  }
-  #viewGroup > radio:hover {
-    background-color: var(--in-content-button-background-hover) !important; /* #E0E8F6; */
-  }
-  #viewGroup > radio[selected="true"] {
-    color: var(--in-content-button-text-color) !important; /* SelectedItemText */
-    background-color: var(--in-content-button-background-active) !important; /* #C1D2EE; */
-  }
-  #viewGroup > radio {
-    color: var(--in-content-deemphasized-text) !important; /* FieldText */
-  }
-
-  #viewGroup > radio {
-    list-style-image: none !important;
-    background-image: var(--viewgroup-image) !important;
-    background-repeat: no-repeat;
-    background-position: top var(--in-content-button-vertical-padding) center;
-    background-size: 32px !important;
-
-    -moz-context-properties: fill !important;
-    fill: currentColor !important;
-  }
-  #generalTab {
-    --viewgroup-image: url(chrome://global/skin/icons/page-portrait.svg);
-  }
-  #mediaTab {
-    --viewgroup-image: url(chrome://browser/skin/canvas.svg);
-  }
-  #permTab {
-    --viewgroup-image: url(chrome://browser/skin/permissions.svg);
-  }
-  #securityTab {
-    --viewgroup-image: url(chrome://global/skin/icons/security.svg);
-  }
-
-  #viewGroup > radio > .radio-label-box {
-    /* Overwrite */
-    margin: 0 !important;
-    padding: 0 6 !important;
-  }
-
-  #mainDeck input {
-    color: var(--in-content-page-color) !important;
-  }
-
-  #permList {
-    -moz-appearance: none !important;
-    color: var(--in-content-page-color) !important;
-    background-color: var(--in-content-box-background) !important;
-  }
-  .permission:hover {
-    color: var(--in-content-text-color) !important;
-    background-color: var(--in-content-button-background-hover) !important;
-  }
-  .permission radio[disabled] {
-    color: var(--in-content-deemphasized-text) !important;
-  }
-
-  treecols {
-    -moz-appearance: none !important;
-    background: var(--in-content-table-header-background) !important;
-    color: var(--in-content-table-header-color) !important;
-  }
-  treecols > treecol,
-  treecols > treecolpicker.treecol-image {
-    -moz-appearance: none !important;
-    color: var(--in-content-table-header-color) !important;
-    background: var(--in-content-table-header-background) !important;
-    border: 1px solid var(--in-content-border-color) !important;
-    padding: 4px !important;
-    border-spacing: 0;
-
-    text-align: center !important;
-  }
-
-  tree,
-  treechildren::-moz-tree-row {
-    -moz-appearance: none !important;
-    color: var(--in-content-text-color) !important;
-    background-color: var(--in-content-table-background) !important;
-    border: 1px solid var(--in-content-border-color) !important;
-  }
-
-  treechildren::-moz-tree-row(odd) {
-    background-color: var(--in-content-box-background-odd) !important;
-  }
-
-  treechildren::-moz-tree-row(hover) {
-    color: var(--in-content-item-hover-text) !important;
-    background-color: var(--in-content-item-hover) !important;
-  }
-  treechildren::-moz-tree-row(selected) {
-    background-color: var(--in-content-item-selected) !important;
-  }
-
-  treechildren::-moz-tree-cell {
-    border-inline: 1px solid var(--in-content-border-color) !important;
-    border-spacing: 0 !important;
-    padding: 4px !important;
-    margin: 0 !important;
-  }
-  treechildren::-moz-tree-cell-text(hover) {
-    color: var(--in-content-item-hover-text) !important;
-  }
-  treechildren::-moz-tree-cell-text(selected) {
-    font-weight: 600 !important;
-    color: var(--in-content-item-selected-text) !important;
-  }
-
-  #imagecontainerbox {
-    background-color: var(--in-content-box-background) !important;
-  }
-
-  #metatree,
-  #imagetree,
-  #imagecontainerbox,
-  #permList {
-    border-radius: 4px !important;
-  }
-  #metatree,
-  #imagetree {
-    overflow: hidden !important;
-  }
-
-  #topBar,
-  #imagecontainerbox,
-  #permList {
-    border-color: var(--in-content-border-color) !important;
-  }
-}
-
-/*= Library Popup ============================================================*/
-@-moz-document url("chrome://browser/content/places/places.xhtml")
-{
-  @include OS($linux) {
-    :root {
-      --organizer-color: -moz-DialogText;
-      --organizer-deemphasized-color: GrayText;
-
-      --organizer-toolbar-background: -moz-Dialog;
-      --organizer-pane-background: -moz-Dialog;
-      --organizer-content-background: -moz-Dialog;
-
-      --organizer-hover-background: SelectedItem;
-      --organizer-hover-color: SelectedItemText;
-      --organizer-selected-background: SelectedItem;
-      --organizer-selected-color: SelectedItemText;
-      --organizer-outline-color: SelectedItem;
-
-      --organizer-separator-color: ThreeDDarkShadow;
-      --organizer-border-color: ThreeDShadow;
-
-      --organizer-toolbar-field-background: Field;
-      --organizer-toolbar-field-background-focused: Field;
-      --organizer-toolbar-field-border-color: ThreeDShadow;
-      --organizer-toolbar-field-focus-border-color: var(--organizer-outline-color);
-      --organizer-toolbar-field-focus-box-shadow: unset;
-      --organizer-pane-field-border-color: ThreeDShadow;
-    }
-
-    @media not all and (prefers-contrast) {
-      :root {
-        --organizer-color: var(--in-content-page-color);
-        --organizer-deemphasized-color: var(--in-content-deemphasized-text);
-
-        --organizer-toolbar-background: rgb(249, 249, 251); /* --toolbar-bgcolor */
-        --organizer-pane-background: rgb(229, 229, 235); /* --lwt-accent-color */
-        --organizer-content-background: var(--in-content-page-background);
-
-        --organizer-hover-background: var(--in-content-button-background-hover);
-        --organizer-hover-color: var(--organizer-color);
-        --organizer-selected-background: var(--in-content-button-background-active);
-        --organizer-selected-color: var(--organizer-color);
-        --organizer-outline-color: var(--in-content-primary-button-background);
-
-        --organizer-separator-color: var(--organizer-pane-field-border-color);
-        --organizer-border-color: var(--in-content-border-color);
-
-        --organizer-toolbar-field-background: rgb(240, 240, 244); /* --lwt-accent-color */
-        --organizer-toolbar-field-background-focused: Field;
-        --organizer-toolbar-field-border-color: transparent;
-        --organizer-toolbar-field-focus-border-color: color-mix(
-          in srgb,
-          var(--organizer-outline-color) 50%,
-          transparent
-        );
-        --organizer-toolbar-field-focus-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.23);
-        --organizer-pane-field-border-color: color-mix(in srgb, currentColor 41%, transparent);
-      }
-
-      @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
-        :root {
-          --organizer-color: rgb(251, 251, 254);
-          --organizer-deemphasized-color: rgb(191, 191, 201);
-
-          --organizer-toolbar-background: rgb(43, 42, 51);
-          --organizer-pane-background: rgb(35, 34, 43);
-          --organizer-content-background: rgb(28, 27, 34);
-
-          --organizer-hover-background: rgb(82, 82, 94);
-          --organizer-selected-background: rgb(91, 91, 102);
-          --organizer-outline-color: rgb(0, 221, 255);
-
-          --organizer-toolbar-field-background: var(--in-content-page-background);
-          --organizer-toolbar-field-background-focused: rgb(66, 65, 77);
-          scrollbar-color: rgba(249, 249, 250, 0.4) rgba(20, 20, 25, 0.3);
-        }
-      }
-    }
-
-    /*- Toolbar & Menus ------------------------------------------------------*/
-    #placesToolbar {
-      appearance: none !important;
-      background-color: var(--organizer-toolbar-background) !important;
-      color: var(--organizer-color) !important;
-      border-bottom: 1px solid var(--organizer-border-color) !important;
-      padding: 4px !important;
-      padding-inline-end: 6px !important;
-    }
-
-    #placesToolbar > toolbarbutton {
-      appearance: none !important;
-      padding: 5px !important;
-      border-radius: 4px !important;
-    }
-
-    #placesToolbar > toolbarbutton[disabled] {
-      opacity: 0.6 !important;
-    }
-
-    #placesToolbar > toolbarbutton:not([disabled]):hover {
-      background-color: var(--organizer-hover-background) !important;
-      color: var(--organizer-hover-color) !important;
-    }
-
-    #placesToolbar > toolbarbutton:not([disabled]):hover:active {
-      background-color: var(--organizer-selected-background) !important;
-    }
-
-    #placesToolbar > toolbarbutton > .toolbarbutton-icon,
-    #placesMenu > menu > image,
-    #placesMenu > menu > .menubar-text {
-      -moz-context-properties: fill !important;
-      fill: currentColor !important;
-    }
-
-    #placesMenu {
-      margin-inline-start: 6px !important;
-    }
-
-    #placesMenu > menu {
-      appearance: none !important;
-      color: var(--organizer-color) !important;
-      border-radius: 4px !important;
-      padding-block: 5px !important;
-      padding-inline-start: 5px !important;
-      margin-inline-end: 2px !important;
-    }
-
-    #placesMenu > menu[_moz-menuactive="true"],
-    #placesMenu > menu:hover {
-      background-color: var(--organizer-hover-background) !important;
-      color: var(--organizer-hover-color) !important;
-    }
-
-    #placesMenu > menu:hover:active,
-    #placesMenu > menu[open] {
-      background-color: var(--organizer-selected-background) !important;
-      color: var(--organizer-selected-color) !important;
-    }
-
-    #placesMenu > menu > .menubar-text {
-      margin-block: 0 !important; /* override menu.css */
-      padding-inline-end: 4px !important;
-    }
-
-    /*- Search Bar & Input ---------------------------------------------------*/
-    #searchFilter,
-    #detailsPane html|input {
-      appearance: none !important;
-      background-color: var(--organizer-toolbar-field-background) !important;
-      color: var(--organizer-color) !important;
-      border: 1px solid var(--organizer-toolbar-field-border-color) !important;
-      border-radius: 4px !important;
-      margin: 0 !important;
-      padding-block: 2px !important;
-      min-height: 24px !important;
-    }
-
-    #searchFilter[focused] {
-      box-shadow: var(--organizer-toolbar-field-focus-box-shadow) !important;
-      background-color: var(--organizer-toolbar-field-background-focused) !important;
-      border-color: transparent !important;
-      outline: 2px solid var(--organizer-toolbar-field-focus-border-color) !important;
-      outline-offset: -2px !important;
-    }
-
-    /*- Sidebar & Splitter ---------------------------------------------------*/
-    #placesList {
-      background-color: var(--organizer-pane-background) !important;
-    }
-
-    #placesView > splitter {
-      border: 0 !important;
-      border-inline-end: 1px solid var(--organizer-border-color) !important;
-      min-width: 0 !important;
-      width: 3px !important;
-      background-color: transparent !important;
-      margin-inline-start: -3px !important;
-      position: relative !important;
-    }
-
-    /*- Downloads Pane -------------------------------------------------------*/
-    #downloadsRichListBox {
-      color: var(--organizer-color) !important;
-      background-color: var(--organizer-content-background) !important;
-    }
-
-    #clearDownloadsButton:focus-visible {
-      outline: 2px solid var(--organizer-outline-color) !important;
-    }
-
-    richlistitem[selected="true"],
-    richlistitem:hover {
-      background-color: var(--organizer-hover-background) !important;
-      color: var(--organizer-color) !important;
-    }
-
-    richlistbox:where(:focus) > richlistitem[selected="true"] {
-      background-color: var(--organizer-selected-background) !important;
-    }
-
-    /*- Tree -----------------------------------------------------------------*/
-    #contentView treecol {
-      /* Use box-shadow to draw a bottom border instead of border-bottom
-         * because otherwise the items on contentView won't be perfectly
-         * aligned with the items on the sidebar. */
-      box-shadow: inset 0 -1px var(--organizer-border-color) !important;
-    }
-
-    tree {
-      background-color: var(--organizer-content-background) !important;
-      color: var(--organizer-color) !important;
-    }
-
-    treecol:not([hideheader="true"]),
-    treecolpicker {
-      appearance: none !important;
-      border: none !important;
-      background-color: var(--in-content-button-background) !important;
-      color: var(--organizer-color, inherit) !important;
-      padding: 5px 10px !important;
-    }
-
-    treecol:not([hideheader="true"], [sortable="false"]):hover,
-    treecolpicker:hover {
-      background-color: var(--organizer-hover-background) !important;
-      color: var(--organizer-color) !important;
-    }
-
-    treecol:not([hideheader="true"], [sortable="false"]):hover:active,
-    treecolpicker:hover:active {
-      background-color: var(--organizer-selected-background) !important;
-    }
-
-    treecol:not([hideheader="true"], :first-child),
-    treecolpicker {
-      padding-left: 10px !important;
-      border-inline-start-width: 1px !important;
-      border-inline-start-style: solid !important;
-      border-image: linear-gradient(
-          transparent 0%,
-          transparent 20%,
-          var(--organizer-border-color) 20%,
-          var(--organizer-border-color) 80%,
-          transparent 80%,
-          transparent 100%
-        )
-        1 1 !important;
-    }
-
-    treecol[sortDirection]:not([hideheader="true"]) > xul|*.treecol-sortdirection {
-      fill: currentColor !important;
-      width: 18px !important;
-      height: 18px !important;
-    }
-
-    treechildren::-moz-tree-row {
-      background-color: transparent !important;
-    }
-
-    treechildren::-moz-tree-row(hover) {
-      background-color: var(--organizer-hover-background) !important;
-    }
-
-    treechildren::-moz-tree-row(selected) {
-      background-color: var(--organizer-selected-background) !important;
-      color: var(--organizer-selected-color) !important;
-      border: 1px solid transparent !important;
-    }
-
-    treechildren::-moz-tree-image(hover),
-    treechildren::-moz-tree-twisty(hover),
-    treechildren::-moz-tree-cell-text(hover) {
-      color: var(--organizer-hover-color) !important;
-    }
-
-    treechildren::-moz-tree-image(selected),
-    treechildren::-moz-tree-twisty(selected),
-    treechildren::-moz-tree-cell-text(selected) {
-      color: var(--organizer-selected-color) !important;
-    }
-
-    treechildren::-moz-tree-separator {
-      height: 1px !important;
-      border-color: var(--organizer-separator-color) !important;
-    }
-
-    treechildren::-moz-tree-separator(hover) {
-      border-color: var(--organizer-hover-color) !important;
-    }
-
-    treechildren::-moz-tree-separator(selected) {
-      border-color: var(--organizer-selected-color) !important;
-    }
-
-    /*- Info Box -------------------------------------------------------------*/
-    #detailsPane {
-      background-color: var(--organizer-pane-background) !important;
-      color: var(--organizer-color) !important;
-      padding: 5px !important;
-      border-top: 1px solid var(--organizer-border-color) !important;
-    }
-
-    #editBookmarkPanelRows .expander-up,
-    #editBookmarkPanelRows .expander-down {
-      appearance: none !important;
-      min-width: 0 !important;
-      padding: 5px !important;
-      margin: 0 !important;
-      margin-inline-end: 4px !important;
-      border: 1px solid var(--organizer-pane-field-border-color) !important;
-      border-radius: 4px !important;
-      color: var(--organizer-color) !important;
-      background-color: var(--organizer-content-background) !important;
-      list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg");
-      -moz-context-properties: fill !important;
-      fill: currentColor !important;
-    }
-
-    #editBookmarkPanelRows .expander-up:hover,
-    #editBookmarkPanelRows .expander-down:hover {
-      background-color: var(--organizer-hover-background) !important;
-      color: var(--organizer-hover-color) !important;
-    }
-
-    #editBookmarkPanelRows .expander-up:hover:active,
-    #editBookmarkPanelRows .expander-down:hover:active {
-      background-color: var(--organizer-selected-background) !important;
-      color: var(--organizer-selected-color) !important;
-    }
-
-    #editBookmarkPanelRows .expander-up:focus-visible,
-    #editBookmarkPanelRows .expander-down:focus-visible {
-      outline: 2px solid var(--organizer-outline-color) !important;
-      outline-offset: -1px !important;
-    }
-
-    #editBookmarkPanelRows .expander-up {
-      list-style-image: url("chrome://global/skin/icons/arrow-up-12.svg");
-    }
-
-    #editBookmarkPanelRows .expander-up > .button-box,
-    #editBookmarkPanelRows .expander-down > .button-box {
-      padding: 0 !important;
-    }
-
-    #places input {
-      border: 1px solid var(--organizer-pane-field-border-color) !important;
-      border-radius: 4px !important;
-      background-color: var(--organizer-content-background) !important;
-      color: var(--organizer-color) !important;
-      min-height: 20px !important;
-      padding-inline: 4px !important;
-    }
-
-    #places input:focus {
-      outline: 2px solid var(--organizer-outline-color) !important;
-      outline-offset: -1px !important;
-    }
-
-    #places input:not(:read-write):focus {
-      outline: none !important;
-    }
-
-    .caption-label {
-      margin-inline-start: 8px !important;
-      color: var(--organizer-deemphasized-color) !important;
-    }
-
-    #editBMPanel_tagsSelectorRow > richlistbox {
-      appearance: none !important;
-      color: var(--organizer-color) !important;
-      background-color: var(--organizer-content-background) !important;
-      border: 1px solid var(--organizer-border-color) !important;
-      border-radius: 4px !important;
-    }
-
-    #editBMPanel_tagsSelectorRow > richlistbox > richlistitem {
-      border: 1px solid transparent !important;
-    }
-
-    #editBMPanel_tagsSelectorRow > richlistbox > richlistitem:hover {
-      background-color: var(--organizer-hover-background) !important;
-      color: var(--organizer-hover-color) !important;
-    }
-
-    #editBMPanel_tagsSelectorRow > richlistbox > richlistitem[selected] {
-      background-color: var(--organizer-selected-background) !important;
-      color: var(--organizer-selected-color) !important;
-    }
-  }
-}
+@import "proton_chrome/proton_commons";
+@import "proton_chrome/cert";
+@import "proton_chrome/page_info";
+@import "proton_chrome/library_popup";
diff --git a/src/theme/proton_chrome/_cert.scss b/src/theme/proton_chrome/_cert.scss
new file mode 100644
index 0000000..784fc0b
--- /dev/null
+++ b/src/theme/proton_chrome/_cert.scss
@@ -0,0 +1,58 @@
+/*= Delete Cert ==============================================================*/
+@-moz-document url("chrome://pippki/content/deletecert.xhtml")
+{
+  :root {
+    --in-content-border-color: color-mix(in srgb, currentColor 41%, transparent) !important;
+  }
+  #certlist {
+    border: 1px solid var(--in-content-border-color) !important;
+    border-radius: 4px !important;
+  }
+}
+
+/*= Cert Exeption Dialog =====================================================*/
+@-moz-document url("chrome://pippki/content/exceptionDialog.xhtml")
+{
+  :root {
+    --in-content-border-color: color-mix(in srgb, currentColor 41%, transparent) !important;
+  }
+  #locationTextBox {
+    appearance: none !important;
+    border: 1px solid var(--in-content-box-border-color) !important;
+    border-radius: 4px !important;
+    color: inherit !important;
+    background-color: var(--in-content-box-background) !important;
+
+    font-family: inherit !important;
+    font-size: inherit !important;
+    padding: 8px !important;
+    margin: 2px 4px !important;
+  }
+  #locationTextBox:focus {
+    border-color: transparent !important;
+    outline: 2px solid var(--in-content-focus-outline-color) !important;
+    outline-offset: -1px !important; /* Prevents antialising around the corners */
+  }
+  #locationTextBox:-moz-ui-invalid {
+    border-color: transparent !important;
+    outline: 2px solid var(--in-content-border-invalid) !important;
+    outline-offset: -1px !important; /* Prevents antialising around the corners */
+  }
+  #locationTextBox:disabled {
+    opacity: 0.4 !important;
+  }
+
+  #exceptiondialog:first-child > hbox > vbox:not([flex="1"]) {
+    width: 48px !important;
+    height: 48px !important;
+    background-image: url("chrome://global/skin/icons/warning.svg") !important;
+    background-size: 48px !important;
+    background-repeat: no-repeat !important;
+
+    -moz-context-properties: fill !important;
+    fill: currentColor !important;
+  }
+  #exceptiondialog:first-child > hbox > vbox > image {
+    display: none !important;
+  }
+}
diff --git a/src/theme/proton_chrome/_library_popup.scss b/src/theme/proton_chrome/_library_popup.scss
new file mode 100644
index 0000000..6e91664
--- /dev/null
+++ b/src/theme/proton_chrome/_library_popup.scss
@@ -0,0 +1,392 @@
+/*= Library Popup ============================================================*/
+@-moz-document url("chrome://browser/content/places/places.xhtml")
+{
+  @include OS($linux) {
+    :root {
+      --organizer-color: -moz-DialogText;
+      --organizer-deemphasized-color: GrayText;
+
+      --organizer-toolbar-background: -moz-Dialog;
+      --organizer-pane-background: -moz-Dialog;
+      --organizer-content-background: -moz-Dialog;
+
+      --organizer-hover-background: SelectedItem;
+      --organizer-hover-color: SelectedItemText;
+      --organizer-selected-background: SelectedItem;
+      --organizer-selected-color: SelectedItemText;
+      --organizer-outline-color: SelectedItem;
+
+      --organizer-separator-color: ThreeDDarkShadow;
+      --organizer-border-color: ThreeDShadow;
+
+      --organizer-toolbar-field-background: Field;
+      --organizer-toolbar-field-background-focused: Field;
+      --organizer-toolbar-field-border-color: ThreeDShadow;
+      --organizer-toolbar-field-focus-border-color: var(--organizer-outline-color);
+      --organizer-toolbar-field-focus-box-shadow: unset;
+      --organizer-pane-field-border-color: ThreeDShadow;
+    }
+
+    @media not all and (prefers-contrast) {
+      :root {
+        --organizer-color: var(--in-content-page-color);
+        --organizer-deemphasized-color: var(--in-content-deemphasized-text);
+
+        --organizer-toolbar-background: rgb(249, 249, 251); /* --toolbar-bgcolor */
+        --organizer-pane-background: rgb(229, 229, 235); /* --lwt-accent-color */
+        --organizer-content-background: var(--in-content-page-background);
+
+        --organizer-hover-background: var(--in-content-button-background-hover);
+        --organizer-hover-color: var(--organizer-color);
+        --organizer-selected-background: var(--in-content-button-background-active);
+        --organizer-selected-color: var(--organizer-color);
+        --organizer-outline-color: var(--in-content-primary-button-background);
+
+        --organizer-separator-color: var(--organizer-pane-field-border-color);
+        --organizer-border-color: var(--in-content-border-color);
+
+        --organizer-toolbar-field-background: rgb(240, 240, 244); /* --lwt-accent-color */
+        --organizer-toolbar-field-background-focused: Field;
+        --organizer-toolbar-field-border-color: transparent;
+        --organizer-toolbar-field-focus-border-color: color-mix(
+          in srgb,
+          var(--organizer-outline-color) 50%,
+          transparent
+        );
+        --organizer-toolbar-field-focus-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.23);
+        --organizer-pane-field-border-color: color-mix(in srgb, currentColor 41%, transparent);
+      }
+
+      @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
+        :root {
+          --organizer-color: rgb(251, 251, 254);
+          --organizer-deemphasized-color: rgb(191, 191, 201);
+
+          --organizer-toolbar-background: rgb(43, 42, 51);
+          --organizer-pane-background: rgb(35, 34, 43);
+          --organizer-content-background: rgb(28, 27, 34);
+
+          --organizer-hover-background: rgb(82, 82, 94);
+          --organizer-selected-background: rgb(91, 91, 102);
+          --organizer-outline-color: rgb(0, 221, 255);
+
+          --organizer-toolbar-field-background: var(--in-content-page-background);
+          --organizer-toolbar-field-background-focused: rgb(66, 65, 77);
+          scrollbar-color: rgba(249, 249, 250, 0.4) rgba(20, 20, 25, 0.3);
+        }
+      }
+    }
+
+    /*- Toolbar & Menus ------------------------------------------------------*/
+    #placesToolbar {
+      appearance: none !important;
+      background-color: var(--organizer-toolbar-background) !important;
+      color: var(--organizer-color) !important;
+      border-bottom: 1px solid var(--organizer-border-color) !important;
+      padding: 4px !important;
+      padding-inline-end: 6px !important;
+    }
+
+    #placesToolbar > toolbarbutton {
+      appearance: none !important;
+      padding: 5px !important;
+      border-radius: 4px !important;
+    }
+
+    #placesToolbar > toolbarbutton[disabled] {
+      opacity: 0.6 !important;
+    }
+
+    #placesToolbar > toolbarbutton:not([disabled]):hover {
+      background-color: var(--organizer-hover-background) !important;
+      color: var(--organizer-hover-color) !important;
+    }
+
+    #placesToolbar > toolbarbutton:not([disabled]):hover:active {
+      background-color: var(--organizer-selected-background) !important;
+    }
+
+    #placesToolbar > toolbarbutton > .toolbarbutton-icon,
+    #placesMenu > menu > image,
+    #placesMenu > menu > .menubar-text {
+      -moz-context-properties: fill !important;
+      fill: currentColor !important;
+    }
+
+    #placesMenu {
+      margin-inline-start: 6px !important;
+    }
+
+    #placesMenu > menu {
+      appearance: none !important;
+      color: var(--organizer-color) !important;
+      border-radius: 4px !important;
+      padding-block: 5px !important;
+      padding-inline-start: 5px !important;
+      margin-inline-end: 2px !important;
+    }
+
+    #placesMenu > menu[_moz-menuactive="true"],
+    #placesMenu > menu:hover {
+      background-color: var(--organizer-hover-background) !important;
+      color: var(--organizer-hover-color) !important;
+    }
+
+    #placesMenu > menu:hover:active,
+    #placesMenu > menu[open] {
+      background-color: var(--organizer-selected-background) !important;
+      color: var(--organizer-selected-color) !important;
+    }
+
+    #placesMenu > menu > .menubar-text {
+      margin-block: 0 !important; /* override menu.css */
+      padding-inline-end: 4px !important;
+    }
+
+    /*- Search Bar & Input ---------------------------------------------------*/
+    #searchFilter,
+    #detailsPane html|input {
+      appearance: none !important;
+      background-color: var(--organizer-toolbar-field-background) !important;
+      color: var(--organizer-color) !important;
+      border: 1px solid var(--organizer-toolbar-field-border-color) !important;
+      border-radius: 4px !important;
+      margin: 0 !important;
+      padding-block: 2px !important;
+      min-height: 24px !important;
+    }
+
+    #searchFilter[focused] {
+      box-shadow: var(--organizer-toolbar-field-focus-box-shadow) !important;
+      background-color: var(--organizer-toolbar-field-background-focused) !important;
+      border-color: transparent !important;
+      outline: 2px solid var(--organizer-toolbar-field-focus-border-color) !important;
+      outline-offset: -2px !important;
+    }
+
+    /*- Sidebar & Splitter ---------------------------------------------------*/
+    #placesList {
+      background-color: var(--organizer-pane-background) !important;
+    }
+
+    #placesView > splitter {
+      border: 0 !important;
+      border-inline-end: 1px solid var(--organizer-border-color) !important;
+      min-width: 0 !important;
+      width: 3px !important;
+      background-color: transparent !important;
+      margin-inline-start: -3px !important;
+      position: relative !important;
+    }
+
+    /*- Downloads Pane -------------------------------------------------------*/
+    #downloadsRichListBox {
+      color: var(--organizer-color) !important;
+      background-color: var(--organizer-content-background) !important;
+    }
+
+    #clearDownloadsButton:focus-visible {
+      outline: 2px solid var(--organizer-outline-color) !important;
+    }
+
+    richlistitem[selected="true"],
+    richlistitem:hover {
+      background-color: var(--organizer-hover-background) !important;
+      color: var(--organizer-color) !important;
+    }
+
+    richlistbox:where(:focus) > richlistitem[selected="true"] {
+      background-color: var(--organizer-selected-background) !important;
+    }
+
+    /*- Tree -----------------------------------------------------------------*/
+    #contentView treecol {
+      /* Use box-shadow to draw a bottom border instead of border-bottom
+         * because otherwise the items on contentView won't be perfectly
+         * aligned with the items on the sidebar. */
+      box-shadow: inset 0 -1px var(--organizer-border-color) !important;
+    }
+
+    tree {
+      background-color: var(--organizer-content-background) !important;
+      color: var(--organizer-color) !important;
+    }
+
+    treecol:not([hideheader="true"]),
+    treecolpicker {
+      appearance: none !important;
+      border: none !important;
+      background-color: var(--in-content-button-background) !important;
+      color: var(--organizer-color, inherit) !important;
+      padding: 5px 10px !important;
+    }
+
+    treecol:not([hideheader="true"], [sortable="false"]):hover,
+    treecolpicker:hover {
+      background-color: var(--organizer-hover-background) !important;
+      color: var(--organizer-color) !important;
+    }
+
+    treecol:not([hideheader="true"], [sortable="false"]):hover:active,
+    treecolpicker:hover:active {
+      background-color: var(--organizer-selected-background) !important;
+    }
+
+    treecol:not([hideheader="true"], :first-child),
+    treecolpicker {
+      padding-left: 10px !important;
+      border-inline-start-width: 1px !important;
+      border-inline-start-style: solid !important;
+      border-image: linear-gradient(
+          transparent 0%,
+          transparent 20%,
+          var(--organizer-border-color) 20%,
+          var(--organizer-border-color) 80%,
+          transparent 80%,
+          transparent 100%
+        )
+        1 1 !important;
+    }
+
+    treecol[sortDirection]:not([hideheader="true"]) > xul|*.treecol-sortdirection {
+      fill: currentColor !important;
+      width: 18px !important;
+      height: 18px !important;
+    }
+
+    treechildren::-moz-tree-row {
+      background-color: transparent !important;
+    }
+
+    treechildren::-moz-tree-row(hover) {
+      background-color: var(--organizer-hover-background) !important;
+    }
+
+    treechildren::-moz-tree-row(selected) {
+      background-color: var(--organizer-selected-background) !important;
+      color: var(--organizer-selected-color) !important;
+      border: 1px solid transparent !important;
+    }
+
+    treechildren::-moz-tree-image(hover),
+    treechildren::-moz-tree-twisty(hover),
+    treechildren::-moz-tree-cell-text(hover) {
+      color: var(--organizer-hover-color) !important;
+    }
+
+    treechildren::-moz-tree-image(selected),
+    treechildren::-moz-tree-twisty(selected),
+    treechildren::-moz-tree-cell-text(selected) {
+      color: var(--organizer-selected-color) !important;
+    }
+
+    treechildren::-moz-tree-separator {
+      height: 1px !important;
+      border-color: var(--organizer-separator-color) !important;
+    }
+
+    treechildren::-moz-tree-separator(hover) {
+      border-color: var(--organizer-hover-color) !important;
+    }
+
+    treechildren::-moz-tree-separator(selected) {
+      border-color: var(--organizer-selected-color) !important;
+    }
+
+    /*- Info Box -------------------------------------------------------------*/
+    #detailsPane {
+      background-color: var(--organizer-pane-background) !important;
+      color: var(--organizer-color) !important;
+      padding: 5px !important;
+      border-top: 1px solid var(--organizer-border-color) !important;
+    }
+
+    #editBookmarkPanelRows .expander-up,
+    #editBookmarkPanelRows .expander-down {
+      appearance: none !important;
+      min-width: 0 !important;
+      padding: 5px !important;
+      margin: 0 !important;
+      margin-inline-end: 4px !important;
+      border: 1px solid var(--organizer-pane-field-border-color) !important;
+      border-radius: 4px !important;
+      color: var(--organizer-color) !important;
+      background-color: var(--organizer-content-background) !important;
+      list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg");
+      -moz-context-properties: fill !important;
+      fill: currentColor !important;
+    }
+
+    #editBookmarkPanelRows .expander-up:hover,
+    #editBookmarkPanelRows .expander-down:hover {
+      background-color: var(--organizer-hover-background) !important;
+      color: var(--organizer-hover-color) !important;
+    }
+
+    #editBookmarkPanelRows .expander-up:hover:active,
+    #editBookmarkPanelRows .expander-down:hover:active {
+      background-color: var(--organizer-selected-background) !important;
+      color: var(--organizer-selected-color) !important;
+    }
+
+    #editBookmarkPanelRows .expander-up:focus-visible,
+    #editBookmarkPanelRows .expander-down:focus-visible {
+      outline: 2px solid var(--organizer-outline-color) !important;
+      outline-offset: -1px !important;
+    }
+
+    #editBookmarkPanelRows .expander-up {
+      list-style-image: url("chrome://global/skin/icons/arrow-up-12.svg");
+    }
+
+    #editBookmarkPanelRows .expander-up > .button-box,
+    #editBookmarkPanelRows .expander-down > .button-box {
+      padding: 0 !important;
+    }
+
+    #places input {
+      border: 1px solid var(--organizer-pane-field-border-color) !important;
+      border-radius: 4px !important;
+      background-color: var(--organizer-content-background) !important;
+      color: var(--organizer-color) !important;
+      min-height: 20px !important;
+      padding-inline: 4px !important;
+    }
+
+    #places input:focus {
+      outline: 2px solid var(--organizer-outline-color) !important;
+      outline-offset: -1px !important;
+    }
+
+    #places input:not(:read-write):focus {
+      outline: none !important;
+    }
+
+    .caption-label {
+      margin-inline-start: 8px !important;
+      color: var(--organizer-deemphasized-color) !important;
+    }
+
+    #editBMPanel_tagsSelectorRow > richlistbox {
+      appearance: none !important;
+      color: var(--organizer-color) !important;
+      background-color: var(--organizer-content-background) !important;
+      border: 1px solid var(--organizer-border-color) !important;
+      border-radius: 4px !important;
+    }
+
+    #editBMPanel_tagsSelectorRow > richlistbox > richlistitem {
+      border: 1px solid transparent !important;
+    }
+
+    #editBMPanel_tagsSelectorRow > richlistbox > richlistitem:hover {
+      background-color: var(--organizer-hover-background) !important;
+      color: var(--organizer-hover-color) !important;
+    }
+
+    #editBMPanel_tagsSelectorRow > richlistbox > richlistitem[selected] {
+      background-color: var(--organizer-selected-background) !important;
+      color: var(--organizer-selected-color) !important;
+    }
+  }
+}
diff --git a/src/theme/proton_chrome/_page_info.scss b/src/theme/proton_chrome/_page_info.scss
new file mode 100644
index 0000000..9545186
--- /dev/null
+++ b/src/theme/proton_chrome/_page_info.scss
@@ -0,0 +1,141 @@
+/*= Page Info ================================================================*/
+@-moz-document url("chrome://browser/content/pageinfo/pageInfo.xhtml")
+{
+  :root {
+    --in-content-border-color: color-mix(in srgb, currentColor 41%, transparent) !important;
+  }
+
+  #viewGroup > radio {
+    border-radius: 8px !important;
+    padding: var(--in-content-button-vertical-padding) var(--in-content-button-horizontal-padding) !important;
+    margin: 4px !important;
+  }
+  #viewGroup > radio:hover {
+    background-color: var(--in-content-button-background-hover) !important; /* #E0E8F6; */
+  }
+  #viewGroup > radio[selected="true"] {
+    color: var(--in-content-button-text-color) !important; /* SelectedItemText */
+    background-color: var(--in-content-button-background-active) !important; /* #C1D2EE; */
+  }
+  #viewGroup > radio {
+    color: var(--in-content-deemphasized-text) !important; /* FieldText */
+  }
+
+  #viewGroup > radio {
+    list-style-image: none !important;
+    background-image: var(--viewgroup-image) !important;
+    background-repeat: no-repeat;
+    background-position: top var(--in-content-button-vertical-padding) center;
+    background-size: 32px !important;
+
+    -moz-context-properties: fill !important;
+    fill: currentColor !important;
+  }
+  #generalTab {
+    --viewgroup-image: url(chrome://global/skin/icons/page-portrait.svg);
+  }
+  #mediaTab {
+    --viewgroup-image: url(chrome://browser/skin/canvas.svg);
+  }
+  #permTab {
+    --viewgroup-image: url(chrome://browser/skin/permissions.svg);
+  }
+  #securityTab {
+    --viewgroup-image: url(chrome://global/skin/icons/security.svg);
+  }
+
+  #viewGroup > radio > .radio-label-box {
+    /* Overwrite */
+    margin: 0 !important;
+    padding: 0 6 !important;
+  }
+
+  #mainDeck input {
+    color: var(--in-content-page-color) !important;
+  }
+
+  #permList {
+    -moz-appearance: none !important;
+    color: var(--in-content-page-color) !important;
+    background-color: var(--in-content-box-background) !important;
+  }
+  .permission:hover {
+    color: var(--in-content-text-color) !important;
+    background-color: var(--in-content-button-background-hover) !important;
+  }
+  .permission radio[disabled] {
+    color: var(--in-content-deemphasized-text) !important;
+  }
+
+  treecols {
+    -moz-appearance: none !important;
+    background: var(--in-content-table-header-background) !important;
+    color: var(--in-content-table-header-color) !important;
+  }
+  treecols > treecol,
+  treecols > treecolpicker.treecol-image {
+    -moz-appearance: none !important;
+    color: var(--in-content-table-header-color) !important;
+    background: var(--in-content-table-header-background) !important;
+    border: 1px solid var(--in-content-border-color) !important;
+    padding: 4px !important;
+    border-spacing: 0;
+
+    text-align: center !important;
+  }
+
+  tree,
+  treechildren::-moz-tree-row {
+    -moz-appearance: none !important;
+    color: var(--in-content-text-color) !important;
+    background-color: var(--in-content-table-background) !important;
+    border: 1px solid var(--in-content-border-color) !important;
+  }
+
+  treechildren::-moz-tree-row(odd) {
+    background-color: var(--in-content-box-background-odd) !important;
+  }
+
+  treechildren::-moz-tree-row(hover) {
+    color: var(--in-content-item-hover-text) !important;
+    background-color: var(--in-content-item-hover) !important;
+  }
+  treechildren::-moz-tree-row(selected) {
+    background-color: var(--in-content-item-selected) !important;
+  }
+
+  treechildren::-moz-tree-cell {
+    border-inline: 1px solid var(--in-content-border-color) !important;
+    border-spacing: 0 !important;
+    padding: 4px !important;
+    margin: 0 !important;
+  }
+  treechildren::-moz-tree-cell-text(hover) {
+    color: var(--in-content-item-hover-text) !important;
+  }
+  treechildren::-moz-tree-cell-text(selected) {
+    font-weight: 600 !important;
+    color: var(--in-content-item-selected-text) !important;
+  }
+
+  #imagecontainerbox {
+    background-color: var(--in-content-box-background) !important;
+  }
+
+  #metatree,
+  #imagetree,
+  #imagecontainerbox,
+  #permList {
+    border-radius: 4px !important;
+  }
+  #metatree,
+  #imagetree {
+    overflow: hidden !important;
+  }
+
+  #topBar,
+  #imagecontainerbox,
+  #permList {
+    border-color: var(--in-content-border-color) !important;
+  }
+}
diff --git a/src/theme/proton_chrome/_proton_commons.scss b/src/theme/proton_chrome/_proton_commons.scss
new file mode 100644
index 0000000..0b598ef
--- /dev/null
+++ b/src/theme/proton_chrome/_proton_commons.scss
@@ -0,0 +1,588 @@
+/*= Proton Commons ===========================================================*/
+@-moz-document url("chrome://global/content/commonDialog.xhtml"),
+  url("chrome://pippki/content/editcacert.xhtml"),
+  url("chrome://pippki/content/deletecert.xhtml"),
+  url("chrome://pippki/content/exceptionDialog.xhtml"),
+  url("chrome://mozapps/content/downloads/unknownContentType.xhtml"),
+  url("chrome://global/content/appPicker.xhtml"),
+  url("chrome://browser/content/pageinfo/pageInfo.xhtml")
+{
+  /*- Overwrite --------------------------------------------------------------*/
+  @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
+    :root {
+      --in-content-page-background: #42414d;
+    }
+  }
+
+  :root:not(:-moz-lwtheme),
+  :root[lwt-default-theme-in-dark-mode] {
+    --checkbox-unchecked-bgcolor: var(--in-content-button-background) !important;
+    --checkbox-unchecked-hover-bgcolor: var(--in-content-button-background-hover) !important;
+    --checkbox-unchecked-active-bgcolor: var(--in-content-button-background-active) !important;
+    --checkbox-checked-bgcolor: var(--in-content-primary-button-background) !important;
+    --checkbox-checked-color: var(--in-content-primary-button-text-color) !important;
+    --checkbox-checked-hover-bgcolor: var(--in-content-primary-button-background-hover) !important;
+    --checkbox-checked-active-bgcolor: var(--in-content-primary-button-background-active) !important;
+  }
+
+  /*- Dialog -----------------------------------------------------------------*/
+  #commonDialog,
+    #editCaCert,
+    #deleteCertificate,
+    #exceptiondialog,
+    #unknownContentType,
+    #app-picker,
+    #topBar, /* #topBar, #mainDeck: Page Info */
+    #mainDeck {
+    -moz-appearance: none !important; /* For Mac */
+    color: var(--in-content-page-color) !important;
+    background-color: var(--in-content-page-background) !important;
+    /* border-radius: 0 0 8px 8px !important; */
+  }
+
+  /*- Button -----------------------------------------------------------------*/
+  button {
+    -moz-appearance: none !important;
+    color: var(--in-content-button-text-color) !important;
+    background-color: var(--in-content-button-background) !important;
+    font: inherit;
+    font-size: 1em !important;
+    font-weight: 600 !important;
+    min-height: 32px !important;
+    border: 1px solid transparent !important; /* shows up in high-contrast mode */
+    border-radius: var(--in-content-button-border-radius) !important;
+    padding: var(--in-content-button-vertical-padding) var(--in-content-button-horizontal-padding) !important;
+
+    min-height: 32px !important;
+    /* Use the same margin of other elements for the alignment */
+    margin-inline: 4px !important;
+    min-width: 6.3em !important;
+  }
+
+  /* Medium and small buttons get sized to 7/14 and 6/12px padding (when adding
+     * the 1px border): */
+  button.medium {
+    padding: 6px 13px !important;
+    min-height: 28px !important;
+    font-size: 0.95em !important;
+  }
+  button.small {
+    padding: 5px 11px !important;
+    min-height: 24px !important;
+    font-size: 0.9em !important;
+  }
+
+  /* Remove margin added by button.css */
+  xul|button > .button-box > .button-text {
+    margin: 0 !important;
+  }
+
+  button:-moz-focusring,
+    xul|menulist:-moz-focusring,
+    xul|checkbox:-moz-focusring > .checkbox-check, /* :not([native]) to win specificity over checkbox.css */
+    xul|radio[focused="true"]:-moz-focusring {
+    box-shadow: none !important;
+    outline: 2px solid var(--in-content-focus-outline-color) !important;
+    outline-offset: 2px !important;
+  }
+  button:not([disabled="true"]):hover {
+    background-color: var(--in-content-button-background-hover) !important;
+    color: var(--in-content-button-text-color-hover) !important;
+    border-color: transparent !important;
+  }
+
+  xul|button:not([disabled="true"]):hover:active,
+  xul|button[open],
+  xul|button[open]:hover,
+  xul|menulist[open="true"]:not([disabled="true"]) {
+    background-color: var(--in-content-button-background-active) !important;
+  }
+
+  xul|button[default] {
+    background-color: var(--in-content-primary-button-background) !important;
+    color: var(--in-content-primary-button-text-color) !important;
+  }
+  xul|button[default]:not([disabled="true"]):hover {
+    background-color: var(--in-content-primary-button-background-hover) !important;
+    color: var(--in-content-primary-button-text-color) !important;
+  }
+  xul|button[default]:not([disabled="true"]):hover:active {
+    background-color: var(--in-content-primary-button-background-active) !important;
+  }
+
+  xul|button[disabled="true"],
+  xul|menulist[disabled="true"] {
+    opacity: 0.4 !important;
+  }
+  xul|button:not([disabled="true"]):hover,
+  xul|menulist:not([disabled="true"]):hover {
+    background-color: var(--in-content-button-background-hover) !important;
+    color: var(--in-content-button-text-color-hover) !important;
+    border-color: transparent !important;
+  }
+
+  @media (prefers-contrast) {
+    xul|button[default]:not([disabled="true"]):hover {
+      border-color: currentColor !important;
+    }
+
+    button:focus {
+      color: var(--in-content-button-text-color) !important;
+    }
+
+    xul|button[default]:focus,
+    button.primary:focus {
+      color: var(--in-content-primary-button-text-color) !important;
+    }
+  }
+
+  /*- Radio Button -----------------------------------------------------------*/
+  xul|radio {
+    /* margin-inline-start: 0 !important; */
+    appearance: none !important;
+  }
+
+  xul|*.radio-check {
+    appearance: none !important;
+    width: 16px !important;
+    height: 16px !important;
+    padding: 0 !important;
+    border: 1px solid var(--in-content-box-border-color) !important;
+    border-radius: 100% !important;
+    margin-block: 2px !important; /* extend the vertical clicktarget */
+    margin-inline: 0 6px !important;
+    background-color: var(--in-content-button-background) !important;
+    background-position: center !important;
+    flex-shrink: 0 !important; /* avoid shrinking inside flex container */
+  }
+
+  xul|radio:not([disabled="true"]):hover > xul|*.radio-check {
+    background-color: var(--in-content-button-background-hover) !important;
+    color: var(--in-content-button-text-color-hover) !important;
+  }
+
+  xul|radio:not([disabled="true"]):hover:active > xul|*.radio-check {
+    background-color: var(--in-content-button-background-active) !important;
+  }
+
+  xul|*.radio-check[selected] {
+    -moz-context-properties: fill !important;
+    fill: currentColor !important;
+    color: var(--in-content-primary-button-text-color) !important;
+    background-color: var(--in-content-primary-button-background) !important;
+    background-image: url("chrome://global/skin/icons/radio.svg") !important;
+    border-color: transparent !important;
+
+    /* Style the button also when printing with "Print Backgrounds" unchecked */
+    color-adjust: exact !important;
+  }
+
+  xul|radio:not([disabled="true"])[selected]:hover > xul|*.radio-check {
+    background-color: var(--in-content-primary-button-background-hover) !important;
+    color: var(--in-content-primary-button-text-color-hover) !important;
+  }
+
+  xul|radio:not([disabled="true"])[selected]:hover:active > xul|*.radio-check {
+    background-color: var(--in-content-primary-button-background-active) !important;
+  }
+
+  xul|*.radio-label-box {
+    margin-inline: 0 8px !important;
+    padding-inline-start: 0 !important;
+  }
+
+  /* Disabled checkboxes, radios and labels */
+  xul|checkbox[disabled="true"],
+  xul|radio[disabled="true"],
+  xul|label[disabled="true"] {
+    color: inherit !important;
+  }
+
+  xul|checkbox[disabled="true"],
+  xul|radio[disabled="true"],
+  xul|label[disabled="true"] {
+    opacity: 0.5 !important;
+  }
+
+  /*- Check Box --------------------------------------------------------------*/
+  /* From checkbox.css */
+  checkbox {
+    appearance: none !important;
+    -moz-box-align: center !important;
+    margin: 4px 2px !important;
+  }
+
+  .checkbox-icon[src] {
+    margin-inline-end: 2px !important;
+  }
+  .checkbox-label {
+    margin: 1px 0 !important;
+  }
+
+  checkbox[disabled="true"] {
+    opacity: 0.4 !important;
+  }
+
+  .checkbox-check {
+    appearance: none !important;
+    color: var(--checkbox-border-color, ThreeDDarkShadow) !important;
+    background-color: var(--checkbox-unchecked-bgcolor, Field) !important;
+    border: 1px solid currentColor !important;
+    border-radius: 2px !important;
+    margin-inline-end: 6px !important;
+  }
+
+  .checkbox-check {
+    height: 16px !important;
+    width: 16px !important;
+  }
+
+  checkbox:not([disabled="true"]):hover > .checkbox-check {
+    background-color: var(
+      --checkbox-unchecked-hover-bgcolor,
+      color-mix(in srgb, -moz-accent-color 4%, Field)
+    ) !important;
+  }
+
+  checkbox:not([disabled="true"]):hover:active > .checkbox-check {
+    background-color: var(
+      --checkbox-unchecked-active-bgcolor,
+      color-mix(in srgb, -moz-accent-color 8%, Field)
+    ) !important;
+  }
+
+  .checkbox-check[checked] {
+    border-color: var(--checkbox-checked-border-color, transparent) !important;
+    background-color: var(--checkbox-checked-bgcolor, -moz-accent-color) !important;
+    background-image: url("chrome://global/skin/icons/check.svg") !important;
+    background-position: center !important;
+    background-repeat: no-repeat !important;
+    -moz-context-properties: fill !important;
+    fill: currentColor !important;
+    color: var(--checkbox-checked-color, -moz-accent-color-foreground) !important;
+    /* Style the button also when printing with "Print Backgrounds" unchecked */
+    color-adjust: exact !important;
+  }
+
+  checkbox:not([disabled="true"]):hover > .checkbox-check[checked] {
+    background-color: var(
+      --checkbox-checked-hover-bgcolor,
+      color-mix(in srgb, currentColor 12.5%, -moz-accent-color)
+    ) !important;
+  }
+
+  checkbox:not([disabled="true"]):hover:active > .checkbox-check[checked] {
+    background-color: var(
+      --checkbox-checked-active-bgcolor,
+      color-mix(in srgb, currentColor 25%, -moz-accent-color)
+    ) !important;
+  }
+
+  checkbox:-moz-focusring > .checkbox-check {
+    outline: 2px solid var(--focus-outline-color, -moz-accent-color) !important;
+    outline-offset: var(--focus-outline-offset, 2px) !important;
+  }
+
+  @media (prefers-contrast) {
+    checkbox:not([disabled="true"]):hover > .checkbox-check {
+      /* color will set the border-color on the check due to how HCM works for in-content pages. */
+      color: var(--checkbox-checked-border-color, color-mix(in srgb, -moz-accent-color 4%, Field)) !important;
+    }
+
+    .checkbox-check[checked] {
+      color: var(--checkbox-checked-border-color, currentColor) !important;
+      fill: var(--checkbox-checked-color, -moz-accent-color-foreground) !important;
+    }
+
+    checkbox:not([disabled="true"]):hover:active > .checkbox-check[checked],
+    checkbox:not([disabled="true"]):hover > .checkbox-check[checked] {
+      color: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important;
+      fill: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important;
+    }
+  }
+
+  /* From common.css */
+  xul|*.checkbox-check {
+    margin-block: 2px !important;
+  }
+  xul|richlistitem > xul|*.checkbox-check {
+    margin: 3px 6px !important;
+  }
+
+  /*- Menulist ---------------------------------------------------------------*/
+  /* From mulist.css */
+  xul|menulist {
+    appearance: none !important;
+    background-color: var(--in-content-button-background, ButtonFace) !important;
+    color: var(--in-content-button-text-color, ButtonText) !important;
+    border-radius: 4px !important;
+    padding-block: 4px !important;
+    padding-inline: 12px 8px !important;
+    margin: 5px 2px 3px !important;
+  }
+
+  xul|menulist[size="medium"] {
+    padding-block: 6px !important;
+    padding-inline: 16px 10px !important;
+  }
+
+  xul|menulist[size="large"] {
+    padding-block: 8px !important;
+    padding-inline: 16px 12px !important;
+  }
+
+  xul|menulist:hover {
+    background-color: var(--button-hover-bgcolor, color-mix(in srgb, currentColor 10%, ButtonFace)) !important;
+  }
+
+  xul|menulist:hover:active {
+    background-color: var(--button-active-bgcolor, color-mix(in srgb, currentColor 20%, ButtonFace)) !important;
+  }
+
+  xul|menulist:-moz-focusring {
+    outline: 2px solid var(--focus-outline-color, -moz-accent-color) !important;
+    outline-offset: var(--focus-outline-offset, 2px) !important;
+  }
+
+  #label-box {
+    -moz-box-align: center !important;
+    -moz-box-pack: center !important;
+    font-weight: 600 !important;
+  }
+
+  dropmarker {
+    display: -moz-box !important;
+    appearance: none !important;
+    width: 12px !important;
+    height: 12px !important;
+  }
+
+  dropmarker::part(icon) {
+    list-style-image: url("chrome://global/skin/icons/arrow-down.svg") !important;
+    -moz-context-properties: fill !important;
+    fill: currentColor !important;
+  }
+
+  #highlightable-label:not([highlightable="true"]),
+  #label[highlightable="true"] {
+    display: none !important;
+  }
+
+  xul|menuitem > label:not(.menu-text) {
+    margin: 0 3px !important;
+  }
+
+  /* From common.css */
+  xul|menulist > xul|menupopup {
+    appearance: none !important;
+
+    /* Reset native styles on Windows and macOS */
+    border: none !important;
+    background-color: transparent !important;
+
+    --panel-border-color: var(--in-content-box-border-color) !important;
+    --panel-border-radius: 2px !important;
+    --panel-background: var(--in-content-box-background) !important;
+    --panel-color: var(--in-content-text-color) !important;
+    --panel-padding: 0 !important;
+  }
+
+  xul|menulist > xul|menupopup xul|menu,
+  xul|menulist > xul|menupopup xul|menuitem {
+    appearance: none !important;
+    font-size: 1em !important;
+    padding-block: 0.2em !important;
+    padding-inline: 10px 30px !important;
+  }
+
+  xul|menulist > xul|menupopup > xul|menu:not([disabled="true"])[_moz-menuactive="true"],
+  xul|menulist > xul|menupopup > xul|menuitem:not([disabled="true"])[_moz-menuactive="true"] {
+    color: var(--in-content-item-hover-text) !important;
+    background-color: var(--in-content-item-hover) !important;
+  }
+
+  xul|menulist > xul|menupopup > xul|menu:not([disabled="true"])[selected="true"],
+  xul|menulist > xul|menupopup > xul|menuitem:not([disabled="true"])[selected="true"] {
+    color: var(--in-content-item-selected-text) !important;
+    background-color: var(--in-content-item-selected) !important;
+  }
+
+  xul|menulist > xul|menupopup > xul|menu[disabled="true"],
+  xul|menulist > xul|menupopup > xul|menuitem[disabled="true"] {
+    color: #999 !important;
+    /* override the [_moz-menuactive="true"] background color from
+         global/menu.css */
+    background-color: transparent !important;
+  }
+
+  xul|menulist > xul|menupopup xul|menuseparator {
+    appearance: none !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    border-top: 1px solid var(--in-content-box-border-color) !important;
+    border-bottom: none !important;
+  }
+
+  xul|menulist::part(dropmarker) {
+    margin-block: 1px !important;
+  }
+
+  /* Override menulist.css */
+  xul|menulist[disabled="true"] {
+    background-color: var(--in-content-button-background) !important;
+  }
+
+  xul|menulist:-moz-focusring > xul|*.menulist-label-box {
+    outline: none !important;
+  }
+
+  /*- List Boxes -------------------------------------------------------------*/
+  html|select[size][multiple],
+  xul|listheader,
+  xul|richlistbox {
+    appearance: none !important;
+    margin-inline: 0 !important;
+    background-color: var(--in-content-box-background) !important;
+    border: 1px solid var(--in-content-box-border-color) !important;
+    border-radius: 4px !important;
+    color: var(--in-content-text-color) !important;
+  }
+
+  xul|listheader {
+    border-bottom: none !important;
+    border-bottom-left-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+    padding-bottom: 1px !important;
+    box-shadow: inset 0 -1px var(--in-content-border-color) !important;
+    overflow: clip !important; /* Clip border-radius */
+  }
+
+  xul|listheader + xul|richlistbox {
+    margin-top: 0 !important;
+    border-top: none !important;
+    border-top-left-radius: 0 !important;
+    border-top-right-radius: 0 !important;
+  }
+
+  html|select[size][multiple] > html|option,
+  xul|treechildren::-moz-tree-row {
+    padding: 0.3em inherit !important;
+    margin: 0 !important;
+    border: none !important;
+    border-radius: 0 !important;
+    background-image: none !important;
+  }
+
+  xul|treechildren::-moz-tree-row(multicol, odd) {
+    background-color: var(--in-content-box-background-odd);
+  }
+
+  html|select[size][multiple] > html|option:hover,
+  xul|richlistbox > xul|richlistitem:not([disabled="true"], [selected]):hover,
+  xul|treechildren::-moz-tree-row(hover) {
+    background-color: var(--in-content-item-hover) !important;
+    color: var(--in-content-item-hover-text) !important;
+  }
+
+  xul|richlistbox > xul|richlistitem[selected],
+  xul|treechildren::-moz-tree-row(selected) {
+    background-color: var(--in-content-item-selected) !important;
+    color: var(--in-content-item-selected-text) !important;
+  }
+
+  xul|richlistbox:not(#categories) > xul|richlistitem[selected] {
+    /* Ensure buttons/menulists inside richlistitems (containers, applications) look OK */
+    --in-content-button-background: color-mix(in srgb, currentColor 15%, transparent) !important;
+    --in-content-button-background-hover: color-mix(in srgb, currentColor 30%, transparent) !important;
+    --in-content-button-background-active: color-mix(in srgb, currentColor 45%, transparent) !important;
+    --in-content-button-text-color: var(--in-content-item-selected-text) !important;
+    --in-content-button-text-color-hover: var(--in-content-item-selected-text) !important;
+    --in-content-focus-outline-color: var(--in-content-item-selected-text) !important;
+  }
+
+  xul|richlistitem[selected] xul|menulist:focus-visible {
+    outline-offset: -2px !important;
+  }
+
+  /* Use a 2px border so that selected row highlight is still visible behind
+        an existing high-contrast border that uses the background color */
+  @media (prefers-contrast) {
+    xul|treechildren::-moz-tree-row(selected) {
+      border: 2px solid currentColor !important;
+      border-radius: 4px !important;
+    }
+  }
+
+  xul|panel[type="autocomplete-richlistbox"] {
+    background-color: var(--in-content-box-background) !important;
+    border: 1px solid var(--in-content-box-border-color) !important;
+    color: var(--in-content-text-color) !important;
+  }
+
+  /*- Each OS ----------------------------------------------------------------*/
+  @include OS($win) {
+    xul|checkbox,
+    xul|radio {
+      padding-inline-start: 0 !important;
+    }
+
+    /* Override menulist.css */
+    xul|menulist[disabled="true"] {
+      background-color: var(--in-content-button-background) !important;
+    }
+
+    xul|menulist:-moz-focusring > xul|*.menulist-label-box {
+      outline: none !important;
+    }
+  }
+
+  @include OS($linux) {
+    /* Overriding appearance also avoids incorrect selection background color with light text. */
+    xul|button > xul|*.button-box,
+    xul|menulist::part(label-box),
+    xul|*.radio-label-box,
+    xul|*.checkbox-label-box {
+      appearance: none !important;
+    }
+
+    xul|button[type="menu"] > xul|*.button-box > xul|*.button-menu-dropmarker {
+      appearance: none !important;
+    }
+    xul|menulist {
+      font-size: inherit !important;
+    }
+    xul|menulist::part(dropmarker) {
+      display: -moz-box;
+      margin-block: 6px !important;
+    }
+    xul|menulist:-moz-focusring::part(label-box) {
+      outline: none !important;
+    }
+  }
+
+  @include OS($mac) {
+    xul|menulist > xul|menupopup > xul|menuitem[checked="true"]::before,
+    xul|menulist > xul|menupopup > xul|menuitem[selected="true"]::before {
+      display: none !important;
+    }
+
+    xul|menulist::part(dropmarker) {
+      display: -moz-box !important;
+      margin-block: 1px !important;
+    }
+
+    xul|menulist > xul|menupopup xul|menu,
+    xul|menulist > xul|menupopup xul|menuitem {
+      padding-inline-end: 34px !important;
+    }
+
+    xul|*.checkbox-icon,
+    xul|*.radio-icon {
+      margin-inline-end: 0 !important;
+    }
+
+    xul|*.text-link:-moz-focusring {
+      box-shadow: none !important;
+    }
+  }
+}