gecko-dev/toolkit/content/xul.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/. */

/**
 * A minimal set of rules for the XUL elements that may be implicitly created
 * as part of HTML/SVG documents (e.g. scrollbars) can be found over in
 * minimal-xul.css.  Rules for everything else related to XUL can be found in
 * this file.  Make sure you choose the correct style sheet when adding new
 * rules.  (This split of the XUL rules is to minimize memory use and improve
 * performance in HTML/SVG documents.)
 *
 * This file should also not contain any app specific styling.  Defaults for
 * widgets of a particular application should be in that application's style
 * sheet.  For example, style definitions for navigator can be found in
 * navigator.css.
 *
 * THIS FILE IS LOCKED DOWN.  YOU ARE NOT ALLOWED TO MODIFY IT WITHOUT FIRST
 * HAVING YOUR CHANGES REVIEWED BY enndeakin@gmail.com
 */

@import url("chrome://global/skin/tooltip.css");

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */
@namespace html url("http://www.w3.org/1999/xhtml"); /* namespace for HTML elements */
@namespace xbl url("http://www.mozilla.org/xbl"); /* namespace for XBL elements */

:root {
  --animation-easing-function: cubic-bezier(.07, .95, 0, 1);
}

/* ::::::::::
   :: Rules for 'hiding' portions of the chrome for special
   :: kinds of windows (not JUST browser windows) with toolbars
   ::::: */

window[chromehidden~="menubar"] .chromeclass-menubar,
window[chromehidden~="directories"] .chromeclass-directories,
window[chromehidden~="status"] .chromeclass-status,
window[chromehidden~="extrachrome"] .chromeclass-extrachrome,
window[chromehidden~="location"] .chromeclass-location,
window[chromehidden~="location"][chromehidden~="toolbar"] .chromeclass-toolbar,
window[chromehidden~="toolbar"] .chromeclass-toolbar-additional {
  display: none;
}

/* ::::::::::
   :: Rules for forcing direction for entry and display of URIs
   :: or URI elements
   ::::: */

.uri-element {
  direction: ltr !important;
}

/****** elements that have no visual representation ******/

script, data,
commands, commandset, command,
broadcasterset, broadcaster, observes,
keyset, key, toolbarpalette, toolbarset,
template, rule, conditions, action,
bindings, binding, content, member, triple,
treeitem, treeseparator, treerow, treecell {
  display: none;
}

xbl|children {
  display: none !important;
}

/********** focus rules **********/

button,
checkbox,
menulist,
radiogroup,
tree,
browser,
editor,
iframe {
  -moz-user-focus: normal;
}

/******** window & page ******/

window,
page {
  overflow: -moz-hidden-unscrollable;
  -moz-box-orient: vertical;
}

/******** box *******/

vbox {
  -moz-box-orient: vertical;
}

/********** label **********/
label.text-link, label[onclick] {
  -moz-user-focus: normal;
}

label html|span.accesskey {
  text-decoration: underline;
}

/********** toolbarbutton **********/

.toolbarbutton-badge:not([value]),
.toolbarbutton-badge[value=""] {
  display: none;
}

toolbarbutton:not([type="menu"]) > .toolbarbutton-menu-dropmarker,
toolbar[mode="icons"] .toolbarbutton-text,
toolbar[mode="icons"] .toolbarbutton-multiline-text,
toolbar[mode="text"] .toolbarbutton-icon,
.toolbarbutton-multiline-text:not([wrap="true"]),
.toolbarbutton-text[wrap="true"] {
  display: none;
  -moz-binding: none;
}

/******** browser, editor, iframe ********/

browser,
editor,
iframe {
  display: inline;
}

@supports -moz-bool-pref("layout.css.emulate-moz-box-with-flex") {
  browser,
  editor,
  iframe {
    display: block;
  }
}

/*********** popup notification ************/
popupnotification {
  -moz-box-orient: vertical;
}

.popup-notification-menubutton:not([label]) {
  display: none;
}

/********** radio **********/

radiogroup {
  -moz-box-orient: vertical;
}

/******** groupbox *********/

groupbox {
  -moz-box-orient: vertical;
}

/******** draggable elements *********/

%ifndef MOZ_WIDGET_GTK
titlebar,
toolbar:not([nowindowdrag="true"]):not([customizing="true"]) {
  -moz-window-dragging: drag;
}
%endif

