gecko-dev/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 url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");
@namespace svg url("http://www.w3.org/2000/svg");

:root {
  --identity-popup-expander-width: 38px;
  --panelui-subview-transition-duration: 150ms;
}

#main-window:not([chromehidden~="toolbar"]) {
%ifdef XP_MACOSX
  min-width: 335px;
%else
  min-width: 300px;
%endif
}

/* These values are chosen to keep the Loop detached chat window from
 * getting too small.  When it's too small, three bad things happen:
 *
 * - It looks terrible
 * - It's not really usable
 * - It's possible for the user to be transmitting video that's cropped by the
 *   the edge of the window, so that they're not aware of it, which is a
 *   privacy problem
 *
 * Note that if the chat window grows more users than Loop who want this
 * ability, we'll need to generalize.  A partial patch for this is in
 * bug 1112264.
 */

#chat-window {
 /*
  * In some ideal world, we'd have a simple way to express "block resizing
  * along any dimension beyond the point at which an overflow event would
  * occur".  But none of -moz-{fit,max,min}-content do what we want here. So..
  */
  min-width: 260px;
  min-height: 315px;
}

#main-window[customize-entered] {
  min-width: -moz-fit-content;
}

searchbar {
  -moz-binding: url("chrome://browser/content/search/search.xml#searchbar");
}

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

.browserStack > browser {
  -moz-binding: url("chrome://browser/content/tabbrowser.xml#tabbrowser-browser");
}

.browserStack > browser[remote="true"] {
  -moz-binding: url("chrome://browser/content/tabbrowser.xml#tabbrowser-remote-browser");
}

toolbar[customizable="true"] {
  -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
}

%ifdef XP_MACOSX
#toolbar-menubar {
  -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar-menubar-stub");
}
%endif

#toolbar-menubar[autohide="true"] {
  -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar-menubar-autohide");
}

#addon-bar {
  -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#addonbar-delegating");
  visibility: visible;
  margin: 0;
  height: 0 !important;
  overflow: hidden;
  padding: 0;
  border: 0 none;
}

#addonbar-closebutton {
  visibility: visible;
  height: 0 !important;
}

#status-bar {
  height: 0 !important;
  -moz-binding: none;
  padding: 0;
  margin: 0;
}

panelmultiview {
  -moz-binding: url("chrome://browser/content/customizableui/panelUI.xml#panelmultiview");
}

panelview {
  -moz-binding: url("chrome://browser/content/customizableui/panelUI.xml#panelview");
  -moz-box-orient: vertical;
}

.panel-mainview {
  transition: transform var(--panelui-subview-transition-duration);
}

panelview:not([mainview]):not([current]) {
  transition: visibility 0s linear var(--panelui-subview-transition-duration);
  visibility: collapse;
}

browser[frameType="social"][remote="true"] {
  -moz-binding: url("chrome://global/content/bindings/remote-browser.xml#remote-browser");
}

tabbrowser {
  -moz-binding: url("chrome://browser/content/tabbrowser.xml#tabbrowser");
}

.tabbrowser-tabs {
  -moz-binding: url("chrome://browser/content/tabbrowser.xml#tabbrowser-tabs");
}

#tabbrowser-tabs:not([overflow="true"]) ~ #alltabs-button,
#tabbrowser-tabs:not([overflow="true"]) + #new-tab-button,
#tabbrowser-tabs[overflow="true"] > .tabbrowser-arrowscrollbox > .tabs-newtab-button,
#TabsToolbar[currentset]:not([currentset*="tabbrowser-tabs,new-tab-button"]) > #tabbrowser-tabs > .tabbrowser-arrowscrollbox > .tabs-newtab-button,
#TabsToolbar[customizing="true"] > #tabbrowser-tabs > .tabbrowser-arrowscrollbox > .tabs-newtab-button {
  visibility: collapse;
}

#tabbrowser-tabs:not([overflow="true"])[using-closing-tabs-spacer] ~ #alltabs-button {
  visibility: hidden; /* temporary space to keep a tab's close button under the cursor */
}

