Merge mozilla-central to autoland. a=merge CLOSED TREE

[gecko.git] / browser / base / content / browser.css

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

@namespace html url("http://www.w3.org/1999/xhtml");

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

:root {
  text-rendering: optimizeLegibility;
  min-height: 95px;
  min-width: 95px;

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

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

:root:not([chromehidden~="toolbar"]) {
  min-width: 450px;
  min-height: 120px;
}

#appcontent,
#browser,
#tabbrowser-tabbox,
#tabbrowser-tabpanels,
.browserSidebarContainer {
  /* Allow devtools with large specified width/height to shrink */
  min-width: 0;
  min-height: 0;
}

/* We set large flex on both containers to allow the devtools toolbox to
 * set a flex value itself. We don't want the toolbox to actually take up free
 * space, but we do want it to collapse when the window shrinks, and with
 * flex: 0 it can't.
 *
 * When the toolbox is on the bottom it's a sibling of browserStack, and when
 * it's on the side it's a sibling of browserContainer.
 */
.browserContainer {
  flex: 10000 10000;
  /* To contain the status panel */
  position: relative;

  /* .browserContainer only contains the devtools when docked horizontally */
  min-height: 0;
}

.browserStack {
  flex: 10000 10000;
  /* Prevent shrinking the page content to 0 height and width */
  min-height: 25px;
  min-width: 25px;
}

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

#titlebar {
  -moz-window-dragging: drag;
}

#toolbar-menubar[autohide="true"] {
  overflow: hidden;
}

#toolbar-menubar[autohide="true"][inactive="true"]:not([customizing="true"]) {
  min-height: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  appearance: none !important;
}

#toolbar-menubar:not([autohide]) {
  visibility: collapse;
}

panelmultiview {
  align-items: flex-start;
  min-width: 0;
  min-height: 0;
}

panelmultiview[transitioning] {
  pointer-events: none;
}

panelview {
  flex-direction: column;
}

panelview:not([visible]) {
  visibility: collapse;
}

.panel-viewcontainer {
  overflow: hidden;
  flex-shrink: 0;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
}

.panel-viewcontainer[panelopen] {
  transition-property: height;
  transition-timing-function: var(--animation-easing-function);
  transition-duration: var(--panelui-subview-transition-duration);
  will-change: height;
}

.panel-viewcontainer.offscreen {
  display: block;
}

.panel-viewstack {
  overflow: visible;
  transition: height var(--panelui-subview-transition-duration);
}

/* stylelint-disable-next-line media-query-no-invalid */
@media not (-moz-bool-pref: "browser.tabs.tabmanager.enabled") {
  #tabbrowser-tabs:not([overflow], [hashiddentabs]) ~ #alltabs-button {
    display: none;
  }
  #tabbrowser-tabs:not([overflow])[using-closing-tabs-spacer] ~ #alltabs-button {
    /* temporary space to keep a tab's close button under the cursor */
    display: flex;
    visibility: hidden;
  }
}

#tabbrowser-tabs[hasadjacentnewtabbutton]:not([overflow]) ~ #new-tab-button,
#tabbrowser-tabs[overflow] > #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button,
#tabbrowser-tabs:not([hasadjacentnewtabbutton]) > #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button,
#TabsToolbar[customizing="true"] #tabs-newtab-button {
  display: none;
}

.tabbrowser-tab:not([pinned]) {
  flex: 100 100;
  max-width: 225px;
  min-width: var(--tab-min-width);
  transition: min-width 100ms ease-out,
              max-width 100ms ease-out;
}

:root[uidensity=touch] .tabbrowser-tab:not([pinned]) {
  /* Touch mode needs additional space for the close button. */
  min-width: calc(var(--tab-min-width) + 10px);
}

.tabbrowser-tab:not([pinned], [fadein]) {
  max-width: 0.1px;
  min-width: 0.1px;
  visibility: hidden;
}

.tab-icon-pending:not([fadein]),
.tab-icon-image:not([fadein]),
.tab-close-button:not([fadein]),
.tabbrowser-tab:not([fadein])::after,
.tab-background:not([fadein]) {
  visibility: hidden;
}

.tab-label:not([fadein]),
.tab-throbber:not([fadein]) {
  display: none;
}

#tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] {
  position: absolute !important;
  display: block;
}

#tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[selected],
#tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[multiselected] {
  position: relative;
  z-index: 2;
  pointer-events: none; /* avoid blocking dragover events on scroll buttons */
}

@media (prefers-reduced-motion: no-preference) {
  #tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[fadein]:not([selected]):not([multiselected]),
  .tabbrowser-tab[tab-grouping],
  .tabbrowser-tab[tabdrop-samewindow] {
    transition: transform 200ms var(--animation-easing-function);
  }
}

.tabbrowser-tab[tab-grouping][multiselected]:not([selected]) {
  z-index: 2;
}

/* Make it easier to drag tabs by expanding the drag area downwards. */
#tabbrowser-tabs[movingtab] {
  padding-bottom: 15px;
  margin-bottom: -15px;
}