/* The list below is non-comprehensive and will probably need some tweaking. */
toolbaritem,
toolbarbutton,
toolbarseparator,
button,
textbox,
tab,
radio,
splitter,
menulist {
  -moz-window-dragging: no-drag;
}

/******* toolbar *******/

toolbox {
  -moz-box-orient: vertical;
}

toolbar[customizing="true"][collapsed="true"] {
  /* Some apps, e.g. Firefox, use 'collapsed' to hide toolbars.
     Override it while customizing. */
  visibility: visible;
}

toolbar[customizing="true"][hidden="true"] {
  /* Some apps, e.g. SeaMonkey, use 'hidden' to hide toolbars.
     Override it while customizing. */
  display: -moz-box;
}

%ifdef XP_MACOSX
toolbar[type="menubar"] {
  min-height: 0 !important;
  border: 0 !important;
}
%endif

toolbarspring {
  -moz-box-flex: 1000;
}

/********* menu ***********/

menubar > menu:empty {
  visibility: collapse;
}

.menu-text {
  -moz-box-flex: 1;
}

/********* menupopup, panel, & tooltip ***********/

menupopup {
  -moz-binding: url("chrome://global/content/bindings/popup.xml#popup");
  -moz-box-orient: vertical;
}

panel {
  -moz-binding: url("chrome://global/content/bindings/popup.xml#panel");
  -moz-box-orient: vertical;
}

menupopup,
panel,
tooltip {
  display: -moz-popup;
  z-index: 2147483647;
  text-shadow: none;
}

tooltip {
  -moz-box-orient: vertical;
  white-space: pre-wrap;
  margin-top: 21px;
}

panel[type="arrow"] {
  -moz-binding: url("chrome://global/content/bindings/popup.xml#arrowpanel");
}

@supports -moz-bool-pref("xul.panel-animations.enabled") {
%ifdef MOZ_WIDGET_COCOA
  /* On Mac, use the properties "-moz-window-transform" and "-moz-window-opacity"
     instead of "transform" and "opacity" for these animations.
     The -moz-window* properties apply to the whole window including the window's
     shadow, and they don't affect the window's "shape", so the system doesn't
     have to recompute the shadow shape during the animation. This makes them a
     lot faster. In fact, Gecko no longer triggers shadow shape recomputations
     for repaints.
     These properties are not implemented on other platforms. */
  panel[type="arrow"]:not([animate="false"]) {
    -moz-window-opacity: 0;
    -moz-window-transform: translateY(-70px);
    transition-property: -moz-window-transform, -moz-window-opacity;
    transition-duration: 0.18s, 0.18s;
    transition-timing-function:
      var(--animation-easing-function), ease-out;
  }

  panel[type="arrow"][side="bottom"]:not([animate="false"]) {
    -moz-window-transform: translateY(70px);
  }

  /* [animate] is here only so that this rule has greater specificity than the
   * rule right above */
  panel[type="arrow"][animate][animate="open"] {
    -moz-window-opacity: 1.0;
    transition-duration: 0.18s, 0.18s;
    -moz-window-transform: none;
    transition-timing-function:
      var(--animation-easing-function), ease-in-out;
  }

  panel[type="arrow"][animate][animate="cancel"] {
    -moz-window-transform: none;
  }
%else
  panel[type="arrow"]:not([animate="false"]) {
    opacity: 0;
    transform: translateY(-70px);
    transition-property: transform, opacity;
    transition-duration: 0.18s, 0.18s;
    transition-timing-function:
      var(--animation-easing-function), ease-out;
  }

  panel[type="arrow"][side="bottom"]:not([animate="false"]) {
    transform: translateY(70px);
  }

  /* [animate] is here only so that this rule has greater specificity than the
   * rule right above */
  panel[type="arrow"][animate][animate="open"] {
    opacity: 1.0;
    transition-duration: 0.18s, 0.18s;
    transform: none;
    transition-timing-function:
      var(--animation-easing-function), ease-in-out;
  }

  panel[type="arrow"][animate][animate="cancel"] {
    transform: none;
  }
%endif
}

panel[type="arrow"][animating] {
  pointer-events: none;
}

/******** grid **********/

grid {
  display: -moz-grid;
}

rows,
columns {
  display: -moz-grid-group;
}

row,
column {
  display: -moz-grid-line;
}

rows {
  -moz-box-orient: vertical;
}

column {
  -moz-box-orient: vertical;
}