.tabbrowser-tab {
  -moz-binding: url("chrome://browser/content/tabbrowser.xml#tabbrowser-tab");
}

.tabbrowser-tab:not([pinned]) {
  -moz-box-flex: 100;
  max-width: 210px;
  min-width: 100px;
  width: 0;
  transition: min-width 200ms ease-out,
              max-width 230ms ease-out;
}

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

.tab-close-button,
.tab-background {
  /* Explicitly set the visibility to override the value (collapsed)
   * we inherit from #TabsToolbar[collapsed] upon opening a browser window. */
  visibility: visible;
}

.tab-close-button[fadein],
.tab-background[fadein] {
  /* This transition is only wanted for opening tabs. */
  transition: visibility 0ms 25ms;
}

.tab-close-button:not([fadein]),
.tab-background:not([fadein]) {
  visibility: hidden;
}

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

.tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
  position: fixed !important;
  display: block; /* position:fixed already does this (bug 579776), but let's be explicit */
}

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

.tabbrowser-tabs[movingtab] > .tabbrowser-tab[fadein]:not([selected]) {
  transition: transform 200ms ease-out;
}

#alltabs-popup {
  -moz-binding: url("chrome://browser/content/tabbrowser.xml#tabbrowser-alltabs-popup");
}

toolbar[printpreview="true"] {
  -moz-binding: url("chrome://global/content/printPreviewBindings.xml#printpreviewtoolbar");
}

toolbar[overflowable] > .customization-target {
  overflow: hidden;
}

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

%ifdef CAN_DRAW_IN_TITLEBAR
#main-window:not([chromemargin]) > #titlebar,
#main-window[inFullscreen] > #titlebar,
#main-window[inFullscreen] .titlebar-placeholder,
#main-window:not([tabsintitlebar]) .titlebar-placeholder {
  display: none;
}

#titlebar {
  -moz-binding: url("chrome://global/content/bindings/general.xml#windowdragbox");
  -moz-window-dragging: drag;
}

#titlebar-spacer {
  pointer-events: none;
}

#main-window[tabsintitlebar] #titlebar-buttonbox {
  position: relative;
}

#titlebar-buttonbox {
  -moz-appearance: -moz-window-button-box;
}

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

%ifdef XP_MACOSX
#titlebar-fullscreen-button {
  -moz-appearance: -moz-mac-fullscreen-button;
}

/* Fullscreen and caption buttons don't move with RTL on OS X so override the automatic ordering. */
#titlebar-secondary-buttonbox:-moz-locale-dir(ltr),
#titlebar-buttonbox-container:-moz-locale-dir(rtl),
.titlebar-placeholder[type="fullscreen-button"]:-moz-locale-dir(ltr),
.titlebar-placeholder[type="caption-buttons"]:-moz-locale-dir(rtl) {
  -moz-box-ordinal-group: 1000;
}

#titlebar-secondary-buttonbox:-moz-locale-dir(rtl),
#titlebar-buttonbox-container:-moz-locale-dir(ltr),
.titlebar-placeholder[type="caption-buttons"]:-moz-locale-dir(ltr),
.titlebar-placeholder[type="fullscreen-button"]:-moz-locale-dir(rtl) {
  -moz-box-ordinal-group: 0;
}
%else
/* On non-OSX, these should be start-aligned */
#titlebar-buttonbox-container {
  -moz-box-align: start;
}
%endif

%if !defined(MOZ_WIDGET_GTK)
#TabsToolbar > .private-browsing-indicator {
  -moz-box-ordinal-group: 1000;
}
%endif

%ifdef XP_WIN
#main-window[sizemode="maximized"] #titlebar-buttonbox {
  -moz-appearance: -moz-window-button-box-maximized;
}

#main-window[tabletmode] #titlebar-min,
#main-window[tabletmode] #titlebar-max {
  display: none !important;
}

