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

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

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

.browserStack > browser[remote="true"] {
  -moz-binding: url("chrome://global/content/bindings/remote-browser.xml#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");
}

toolbar[customizable="true"]:not([nowindowdrag="true"]) {
  -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar-drag");
}
%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 150ms;
}

panelview:not([mainview]):not([current]) {
  display: none;
}

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: 180px;
  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;
  transition: min-width 200ms ease-out,
              max-width 230ms ease-out;
}

.tab-throbber:not([fadein]):not([pinned]),
.tab-label:not([fadein]):not([pinned]),
.tab-icon-image:not([fadein]):not([pinned]),
.tab-close-button:not([fadein]):not([pinned]) {
  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[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");
}

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

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

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

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

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

%endif

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

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

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

#wrapper-urlbar-container > #urlbar-container > #urlbar-wrapper > #urlbar > toolbarbutton,
#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 {
  overflow-x: hidden;
  overflow-y: auto;
}
#panelMenu_bookmarksMenu > .bookmark-item {
  max-width: none;
}

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

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

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

.ac-url-text:-moz-locale-dir(rtl),
.ac-title:-moz-locale-dir(rtl) > description {
  direction: ltr !important;
}

/* For results that are actions, their description text is shown instead of
   the URL - this needs to follow the locale's direction, unlike URLs. */
panel:not([noactions]) > richlistbox > richlistitem[type~="action"]:-moz-locale-dir(rtl) > .ac-url-box {
  direction: rtl;
}

panel[noactions] > richlistbox > richlistitem[type~="action"] > .ac-url-box > .ac-url > .ac-action-text,
panel[noactions] > richlistbox > richlistitem[type~="action"] > .ac-url-box > .ac-action-icon {
  visibility: collapse;
}

panel[noactions] > richlistbox > richlistitem[type~="action"] > .ac-url-box > .ac-url > .ac-url-text {
  visibility: visible;
}

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

#wrapper-urlbar-container > #urlbar-container > #urlbar-wrapper > #urlbar {
  -moz-user-input: disabled;
  cursor: grab;
}

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

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

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

#identity-icon-labels {
  max-width: 18em;
}

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

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

#wrapper-search-container > #search-container > #searchbar > .searchbar-textbox > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input {
  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;
}

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

/* The star doesn't make sense as text */
toolbar[mode="text"] #bookmarks-menu-button > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
  display: -moz-box !important;
}
toolbar[mode="text"] #bookmarks-menu-button > .toolbarbutton-menubutton-button > .toolbarbutton-text,
toolbar[mode="full"] #bookmarks-menu-button.bookmark-item > .toolbarbutton-menubutton-button > .toolbarbutton-text {
  display: none;
}

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

menuitem.spell-suggestion {
  font-weight: bold;
}

#sidebar-header > .tabs-closebutton {
  -moz-user-focus: normal;
}

/* apply Fitts' law to the notification bar's close button */
window[sizemode="maximized"] #content .notification-inner {
  border-right: 0px !important;
}

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

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

%ifdef MOZ_SERVICES_SYNC
/* Sync notification UI */
#sync-notifications {
  -moz-binding: url("chrome://browser/content/sync/notification.xml#notificationbox");
  overflow-y: visible !important;
}

#sync-notifications notification {
  -moz-binding: url("chrome://browser/content/sync/notification.xml#notification");
}
%endif

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

/* Identity UI */
#identity-popup-content-box:not(.chromeUI) > #identity-popup-brandName,
#identity-popup-content-box:not(.chromeUI) > #identity-popup-chromeLabel,
#identity-popup-content-box.chromeUI > .identity-popup-label:not(#identity-popup-brandName):not(#identity-popup-chromeLabel),
#identity-popup-content-box.chromeUI > .identity-popup-description,
#identity-popup.chromeUI > #identity-popup-button-container,
#identity-popup-content-box.unknownIdentity > #identity-popup-connectedToLabel ,
#identity-popup-content-box.unknownIdentity > #identity-popup-runByLabel ,
#identity-popup-content-box.unknownIdentity > #identity-popup-content-host ,
#identity-popup-content-box.unknownIdentity > #identity-popup-content-owner ,
#identity-popup-content-box.verifiedIdentity > #identity-popup-connectedToLabel2 ,
#identity-popup-content-box.verifiedDomain > #identity-popup-connectedToLabel2 {
  display: none;
}