/******** tree ******/

treecolpicker {
  -moz-box-ordinal-group: 2147483646;
}

treechildren {
  display: -moz-box;
  -moz-user-select: none;
  -moz-box-flex: 1;
}

tree {
  -moz-binding: none;
  -moz-box-orient: vertical;
  width: 10px;
  height: 10px;
}

tree[hidecolumnpicker="true"] treecolpicker {
  display: none;
}

treecol {
  min-width: 16px;
}

treecol[hidden="true"] {
  visibility: collapse;
  display: -moz-box;
}

/* ::::: lines connecting cells ::::: */
tree:not([treelines="true"]) treechildren::-moz-tree-line {
  visibility: hidden;
}

treechildren::-moz-tree-cell(ltr) {
  direction: ltr !important;
}

/********** deck & stack *********/

deck {
  display: -moz-deck;
}

stack {
  display: -moz-stack;
}

/********** tabbox *********/

tabbox {
  -moz-box-orient: vertical;
}

tabs {
  -moz-binding: url("chrome://global/content/bindings/tabbox.xml#tabs");
  -moz-box-orient: horizontal;
}

tab {
  -moz-box-align: center;
  -moz-box-pack: center;
}

tab[selected="true"]:not([ignorefocus="true"]) {
  -moz-user-focus: normal;
}

tabpanels {
  display: -moz-deck;
}

/********** tooltip *********/

tooltip[titletip="true"] {
  /* The width of the tooltip isn't limited on cropped <tree> cells. */
  max-width: none;
}

/********** basic rule for anonymous content that needs to pass box properties through
 ********** to an insertion point parent that holds the real kids **************/

.box-inherit {
  -moz-box-orient: inherit;
  -moz-box-pack: inherit;
  -moz-box-align: inherit;
  -moz-box-direction: inherit;
}

/********** textbox **********/

textbox {
  -moz-binding: url("chrome://global/content/bindings/textbox.xml#textbox");
  -moz-user-select: text;
  text-shadow: none;
}

textbox[is="search-textbox"] {
  -moz-binding: none;
}

/* Prefix with (xul|*):root to workaround HTML tests loading xul.css */
:root html|textarea:not([resizable="true"]) {
  resize: none;
}

@supports -moz-bool-pref("layout.css.emulate-moz-box-with-flex") {
  html|*.textbox-input {
    /* Be block-level, so that -moz-box-flex can take effect, when we are an item
       in a -moz-box being emulated by modified modern flex. */
    display: block;
  }
}

.textbox-contextmenu:-moz-locale-dir(rtl) {
  direction: rtl;
}

/********** autocomplete textbox **********/

/* SeaMonkey uses its own autocomplete and the toolkit's autocomplete widget */
%ifndef MOZ_SUITE

textbox[type="autocomplete"] {
  -moz-binding: url("chrome://global/content/bindings/autocomplete.xml#autocomplete");
}

panel[type="autocomplete-richlistbox"] {
  -moz-binding: none;
}

.autocomplete-richlistbox {
  -moz-user-focus: ignore;
  overflow-x: hidden !important;
}

.autocomplete-richlistitem {
  -moz-binding: none;
  -moz-box-orient: vertical;
  -moz-box-align: center;
  overflow: -moz-hidden-unscrollable;
}

%endif

/* The following rule is here to fix bug 96899 (and now 117952).
   Somehow trees create a situation
   in which a popupset flows itself as if its popup child is directly within it
   instead of the placeholder child that should actually be inside the popupset.
   This is a stopgap measure, and it does not address the real bug.  */
.autocomplete-result-popupset {
  max-width: 0px;
  width: 0 !important;
  min-width: 0%;
  min-height: 0%;
}

/********** menulist **********/

menulist[popuponly="true"] {
  -moz-appearance: none !important;
  margin: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
}

menulist > menupopup > .popup-internal-box > .scrollbutton-up,
menulist > menupopup > .popup-internal-box > .arrowscrollbox-overflow-start-indicator,
menulist > menupopup > .popup-internal-box > .arrowscrollbox-overflow-end-indicator,
menulist > menupopup > .popup-internal-box > .scrollbutton-down {
  display: none;
}

menulist > menupopup > .popup-internal-box > .arrowscrollbox-scrollbox {
  overflow: auto;
}

dropmarker > .dropmarker-icon {
  pointer-events: none;
}

/********** splitter **********/