#navigator-toolbox[movingtab] > #nav-bar {
  pointer-events: none;
}

#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;
}

/* Allow dropping a tab on buttons with associated drop actions. */
#navigator-toolbox[movingtab] > #nav-bar > #nav-bar-customization-target > #personal-bookmarks,
#navigator-toolbox[movingtab] > #nav-bar > #nav-bar-customization-target > #home-button,
#navigator-toolbox[movingtab] > #nav-bar > #nav-bar-customization-target > #downloads-button,
#navigator-toolbox[movingtab] > #nav-bar > #nav-bar-customization-target > #bookmarks-menu-button {
  pointer-events: auto;
}

/* The address bar needs to be able to render outside of the toolbar, but as
 * long as it's within the toolbar's bounds we can clip the toolbar so that the
 * rendering pipeline doesn't reserve an enormous texture for it. */
#nav-bar:not([urlbar-exceeds-toolbar-bounds]),
/* When customizing, overflowable toolbars move automatically moved items back
 * from the overflow menu, but we still don't want to render them outside of
 * the customization target. */
toolbar[overflowable][customizing] > .customization-target {
  overflow: clip;
}

toolbar:not([overflowing]) > .overflow-button,
toolbar[customizing] > .overflow-button {
  display: none;
}

toolbar[customizing] #ion-button,
toolbar[customizing] #whats-new-menu-button {
  display: none;
}

:root:not([chromehidden~="toolbar"]) #nav-bar[nonemptyoverflow] > .overflow-button,
#nav-bar[customizing] > .overflow-button {
  display: flex;
}

/* The ids are ugly, but this should be reasonably performant, and
 * using a tagname as the last item would be less so.
 */
#widget-overflow-list:empty + #widget-overflow-fixed-separator,
#widget-overflow:not([hasfixeditems]) #widget-overflow-fixed-separator {
  display: none;
}

/* Hide the TabsToolbar 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[autohide="false"] + #TabsToolbar > :is(.titlebar-buttonbox-container, .titlebar-spacer) {
  display: none;
}

:root:not([chromemargin], [inFullscreen]) .titlebar-buttonbox-container,
:root[inFullscreen] .titlebar-spacer,
:root:not([tabsintitlebar]) .titlebar-spacer {
  display: none;
}

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

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

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

#toolbar-menubar[autohide="true"]:not([inactive]) + #TabsToolbar > .titlebar-buttonbox-container {
  visibility: hidden;
}

:root[tabsintitlebar] .titlebar-buttonbox {
  position: relative;
}

:root:not([tabsintitlebar], [sizemode=fullscreen]) .titlebar-buttonbox {
  display: none;
}

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

#personal-toolbar-empty-description {
  -moz-window-dragging: no-drag;
}

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

toolbarpaletteitem {
  -moz-window-dragging: no-drag;
  justify-content: flex-start;
}

.titlebar-buttonbox-container {
  order: 1000;
}

@media (-moz-platform: macos) {
  @media not (-moz-mac-rtl) {
    .titlebar-buttonbox-container:-moz-locale-dir(ltr) {
      order: -1;
    }
  }

  @media (-moz-mac-rtl) {
    .titlebar-buttonbox-container:-moz-locale-dir(rtl) {
      order: -1;
    }
  }
}

:root[inDOMFullscreen] #navigator-toolbox,
:root[inDOMFullscreen] #fullscr-toggler,
:root[inDOMFullscreen] #sidebar-box,
:root[inDOMFullscreen] #sidebar-splitter,
:root[inFullscreen]:not([macOSNativeFullscreen]) toolbar:not([fullscreentoolbar=true]),
:root[inFullscreen] .global-notificationbox {
  visibility: collapse;
}

#navigator-toolbox[fullscreenShouldAnimate] {
  transition: 0.8s margin-top ease-out;
}

/* Rules to help integrate WebExtension buttons */

.webextension-browser-action > .toolbarbutton-badge-stack > .toolbarbutton-icon {
  height: 16px;
  width: 16px;
}

.webextension-browser-action {
  list-style-image: var(--webextension-toolbar-image, inherit);

  toolbar[brighttext] & {
    list-style-image: var(--webextension-toolbar-image-light, inherit);
  }
  :root[lwtheme] toolbar:not([brighttext]) & {
    list-style-image: var(--webextension-toolbar-image-dark, inherit);
  }
  toolbaritem:is([overflowedItem="true"], [cui-areatype="panel"]) > & {
    list-style-image: var(--webextension-menupanel-image, inherit);
    /* TODO: This feels a bit odd, why do we have three images? It feels we
     * should probably have only two (light/dark), and choose based on
     * prefers-color-scheme + lwt-popup */
    :root[lwt-popup="dark"] & {
      list-style-image: var(--webextension-menupanel-image-light, inherit);
    }
    :root[lwt-popup="light"] & {
      list-style-image: var(--webextension-menupanel-image-dark, inherit);
    }
  }
}

