tor-browser

browser-shared.css (37160B)

---

/* 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/browser-colors.css");
@import url("chrome://browser/skin/addons/extension-controlled.css");
@import url("chrome://browser/skin/addons/unified-extensions.css");
@import url("chrome://browser/skin/downloads/indicator.css");
@import url("chrome://browser/skin/tabbrowser/content-area.css");
@import url("chrome://browser/skin/tabbrowser/ctrlTab.css");
@import url("chrome://browser/skin/tabbrowser/fullscreen-and-pointerlock.css");
@import url("chrome://browser/skin/tabbrowser/tabs.css");
@import url("chrome://browser/skin/tabbrowser/tab-hover-preview.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/searchbar.css");
@import url("chrome://browser/skin/sidebar.css");
@import url("chrome://browser/skin/smartbar.css");
@import url("chrome://browser/skin/aiWindowSidebar.css");
@import url("chrome://browser/skin/customizableui/customizeMode.css");
@import url("chrome://browser/skin/UITour.css");
@import url("chrome://browser/skin/formautofill-notification.css");
@import url("chrome://global/skin/tor-colors.css");
@import url("chrome://browser/skin/tor-urlbar-button.css");
@import url("chrome://browser/skin/onionlocation.css");

:root,
body {
 height: 100%;
 width: 100%;
 overflow: clip;
}

:root {
 --window-min-width: 500px;
 /* Vertical tabs need extra room in the nav bar for window controls,
    drag space, and the sidebar button. */
 --window-min-width-increase-for-vertical-tabs: calc(var(--window-controls-size) + 23px);
 --window-controls-size: 138px;
 @media (-moz-platform: macos) {
   --window-controls-size: 76px;
 }
 @media (-moz-platform: linux) {
   /* FIXME: Use --titlebar-button-* variables to calculate the window
             controls' size. */
   --window-controls-size: 115px;
 }

 user-select: none;
 color-scheme: light dark;
 text-rendering: optimizeLegibility;
 min-height: 95px;
 min-width: 95px;

 @media not (forced-colors) {
   accent-color: var(--color-accent-primary);
 }

 &:-moz-locale-dir(rtl) {
   direction: rtl;
 }

 &:not([chromehidden~="toolbar"]) {
   min-width: var(--window-min-width);
   min-height: 120px;

   /* stylelint-disable-next-line media-query-no-invalid */
   @media -moz-pref("sidebar.verticalTabs") {
     min-width: calc(var(--window-min-width) + var(--window-min-width-increase-for-vertical-tabs));

     /* If the Content Analysis icon is showing, we don't
        want to collapse it, so make a little more room. */
     &[contentanalysisactive] {
       min-width: calc(var(--window-min-width) + var(--window-min-width-increase-for-vertical-tabs) + 36px);
     }
   }
 }

 &[taskbartab]:not([chromehidden~="toolbar"]) {
   min-width: 804px;
 }

 /* z-indices that fight on the browser stack */
 --browser-stack-z-index-devtools-splitter: 1;
 --browser-stack-z-index-dialog-stack: 2;
 --browser-stack-z-index-rdm-toolbar: 3;

 /* z-indices that fight in the general browser / toolbox area */
 --browser-area-z-index-toolbox: 0;
 --browser-area-z-index-sidebar: 1;
 --browser-area-z-index-tabbox: 2;
 --browser-area-z-index-sidebar-expand-on-hover: 4;
 --browser-area-z-index-sidebar-splitter: 3;

 /* on macOS the animation of the toolbox in fullscreen needs the toolbox to be higher */
 --browser-area-z-index-toolbox-while-animating: 4;

 --toolbarbutton-border-radius: var(--button-border-radius);
 --identity-box-margin-inline: 4px;
 --urlbar-min-height: max(32px, 1.4em);
 --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, as well
    as result rows. It makes the gap around them more uniform when they are
    close to the field edges. */
 --urlbar-inner-border-radius: calc(var(--toolbarbutton-border-radius) - 1px);
 --urlbar-searchmodeswitcher-inline-padding: 6px;
 --urlbar-searchmodeswitcher-margin-inline-end: 0.45em;

 --lwt-additional-images: none;
 --lwt-background-alignment: right top;
 --lwt-background-tiling: no-repeat;

 --ext-theme-background-transition: background-color 0.1s cubic-bezier(0.17, 0.67, 0.83, 0.67);

 --inactive-window-transition: 0.2s ease;
 --inactive-titlebar-opacity: 0.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: 0.75;
 }
 @media (prefers-reduced-motion) {
   --inactive-window-transition: 0s;
 }

 &[lwtheme] {
   color: var(--lwt-text-color);
 }

 &[uidensity="compact"] {
   --urlbar-min-height: max(26px, 1.4em);
 }

 &[uidensity="touch"] {
   --urlbar-min-height: max(34px, 1.4em);
 }
}

