Adding upstream version 124.0.1.upstream/124.0.1

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

1 files changed, 1212 insertions, 0 deletions

diff --git a/browser/themes/shared/browser-shared.css b/browser/themes/shared/browser-shared.css
new file mode 100644
index 0000000000..164b54bd85
--- /dev/null
+++ b/browser/themes/shared/browser-shared.css
@@ -0,0 +1,1212 @@
+/* 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://browser/skin/downloads/indicator.css");
+@import url("chrome://browser/skin/addons/extension-controlled.css");
+@import url("chrome://browser/skin/addons/unified-extensions.css");
+@import url("chrome://browser/skin/toolbarbuttons.css");
+@import url("chrome://browser/skin/toolbarbutton-icons.css");
+@import url("chrome://browser/skin/menupanel.css");
+@import url("chrome://browser/skin/urlbar-searchbar.css");
+@import url("chrome://browser/skin/identity-block/identity-block.css");
+@import url("chrome://browser/skin/notification-icons.css");
+@import url("chrome://browser/skin/addon-notification.css");
+@import url("chrome://browser/skin/identity-credential-notification.css");
+@import url("chrome://browser/skin/urlbarView.css");
+@import url("chrome://browser/skin/autocomplete.css");
+@import url("chrome://browser/skin/places/editBookmarkPanel.css");
+@import url("chrome://browser/skin/sidebar.css");
+@import url("chrome://browser/skin/tabs.css");
+@import url("chrome://browser/skin/fullscreen/warning.css");
+@import url("chrome://browser/skin/ctrlTab.css");
+@import url("chrome://browser/skin/customizableui/customizeMode.css");
+@import url("chrome://browser/skin/UITour.css");
+@import url("chrome://browser/skin/formautofill-notification.css");
+
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+:root {
+  user-select: none;
+  color-scheme: light dark;
+  accent-color: var(--button-primary-bgcolor);
+
+  --toolbox-non-lwt-bgcolor: -moz-headerbar;
+  --toolbox-non-lwt-textcolor: -moz-headerbartext;
+  --toolbox-non-lwt-bgcolor-inactive: -moz-headerbarinactive;
+  --toolbox-non-lwt-textcolor-inactive: -moz-headerbarinactivetext;
+
+  --toolbarbutton-border-radius: 4px;
+
+  --chrome-content-separator-color: ThreeDShadow;
+
+  --tabs-navbar-shadow-size: 1px;
+  --tabs-navbar-shadow-color: ThreeDShadow;
+
+  --panelui-subview-transition-duration: 150ms;
+
+  --short-notification-background: #0250BB;
+  --short-notification-gradient: #9059FF;
+
+  --button-bgcolor: color-mix(in srgb, currentColor 13%, transparent);
+  --button-hover-bgcolor: color-mix(in srgb, currentColor 17%, transparent);
+  --button-active-bgcolor: color-mix(in srgb, currentColor 30%, transparent);
+  --button-color: currentColor;
+  --button-primary-bgcolor: AccentColor;
+  --button-primary-hover-bgcolor: color-mix(in srgb, black 10%, AccentColor);
+  --button-primary-active-bgcolor: color-mix(in srgb, black 20%, AccentColor);
+  --button-primary-color: AccentColorText;
+
+  --buttons-destructive-bgcolor: #e22850;
+  --buttons-destructive-hover-bgcolor: #c50042;
+  --buttons-destructive-active-bgcolor: #810220;
+  --buttons-destructive-color: #fbfbfe;
+
+  --identity-box-margin-inline: 4px;
+  --urlbar-box-bgcolor: var(--button-bgcolor);
+  --urlbar-box-focus-bgcolor: var(--button-bgcolor);
+  --urlbar-box-hover-bgcolor: var(--button-hover-bgcolor);
+  --urlbar-box-active-bgcolor: var(--button-active-bgcolor);
+  --urlbar-box-text-color: inherit;
+  --urlbar-box-hover-text-color: var(--urlbar-box-text-color);
+  --urlbar-min-height: max(32px, 1.4em);
+  --urlbar-icon-fill-opacity: 0.9;
+  --urlbar-icon-padding: calc((var(--urlbar-min-height) - 2px /* border */ - 2px /* padding */ - 16px /* icon */) / 2);
+  /* This should be used for icons and chiclets inside the input field. It makes
+     the gap around them more uniform when they are close to the field edges */
+  --urlbar-icon-border-radius: calc(var(--toolbarbutton-border-radius) - 1px);
+
+  --pocket-icon-fill: #ef4056;
+
+  --lwt-additional-images: none;
+  --lwt-background-alignment: right top;
+  --lwt-background-tiling: no-repeat;
+
+  --ext-theme-background-transition: background-color 0.1s cubic-bezier(.17,.67,.83,.67);
+  --inactive-window-transition: 0.2s ease;
+  --inactive-titlebar-opacity: .6;
+  /**
+   * On macOS and Linux, fading the whole titlebar is the native behavior.
+   *
+   * On Windows there's no particular standard, but the default .6 opacity
+   * feels like too much, specially because Windows "fades" the titlebar of
+   * unresponsive applications. Fade substantially less the titlebar on windows
+   * to account for this platform difference.
+   */
+  @media (-moz-platform: windows) {
+    --inactive-titlebar-opacity: .75;
+  }
+
+  &:where([tabsintitlebar]) {
+    --toolbox-non-lwt-bgcolor: ActiveCaption;
+    --toolbox-non-lwt-textcolor: CaptionText;
+    --toolbox-non-lwt-bgcolor-inactive: InactiveCaption;
+    --toolbox-non-lwt-textcolor-inactive: InactiveCaptionText;
+  }
+
+  &:-moz-lwtheme {
+    color: var(--lwt-text-color);
+
+    --link-color: light-dark(rgb(0, 97, 224), rgb(0, 221, 255));
+    --chrome-content-separator-color: rgba(0,0,0,.3);
+    --tabs-navbar-shadow-color: light-dark(rgba(0,0,0,.1), rgba(0,0,0,.3));
+
+    @media not (prefers-contrast) {
+      --focus-outline-color: light-dark(#0061E0, #00DDFF);
+    }
+  }
+
+  @media (prefers-contrast) {
+    --urlbar-icon-fill-opacity: 1;
+  }
+
+  &[uidensity=compact] {
+    --urlbar-min-height: max(26px, 1.4em);
+  }
+
+  &[uidensity=touch] {
+    --urlbar-min-height: max(34px, 1.4em);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    /* Increase the contrast of urlbar boxes in dark mode.
+       In practice these are bumped-up --button(-hover)-bgcolor rules */
+    --urlbar-box-bgcolor: color-mix(in srgb, currentColor 16%, transparent);
+    --urlbar-box-focus-bgcolor: color-mix(in srgb, currentColor 16%, transparent);
+    --urlbar-box-hover-bgcolor: color-mix(in srgb, currentColor 22%, transparent);
+  }
+
+  @media (prefers-reduced-motion) {
+    --inactive-window-transition: 0s;
+  }
+
+  @media (min-resolution: 1.5dppx) {
+    --tabs-navbar-shadow-size: 0.5px;
+  }
+
+  @media (min-resolution: 3dppx) {
+    --tabs-navbar-shadow-size: 0.33px;
+  }
+}
+
+#navigator-toolbox {
+  appearance: none;
+
+  /* Toolbar / content area border */
+  border-bottom: 1px solid var(--chrome-content-separator-color);
+
+  background-color: var(--toolbox-non-lwt-bgcolor);
+  color: var(--toolbox-non-lwt-textcolor);
+
+  will-change: background-color;
+  transition: background-color var(--inactive-window-transition);
+
+  &:-moz-window-inactive {
+    background-color: var(--toolbox-non-lwt-bgcolor-inactive);
+    color: var(--toolbox-non-lwt-textcolor-inactive);
+  }
+
+  :root[customizing] & {
+    border-bottom-style: none;
+  }
+
+  &:-moz-lwtheme {
+    background-image: var(--lwt-additional-images);
+    background-repeat: var(--lwt-background-tiling);
+    background-position: var(--lwt-background-alignment);
+    background-color: var(--lwt-accent-color);
+    color: inherit;
+
+    &:-moz-window-inactive {
+      background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color));
+    }
+  }
+
+  /* When a theme defines both theme_frame and additional_backgrounds, show
+     the latter atop the former. */
+  :root[lwtheme-image] & {
+    background-image: var(--lwt-header-image), var(--lwt-additional-images);
+    background-repeat: no-repeat, var(--lwt-background-tiling);
+    background-position: right top, var(--lwt-background-alignment);
+  }
+}
+
+.browser-toolbar {
+  appearance: none;
+  /* Reset linux padding */
+  padding: 0;
+
+  &:not(.titlebar-color) {
+    background-color: var(--toolbar-bgcolor);
+    color: var(--toolbar-color);
+    border-style: none;
+  }
+}
+
+:root[tabsintitlebar] #titlebar {
+  will-change: opacity;
+  transition: opacity var(--inactive-window-transition);
+
+  &:-moz-window-inactive {
+    opacity: var(--inactive-titlebar-opacity);
+  }
+}
+
+/* Add space to beginning of toolbar and make that space click the first <toolbarbutton> */
+#nav-bar-customization-target > :is(toolbarbutton, toolbaritem):first-child,
+#nav-bar-customization-target > toolbarpaletteitem:first-child > :is(toolbarbutton, toolbaritem) {
+  padding-inline-start: var(--toolbar-start-end-padding);
+}
+
+:root[sessionrestored] #nav-bar:-moz-lwtheme {
+  transition: var(--ext-theme-background-transition);
+}
+
+#nav-bar:not([tabs-hidden="true"]) {
+  /* The toolbar buttons that animate are only visible when the #TabsToolbar is not collapsed.
+     The animations use position:absolute and require a positioned #nav-bar. */
+  position: relative;
+  box-shadow: 0 calc(-1 * var(--tabs-navbar-shadow-size)) 0 var(--tabs-navbar-shadow-color);
+}
+
+/* Bookmarks toolbar */
+
+#PersonalToolbar {
+  /* Make the toolbar not take any vertical space when it's empty, before
+     bookmarks load. Otherwise, showing the toolbar might resize the content
+     area twice. */
+  min-height: 0;
+  padding-inline: 6px;
+
+  :root[uidensity=compact] & {
+    padding-inline: 2px;
+  }
+
+  /* Vertical sliding animation */
+
+  overflow: clip;
+  max-height: 4em;
+
+  :root[sessionrestored] &:not(.instant) {
+    transition: min-height 170ms ease-out, max-height 170ms ease-out, var(--ext-theme-background-transition);
+
+    &[collapsed=true] {
+      transition: min-height 170ms ease-out, max-height 170ms ease-out, visibility 170ms linear;
+    }
+  }
+
+  &[collapsed=true] {
+    max-height: 0;
+
+    &.instant {
+      visibility: collapse;
+    }
+  }
+
+  /* Bookmarks toolbar empty message */
+
+  &[collapsed=false]:not([initialized]) > #personal-toolbar-empty {
+    visibility: hidden;
+  }
+
+  /*
+   * Make the empty bookmarks toolbar message take up no horizontal space.
+   * This avoids two issues:
+   * 1) drag/drop of urls/bookmarks to the toolbar not working, because they
+   *    land on the personal-toolbar-empty element.
+   * 2) buttons in the toolbar moving horizontally while the window opens,
+   *    because the element is first shown at full width and then completely
+   *    hidden.
+   * TODO(emilio): The comment above was never quite true (the message did take
+   * horizontal space, see bug 1812636). Figure out how much of this rule is
+   * really needed.
+   */
+  &[collapsed=false] > #personal-toolbar-empty[nowidth] > #personal-toolbar-empty-description {
+    margin-inline: 0;
+    min-width: 0;
+    white-space: nowrap;
+    position: relative;
+    z-index: 1;
+  }
+
+  /* Bookmarks toolbar in customize mode */
+
+  &[customizing] {
+    outline: 1px dashed;
+    outline-offset: -3px;
+    /* Avoid the toolbar having no height when there's no items in it */
+    min-height: 22px;
+  }
+}
+
+/* Bookmarks toolbar only-on-new-tab mode */
+
+:root {
+  --bookmarks-toolbar-overlapping-browser-height: max(28px, 2em);
+}
+
+:root[BookmarksToolbarOverlapsBrowser] {
+  #PersonalToolbar {
+    height: var(--bookmarks-toolbar-overlapping-browser-height);
+  }
+
+  #navigator-toolbox {
+    /* Overlap the content area by the height of the bookmarks toolbar so that
+       temporarily showing the toolbar for new tabs doesn't resize the content
+       area for all tabs. */
+    margin-bottom: calc(-1 * var(--bookmarks-toolbar-overlapping-browser-height));
+    z-index: 1;
+  }
+
+  .newTabBrowserPanel,
+  #sidebar-box {
+    /* Make room for the bookmarks toolbar so that it won't visibly overlap the
+       new tab page and sidebar contents. We do not put this padding on #browser
+       as that would resize the content area for all tabs including background
+       tabs, which is what we explicitly want to avoid doing here. */
+    padding-top: var(--bookmarks-toolbar-overlapping-browser-height);
+  }
+}
+
+/* Bookmarks toolbar drop indicator */
+
+#PlacesToolbarDropIndicator {
+  list-style-image: url(chrome://browser/skin/toolbar-drag-indicator.svg);
+  pointer-events: none;
+}
+
+/* Menupopup drop indicators */
+
+menupopup::part(drop-indicator-container) {
+  /* TODO(emilio): When menupopups get ported to modern flex layout we can
+   * probably simplify this substantially, by making the indicator position:
+   * absolute or so (which was never properly supported in XUL). The container
+   * should become completely unnecessary then. */
+  min-width: 0;
+  min-height: 0;
+  max-width: 100%;
+  max-height: 100%;
+}
+
+menupopup::part(drop-indicator-bar) {
+  position: relative;
+  /* these two margins must together compensate the indicator's height */
+  margin-block: -1px;
+}
+
+menupopup::part(drop-indicator) {
+  list-style-image: none;
+  height: 2px;
+  margin-inline-end: -4em;
+  background-color: SelectedItem;
+  pointer-events: none;
+}
+
+/* Back / Forward context menu */
+
+.unified-nav-back,
+.unified-nav-forward {
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+.unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
+.unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
+  list-style-image: url("chrome://browser/skin/back.svg") !important;
+}
+
+.unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr),
+.unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) {
+  list-style-image: url("chrome://browser/skin/forward.svg") !important;
+}
+
+/* Status panel */
+
+#statuspanel {
+  &:not([hidden]) {
+    max-width: calc(100% - 5px);
+    pointer-events: none;
+
+    /* Take a bit more space vertically for the mouse tracker to hit us more
+     * easily */
+    padding-top: 2em;
+
+    position: absolute;
+    bottom: 0;
+    left: 0;
+  }
+
+  &:not([mirror]):-moz-locale-dir(rtl),
+  &[mirror]:-moz-locale-dir(ltr) {
+    left: auto;
+    right: 0;
+  }
+
+  &[sizelimit] {
+    max-width: 50%;
+  }
+
+  &[type=status] {
+    min-width: min(23em, 33%);
+  }
+
+  &[type=overLink] {
+    transition: opacity 120ms ease-out, visibility 120ms;
+  }
+
+  &:is([type=overLink], [inactive][previoustype=overLink]) {
+    direction: ltr;
+  }
+
+  &[inactive],
+  :root[inDOMFullscreen] &:not([type=overLink]) {
+    transition: none;
+    opacity: 0;
+    visibility: hidden;
+
+    &[previoustype=overLink] {
+      transition: opacity 200ms ease-out, visibility 200ms;
+    }
+  }
+
+  /* stylelint-disable-next-line media-query-no-invalid */
+  @media (-moz-bool-pref: "browser.tabs.hideStatusPanel") {
+    visibility: hidden;
+  }
+}
+
+#statuspanel-label {
+  color-scheme: env(-moz-content-preferred-color-scheme);
+  margin: 0;
+  padding: 2px 4px;
+  background-color: -moz-dialog;
+  border: 1px none ThreeDShadow;
+  border-top-style: solid;
+  color: -moz-dialogText;
+  text-shadow: none;
+
+  @media (not (prefers-contrast)) and (not (-moz-platform: linux)) {
+    background-color: light-dark(#f9f9fa, hsl(240,1%,20%));
+    border-color: light-dark(#ddd, hsl(240,1%,40%));
+    color: light-dark(#444, rgb(249,249,250));
+  }
+
+  #statuspanel:not([mirror]) > &:-moz-locale-dir(ltr),
+  #statuspanel[mirror] > &:-moz-locale-dir(rtl) {
+    border-right-style: solid;
+    /* disabled on Windows for triggering grayscale AA (bug 659213): */
+  	@media not (-moz-platform: windows) {
+      border-top-right-radius: .3em;
+    }
+    margin-right: 1em;
+  }
+
+  #statuspanel:not([mirror]) > &:-moz-locale-dir(rtl),
+  #statuspanel[mirror] > &:-moz-locale-dir(ltr) {
+    border-left-style: solid;
+    /* disabled on Windows for triggering grayscale AA (bug 659213): */
+  	@media not (-moz-platform: windows) {
+      border-top-left-radius: .3em;
+    }
+    margin-left: 1em;
+  }
+}
+
+/* Find bar */
+
+.browserContainer > findbar {
+  background-color: var(--toolbar-bgcolor);
+  color: var(--toolbar-color);
+  color-scheme: var(--toolbar-color-scheme);
+  border-top-color: var(--chrome-content-separator-color, ThreeDShadow);
+
+  &:-moz-lwtheme {
+    background-color: var(--lwt-accent-color);
+    background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-additional-images);
+    background-repeat: no-repeat, var(--lwt-background-tiling);
+    background-position: right bottom, var(--lwt-background-alignment);
+    background-position-y: bottom !important;
+
+    :root:not([lwtheme-image]) &:-moz-window-inactive {
+      background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color));
+    }
+
+    :root[lwtheme-image] & {
+      background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image), var(--lwt-additional-images);
+      background-repeat: no-repeat, no-repeat, var(--lwt-background-tiling);
+      background-position: center, right bottom, var(--lwt-background-alignment);
+    }
+  }
+}
+
+/* Private browsing indicator */
+
+#private-browsing-indicator-with-label {
+  align-items: center;
+  margin-inline: 7px;
+
+  :root:not([privatebrowsingmode=temporary]) & {
+    display: none;
+  }
+}
+
+.private-browsing-indicator-icon {
+  list-style-image: url("chrome://global/skin/icons/indicator-private-browsing.svg");
+  width: 16px;
+  height: 16px;
+}
+
+/* End private browsing indicator */
+
+/* Override theme colors since the picker uses extra colors that
+   themes cannot set */
+#DateTimePickerPanel {
+  color-scheme: env(-moz-content-preferred-color-scheme);
+  --arrowpanel-background: Field;
+  --arrowpanel-color: FieldText;
+}
+
+#widget-overflow .webextension-popup-browser {
+  background: #fff;
+
+  /* height set via JS can be lower than the stack min-height,
+     ensure the browser takes up at least that min-height */
+  min-height: 100%;
+}
+
+#addon-progress-notification-progressmeter {
+  margin: 2px 4px;
+}
+
+/* Contextual Feature Recommendation popup-notification */
+
+#cfr-notification-header {
+  width: 100%;
+  display: block;
+  text-align: center;
+  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
+}
+
+#cfr-notification-header-stack {
+  width: 100%;
+}
+
+#cfr-notification-header-label {
+  margin: 9px;
+  font-weight: 600;
+}
+
+#cfr-notification-header-link {
+  margin: 7px;
+  color: inherit;
+  cursor: default;
+  justify-self: end;
+}
+
+#cfr-notification-header-image {
+  width: 19px;
+  height: 19px;
+  padding: 2px;
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  fill-opacity: 0.6;
+  list-style-image: url(chrome://global/skin/icons/help.svg);
+
+  &:hover {
+    background-color: hsla(0,0%,70%,.2);
+    border-radius: 2px;
+  }
+}
+
+#contextual-feature-recommendation-notification {
+  width: 400px;
+
+  .popup-notification-icon {
+    margin-inline-end: 4px;
+  }
+
+  .cfr-doorhanger-large-icon {
+    width: 64px;
+    height: 64px;
+    margin-inline-end: 12px;
+  }
+
+  .cfr-doorhanger-medium-icon {
+    width: 50px;
+    height: 50px;
+    margin-inline-end: 12px;
+  }
+
+  .popup-notification-body-container {
+    width: 100%;
+    padding-bottom: 2px;
+  }
+
+  popupnotificationcontent {
+    margin-top: 0;
+  }
+
+  description {
+    margin-bottom: 0;
+  }
+
+  &[data-notification-bucket="CFR_MILESTONE_MESSAGE"] {
+    &:not([hidden]) {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      background: radial-gradient(circle farthest-side at top right, var(--short-notification-gradient), var(--short-notification-background));
+      width: unset;
+      max-width: 700px;
+      overflow-wrap: break-word;
+      padding: 4px;
+    }
+
+    &:-moz-locale-dir(rtl) {
+      background: radial-gradient(circle farthest-side at top left, var(--short-notification-gradient), var(--short-notification-background));
+    }
+
+    .popup-notification-body-container,
+    .popup-notification-footer-container,
+    #cfr-notification-header-link {
+      display: none;
+    }
+
+    #cfr-notification-header {
+      box-shadow: none;
+    }
+
+    description {
+      font-weight: 400;
+      margin: unset;
+      margin-inline: 12px;
+    }
+
+    .panel-footer,
+    .popup-notification-header-container {
+      display: inline-flex;
+    }
+
+    .panel-footer {
+      float: inline-end;
+      background-color: transparent;
+      flex-direction: row-reverse;
+      /* Override proton-doorhanger default styles that increase the size of the button */
+      margin: 0;
+    }
+
+    .popup-notification-primary-button {
+      background-color: rgba(216, 216, 216, 0.2);
+      color: white;
+      border: none;
+      border-radius: 2px;
+      margin: 4px;
+      padding: 3px 12px;
+      flex: 1;
+      min-height: 22px;
+
+      &::after {
+        content: url(chrome://global/skin/icons/arrow-left-12.svg);
+        -moz-context-properties: fill;
+        fill: currentColor;
+        transform: translateY(2px);
+        float: inline-end;
+      }
+
+      &:-moz-locale-dir(ltr)::after {
+        content: url(chrome://global/skin/icons/arrow-right-12.svg);
+      }
+
+      &:hover {
+        background-color: rgba(216, 216, 216, 0.4);
+      }
+
+      &:hover:active {
+        background-color: rgba(216, 216, 216, 0.5);
+      }
+    }
+
+    .popup-notification-secondary-button {
+      margin: 3px;
+      border: none;
+      border-radius: 2px;
+      background-image: url(chrome://global/skin/icons/close.svg);
+      background-color: transparent;
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: 10px;
+      -moz-context-properties: fill;
+      fill: white;
+      min-height: 22px;
+      width: 22px;
+      padding: 0;
+      align-self: center;
+      flex: none;
+      font-size: 0;
+
+      &:hover {
+        background-color: rgba(216, 216, 216, 0.4);
+      }
+    }
+
+    .popup-notification-header-container {
+      color: white;
+      max-width: unset;
+    }
+  }
+
+  &[data-notification-bucket="CFR_SOCIAL_TRACKING_PROTECTION"] {
+    width: 386px;
+  }
+
+  &[data-notification-category="addon_recommendation"] {
+    .popup-notification-description > b {
+      padding-inline-start: 5px;
+    }
+
+    #cfr-notification-footer-learn-more-link {
+      margin-inline-start: 5px;
+    }
+
+    #cfr-notification-feature-steps,
+    #cfr-notification-header-image {
+      display: none;
+    }
+
+    #cfr-notification-header-label {
+      margin-block-end: 9px;
+    }
+  }
+
+  &[data-notification-category="icon_and_message"] {
+    /*
+     * `icon_and_message` CFR doorhanger with: icon, title and subtitle.
+     * No panel header is shown
+     */
+    #cfr-notification-header,
+    .popup-notification-footer-container {
+      display: none;
+    }
+
+    .popup-notification-description {
+      font-weight: 600;
+      margin-bottom: 15px;
+    }
+
+    popupnotificationcontent {
+      display: block; /* This forces the subtitle content to wrap */
+    }
+  }
+}
+
+#cfr-notification-footer-text-and-addon-info {
+  display: block;
+  padding: 10px var(--arrowpanel-padding);
+}
+
+#cfr-notification-feature-steps {
+  display: flex;
+  flex-direction: column;
+  margin-top: 10px;
+
+  li {
+    margin-inline-start: 10px;
+    position: relative;
+    display: list-item;
+
+    &:not(:last-child) {
+      margin-bottom: 5px;
+    }
+  }
+}
+
+#cfr-notification-footer-text,
+#cfr-notification-footer-users,
+#cfr-notification-footer-learn-more-link {
+  margin: 0;
+}
+
+#cfr-notification-footer-addon-info {
+  align-items: center;
+  display: flex;
+  margin-block: 10px 6px;
+}
+
+#cfr-notification-footer-filled-stars,
+#cfr-notification-footer-empty-stars {
+  -moz-context-properties: fill, fill-opacity;
+  background-image: url(chrome://browser/skin/bookmark.svg);
+  fill: currentColor;
+  fill-opacity: 0.7;
+  height: 16px;
+}
+
+#cfr-notification-footer-filled-stars:-moz-locale-dir(rtl),
+#cfr-notification-footer-empty-stars {
+  background-position-x: right;
+}
+
+#cfr-notification-footer-filled-stars,
+#cfr-notification-footer-empty-stars:-moz-locale-dir(rtl) {
+  background-position-x: left;
+}
+
+#cfr-notification-footer-empty-stars[tooltiptext] {
+  margin-inline-end: 6px;
+  opacity: 0.3;
+}
+
+#cfr-notification-footer-users {
+  opacity: 0.7;
+}
+
+#cfr-notification-footer-spacer {
+  flex-grow: 1;
+}
+
+/* nhnt11: Workaround to insert a linebreak after the DoH doorhanger's title.
+ * The title uses the inline <b> that usually contains the hostname for
+ * permission prompts to achieve bold formatting. This is always the 2nd child.
+ */
+.popup-notification-description[popupid="doh-first-time"] > b:first-of-type {
+  display: block;
+  margin-bottom: 4px; /* matches the margin-bottom on description elements */
+}
+
+/* Sharing tabs warning */
+
+#sharing-tabs-warning-panel {
+  max-width: 400px;
+
+  > hbox[type="window"] > vbox > label > #sharing-warning-screen-panel-header {
+    display: none;
+  }
+
+  > hbox[type="screen"] > vbox > label > #sharing-warning-window-panel-header {
+    display: none;
+  }
+}
+
+#sharing-warning-proceed-to-tab {
+  appearance: none;
+  border-style: none;
+  margin: 0;
+  background-color: rgb(0,96,223);
+  color: rgb(255,255,255);
+  border-radius: 5px;
+  padding: 10px;
+  margin-top: 15px;
+  margin-bottom: 10px;
+
+  &:hover {
+    background-color: rgb(0,62,170);
+  }
+}
+
+/* webRTC device sharing selector */
+
+.webRTC-selectDevice-selector-container {
+  display: flex;
+  align-items: center;
+
+  > menulist {
+    flex: 1;
+    min-width: 0;
+  }
+}
+
+#webRTC-selectSpeaker-richlistbox {
+  flex: 1;
+  /* Keep the richlistbox small enough that a large number of devices doesn't
+     push the main and secondary action buttons off the bottom of the
+     popupnotification window when limited by screen size.  Only enough
+     richlistitems need to be shown to indicate that there are options
+     available but give enough space for the common case of only a few
+     devices.  */
+  max-height: 600px;
+}
+
+#webRTC-selectCamera-label,
+#webRTC-selectMicrophone-label {
+  display: none;
+}
+
+.webRTC-selectDevice-icon {
+  -moz-context-properties: fill;
+  fill: currentColor;
+  margin-inline-end: 8px;
+  /* Setting width explicitly so it's still visible if the device label is very long */
+  width: 16px;
+}
+
+#webRTC-selectCamera-icon {
+  list-style-image: url("chrome://browser/skin/notification-icons/camera.svg");
+}
+
+#webRTC-selectMicrophone-icon {
+  list-style-image: url("chrome://browser/skin/notification-icons/microphone.svg");
+}
+
+#webRTC-selectSpeaker-icon {
+  list-style-image: url("chrome://browser/skin/notification-icons/speaker.svg");
+}
+
+/* TODO: move these to popupnotification.css */
+
+popupnotificationcontent {
+  margin-block-start: 8px;
+}
+
+.popup-notification-body menulist {
+  margin: 0;
+}
+
+.popup-notification-checkbox {
+  margin-block: 12px 0;
+}
+
+.popup-notification-body-container {
+  padding-block-end: 0;
+}
+
+.popup-notification-body :is(description, label:not(.learnMore), checkbox, input) {
+  margin-inline: 0;
+}
+
+.popup-notification-body :is(input, textarea) {
+  padding: 8px;
+  border-radius: 4px;
+  border: 0;
+  outline: 1px solid var(--input-border-color, ThreeDShadow);
+  outline-offset: -1px;
+  background-color: var(--input-bgcolor, Field);
+  color: var(--input-color, FieldText);
+}
+
+.popup-notification-body input:focus-visible {
+  outline: 2px solid var(--focus-outline-color);
+}
+
+.popup-notification-description {
+  font-weight: 600;
+  margin-top: 0;
+
+  > b {
+    font-weight: inherit;
+  }
+}
+
+/* Password Manager Doorhanger */
+
+.ac-dropmarker {
+  appearance: none;
+  justify-self: end;
+  margin-inline-end: 8px;
+  align-self: center;
+  content: url(chrome://global/skin/icons/arrow-down-12.svg);
+  -moz-context-properties: fill;
+  fill: var(--input-color, -moz-DialogText);
+}
+
+.ac-has-end-icon {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.popup-notification-body input.ac-has-end-icon {
+  --input-padding-from-arrow-side: calc(8px + 16px + 8px); /* spacing from the end + arrow element width + extra spacing) */
+  padding-inline-end: var(--input-padding-from-arrow-side);
+}
+
+/* Avoid overlapping the text on the arrow icon when switching input text direction */
+.popup-notification-body:-moz-locale-dir(rtl) input.ac-has-end-icon:dir(ltr) {
+  padding-left: var(--input-padding-from-arrow-side);
+  padding-right: 8px;
+}
+.popup-notification-body:-moz-locale-dir(ltr) input.ac-has-end-icon:dir(rtl) {
+  padding-right: var(--input-padding-from-arrow-side);
+  padding-left: 8px;
+}
+
+.password-notification-label {
+  margin-block-start: 16px;
+
+  /**
+   * There's already a margin-block-start of 8px on popupnotificationcontent,
+   * so the first label only needs 8px of margin-block-start to match the
+   * spec.
+   */
+  &:first-of-type {
+    margin-block-start: 8px;
+  }
+}
+
+#password-notification-visibilityToggle {
+  margin-block-start: 14px;
+
+  > .checkbox-label-box > .checkbox-label {
+    opacity: 0.7;
+  }
+}
+
+#tab-notification-deck {
+  display: block;
+}
+
+/* Relay Integration */
+
+.relay-integration-header {
+  display: flex;
+  align-items: center;
+  font-size: 2em;
+
+  > div {
+    width: 32px;
+    height: 32px;
+    background-image: url("chrome://browser/content/logos/relay.svg");
+    background-repeat: no-repeat;
+  }
+
+  > span:first-of-type {
+    font-weight: bold;
+    margin-inline-start: 8px;
+  }
+
+  > span:last-of-type {
+    font-weight: normal;
+    white-space: pre;
+  }
+}
+
+.popup-notification-description[popupid="relay-integration-offer-notification"] > div:first-of-type {
+  font-weight: normal;
+  display: grid;
+  grid-template-columns: auto;
+  grid-template-rows: auto auto auto auto;
+}
+
+#relay-integration-reuse-masks-notification > popupnotificationcontent > div {
+  font-weight: normal;
+  display: grid;
+  grid-template-columns: auto;
+  grid-template-rows: auto auto auto auto;
+}
+
+.reusable-relay-masks {
+  display: flex;
+  flex-direction: column;
+
+  > button {
+    padding: 4px;
+    margin: 4px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+    > span:first-child {
+      margin-inline-end: 20px;
+    }
+
+    > span:last-child {
+      opacity: 0.6;
+    }
+  }
+}
+
+/* History swipe navigation animation */
+
+#historySwipeAnimationPreviousArrow,
+#historySwipeAnimationNextArrow {
+  --swipe-nav-icon-primary-color: SelectedItemText;
+  --swipe-nav-icon-accent-color: SelectedItem;
+
+  will-change: transform;
+
+  @media not (prefers-contrast) {
+  /* TODO: Should this be in browser-custom-colors to respect system theming on
+   * Linux? */
+    --swipe-nav-icon-primary-color: light-dark(#0060DF, #00DDFF);
+    --swipe-nav-icon-accent-color: light-dark(#FFFFFF, #000000);
+  }
+
+  > svg {
+    margin: auto 0;
+  }
+}
+
+#historySwipeAnimationPreviousArrow:-moz-locale-dir(rtl),
+#historySwipeAnimationNextArrow:-moz-locale-dir(ltr) {
+  transform: scaleX(-1);
+}
+
+.swipe-nav-icon {
+  > path {
+    transition: fill 1s;
+  }
+
+  @media not (-moz-platform: macos) {
+    /*
+     * Styles for the swipe navigation SVG icon.
+     *
+     * `will-navigate` class name is added to the <svg> element when the user's
+     * swipe gesture reached to the point where history navigation will be
+     * triggered. It's used for triggering three animations, an arrow color change,
+     * a circle color change and a glowing effect outer the circle.
+     */
+    > circle {
+      fill: var(--swipe-nav-icon-accent-color);
+      stroke: var(--swipe-nav-icon-primary-color);
+      transition: fill 1s;
+
+      &:first-of-type {
+        fill: var(--swipe-nav-icon-primary-color);
+        transition: opacity 1s;
+        will-change: opacity; /* a workaround for bug 1804189 */
+        opacity: 0;
+      }
+    }
+
+    &.will-navigate > circle:not(:first-of-type) {
+      fill: var(--swipe-nav-icon-primary-color);
+    }
+
+    &.will-navigate > circle:first-of-type {
+      transition-delay: 0.2s;
+      opacity: 0.2;
+    }
+
+    > path {
+      fill: var(--swipe-nav-icon-primary-color);
+    }
+
+    &.will-navigate > path {
+      fill: var(--swipe-nav-icon-accent-color);
+      stroke: var(--swipe-nav-icon-accent-color);
+    }
+  }
+}
+
+@media (-moz-platform: macos) {
+  /*
+   * Styles for the swipe navigation SVG icon.
+   *
+   * `will-navigate` class name is added to the <svg> element when the user's
+   * swipe gesture reached to the point where history navigation will be
+   * triggered.
+   */
+  .swipe-nav-icon-circle-outline,
+  .swipe-nav-icon-arrow {
+    fill: var(--swipe-nav-icon-primary-color);
+  }
+
+  .swipe-nav-icon-circle {
+    fill: var(--swipe-nav-icon-accent-color);
+  }
+
+  .swipe-nav-icon.will-navigate {
+    > .swipe-nav-icon-circle-outline,
+    > .swipe-nav-icon-arrow {
+      fill: var(--swipe-nav-icon-accent-color);
+    }
+
+    > .swipe-nav-icon-circle {
+      fill: var(--swipe-nav-icon-primary-color);
+    }
+  }
+}
+
+/* TODO: move this to toolkit */
+panel toolbarseparator {
+  appearance: none;
+  min-height: 0;
+  border-top: 1px solid var(--panel-separator-color);
+  border-bottom: none;
+  margin: var(--panel-separator-margin);
+  padding: 0;
+}
+
+/* Picture-in-Picture panel */
+
+#PictureInPicturePanel {
+  width: var(--menu-panel-width-wide);
+  font: caption;
+}
+
+#PictureInPicturePanelBody {
+  gap: 8px;
+  padding: 8px 16px;
+}
+
+#PictureInPicturePanelFooter {
+  margin: 8px 16px 16px;
+}
+
+/* Shopping sidebar */
+
+shopping-sidebar {
+  border-inline-start: 1px solid var(--chrome-content-separator-color);
+  min-width: 16.92em;
+  max-width: 32.31em;
+  width: 320px;
+  box-sizing: content-box;
+}