.webextension-menuitem {
  list-style-image: var(--webextension-menuitem-image, inherit) !important;
}

toolbarpaletteitem[removable="false"] {
  opacity: 0.5;
}

@media not (-moz-platform: macos) {
  toolbarpaletteitem:is([place="palette"], [place="panel"], [place="toolbar"]) {
    -moz-user-focus: normal;
  }
}

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

toolbarpaletteitem[place="toolbar"] > #personal-bookmarks > #bookmarks-toolbar-placeholder,
toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-button,
#personal-bookmarks:is([overflowedItem=true], [cui-areatype="panel"]) > #bookmarks-toolbar-button {
  display: flex;
}

#personal-bookmarks {
  position: relative;
}

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

#allTabsMenu-dropIndicatorHolder {
  display: block;
  position: relative;
}

#allTabsMenu-dropIndicator {
  background: url(chrome://browser/skin/tabbrowser/tab-drag-indicator.svg) no-repeat center;
  display: block;
  position: absolute;
  transform: rotate(-90deg);
  width: 12px;
  height: 29px;
  inset-inline-start: 8px;
  top: 0;
  pointer-events: none;
}

#allTabsMenu-dropIndicator:-moz-locale-dir(rtl) {
  transform: rotate(90deg);
}

#nav-bar-customization-target > #personal-bookmarks,
toolbar:not(#TabsToolbar) > #wrapper-personal-bookmarks,
toolbar:not(#TabsToolbar) > #personal-bookmarks {
  flex: 1 auto;
}

#reload-button:not([displaystop]) + #stop-button,
#reload-button[displaystop] {
  display: none;
}

/* The reload-button is only disabled temporarily when it becomes visible
   to prevent users from accidentally clicking it. We don't however need
   to show this disabled state, as the flicker that it generates is short
   enough to be visible but not long enough to explain anything to users. */
#reload-button[disabled]:not(:-moz-window-inactive) > .toolbarbutton-icon {
  opacity: 1 !important;
}

/* Ensure stop-button and reload-button are displayed correctly when in the overflow menu */
.widget-overflow-list > #stop-reload-button > .toolbarbutton-1 {
  flex: 1;
}

@media (-moz-platform: macos) {
  :root[inFullscreen="true"] {
    padding-top: 0; /* override drawintitlebar="true" */
  }
}

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

/* ::::: location bar & search bar ::::: */

#urlbar,
#searchbar {
  /* Setting a min-width to let the location & search bars maintain a constant
   * width in case they haven't been resized manually. (bug 965772) */
  min-width: 1px;
}

/* Align URLs to the right in RTL mode. */
#urlbar-input:-moz-locale-dir(rtl) {
  text-align: right !important;
}

/* Make sure that the location bar's alignment changes according
   to the input box direction if the user switches the text direction using
   cmd_switchTextDirection (which applies a dir attribute to the <input>). */
#urlbar-input[dir=ltr]:-moz-locale-dir(rtl) {
  text-align: left !important;
}

#urlbar-input[dir=rtl]:-moz-locale-dir(ltr) {
  text-align: right !important;
}

/*
 * Display visual cue that browser is under remote control.
 * This is to help users visually distinguish a user agent session that
 * is under remote control from those used for normal browsing sessions.
 *
 * Attribute is controlled by browser.js:/gRemoteControl.
 */
:root[remotecontrol] #remote-control-box {
  visibility: visible;
  padding-inline: var(--urlbar-icon-padding);
}

:root[remotecontrol] #remote-control-icon {
  list-style-image: url(chrome://browser/content/static-robot.png);
  width: 16px;
  height: 16px;
}

:root[remotecontrol] #urlbar-background {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 60, 60, 0.25) 0 25px,
    rgba(175, 0, 0, 0.25) 25px 50px
  );

  background-attachment: fixed;
  /* Override the usual breakout animation so the gradient doesn't shift around
     when the panel opens. */
  animation: none !important;
}

/* Show the url scheme in a static box when overflowing to the left */
.urlbar-input-box {
  position: relative;
  direction: ltr;
}

#urlbar-scheme {
  position: absolute;
  height: 100%;
  visibility: hidden;
  direction: ltr;
  pointer-events: none;
}

#urlbar-input {
  mask-repeat: no-repeat;
  unicode-bidi: plaintext;
  text-align: match-parent;
}

#urlbar:not([focused])[domaindir="ltr"]> #urlbar-input-container > .urlbar-input-box > #urlbar-input {
  direction: ltr;
  unicode-bidi: embed;
}

/* The following rules apply overflow masks to the unfocused urlbar
   This mask may be overriden when a Contextual Feature Recommendation is shown,
   see browser/themes/shared/urlbar-searchbar.inc.css for details */