#main-window[tabsintitlebar] #TabsToolbar,
#main-window[tabsintitlebar] #toolbar-menubar,
#main-window[tabsintitlebar] #navigator-toolbox > toolbar:-moz-lwtheme {
  -moz-window-dragging: drag;
}
%endif

%endif

#main-window[inFullscreen][inDOMFullscreen] #navigator-toolbox,
#main-window[inFullscreen][inDOMFullscreen] #fullscr-toggler,
#main-window[inFullscreen][inDOMFullscreen] #sidebar-box,
#main-window[inFullscreen][inDOMFullscreen] #sidebar-splitter,
#main-window[inFullscreen]:not([OSXLionFullscreen]) toolbar:not([fullscreentoolbar=true]),
#main-window[inFullscreen] #global-notificationbox,
#main-window[inFullscreen] #high-priority-global-notificationbox {
  visibility: collapse;
}

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

/* Rules to help integrate SDK widgets */
toolbaritem[sdkstylewidget="true"] > toolbarbutton,
toolbarpaletteitem > toolbaritem[sdkstylewidget="true"] > iframe,
toolbarpaletteitem > toolbaritem[sdkstylewidget="true"] > .toolbarbutton-text {
  display: none;
}

toolbarpaletteitem:-moz-any([place="palette"], [place="panel"]) > toolbaritem[sdkstylewidget="true"] > toolbarbutton {
  display: -moz-box;
}

toolbarpaletteitem > toolbaritem[sdkstylewidget="true"][cui-areatype="toolbar"] > .toolbarbutton-text {
  display: -moz-box;
}

@media not all and (min-resolution: 1.1dppx) {
  .webextension-browser-action {
    list-style-image: var(--webextension-toolbar-image);
  }

  .webextension-browser-action[cui-areatype="menu-panel"],
  toolbarpaletteitem[place="palette"] > .webextension-browser-action {
    list-style-image: var(--webextension-menupanel-image);
  }

  .webextension-page-action {
    list-style-image: var(--webextension-urlbar-image);
  }
}

@media (min-resolution: 1.1dppx) {
  .webextension-browser-action {
    list-style-image: var(--webextension-toolbar-image-2x);
  }

  .webextension-browser-action[cui-areatype="menu-panel"],
  toolbarpaletteitem[place="palette"] > .webextension-browser-action {
    list-style-image: var(--webextension-menupanel-image-2x);
  }

  .webextension-page-action {
    list-style-image: var(--webextension-urlbar-image-2x);
  }
}

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

%ifndef XP_MACOSX
toolbarpaletteitem[place="palette"],
toolbarpaletteitem[place="panel"],
toolbarpaletteitem[place="toolbar"] {
  -moz-user-focus: normal;
}
%endif

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

#PlacesToolbarDropIndicatorHolder {
  position: absolute;
  top: 25%;
}

toolbarpaletteitem > #personal-bookmarks > #bookmarks-toolbar-placeholder,
#personal-bookmarks[cui-areatype="menu-panel"] > #bookmarks-toolbar-placeholder,
#personal-bookmarks[cui-areatype="toolbar"][overflowedItem=true] > #bookmarks-toolbar-placeholder {
  display: -moz-box;
}

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

#zoom-controls[cui-areatype="toolbar"]:not([overflowedItem=true]) > #zoom-reset-button > .toolbarbutton-text {
  display: -moz-box;
}

#urlbar-reload-button:not([displaystop]) + #urlbar-stop-button,
#urlbar-reload-button[displaystop] {
  visibility: collapse;
}

#PanelUI-feeds > .feed-toolbarbutton:-moz-locale-dir(rtl) {
  direction: rtl;
}

#panelMenu_bookmarksMenu > .bookmark-item {
  max-width: none;
}

#urlbar-container {
  min-width: 50ch;
}

#search-container {
  min-width: 25ch;
}

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

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

#main-window:-moz-lwtheme {
  background-repeat: no-repeat;
  background-position: top right;
}

%ifdef XP_MACOSX
#main-window[inFullscreen="true"] {
  padding-top: 0; /* override drawintitlebar="true" */
}
%endif