body {
 display: flex;
 flex-direction: column;
 flex: 1;
 margin: 0;
}

/* Toolbox and Toolbars */

#navigator-toolbox {
 appearance: none;
 z-index: var(--browser-area-z-index-toolbox);

 &[fullscreenShouldAnimate] {
   transition: 0.8s margin-top ease-out;
 }

 /* While we are animating / have animated in the titlebar from macOS,
  * the z-indices are subtly different to accommodate the sidebar better.
  *
  * We also give the toolbox a shadow and border in this case.
  */
 &.fullscreen-with-menubar {
   z-index: var(--browser-area-z-index-toolbox-while-animating);
   box-shadow: var(--content-area-shadow);
   border-bottom-color: var(--chrome-content-separator-color);
 }

 /* Themes define a set of toolbox foreground and background colors which we
  * want to use across the toolbox and sidebar areas. That happens via the
  * .browser-toolbox-background class. It's hard to make a theme's background
  * images work with something other than the toolbox, so for now we ignore
  * them on other things like the sidebar that could have
  * .browser-toolbox-background */
 :root[lwtheme] & {
   background-image: var(--lwt-additional-images);
   background-repeat: var(--lwt-background-tiling);
   background-position: var(--lwt-background-alignment);
 }

 /* 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-toolbox-background {
 position: relative;
 background-color: var(--toolbox-bgcolor);
 color: var(--toolbox-textcolor);

 will-change: background-color;
 transition: background-color var(--inactive-window-transition);

 &:-moz-window-inactive {
   background-color: var(--toolbox-bgcolor-inactive);
   color: var(--toolbox-textcolor-inactive);
 }

 :root[customizing] & {
   border-bottom-style: none;
 }

 @media (-moz-platform: macos) and (-moz-native-theme) {
   /* This is conceptually a background, but putting this on a pseudo-element
    * avoids it from suppressing the chrome-content separator border, etc.
    *
    * We make this exist unconditionally to prevent dynamic changes from
    * reframing the whole toolbox when adding or removing it.
    *
    * See bug 1949528 and bug 1476281 (which would make this unnecessary). */
   &::after {
     content: "";
     position: absolute;
     inset: 0;
     z-index: -1;
   }

   /* Don't make the toolbox vibrant when in full-screen. macOS fullscreen has a
    * native titlebar outside of the window (revealed on hover) anyways. */
   :root[customtitlebar]:not([lwtheme], [macOSNativeFullscreen]) & {
     background-color: transparent;

     &::after {
       -moz-default-appearance: -moz-window-titlebar;
       appearance: auto;
     }
   }
 }
}

.browser-toolbar {
 appearance: none;
 /* Reset linux padding */
 padding: 0;
 border-style: none;
 background-color: transparent;
 color: inherit;

 /* stylelint-disable-next-line media-query-no-invalid */
 @media not -moz-pref("sidebar.verticalTabs") {
   &:not(.browser-titlebar) {
     background-color: var(--toolbar-bgcolor);
     color: var(--toolbar-color);
   }
 }
}

/* Title bar */

.browser-titlebar {
 -moz-window-dragging: drag;

 :root[customtitlebar] &,
 :root[customtitlebar] & .urlbar:popover-open {
   will-change: opacity;
   transition: opacity var(--inactive-window-transition);

   &:-moz-window-inactive {
     opacity: var(--inactive-titlebar-opacity);
   }
 }
}

.titlebar-buttonbox-container {
 order: 1000;

 @media (-moz-platform: macos) and (not (-moz-mac-rtl)) {
   &:-moz-locale-dir(ltr) {
     order: -1;
   }
 }

 @media (-moz-mac-rtl) {
   &:-moz-locale-dir(rtl) {
     order: -1;
   }
 }

 #toolbar-menubar[autohide]:not([inactive]) ~ :is(#TabsToolbar, #nav-bar) > & {
   visibility: hidden;
 }

 :root:not([customtitlebar], [inFullscreen]) & {
   display: none;
 }
}