#urlbar:not([focused])[textoverflow="both"] > #urlbar-input-container > .urlbar-input-box > #urlbar-input {
  mask-image: linear-gradient(to right, transparent, black 3ch, black calc(100% - 3ch), transparent);
}
#urlbar:not([focused])[textoverflow="right"] > #urlbar-input-container > .urlbar-input-box > #urlbar-input {
  mask-image: linear-gradient(to left, transparent, black 3ch);
}
#urlbar:not([focused])[textoverflow="left"] > #urlbar-input-container > .urlbar-input-box > #urlbar-input {
  mask-image: linear-gradient(to right, transparent, black 3ch);
}

/* The protocol is visible if there is an RTL domain and we overflow to the left.
   Uses the required-valid trick to check if it contains a value */
#urlbar:not([focused])[textoverflow="left"][domaindir="rtl"] > #urlbar-input-container > .urlbar-input-box > #urlbar-scheme:valid {
  visibility: visible;
}
#urlbar:not([focused])[textoverflow="left"][domaindir="rtl"] > #urlbar-input-container > .urlbar-input-box > #urlbar-input {
  mask-image: linear-gradient(to right, transparent var(--urlbar-scheme-size), black calc(var(--urlbar-scheme-size) + 3ch));
}

/* Apply crisp rendering for favicons at exactly 2dppx resolution */
@media (resolution: 2dppx) {
  .searchbar-engine-image {
    image-rendering: -moz-crisp-edges;
  }
}

#urlbar[actiontype="switchtab"][action-override] > #urlbar-input-container > #urlbar-label-box,
#urlbar:not([actiontype="switchtab"], [actiontype="extension"], [searchmode]) > #urlbar-input-container > #urlbar-label-box,
#urlbar:not([actiontype="switchtab"]) > #urlbar-input-container > #urlbar-label-box > #urlbar-label-switchtab,
#urlbar:not([actiontype="extension"]) > #urlbar-input-container > #urlbar-label-box > #urlbar-label-extension,
#urlbar[searchmode][breakout-extend] > #urlbar-input-container > #urlbar-label-box,
#urlbar:not([searchmode]) > #urlbar-input-container > #urlbar-label-box > #urlbar-label-search-mode,
#urlbar[breakout-extend] > #urlbar-input-container > #urlbar-label-box > #urlbar-label-search-mode {
  display: none;
}

#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginsFooter"] {
  justify-content: center;
  color: FieldText;
  min-height: 2.6666em;
  border-top: 1px solid rgba(38,38,38,.15);
  background-color: hsla(0,0%,80%,.35); /* match arrowpanel-dimmed */;
}

#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginsFooter"]:hover,
#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginsFooter"][selected] {
  background-color: hsla(0,0%,80%,.5); /* match arrowpanel-dimmed-further */
}

/* Define the minimum width based on the style of result rows.
   The order of the min-width rules below must be in increasing order. */
#PopupAutoComplete:is([resultstyles~="loginsFooter"], [resultstyles~="insecureWarning"])::part(content) {
  min-width: 17em;
}

#PopupAutoComplete:is([resultstyles~="importableLogins"], [resultstyles~="generatedPassword"])::part(content) {
  min-width: 22em;
}

#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] {
  height: auto;
}

#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginWithOrigin"] > .ac-site-icon,
#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-site-icon {
  margin-inline-start: 0;
  display: initial;
}

#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-title > .ac-text-overflow-container > .ac-title-text {
  text-overflow: initial;
  white-space: initial;
}

#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-title > label {
  margin-inline-start: 0;
}

#urlbar-input-container[pageproxystate=invalid] > #page-action-buttons > .urlbar-page-action,
#identity-box.chromeUI ~ #page-action-buttons > .urlbar-page-action:not(#star-button-box),
#urlbar[usertyping] > #urlbar-input-container > #page-action-buttons > #urlbar-zoom-button,
#urlbar:not([usertyping]) > #urlbar-input-container > #urlbar-go-button,
#urlbar:not([focused]) > #urlbar-input-container > #urlbar-go-button {
  display: none;
}

#nav-bar:not([keyNav=true]) #identity-box,
#nav-bar:not([keyNav=true]) #tracking-protection-icon-container {
  -moz-user-focus: normal;
}

/* We leave 310px plus whatever space the download and unified extensions
 * buttons will need when they *both* appear. Normally, for each button, this
 * should be 16px for the icon, plus 2 * 2px padding plus the
 * toolbarbutton-inner-padding. We're adding 4px to ensure things like rounding
 * on hidpi don't accidentally result in the buttons going into overflow.
 */
#urlbar-container {
  width: calc(310px + 2 * (24px + 2 * var(--toolbarbutton-inner-padding)));
}

/* When the download button OR the unified extensions button is shown, we leave
 * 310px plus the space needed for a single button as described above. */
#nav-bar:is([downloadsbuttonshown], [unifiedextensionsbuttonshown]) #urlbar-container {
  width: calc(310px + 24px + 2 * var(--toolbarbutton-inner-padding));
}

/* When both the download and unified extensions buttons are visible, we use
 * the base min-width value. */