#browser-bottombox[lwthemefooter="true"] {
  background-repeat: no-repeat;
  background-position: bottom left;
}

.menuitem-tooltip {
  -moz-binding: url("chrome://browser/content/urlbarBindings.xml#menuitem-tooltip");
}

.menuitem-iconic-tooltip,
.menuitem-tooltip[type="checkbox"],
.menuitem-tooltip[type="radio"] {
  -moz-binding: url("chrome://browser/content/urlbarBindings.xml#menuitem-iconic-tooltip");
}

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

/* ::::: location bar ::::: */
#urlbar {
  -moz-binding: url(chrome://browser/content/urlbarBindings.xml#urlbar);
}

/* Always show URLs LTR. */
.ac-url-text:-moz-locale-dir(rtl) {
  direction: ltr !important;
}

/* For non-action items, hide the action text; for action items, hide the URL
   text. */
.ac-url[actiontype],
.ac-action:not([actiontype]) {
  display: none;
}

/* For action items in a noactions popup, show the URL text and hide the action
   text and type icon. */
#PopupAutoCompleteRichResult[noactions] > richlistbox > richlistitem.overridable-action > .ac-url {
  display: -moz-box;
}
#PopupAutoCompleteRichResult[noactions] > richlistbox > richlistitem.overridable-action > .ac-action {
  display: none;
}
#PopupAutoCompleteRichResult[noactions] > richlistbox > richlistitem.overridable-action > .ac-type-icon {
  list-style-image: none;
}

#urlbar:not([actiontype="switchtab"]) > #urlbar-display-box {
  display: none;
}

#PopupAutoComplete {
  -moz-binding: url("chrome://browser/content/urlbarBindings.xml#browser-autocomplete-result-popup");
}

#PopupSearchAutoComplete {
  -moz-binding: url("chrome://browser/content/search/search.xml#browser-search-autocomplete-result-popup");
}

/* Overlay a badge on top of the icon of additional open search providers
   in the search panel. */
.addengine-item > .button-box > .button-icon {
  -moz-binding: url("chrome://browser/content/search/search.xml#addengine-icon");
  display: -moz-stack;
}

#PopupAutoCompleteRichResult {
  -moz-binding: url("chrome://browser/content/urlbarBindings.xml#urlbar-rich-result-popup");
}

#PopupAutoCompleteRichResult.showSearchSuggestionsNotification {
  transition: height 100ms;
}

#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] {
  visibility: collapse;
  transition: margin-top 100ms;
}

#PopupAutoCompleteRichResult.showSearchSuggestionsNotification > hbox[anonid="search-suggestions-notification"] {
  visibility: visible;
}

#PopupAutoCompleteRichResult > richlistbox {
  transition: height 100ms;
}

#PopupAutoCompleteRichResult.showSearchSuggestionsNotification > richlistbox {
  transition: none;
}

#urlbar[pageproxystate="invalid"] > #urlbar-icons > .urlbar-icon,
#urlbar[pageproxystate="invalid"][focused="true"] > #urlbar-go-button ~ toolbarbutton,
#urlbar[pageproxystate="valid"] > #urlbar-go-button,
#urlbar:not([focused="true"]) > #urlbar-go-button {
  visibility: collapse;
}

#urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon-labels {
  visibility: collapse;
}

#urlbar[pageproxystate="invalid"] > #identity-box {
  pointer-events: none;
}

#urlbar[pageproxystate="invalid"] > #identity-box > #notification-popup-box {
  pointer-events: auto;
}

#identity-icon-labels {
  max-width: 18em;
}
@media (max-width: 700px) {
  #urlbar-container {
    min-width: 45ch;
  }
  #identity-icon-labels {
    max-width: 70px;
  }
}
@media (max-width: 600px) {
  #urlbar-container {
    min-width: 40ch;
  }
  #identity-icon-labels {
    max-width: 60px;
  }
}
@media (max-width: 500px) {
  #urlbar-container {
    min-width: 35ch;
  }
  #identity-icon-labels {
    max-width: 50px;
  }
}
@media (max-width: 400px) {
  #urlbar-container {
    min-width: 28ch;
  }
  #identity-icon-labels {
    max-width: 40px;
  }
}