.titlebar-spacer {
 width: 40px;

 :root[inFullscreen] &,
 :root:not([customtitlebar]) & {
   display: none;
 }

 @media (-moz-platform: windows) {
   :root:not([sizemode="normal"]) &[type="pre-tabs"] {
     display: none;
   }
 }

 @media (-moz-platform: linux) and (-moz-gtk-csd-reversed-placement: 0) {
   :root:not([sizemode="normal"]) &[type="pre-tabs"],
   :root[gtktiledwindow="true"] &[type="pre-tabs"] {
     display: none;
   }
 }

 @media (-moz-gtk-csd-reversed-placement) {
   :root:not([sizemode="normal"]) &[type="post-tabs"],
   :root[gtktiledwindow="true"] &[type="post-tabs"] {
     display: none;
   }
 }

 @media (max-width: 500px) {
   &[type="post-tabs"] {
     display: none;
   }
 }

 /* stylelint-disable-next-line media-query-no-invalid */
 @media -moz-pref("sidebar.verticalTabs") {
   :root:not([taskbartab]) &:is([type="pre-tabs"], [type="post-tabs"]) {
     display: none;
   }
 }
}

/* Hide the TabsToolbar/nav-bar titlebar controls if the menubar is permanently shown.
* (That is, if the menu bar doesn't autohide, and we're not in a fullscreen or
* popup window.) */
:root:not([chromehidden~="menubar"], [inFullscreen])
 #toolbar-menubar:not([autohide], [collapsed])
 ~ :is(#TabsToolbar, #nav-bar)
 > :is(.titlebar-buttonbox-container, .titlebar-spacer) {
 display: none;
}

/* Only show the titlebar buttons and spacers in the first visible toolbar. */
#navigator-toolbox:not([tabs-hidden]) > #nav-bar > :is(.titlebar-buttonbox-container, .titlebar-spacer) {
 display: none;
}

:root:not([sizemode="maximized"], [sizemode="fullscreen"]) .titlebar-restore,
:root:is([sizemode="maximized"], [sizemode="fullscreen"]) .titlebar-max {
 display: none;
}

.titlebar-buttonbox {
 appearance: auto;
 -moz-default-appearance: -moz-window-button-box;
 position: relative;

 :root:not([customtitlebar], [sizemode="fullscreen"]) & {
   display: none;
 }
}

/* Menu bar */

#toolbar-menubar {
 &[autohide] {
   overflow: hidden;

   /* For linux and windows, when temporarily showing the menu bar, make it at least
      as tall as the tab toolbar such that the window controls don't appear to move up.
      For MacOS, autohide is never true on the menubar.
   */
   :root[customtitlebar] #navigator-toolbox:not([tabs-hidden]) > & {
     min-height: var(--tabstrip-min-height);
   }
   /* adjust the height of the auto-hiding toolbar menubar when the tabstrip is
      hidden and we need to match the height of the nav-bar. */
   :root[customtitlebar] #navigator-toolbox[tabs-hidden] > & {
     min-height: calc(var(--urlbar-min-height) + 2 * var(--urlbar-padding-block));
   }

   &[inactive]:not([customizing]) {
     min-height: 0 !important;
     height: 0 !important;
     padding: 0 !important;
     appearance: none !important;
   }
 }
}

/* Hide menu elements intended for keyboard access support */
#main-menubar[openedwithkey="false"] .show-only-for-keyboard {
 display: none;
}

/* Profiles menu */

#menu_newProfile {
 -moz-context-properties: fill;
 fill: currentColor;
 --menuitem-icon: url(chrome://global/skin/icons/plus.svg);
}

.menuitem-iconic-profile {
 -moz-context-properties: fill, stroke;
 fill: var(--menu-profiles-theme-bg);
 stroke: var(--menu-profiles-theme-fg);
}

/* Navigation toolbar */

#nav-bar {
 /* The toolbar buttons that animate use position:absolute and require a
  * positioned #nav-bar. */
 position: relative;
 border-top: 0.01px var(--tabs-navbar-separator-style) var(--tabs-navbar-separator-color);

 #navigator-toolbox[tabs-hidden] > & {
   border-top-style: none;
 }

 :root[sessionrestored][lwtheme] & {
   transition: var(--ext-theme-background-transition);
 }
}

#nav-bar-customization-target {
 /* Don't grow if potentially-user-sized elements (like the searchbar or the
  * bookmarks toolbar item list) are too wide. This forces them to flex to the
  * available space as much as possible, see bug 1795260. */
 min-width: 0;

 /* Add space to beginning of toolbar and make that space click the first <toolbarbutton> */
 > :is(toolbarbutton, toolbaritem):first-child,
 > toolbarpaletteitem:first-child > :is(toolbarbutton, toolbaritem) {
   padding-inline-start: var(--toolbar-start-end-padding);
 }
}

#vertical-spacer {
 min-width: 20px;

 /* stylelint-disable-next-line media-query-no-invalid */
 @media not -moz-pref("sidebar.verticalTabs") {
   display: none;
 }

 :root[taskbartab] & {
   display: none;
 }
}