#nav-bar[downloadsbuttonshown][unifiedextensionsbuttonshown] #urlbar-container {
  width: 310px;
}

/* Customize mode is difficult to use at moderate window width if the Urlbar
   remains 310px wide. */
:root[customizing] #urlbar-container {
  width: 280px;
}

#identity-icon-box {
  max-width: calc(30px + 13em);
}

@media (max-width: 770px) {
  #urlbar-container {
    width: calc(240px + 2 * (24px + 2 * var(--toolbarbutton-inner-padding)));
  }
  #nav-bar:is([downloadsbuttonshown], [unifiedextensionsbuttonshown]) #urlbar-container {
    width: calc(240px + 24px + 2 * var(--toolbarbutton-inner-padding));
  }
  #nav-bar[downloadsbuttonshown][unifiedextensionsbuttonshown] #urlbar-container {
    width: 240px;
  }
  :root[customizing] #urlbar-container {
    width: 245px;
  }
  #identity-icon-box {
    max-width: 80px;
  }
  /* Contenxtual identity labels are user-customizable and can be very long,
     so we only show the colored icon when the window gets small. */
  #userContext-label {
    display: none;
  }
}

/* The page actions menu is hidden by default, it is only shown in small
   windows as the overflow target of multiple page action buttons */
#pageActionButton {
  visibility: collapse;
}

/* 680px is just below half of popular 1366px wide screens, so when putting two
   browser windows next to each other on such a screen, they'll be above this
   threshold. */
@media (max-width: 680px) {
  /* Page action buttons are duplicated in the page action menu so we can
     safely hide them in small windows. */
  #pageActionSeparator,
  #pageActionButton[multiple-children] ~ .urlbar-page-action {
    display: none;
  }
  #pageActionButton[multiple-children] {
    visibility: visible;
  }
}
@media (max-width: 550px) {
  #urlbar-container {
    width: calc(176px + 2 * (24px + 2 * var(--toolbarbutton-inner-padding)));
  }
  #nav-bar[downloadsbuttonshown] #urlbar-container,
  #nav-bar[unifiedextensionsbuttonshown] #urlbar-container {
    width: calc(176px + 24px + 2 * var(--toolbarbutton-inner-padding));
  }
  #nav-bar[downloadsbuttonshown][unifiedextensionsbuttonshown] #urlbar-container {
    width: 176px;
  }
  #identity-icon-box {
    max-width: 70px;
  }
  #urlbar-zoom-button {
    display: none;
  }
}

/* Flexible spacer sizing (gets overridden in the navbar) */
toolbarpaletteitem[place=toolbar][id^=wrapper-customizableui-special-spring],
toolbarspring {
  flex: 1;
  min-width: 28px;
  max-width: 112px;
}

#nav-bar toolbarpaletteitem[id^=wrapper-customizableui-special-spring],
#nav-bar toolbarspring {
  flex: 80 80;
  /* We shrink the flexible spacers, but not to nothing so they can be
   * manipulated in customize mode; the next rule shrinks them further
   * outside customize mode. */
  min-width: 10px;
}

#nav-bar:not([customizing]) toolbarspring {
  min-width: 1px;
}

#widget-overflow-list > toolbarspring {
  display: none;
}

/* ::::: Unified Back-/Forward Button ::::: */
.unified-nav-current {
  font-weight: bold;
}

.bookmark-item > label {
  /* ensure we use the direction of the bookmarks label instead of the
   * browser locale */
  unicode-bidi: plaintext;
  /* Preserve whitespace in bookmark names */
  white-space: pre;
}

/* Apply crisp rendering for favicons at exactly 2dppx resolution */
@media (resolution: 2dppx) {
  .menuitem-with-favicon > .menu-iconic-left > .menu-iconic-icon {
    image-rendering: -moz-crisp-edges;
  }

  .bookmark-item > .toolbarbutton-icon,
  .bookmark-item > .menu-iconic-left > .menu-iconic-icon {
    image-rendering: -moz-crisp-edges;
  }
}

menupopup[emptyplacesresult="true"] > .hide-if-empty-places-result {
  display: none;
}

/* Hide extension toolbars that neglected to set the proper class */
:root[chromehidden~="location"][chromehidden~="toolbar"] toolbar:not(.chromeclass-menubar) {
  display: none;
}

#navigator-toolbox ,
#mainPopupSet {
  min-width: 1px;
}

/* History Swipe Animation */

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

/*  Full Screen UI */

#fullscr-toggler {
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  position: fixed;
  z-index: 2147483647;
}

#fullscreen-and-pointerlock-wrapper {
  position: fixed;
  z-index: 2147483647 !important;
  width: 100%;
  height: 100%;
  top: 0;
  pointer-events: none;
}

