fune/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");

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

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

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

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

/* Hide menu elements intended for keyboard access support */
#main-menubar[openedwithkey=false] .show-only-for-keyboard {
  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;
}

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

/* 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 {
  white-space: pre-wrap;
  word-break: break-word;
  unicode-bidi: plaintext;

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

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

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

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