/* 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] {
     transition:
       min-height 170ms ease-out,
       max-height 170ms ease-out,
       visibility 170ms linear;
   }
 }

 &[collapsed] {
   max-height: 0;

   &.instant {
     visibility: collapse;
   }
 }

 /* Bookmarks toolbar empty message */

 /* If the toolbar is not initialized set a zero width, but retain height. */
 &:not([collapsed], [initialized]) > #personal-toolbar-empty {
   visibility: hidden;
   width: 0;
   overflow-x: hidden;
 }

 /* 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;
 }
}

#personal-toolbar-empty-description {
 white-space: nowrap;
}

#personal-bookmarks {
 position: relative;
 -moz-window-dragging: inherit;
}

#fxms-bmb-button-wrapper,
toolbarpaletteitem > #personal-bookmarks > #PlacesToolbar,
#personal-bookmarks:is([overflowedItem="true"], [cui-areatype="panel"]) > #PlacesToolbar {
 display: none;
}

/* Bookmarks toolbar drop indicator */

#PlacesToolbarDropIndicatorHolder {
 display: block;
 position: absolute;
}

#PlacesToolbarDropIndicator {
 list-style-image: url(chrome://browser/skin/toolbar-drag-indicator.svg);
 pointer-events: none;
}

#notifications-toolbar {
 min-height: 0;
 flex-direction: column;
}

.bookmark-item[cutting] {
 > .toolbarbutton-icon,
 > .menu-icon {
   opacity: 0.5;
 }

 > .toolbarbutton-text,
 > .menu-text {
   opacity: 0.7;
 }
}

/* 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: AccentColor;
 pointer-events: none;
}

/* Back / Forward buttons context menu */

.unified-nav-current {
 font-weight: var(--font-weight-semibold);
}

.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) {
 --menuitem-icon: 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) {
 --menuitem-icon: url("chrome://browser/skin/forward.svg") !important;
}

/* 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);

 :root[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[lwtheme]: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"]) &,
 #navigator-toolbox:not([tabs-hidden]) #nav-bar > & {
   display: none;
 }

 #navigator-toolbox[tabs-hidden] #nav-bar > & {
   margin-inline-end: 12px;

   /* Hide the private browsing indicator
   label when vertical tabs are enabled */
   > .private-browsing-indicator-label {
     display: none;
   }
 }
}

.private-browsing-indicator-icon {
 list-style-image: url("chrome://global/skin/icons/indicator-private-browsing.svg");
 width: 16px;
 height: 16px;
}

/* Content analysis indicator */
.content-analysis-indicator {
 :root:not([contentanalysisactive]) &,
 #navigator-toolbox:not([tabs-hidden]) > #nav-bar > & {
   display: none;
 }
}

/* Various panels and popup notifications */

#screenshotsPagePanel {
 position: relative;
 max-height: 0;
 z-index: 1; /* Above the web content in this stack. */
}

/* 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: white;

 /* 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;
}

#invalid-form-popup {
 white-space: pre-wrap;
 word-break: break-word;
 unicode-bidi: plaintext;

 > description {
   max-width: 280px;
 }
}

.popup-notification-invalid-input {
 box-shadow: 0 0 1.5px 1px red;

 &[focused] {
   box-shadow: 0 0 2px 2px rgba(255, 0, 0, 0.4);
 }
}

.popup-notification-description[popupid="webauthn-prompt-register-direct"] {
 white-space: pre-line;
}

#sidebar-tools-overflow {
 margin-inline: var(--space-large);
 width: 17.5em;

 #tools-overflow-list {
   display: flex;
   flex-direction: column;
   gap: var(--space-xsmall);
   padding: var(--space-xsmall);
   width: 100%;

   .expanded-button {
     width: 100%;

     &::part(button) {
       font-size: var(--font-size-large);
       font-weight: normal;
       justify-content: flex-start;
       padding-inline: calc((var(--button-size-icon) - var(--icon-size)) / 2 - var(--border-width));
     }

     &::part(moz-button-label) {
       opacity: 1;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
     }
   }
 }
}

/* Contextual Feature Recommendation popup-notification */

#cfr-notification-header {
 width: 100%;
 display: block;
 text-align: center;
 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}

#cfr-notification-header-stack {
 width: 100%;
}

#cfr-notification-header-label {
 margin: 9px;
 font-weight: var(--font-weight-semibold);
}

#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%, 0.2);
   border-radius: var(--border-radius-xsmall);
 }
}