#identity-icon-country-label {
  direction: ltr;
}

#identity-box.verifiedIdentity > #identity-icon-labels > #identity-icon-label {
  margin-inline-end: 0.25em !important;
}

#main-window[customizing] :-moz-any(#urlbar, .searchbar-textbox) > .autocomplete-textbox-container > .textbox-input-box {
  visibility: hidden;
}

/* ::::: Unified Back-/Forward Button ::::: */
#back-button > .toolbarbutton-menu-dropmarker,
#forward-button > .toolbarbutton-menu-dropmarker {
  display: none;
}
.unified-nav-current {
  font-weight: bold;
}

toolbarbutton.bookmark-item {
  max-width: 13em;
}

/* Apply crisp rendering for favicons at exactly 2dppx resolution */
@media (resolution: 2dppx) {
  #alltabs-popup > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon,
  .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,
  #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
    image-rendering: -moz-crisp-edges;
  }
  /* Synced Tabs sidebar */
  html|*.tabs-container html|*.item-tabs-list html|*.item-icon-container {
    image-rendering: -moz-crisp-edges;
  }
}

#editBMPanel_tagsSelector {
  /* override default listbox width from xul.css */
  width: auto;
}

menupopup[emptyplacesresult="true"] > .hide-if-empty-places-result {
  display: none;
}
menuitem.spell-suggestion {
  font-weight: bold;
}

/* Hide extension toolbars that neglected to set the proper class */
window[chromehidden~="location"][chromehidden~="toolbar"] toolbar:not(.chromeclass-menubar),
window[chromehidden~="toolbar"] toolbar:not(#nav-bar):not(#TabsToolbar):not(#print-preview-toolbar):not(.chromeclass-menubar) {
  display: none;
}

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

/* History Swipe Animation */

#historySwipeAnimationContainer {
  overflow: hidden;
}

#historySwipeAnimationPreviousPage,
#historySwipeAnimationCurrentPage,
#historySwipeAnimationNextPage {
  background: none top left no-repeat white;
}

#historySwipeAnimationPreviousPage {
  background-image: -moz-element(#historySwipeAnimationPreviousPageSnapshot);
}

#historySwipeAnimationCurrentPage {
  background-image: -moz-element(#historySwipeAnimationCurrentPageSnapshot);
}

#historySwipeAnimationNextPage {
  background-image: -moz-element(#historySwipeAnimationNextPageSnapshot);
}

/*  Full Screen UI */

#fullscr-toggler {
  height: 1px;
  background: black;
}

html|*.pointerlockfswarning {
  position: fixed;
  z-index: 2147483647 !important;
  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: -moz-max-content;
  max-width: 95%;
  pointer-events: none;
}
html|*.pointerlockfswarning:not([hidden]) {
  display: flex;
  will-change: transform;
}
html|*.pointerlockfswarning[onscreen] {
  transform: translate(-50%, 50px);
}
html|*.pointerlockfswarning[ontop] {
  /* Use -10px to hide the border and border-radius on the top */
  transform: translate(-50%, -10px);
}
#main-window[OSXLionFullscreen] html|*.pointerlockfswarning[ontop] {
  transform: translate(-50%, 80px);
}

html|*.pointerlockfswarning-domain-text,
html|*.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
}
html|*.pointerlockfswarning-domain-text:not([hidden]) + html|*.pointerlockfswarning-generic-text {
  display: none;
}

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

/* ::::: Ctrl-Tab Panel ::::: */

.ctrlTab-preview > html|img,
.ctrlTab-preview > html|canvas {
  min-width: inherit;
  max-width: inherit;
  min-height: inherit;
  max-height: inherit;
}

.ctrlTab-favicon-container {
  -moz-box-align: start;
%ifdef XP_MACOSX
  -moz-box-pack: end;
%else
  -moz-box-pack: start;
%endif
}