.pointerlockfswarning {
  position: fixed;
  visibility: visible;
  transition: transform 300ms ease-in;
  /* To center the warning box horizontally,
     we use left: 50% with translateX(-50%). */
  top: 0; left: 50%;
  transform: translate(-50%, -100%);
  box-sizing: border-box;
  width: max-content;
  max-width: 95%;
  pointer-events: none;
}
.pointerlockfswarning:not([hidden]) {
  display: flex;
  will-change: transform;
}
.pointerlockfswarning[onscreen] {
  transform: translate(-50%, 50px);
}
.pointerlockfswarning[ontop] {
  /* Use -10px to hide the border and border-radius on the top */
  transform: translate(-50%, -10px);
}
:root[macOSNativeFullscreen] .pointerlockfswarning[ontop] {
  transform: translate(-50%, 80px);
}

.pointerlockfswarning-domain-text,
.pointerlockfswarning-generic-text {
  word-wrap: break-word;
  /* We must specify a min-width, otherwise word-wrap:break-word doesn't work. Bug 630864. */
  min-width: 1px
}
.pointerlockfswarning-domain-text:not([hidden]) + .pointerlockfswarning-generic-text {
  display: none;
}

#fullscreen-exit-button {
  pointer-events: auto;
}

/* notification anchors should only be visible when their associated
   notifications are */
#nav-bar:not([keyNav=true]) .notification-anchor-icon {
  -moz-user-focus: normal;
}

#blocked-permissions-container > .blocked-permission-icon:not([showing]),
.notification-anchor-icon:not([showing]) {
  display: none;
}

#invalid-form-popup > description {
  max-width: 280px;
}

.popup-anchor {
  /* should occupy space but not be visible */
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

browser[tabDialogShowing] {
  -moz-user-focus: none !important;
}

/*** Visibility of downloads indicator controls ***/

/* Hide the default icon, show the anchor instead. */
#downloads-button > .toolbarbutton-badge-stack > image.toolbarbutton-icon {
  display: none;
}

toolbarpaletteitem[place="palette"] > #downloads-button > .toolbarbutton-badge-stack > image.toolbarbutton-icon {
  display: flex;
}

toolbarpaletteitem[place="palette"] > #downloads-button > .toolbarbutton-badge-stack > #downloads-indicator-anchor {
  display: none;
}

/* Apply crisp rendering for favicons at exactly 2dppx resolution */
@media (resolution: 2dppx) {
  .PanelUI-remotetabs-clientcontainer > toolbarbutton > .toolbarbutton-icon,
  #PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
  #PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
  #PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
    image-rendering: -moz-crisp-edges;
  }
}

#customization-container {
  flex-direction: row;
  flex-direction: column;
  min-height: 0;
}

#customization-container:not([hidden]) {
  /* In a separate rule to avoid 'display:flex' causing the node to be
   * displayed while the container is still hidden. */
  display: flex;
}

#customization-content-container {
  display: flex;
  flex: 1; /* Grow so there isn't empty space below the footer */
  min-height: 0; /* Allow this to shrink so the footer doesn't get pushed out. */
}

#customization-panelHolder {
  padding-top: 10px;
  padding-bottom: 10px;
}

#customization-panelHolder > #widget-overflow-fixed-list {
  flex: 1; /* Grow within the available space, and allow ourselves to shrink */
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}

#customization-panelWrapper,
#customization-panelWrapper > .panel-arrowcontent,
#customization-panelHolder {
  flex-direction: column;
  display: flex;
  flex-shrink: 1;
  min-height: calc(174px + 9em);
}

#customization-panelWrapper {
  flex: 1;
  align-items: end; /* align to the end on the cross-axis (affects arrow) */
}

#customization-panel-container {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  flex: none;
}

toolbarpaletteitem[dragover] {
  border-inline-color: transparent;
}

#customization-palette-container {
  display: flex;
  flex-direction: column;
  flex: 1;
}

#customization-palette:not([hidden]) {
  display: block;
  flex: 1 1 auto;
  overflow: auto;
  min-height: 3em;
}

#customization-footer-spacer,
#customization-spacer {
  flex: 1 1 auto;
}

#customization-footer {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  flex-wrap: wrap;
}

toolbarpaletteitem[place="palette"] {
  flex-direction: column;
  width: 7em;
  max-width: 7em;
  /* icon (16) + margin (9 + 12) + 3 lines of text: */
  height: calc(39px + 3em);
  margin-bottom: 5px;
  margin-inline-end: 24px;
  overflow: visible;
  display: inline-flex;
  vertical-align: top;
}

toolbarpaletteitem[place="palette"][hidden] {
  display: none;
}

toolbarpaletteitem > toolbarbutton,
toolbarpaletteitem > toolbaritem {
  /* Prevent children from getting events */
  pointer-events: none;
  justify-content: center;
}

toolbarpaletteitem:not([place="palette"]) > #stop-reload-button {
  justify-content: inherit;
}

:root[customizing=true] .addon-banner-item,
:root[customizing=true] .panel-banner-item {
  display: none;
}

/* Firefox View */
:root[firefoxviewhidden] #wrapper-firefox-view-button,
:root[firefoxviewhidden] #firefox-view-button {
  display: none;
}