.tree-splitter {
  width: 0px;
  max-width: 0px;
  min-width: 0% ! important;
  min-height: 0% ! important;
  -moz-box-ordinal-group: 2147483646;
}

/******** scrollbar ********/

slider {
  /* This is a hint to layerization that the scrollbar thumb can never leave
     the scrollbar track. */
  overflow: hidden;
}

/******** scrollbox ********/

scrollbox {
  /* This makes it scrollable! */
  overflow: hidden;
}

scrollbox[smoothscroll=true] {
  scroll-behavior: smooth;
}

arrowscrollbox {
  -moz-binding: url("chrome://global/content/bindings/scrollbox.xml#arrowscrollbox");
}

/********** stringbundle **********/

stringbundle,
stringbundleset {
  display: none;
}

/********** dialog **********/

dialog,
dialog:root /* override :root from above */ {
  -moz-box-orient: vertical;
}

/********* page ************/

page {
  -moz-box-orient: vertical;
}

/********** wizard **********/

wizard,
wizard:root /* override :root from above */ {
  -moz-binding: url("chrome://global/content/bindings/wizard.xml#wizard");
  -moz-box-orient: vertical;
  width: 40em;
  height: 30em;
}

wizardpage {
  -moz-box-orient: vertical;
  overflow: auto;
}

/********** Rich Listbox ********/

richlistbox {
  -moz-user-focus: normal;
  -moz-box-orient: vertical;
}

/*********** findbar ************/
findbar {
  overflow-x: hidden;
}

/*********** tabmodalprompt ************/
tabmodalprompt {
  overflow: hidden;
  text-shadow: none;
}

.menulist-highlightable-label:not([highlightable="true"]),
.menulist-label[highlightable="true"],
.menu-iconic-highlightable-text:not([highlightable="true"]),
.menu-iconic-text[highlightable="true"] {
  display: none;
}

@supports -moz-bool-pref("layout.css.emulate-moz-box-with-flex") {
  /* Support common XUL attributes in the emulated flex mode so we can
     test the browser in this configuration without mass-changing existing
     markup and CSS. */
  [orient="vertical"] { -moz-box-orient: vertical; }
  [orient="horizontal"] { -moz-box-orient: horizontal; }

  [dir="reverse"] { -moz-box-direction: reverse; }

  [align="start"] { -moz-box-align: start; }
  [align="center"] { -moz-box-align: center; }
  [align="end"] { -moz-box-align: end; }
  [align="baseline"] { -moz-box-align: baseline; }
  [align="stretch"] { -moz-box-align: stretch; }

  [pack="start"] { -moz-box-pack: start; }
  [pack="center"] { -moz-box-pack: center; }
  [pack="end"] { -moz-box-pack: end; }

  /* This isn't a real solution for [flex] and [ordinal], but it covers enough
     cases to render the browser chrome. If we get attr() in Bug 435426 this could
     work for all cases. */
  [flex="1"] { -moz-box-flex: 1; }
  [flex="2"] { -moz-box-flex: 2; }
  [flex="3"] { -moz-box-flex: 3; }
  [flex="4"] { -moz-box-flex: 4; }
  [flex="5"] { -moz-box-flex: 5; }
  [flex="6"] { -moz-box-flex: 6; }
  [flex="7"] { -moz-box-flex: 7; }
  [flex="8"] { -moz-box-flex: 8; }
  [flex="9"] { -moz-box-flex: 9; }
  [flex="100"] { -moz-box-flex: 100; }
  [flex="400"] { -moz-box-flex: 400; }
  [flex="1000"] { -moz-box-flex: 1000; }
  [flex="10000"] { -moz-box-flex: 10000; }

  [ordinal="1"] { -moz-box-ordinal-group: 1; }
  [ordinal="2"] { -moz-box-ordinal-group: 2; }
  [ordinal="3"] { -moz-box-ordinal-group: 3; }
  [ordinal="4"] { -moz-box-ordinal-group: 4; }
  [ordinal="5"] { -moz-box-ordinal-group: 5; }
  [ordinal="6"] { -moz-box-ordinal-group: 6; }
  [ordinal="7"] { -moz-box-ordinal-group: 7; }
  [ordinal="8"] { -moz-box-ordinal-group: 8; }
  [ordinal="9"] { -moz-box-ordinal-group: 9; }
  [ordinal="1000"] { -moz-box-ordinal-group: 1000; }
}