.ctrlTab-favicon {
  width: 16px;
  height: 16px;
}

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

.ctrlTab-preview {
  -moz-binding: url("chrome://browser/content/browser-tabPreviews.xml#ctrlTab-preview");
}


/* notification anchors should only be visible when their associated
   notifications are */
.notification-anchor-icon {
  -moz-user-focus: normal;
}

.notification-anchor-icon:not([showing]) {
  display: none;
}

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

.form-validation-anchor {
  /* should occupy space but not be visible */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  -moz-stack-sizing: ignore;
}

#addon-progress-notification {
  -moz-binding: url("chrome://browser/content/urlbarBindings.xml#addon-progress-notification");
}

#click-to-play-plugins-notification {
  -moz-binding: url("chrome://browser/content/urlbarBindings.xml#click-to-play-plugins-notification");
}

#login-fill-notification {
  -moz-binding: url("chrome://browser/content/urlbarBindings.xml#login-fill-notification");
}

.login-fill-item {
  -moz-binding: url("chrome://passwordmgr/content/login.xml#login");
}

.plugin-popupnotification-centeritem {
  -moz-binding: url("chrome://browser/content/urlbarBindings.xml#plugin-popupnotification-center-item");
}

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

/* Status panel */

statuspanel {
  -moz-binding: url("chrome://browser/content/tabbrowser.xml#statuspanel");
  position: fixed;
  margin-top: -3em;
  max-width: calc(100% - 5px);
  pointer-events: none;
}

statuspanel:-moz-locale-dir(ltr)[mirror],
statuspanel:-moz-locale-dir(rtl):not([mirror]) {
  left: auto;
  right: 0;
}

statuspanel[sizelimit] {
  max-width: 50%;
}

statuspanel[type=status] {
  min-width: 23em;
}

@media all and (max-width: 800px) {
  statuspanel[type=status] {
    min-width: 33%;
  }
}

statuspanel[type=overLink] {
  transition: opacity 120ms ease-out;
  direction: ltr;
}

statuspanel[inactive] {
  transition: none;
  opacity: 0;
}

statuspanel[inactive][previoustype=overLink] {
  transition: opacity 200ms ease-out;
}

.statuspanel-inner {
  height: 3em;
  width: 100%;
  -moz-box-align: end;
}

/* gcli */

html|*#gcli-tooltip-frame,
html|*#gcli-output-frame,
#gcli-output,
#gcli-tooltip {
  overflow-x: hidden;
}

.gclitoolbar-input-node,
.gclitoolbar-complete-node {
  direction: ltr;
}

#developer-toolbar-toolbox-button[error-count] > .toolbarbutton-icon {
  display: none;
}

#developer-toolbar-toolbox-button[error-count]:before {
  content: attr(error-count);
  display: -moz-box;
  -moz-box-pack: center;
}

/* Responsive Mode */

.browserContainer[responsivemode] {
  overflow: auto;
}

.devtools-responsiveui-toolbar:-moz-locale-dir(rtl) {
  -moz-box-pack: end;
}

.browserStack[responsivemode] {
  transition-duration: 200ms;
  transition-timing-function: linear;
}

.browserStack[responsivemode] {
  transition-property: min-width, max-width, min-height, max-height;
}

.browserStack[responsivemode][notransition] {
  transition: none;
}

toolbarbutton[type="socialmark"] {
  -moz-binding: url("chrome://browser/content/socialmarks.xml#toolbarbutton-marks");
}

panelview > .social-panel-frame {
  width: auto;
  height: auto;
}

/* Translation */
notification[value="translation"] {
  -moz-binding: url("chrome://browser/content/translation-infobar.xml#translationbar");
}

/* Social */
/* Note the chatbox 'width' values are duplicated in socialchat.xml */
chatbox {
  -moz-binding: url("chrome://browser/content/socialchat.xml#chatbox");
  transition: height 150ms ease-out, width 150ms ease-out;
  height: 290px;
  width: 300px; /* CHAT_WIDTH_OPEN in socialchat.xml */
}