/* UI Tour */

@keyframes uitour-wobble {
  from {
    transform: rotate(0deg) translateX(3px) rotate(0deg);
  }
  50% {
    transform: rotate(360deg) translateX(3px) rotate(-360deg);
  }
  to {
    transform: rotate(720deg) translateX(0px) rotate(-720deg);
  }
}

@keyframes uitour-zoom {
  from {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.0);
  }
  to {
    transform: scale(0.8);
  }
}

@keyframes uitour-color {
  from {
    border-color: #5B9CD9;
  }
  50% {
    border-color: #FF0000;
  }
  to {
    border-color: #5B9CD9;
  }
}

#UITourHighlightContainer,
#UITourHighlight {
  pointer-events: none;
}

#UITourHighlight[active] {
  animation-delay: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

#UITourHighlight[active="wobble"] {
  animation-name: uitour-wobble;
  animation-delay: 0s;
  animation-duration: 1.5s;
  animation-iteration-count: 1;
}
#UITourHighlight[active="zoom"] {
  animation-name: uitour-zoom;
  animation-duration: 1s;
}
#UITourHighlight[active="color"] {
  animation-name: uitour-color;
  animation-duration: 2s;
}

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

.popup-notification-invalid-input[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;
}

.dragfeedback-tab {
  appearance: none;
  opacity: 0.65;
  -moz-window-shadow: none;
}

/* Page action buttons */
.pageAction-panel-button > .toolbarbutton-icon,
.urlbar-page-action {
  list-style-image: var(--pageAction-image, inherit);
}

/* Print pending */
.printSettingsBrowser {
  width: 250px !important;
}

.previewStack {
  background-color: #f9f9fa;
  color: #0c0c0d;
}

.previewRendering {
  background-repeat: no-repeat;
  background-size: 60px 60px;
  background-position: center center;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
}

.printPreviewBrowser {
  visibility: collapse;
  opacity: 1;
}

.previewStack[rendering=true] > .previewRendering,
.previewStack[previewtype="source"] > .printPreviewBrowser[previewtype="source"],
.previewStack[previewtype="selection"] > .printPreviewBrowser[previewtype="selection"],
.previewStack[previewtype="simplified"] > .printPreviewBrowser[previewtype="simplified"] {
  visibility: inherit;
}

.previewStack[rendering=true] > .printPreviewBrowser {
  opacity: 0;
}

.print-pending-label {
  margin-top: 110px;
  font-size: large;
}

printpreview-pagination {
  opacity: 0;
}
printpreview-pagination:focus-within,
.previewStack:hover printpreview-pagination {
  opacity: 1;
}
.previewStack[rendering=true] printpreview-pagination {
  opacity: 0;
}

@media (prefers-color-scheme: dark) {
  .previewStack {
    background-color: #2A2A2E;
    color: rgb(249, 249, 250);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .previewRendering {
    background-image: url("chrome://browser/skin/tabbrowser/pendingpaint.png");
  }

  .printPreviewBrowser {
    transition: opacity 60ms;
  }

  .previewStack[rendering=true] > .printPreviewBrowser {
    transition: opacity 1ms 250ms;
  }

  printpreview-pagination {
    transition: opacity 100ms 500ms;
  }

  printpreview-pagination:focus-within,
  .previewStack:hover printpreview-pagination {
    transition: opacity 100ms;
  }
}

/* Screenshots */
#screenshotsPagePanel {
  position: relative;
  max-height: 0;
}


#sidebar-box {
  min-width: 14em;
  max-width: 36em;
  width: 18em;
}

/* WebExtension Sidebars */
#sidebar-box[sidebarcommand$="-sidebar-action"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
  list-style-image: var(--webextension-menuitem-image, inherit);
  -moz-context-properties: fill;
  fill: currentColor;
  width: 16px;
  height: 16px;
}

toolbar[keyNav=true]:not([collapsed=true], [customizing=true]) toolbartabstop {
  -moz-user-focus: normal;
}

/**
 * Dialogs
 */

.dialogStack {
  z-index: var(--browser-stack-z-index-dialog-stack);
  position: absolute;
  inset: 0;
}

.dialogStack.temporarilyHidden {
  /* For some printing use cases we need to visually hide the dialog before
   * actually closing it / make it disappear from the frame tree. */
  visibility: hidden;
}

.dialogOverlay {
  align-items: center;
  visibility: hidden;
}

.dialogOverlay[topmost="true"] {
  z-index: 1;
}

.dialogBox {
  background-clip: content-box;
  display: flex;
  margin: 0 3vw;
  padding: 0;
  overflow-x: auto;
}