#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: normal;
     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 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: var(--border-radius-xsmall);
     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: var(--border-radius-xsmall);
     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: var(--font-weight-semibold);
     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;
}

/* 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: var(--border-radius-small);
 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-description {
 font-weight: var(--font-weight-semibold);
 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;
 }
}

#tab-notification-deck {
 display: block;
}

/* Relay Integration */

.relay-integration-header {
 display: flex;
 align-items: center;
 font-size: 2em;

 > div:nth-of-type(1) {
   width: 32px;
   height: 32px;
   background-image: url("chrome://browser/content/logos/relay.svg");
   background-repeat: no-repeat;
 }

 > div:nth-of-type(2) {
   direction: ltr;
   margin-inline: 8px;

   > span:first-of-type {
     font-weight: var(--font-weight-bold);
   }

   > span:last-of-type {
     font-weight: normal;
   }
 }
}

.relay-integration-header-variation {
 display: flex;
 align-items: center;
 font-weight: var(--heading-font-weight);
 font-size: 1.5em;
 margin: auto;

 > p {
   margin-block: auto;
 }
}

.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 */

#historySwipeAnimationContainer {
 overflow: hidden;
 pointer-events: none;
}

#historySwipeAnimationPreviousArrow,
#historySwipeAnimationNextArrow {
 --swipe-nav-icon-primary-color: AccentColorText;
 --swipe-nav-icon-accent-color: AccentColor;

 will-change: transform;

 @media not (prefers-contrast) {
   /* TODO: Should this be in browser-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;
 }
}

.swipe-nav-icon:-moz-locale-dir(rtl),
#historySwipeAnimationNextArrow {
 transform: scaleX(-1);
}

.swipe-nav-icon-circle,
.swipe-nav-icon-circle-outline,
.swipe-nav-icon-arrow {
 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.
  */
 .swipe-nav-icon-circle {
   fill: var(--swipe-nav-icon-accent-color);
   stroke: var(--swipe-nav-icon-primary-color);

   .will-navigate > & {
     fill: var(--swipe-nav-icon-primary-color);
   }
 }

 .swipe-nav-icon-circle-outline {
   fill: var(--swipe-nav-icon-primary-color);
   stroke: var(--swipe-nav-icon-primary-color);
   transition: opacity 1s;
   will-change: opacity; /* a workaround for bug 1804189 */
   opacity: 0;

   .will-navigate > & {
     transition-delay: 0.2s;
     opacity: 0.2;
   }
 }

 .swipe-nav-icon-arrow {
   fill: var(--swipe-nav-icon-primary-color);

   .will-navigate > & {
     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);

   .will-navigate > & {
     fill: var(--swipe-nav-icon-accent-color);
   }
 }

 .swipe-nav-icon-circle {
   fill: var(--swipe-nav-icon-accent-color);

   .will-navigate > & {
     fill: var(--swipe-nav-icon-primary-color);
   }
 }
}

/* Picture-in-Picture panel */

#PictureInPicturePanel {
 width: var(--menu-panel-width-wide);
 font: caption;
}

#PictureInPicturePanelBody {
 gap: 8px;
 padding: 8px 16px;
}

#PictureInPicturePanelFooter {
 margin: 8px 16px 16px;
}

/* AI Window Toggle Button */

#ai-window-toggle {
 list-style-image: url("chrome://branding/content/icon32.png");
 padding-inline-end: var(--space-small);
 border-radius: var(--border-radius-medium);

 :root[ai-window] & {
   list-style-image: url("chrome://browser/skin/ai-window.svg");
 }

 > .toolbarbutton-icon {
   padding: 8px;
 }
}

#ai-window-switch-classic,
#ai-window-switch-ai {
 &:hover {
   background-color: var(--button-background-color-ghost-hover);
 }

 .toolbarbutton-icon {
   margin-inline-end: var(--space-small);
   width: var(--icon-size-medium);
   height: var(--icon-size-medium);
 }

 &::after {
   content: url("chrome://global/skin/icons/check.svg");
   -moz-context-properties: fill;
   fill: currentColor;
   width: 16px;
   height: 16px;
 }
}

#ai-window-switch-classic {
 list-style-image: url("chrome://branding/content/icon32.png");

 :root[ai-window] &::after {
   display: none;
 }
}

#ai-window-switch-ai {
 list-style-image: url("chrome://browser/skin/ai-window.svg");

 :root:not([ai-window]) &::after {
   display: none;
 }
}

/* Bookmarks roots menu-items */

#BMB_bookmarksToolbar,
#bookmarksToolbarFolderMenu {
 --menuitem-icon: url("chrome://browser/skin/places/bookmarksToolbar.svg");
}