chatbox[customSize] {
  width: 350px; /* CHAT_WIDTH_OPEN_ALT in socialchat.xml */
}

#chat-window[customSize] {
  min-width: 350px;
}

chatbox[customSize="loopChatEnabled"] {
  /* 430px as defined per UX */
  height: 430px;
}

#chat-window[customSize="loopChatEnabled"] {
  /* 325px + 30px top bar height. */
  min-height: calc(325px + 30px);
}

chatbox[customSize="loopChatMessageAppended"] {
  /* 430px as defined per UX */
  height: 430px;
}

chatbox[customSize="loopChatDisabledMessageAppended"] {
  /* 388px as defined per UX */
  height: 388px;
}

#chat-window[customSize="loopChatMessageAppended"] {
  /* 445px + 30px top bar height. */
  min-height: calc(400px + 30px);
}

chatbox[minimized="true"] {
  width: 160px;
  height: 20px; /* CHAT_WIDTH_MINIMIZED in socialchat.xml */
}

chatbar {
  -moz-binding: url("chrome://browser/content/socialchat.xml#chatbar");
  height: 0;
  max-height: 0;
}

.chatbar-innerbox {
  margin: -285px 0 0;
}

chatbar[customSize] > .chatbar-innerbox {
  /* 450px to make room for the maximum custom-size chatbox; currently 'loopChatMessageAppended'. */
  margin-top: -450px;
}

/* Apply crisp rendering for favicons at exactly 2dppx resolution */
@media (resolution: 2dppx) {
  #social-sidebar-favico,
  .social-status-button,
  .chat-status-icon {
    image-rendering: -moz-crisp-edges;
  }
}

/** See bug 872317 for why the following rule is necessary. */

#downloads-button {
  -moz-binding: url("chrome://browser/content/downloads/download.xml#download-toolbarbutton");
}

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

/* Bug 924050: If we've loaded the indicator, for now we hide it in the menu panel,
   and just show the icon. This is a hack to side-step very weird layout bugs that
   seem to be caused by the indicator stack interacting with the menu panel. */
#downloads-button[indicator]:not([cui-areatype="menu-panel"]) > .toolbarbutton-badge-stack > image.toolbarbutton-icon,
#downloads-button[indicator][cui-areatype="menu-panel"] > #downloads-indicator-anchor {
  display: none;
}

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

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

#downloads-button:-moz-any([progress], [counter], [paused]) #downloads-indicator-icon,
#downloads-button:not(:-moz-any([progress], [counter], [paused]))
                                                   #downloads-indicator-progress-area
{
  visibility: hidden;
}

/* hide chat chrome when chat is fullscreen */
#chat-window[sizemode="fullscreen"] chatbox > .chat-titlebar {
  display: none;
}

/* hide chatbar and sidebar if browser tab is fullscreen */
#main-window[inFullscreen][inDOMFullscreen] chatbar,
#main-window[inFullscreen][inDOMFullscreen] #social-sidebar-box,
#main-window[inFullscreen][inDOMFullscreen] #social-sidebar-splitter {
  display: none;
}

/* Combobox dropdown renderer */
#ContentSelectDropdown > menupopup {
  /* The menupopup itself should always be rendered LTR to ensure the scrollbar aligns with
   * the dropdown arrow on the dropdown widget. If a menuitem is RTL, its style will be set accordingly */
  direction: ltr;
}

/* Indent options in optgroups */
.contentSelectDropdown-ingroup .menu-iconic-text {
  padding-inline-start: 2em;
}

/* Give this menupopup an arrow panel styling */
#BMB_bookmarksPopup {
  -moz-appearance: none;
  -moz-binding: url("chrome://browser/content/places/menu.xml#places-popup-arrow");
  background: transparent;
  border: none;
  /* The popup inherits -moz-image-region from the button, must reset it */
  -moz-image-region: auto;
}

%ifndef MOZ_WIDGET_GTK