.dialogBox:not(.spotlightBox) {
  box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

/*
 * In High Contrast Mode, this prevents a dialog from visually bleeding into
 * the window behind it, which looks jarring.
 */
@media (prefers-contrast) {
.dialogBox {
  outline: 1px solid WindowText;
}
}

.dialogBox[resizable="true"] {
  resize: both;
  overflow: hidden;
  min-height: 20em;
}

.dialogBox[sizeto="available"] {
  --box-top-px: 0px; /* Overridden using inline style */
  --box-inline-margin: 4px;
  --box-block-margin: 4px;
  --box-ideal-width: 1000;
  --box-ideal-height: 650;
  --box-max-width-margin: calc(100vw - 2 * var(--box-inline-margin));
  --box-max-height-margin: calc(100vh - var(--box-top-px) - var(--box-block-margin));
  --box-max-width-ratio: 70vw;
  --box-max-height-ratio: calc(var(--box-ideal-height) / var(--box-ideal-width) * var(--box-max-width-ratio));
  --box-max-height-requested: 100vh;
  --box-max-width-requested: 100vw;
  --box-max-height-remaining: calc(100vh - var(--box-top-px));
  width: 100vw;
  height: 100vh;
  margin: 0;
}

.dialogBox:not(.spotlightBox)[sizeto="available"] {
  max-width: min(max(var(--box-ideal-width) * 1px, var(--box-max-width-ratio)), var(--box-max-width-margin), var(--box-max-width-requested));
  max-height: min(max(var(--box-ideal-height) * 1px, var(--box-max-height-ratio)), var(--box-max-height-margin), var(--box-max-height-requested), var(--box-max-height-remaining));
}

@media (min-width: 550px) {
  .dialogBox[sizeto="available"] {
    --box-inline-margin: min(calc(4px + (100vw - 550px) / 4), 16px);
  }
}

@media (min-width: 800px) {
  .dialogBox[sizeto="available"] {
    --box-inline-margin: min(calc(16px + (100vw - 800px) / 4), 32px);
  }
}

@media (min-height: 350px) {
  .dialogBox[sizeto="available"] {
    --box-block-margin: min(calc(4px + (100vh - 350px) / 4), 16px);
  }
}

@media (min-height: 550px) {
  .dialogBox[sizeto="available"] {
    --box-block-margin: min(calc(16px + (100vh - 550px) / 4), 32px);
  }
}

.dialogStack .dialogBox.spotlightBox[sizeto="available"] {
  /* Tab modal: subtract the navigator toolbox height from the dialog height. */
  height: calc(100vh - var(--box-top-px));
}

.content-prompt-dialog > .dialogOverlay {
  display: grid;
  align-items: unset;
  place-content: center;
  /* 90% for 5% top/bottom margins, the document height so that
   * smaller dialogs don't become too big. */
  grid-auto-rows: min(90%, var(--doc-height-px));
}

:not(.content-prompt-dialog) > .dialogOverlay > .dialogBox:not(.spotlightBox) {
  /* Make dialogs overlap with upper chrome UI. Not necessary for Spotlight
  dialogs that are intended to be centered above the window or content area. */
  margin-top: -5px;
}

/* For window-modal dialogs, we allow overlapping the urlbar if the window is
 * small enough. */
#window-modal-dialog > .dialogOverlay > .dialogBox:not(.spotlightBox) {
  /* Do not go below 3px (as otherwise the top of the dialog would be
   * adjacent to or clipped by the top of the window), or above the window
   * size. */
  margin-top: clamp(
    3px,
    var(--chrome-offset, 20px) - 5px,
    calc(100vh - var(--subdialog-inner-height) - 5px)
  );
}

#window-modal-dialog {
  overflow: visible;
  padding: 0;
  /* Override default <html:dialog> styles */
  border-width: 0;
  background-color: transparent;
  /* This makes the dialog top-aligned by default (the dialog box will move via
   * margin-top above) */
  bottom: auto;
  /* When showModal() is called on a <dialog>, the <dialog> itself will be
   * focused when there's no content, hence the focus ring. However, this
   * focus ring is not needed because we always setup the content of the dialog
   * after its opened and manually focus an element within it.
   */
  outline: none;
}

#window-modal-dialog.spotlight {
  /* Spotlight window modal dialogs should be equal in size to the window. */
  bottom: revert;
  max-height: 100%;
  max-width: 100%;
}

.dialogFrame {
  margin: 0;
  flex: 1;
  /* Default dialog dimensions */
  width: 34em;
}

.dialogOverlay[topmost="true"],
#window-modal-dialog::backdrop {
  background-color: rgba(28, 27, 34, 0.45);
}

.dialogOverlay[hideContent="true"][topmost="true"] {
  background-color: var(--tabpanel-background-color);
}

/* For the window-modal dialog, the background is supplied by the HTML dialog
 * backdrop, so the dialogOverlay background above "double backgrounds" - so
 * we remove it here: */
#window-modal-dialog > .dialogOverlay[topmost="true"] {
  background-color: transparent;
}

/* Hide tab-modal dialogs when a window-modal one is up. */
:root[window-modal-open] .browserStack > .dialogStack {
  visibility: hidden;
}

/**
 * End Dialogs
 */