gecko-dev/toolkit/content/xul.css

845 строки
20 KiB
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,
treechildren, treeitem, treeseparator, treerow, treecell {
display: none;
}
xbl|children {
display: none !important;
}
/********** focus rules **********/
button,
checkbox,
datepicker[type="grid"],
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-binding: url("chrome://global/content/bindings/text.xml#text-link");
-moz-user-focus: normal;
}
label[control], label.radio-label, label.checkbox-label, label.toolbarbutton-multiline-text {
-moz-binding: url("chrome://global/content/bindings/text.xml#label-control");
}
label html|span.accesskey {
text-decoration: underline;
}
/********** button **********/
button {
-moz-binding: url("chrome://global/content/bindings/button.xml#button");
}
button[type="menu"] {
-moz-binding: url("chrome://global/content/bindings/button.xml#menu");
}
/********** toolbarbutton **********/
toolbarbutton {
-moz-binding: url("chrome://global/content/bindings/toolbarbutton.xml#toolbarbutton");
}
toolbarbutton.badged-button > toolbarbutton,
toolbarbutton.badged-button {
-moz-binding: url("chrome://global/content/bindings/toolbarbutton.xml#toolbarbutton-badged");
}
.toolbarbutton-badge:not([value]),
.toolbarbutton-badge[value=""] {
display: none;
}
toolbarbutton[type="menu"] {
-moz-binding: url("chrome://global/content/bindings/toolbarbutton.xml#menu");
}
toolbarbutton.badged-button[type="menu"] {
-moz-binding: url("chrome://global/content/bindings/toolbarbutton.xml#toolbarbutton-badged-menu");
}
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;
}
}
browser {
-moz-binding: url("chrome://global/content/bindings/browser.xml#browser");
}
/********** notifications **********/
notificationbox {
-moz-binding: url("chrome://global/content/bindings/notification.xml#notificationbox");
-moz-box-orient: vertical;
}
.notificationbox-stack {
overflow: -moz-hidden-unscrollable;
}
notification {
-moz-binding: url("chrome://global/content/bindings/notification.xml#notification");
}
notification.animated {
transition: margin-top 300ms var(--animation-easing-function), opacity 300ms var(--animation-easing-function);
}
/*********** popup notification ************/
popupnotification {
-moz-binding: url("chrome://global/content/bindings/notification.xml#popup-notification");
}
.popup-notification-menubutton:not([label]) {
display: none;
}
/********** checkbox **********/
checkbox {
-moz-binding: url("chrome://global/content/bindings/checkbox.xml#checkbox");
}
/********** radio **********/
radiogroup {
-moz-box-orient: vertical;
}
radio {
-moz-binding: url("chrome://global/content/bindings/radio.xml#radio");
}
/******** 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 {
-moz-binding: url("chrome://global/content/bindings/menu.xml#menu-menubar");
}
menubar > menu.menu-iconic {
-moz-binding: url("chrome://global/content/bindings/menu.xml#menu-menubar-iconic");
}
menu {
-moz-binding: url("chrome://global/content/bindings/menu.xml#menu");
}
menu.menu-iconic {
-moz-binding: url("chrome://global/content/bindings/menu.xml#menu-iconic");
}
menubar > menu:empty {
visibility: collapse;
}
/********* menuitem ***********/
menuitem {
-moz-binding: url("chrome://global/content/bindings/menu.xml#menuitem");
}
menuitem.menuitem-iconic {
-moz-binding: url("chrome://global/content/bindings/menu.xml#menuitem-iconic");
}
menuitem[type="checkbox"],
menuitem[type="radio"] {
-moz-binding: url("chrome://global/content/bindings/menu.xml#menuitem-iconic");
}
menucaption {
-moz-binding: url("chrome://global/content/bindings/menu.xml#menucaption");
}
.menu-text {
-moz-box-flex: 1;
}
/********* popup & menupopup ***********/
/* <popup> is deprecated. Only <menupopup> and <tooltip> are still valid. */
popup,
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;
}
popup,
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");
}
%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"][side]: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);
}
panel[type="arrow"][side][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"][side][animate="cancel"] {
-moz-window-transform: none;
}
%elifndef MOZ_WIDGET_GTK
panel[type="arrow"][side] {
will-change: transform, opacity; /* workaround for bug 1414033 */
}
panel[type="arrow"][side]: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);
}
panel[type="arrow"][side][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"][side][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 ******/
tree {
-moz-binding: url("chrome://global/content/bindings/tree.xml#tree");
}
treecols {
-moz-binding: url("chrome://global/content/bindings/tree.xml#treecols");
}
treecol {
-moz-binding: url("chrome://global/content/bindings/tree.xml#treecol");
-moz-box-ordinal-group: 2147483646;
}
treecol.treecol-image {
-moz-binding: url("chrome://global/content/bindings/tree.xml#treecol-image");
}
tree > treechildren {
display: -moz-box;
-moz-binding: url("chrome://global/content/bindings/tree.xml#treebody");
-moz-user-select: none;
-moz-box-flex: 1;
}
treerows {
-moz-binding: url("chrome://global/content/bindings/tree.xml#treerows");
}
treecolpicker {
-moz-binding: url("chrome://global/content/bindings/tree.xml#columnpicker");
}
tree {
-moz-box-orient: vertical;
min-width: 0px;
min-height: 0px;
width: 10px;
height: 10px;
}
tree[hidecolumnpicker="true"] > treecols > treecolpicker {
display: none;
}
treecol {
min-width: 16px;
}
treecol[hidden="true"] {
visibility: collapse;
display: -moz-box;
}
.tree-scrollable-columns {
/* Yes, Virginia, this makes it scrollable */
overflow: hidden;
}
/* ::::: 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-binding: url("chrome://global/content/bindings/tabbox.xml#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[multiline="true"] {
-moz-binding: url("chrome://global/content/bindings/textbox.xml#textarea");
}
html|textarea.textbox-textarea {
resize: none;
}
textbox[resizable="true"] > moz-input-box > html|textarea.textbox-textarea {
resize: both;
}
textbox[type="search"] {
-moz-binding: url("chrome://global/content/bindings/textbox.xml#search-textbox");
}
textbox[type="number"] {
-moz-binding: url("chrome://global/content/bindings/numberbox.xml#numberbox");
}
@supports -moz-bool-pref("layout.css.emulate-moz-box-with-flex") {
html|*.textbox-input,
html|*.textbox-textarea {
/* 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: url("chrome://global/content/bindings/autocomplete.xml#autocomplete-rich-result-popup");
}
.autocomplete-richlistbox {
-moz-binding: url("chrome://global/content/bindings/autocomplete.xml#autocomplete-richlistbox");
-moz-user-focus: ignore;
}
.autocomplete-richlistbox > scrollbox {
overflow-x: hidden !important;
}
.autocomplete-richlistitem {
-moz-binding: url("chrome://global/content/bindings/autocomplete.xml#autocomplete-richlistitem");
-moz-box-orient: vertical;
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 {
-moz-binding: url("chrome://global/content/bindings/menulist.xml#menulist");
}
menulist[popuponly="true"] {
-moz-binding: url("chrome://global/content/bindings/menulist.xml#menulist-popuponly");
-moz-appearance: none !important;
margin: 0 !important;
height: 0 !important;
min-height: 0 !important;
border: 0 !important;
}
menulist > menupopup > menuitem {
-moz-binding: url("chrome://global/content/bindings/menu.xml#menuitem-iconic-noaccel");
}
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 {
-moz-binding: url("chrome://global/content/bindings/scrollbox.xml#scrollbox");
/* This makes it scrollable! */
overflow: hidden;
}
scrollbox[smoothscroll=true] {
scroll-behavior: smooth;
}
arrowscrollbox {
-moz-binding: url("chrome://global/content/bindings/scrollbox.xml#arrowscrollbox");
}
arrowscrollbox[clicktoscroll="true"] {
-moz-binding: url("chrome://global/content/bindings/scrollbox.xml#arrowscrollbox-clicktoscroll");
}
/********** stringbundle **********/
stringbundle,
stringbundleset {
display: none;
}
/********** dialog **********/
dialog,
dialog:root /* override :root from above */ {
-moz-binding: url("chrome://global/content/bindings/dialog.xml#dialog");
-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-binding: url("chrome://global/content/bindings/wizard.xml#wizardpage");
-moz-box-orient: vertical;
overflow: auto;
}
.wizard-header {
-moz-binding: url("chrome://global/content/bindings/wizard.xml#wizard-header");
}
.wizard-buttons {
-moz-binding: url("chrome://global/content/bindings/wizard.xml#wizard-buttons");
}
/********** Rich Listbox ********/
richlistbox {
-moz-binding: url('chrome://global/content/bindings/richlistbox.xml#richlistbox');
-moz-user-focus: normal;
-moz-box-orient: vertical;
}
richlistitem {
-moz-binding: url('chrome://global/content/bindings/richlistbox.xml#richlistitem');
}
/*********** findbar ************/
findbar {
overflow-x: hidden;
}
/*********** tabmodalprompt ************/
tabmodalprompt {
-moz-binding: url("chrome://global/content/tabprompts.xml#tabmodalprompt");
overflow: hidden;
text-shadow: none;
}
.button-highlightable-text:not([highlightable="true"]),
.button-text[highlightable="true"],
.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; }
}