#BMB_bookmarksPopup {
  transform: scale(.4);
  opacity: 0;
  transition-property: transform, opacity;
  transition-duration: 0.15s;
  transition-timing-function: ease-out;
}

#BMB_bookmarksPopup[animate="open"] {
  transform: none;
  opacity: 1.0;
}

#BMB_bookmarksPopup[animate="cancel"] {
  transform: none;
}

#BMB_bookmarksPopup[arrowposition="after_start"]:-moz-locale-dir(ltr),
#BMB_bookmarksPopup[arrowposition="after_end"]:-moz-locale-dir(rtl) {
  transform-origin: 20px top;
}

#BMB_bookmarksPopup[arrowposition="after_end"]:-moz-locale-dir(ltr),
#BMB_bookmarksPopup[arrowposition="after_start"]:-moz-locale-dir(rtl) {
  transform-origin: calc(100% - 20px) top;
}

#BMB_bookmarksPopup[arrowposition="before_start"]:-moz-locale-dir(ltr),
#BMB_bookmarksPopup[arrowposition="before_end"]:-moz-locale-dir(rtl) {
  transform-origin: 20px bottom;
}

#BMB_bookmarksPopup[arrowposition="before_end"]:-moz-locale-dir(ltr),
#BMB_bookmarksPopup[arrowposition="before_start"]:-moz-locale-dir(rtl) {
  transform-origin: calc(100% - 20px) bottom;
}

%endif

/* Customize mode */
#navigator-toolbox,
#browser-bottombox,
#content-deck {
  transition-property: margin-left, margin-right;
  transition-duration: 200ms;
  transition-timing-function: linear;
}

#tab-view-deck[fastcustomizeanimation] #navigator-toolbox,
#tab-view-deck[fastcustomizeanimation] #content-deck {
  transition-duration: 1ms;
  transition-timing-function: linear;
}

#PanelUI-contents > .panel-customization-placeholder > .panel-customization-placeholder-child {
  list-style-image: none;
}

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

#customization-panelHolder {
  overflow-y: hidden;
}

#customization-panelWrapper,
#customization-panelWrapper > .panel-arrowcontent {
  -moz-box-flex: 1;
}

#customization-panelWrapper > .panel-arrowcontent {
  padding: 0 !important;
  overflow: hidden;
}

#customization-panelHolder > #PanelUI-mainView {
  display: flex;
  flex-direction: column;
  /* Hack alert - by manually setting the preferred height to 0, we convince
     #PanelUI-mainView to shrink when the window gets smaller in customization
     mode. Not sure why that is - might have to do with our intermingling of
     XUL flex, and CSS3 Flexbox. */
  height: 0;
}

#customization-panelHolder > #PanelUI-mainView > #PanelUI-contents-scroller {
  display: flex;
  flex: auto;
  flex-direction: column;
}

#customization-panel-container {
  overflow-y: auto;
}

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

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

#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;
  flex-shrink: 0;
  flex-wrap: wrap;
}

#customization-toolbar-visibility-button > .box-inherit > .button-menu-dropmarker {
  display: -moz-box;
}

toolbarpaletteitem[place="palette"] {
  width: 10em;
  /* icon (32) + margin (2 * 4) + button padding/border (2 * 4) + label margin (~2) + label
   * line-height (1.5em): */
  height: calc(50px + 1.5em);
  margin-bottom: 5px;
  overflow: hidden;
  display: inline-block;
}

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

#customization-palette .toolbarpaletteitem-box {
  -moz-box-pack: center;
  -moz-box-flex: 1;
  width: 10em;
  max-width: 10em;
}

#main-window[customizing=true] #PanelUI-update-status {
  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;
}

/* Combined context-menu items */
#context-navigation > .menuitem-iconic > .menu-iconic-text,
#context-navigation > .menuitem-iconic > .menu-accel-container {
  display: none;
}

#login-fill-doorhanger:not([inDetailView]) > #login-fill-clickcapturer {
  pointer-events: none;
}

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

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