/*  Full Screen UI */

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

#full-screen-warning-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2147483647 !important;
}

#full-screen-warning-container[fade-warning-out] {
  transition-property: opacity !important;
  transition-duration: 500ms !important;
  opacity: 0.0;
}

/* When the modal fullscreen approval UI is showing, don't allow interaction
   with the page, but when we're just showing the warning upon entering
   fullscreen on an already approved page, do allow interaction with the page.
 */
#full-screen-warning-container:not([obscure-browser]) {
  pointer-events: none;
}

#full-screen-warning-message {
  /* We must specify a max-width, otherwise word-wrap:break-word doesn't
     work in descendant <description> and <label> elements. Bug 630864. */
  max-width: 800px;
}

#full-screen-domain-text,
#full-screen-remember-decision > .checkbox-label-box > .checkbox-label {
  word-wrap: break-word;
  /* We must specify a min-width, otherwise word-wrap:break-word doesn't work. Bug 630864. */
  min-width: 1px;
}

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

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

#notification-popup .text-link.custom-link {
  -moz-binding: url("chrome://global/content/bindings/text.xml#text-label");
  text-decoration: none;
}

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

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

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

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

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

.panel-inner-arrowcontentfooter[footertype="promobox"] {
  -moz-binding: url("chrome://browser/content/urlbarBindings.xml#promobox");
}

/* tabview menus */
.tabview-menuitem {
  max-width: 32em;
}

/* highlighter */
%include highlighter.css

/* 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-badge[badge]:not([badge=""])::after {
  content: attr(badge);
}

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

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

/* 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: 285px;
  width: 260px; /* CHAT_WIDTH_OPEN in socialchat.xml */
}

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

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

#downloads-button[indicator] > image.toolbarbutton-icon {
  display: none;
}

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

toolbarpaletteitem[place="palette"] > #downloads-button[indicator] > stack.toolbarbutton-icon {
  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;
}

/* Hacks for toolbar full and text modes, until bug 573329 removes them */

toolbar[mode="text"] > #downloads-button {
  display: -moz-box;
  -moz-box-orient: vertical;
  -moz-box-pack: center;
}

toolbar[mode="text"] > #downloads-button > .toolbarbutton-text {
  -moz-box-ordinal-group: 1;
}

toolbar[mode="text"] > #downloads-button > .toolbarbutton-icon {
  display: -moz-box;
  -moz-box-ordinal-group: 2;
  visibility: collapse;
}

/* full screen chat window support */
chatbar:-moz-full-screen-ancestor,
chatbox:-moz-full-screen-ancestor  {
  border: none;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  max-height: none !important;
  -moz-box-sizing: border-box !important; 
}

/* hide chat chrome when chat is fullscreen */
chatbox:-moz-full-screen-ancestor > .chat-titlebar {
  display: none;
}

/* hide chatbar if browser tab is fullscreen */
*:-moz-full-screen-ancestor chatbar:not(:-moz-full-screen-ancestor) {
  display: none;
}

/* hide sidebar when fullscreen */
*:-moz-full-screen-ancestor #social-sidebar-box:not(:-moz-full-screen-ancestor) {
  display: none;
}

/* Combobox dropdown renderer */
#ContentSelectDropdown {
  max-height: 400px;
}

.contentSelectDropdown-optgroup {
  font-weight: bold;
  /* color: menutext used to overwrite the disabled color */
  color: menutext;
}

.contentSelectDropdown-ingroup {
  -moz-margin-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;
  transition: opacity 300ms;
  /* The popup inherits -moz-image-region from the button, must reset it */
  -moz-image-region: auto;
}