1 /* This Source Code Form is subject to the terms of the Mozilla Public
2 * License, v. 2.0. If a copy of the MPL was not distributed with this
3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
6 * A minimal set of rules for the XUL elements that may be implicitly created
7 * as part of HTML/SVG documents (e.g. scrollbars) can be found over in
8 * minimal-xul.css. Rules for everything else related to XUL can be found in
9 * this file. Make sure you choose the correct style sheet when adding new
10 * rules. (This split of the XUL rules is to minimize memory use and improve
11 * performance in HTML/SVG documents.)
13 * This file should also not contain any app specific styling. Defaults for
14 * widgets of a particular application should be in that application's style
15 * sheet. For example, style definitions for navigator can be found in
18 * THIS FILE IS LOCKED DOWN. YOU ARE NOT ALLOWED TO MODIFY IT WITHOUT FIRST
19 * HAVING YOUR CHANGES REVIEWED BY enndeakin@gmail.com
22 @import url
("chrome://global/skin/tooltip.css");
24 @namespace url
("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */
25 @namespace html url
("http://www.w3.org/1999/xhtml"); /* namespace for HTML elements */
27 /* TODO: investigate unifying these two root selectors
28 * https://bugzilla.mozilla.org/show_bug.cgi?id=1592344
31 --animation-easing-function: cubic-bezier
(.07, .95, 0, 1);
35 text-rendering: optimizeLegibility
;
36 -moz-control-character-visibility: visible
;
39 :root:-moz-locale-dir
(rtl
) {
44 * Native anonymous popups and tooltips in html are document-level, which means
45 * that they don't inherit from the root, so this is needed.
47 popupgroup:-moz-native-anonymous:-moz-locale-dir
(rtl
),
48 tooltip:-moz-native-anonymous:-moz-locale-dir
(rtl
) {
53 :: Rules for 'hiding' portions of the chrome for special
54 :: kinds of windows (not JUST browser windows) with toolbars
57 *|
*:root
[chromehidden
~="menubar"] .chromeclass-menubar
,
58 *|
*:root
[chromehidden
~="directories"] .chromeclass-directories
,
59 *|
*:root
[chromehidden
~="status"] .chromeclass-status
,
60 *|
*:root
[chromehidden
~="extrachrome"] .chromeclass-extrachrome
,
61 *|
*:root
[chromehidden
~="location"] .chromeclass-location
,
62 *|
*:root
[chromehidden
~="location"][chromehidden
~="toolbar"] .chromeclass-toolbar
,
63 *|
*:root
[chromehidden
~="toolbar"] .chromeclass-toolbar-additional
{
68 :: Rules for forcing direction for entry and display of URIs
73 direction: ltr
!important
;
76 /****** elements that have no visual representation ******/
78 script
, data
, commandset
, command
,
79 broadcasterset
, broadcaster
, observes
,
80 keyset
, key
, toolbarpalette
, template
,
81 treeitem
, treeseparator
, treerow
, treecell
{
85 /********** focus rules **********/
95 -moz-user-focus: normal
;
98 /******** window & page ******/
101 overflow: -moz-hidden-unscrollable
;
102 -moz-box-orient: vertical
;
105 /******** box *******/
108 -moz-box-orient: vertical
;
111 /********** label **********/
112 label
.text-link
, label
[onclick
] {
113 -moz-user-focus: normal
;
116 label html|span
.accesskey
{
117 text-decoration: underline
;
120 /********** toolbarbutton **********/
122 toolbarbutton:not
([type
="menu"]) > .toolbarbutton-menu-dropmarker
,
123 toolbar
[mode
="icons"] .toolbarbutton-text
,
124 toolbar
[mode
="icons"] .toolbarbutton-multiline-text
,
125 toolbar
[mode
="text"] .toolbarbutton-icon
,
126 .toolbarbutton-multiline-text:not
([wrap
="true"]),
127 .toolbarbutton-text
[wrap
="true"],
128 html|label
.toolbarbutton-badge:empty
{
132 /******** browser, editor, iframe ********/
140 @supports -moz-bool-pref
("layout.css.emulate-moz-box-with-flex") {
148 /*********** popup notification ************/
150 -moz-box-orient: vertical
;
153 .popup-notification-menubutton:not([label]) {
157 /********** radio **********/
160 -moz-box-orient: vertical
;
163 /******** groupbox *********/
166 -moz-box-orient: vertical
;
169 /******** draggable elements *********/
171 %ifndef MOZ_WIDGET_GTK
173 toolbar:not
([nowindowdrag
="true"]):not
([customizing
="true"]) {
174 -moz-window-dragging: drag
;
178 /* The list below is non-comprehensive and will probably need some tweaking. */
189 -moz-window-dragging: no-drag
;
193 pointer-events: auto
!important
;
196 /******* toolbar *******/
199 -moz-box-orient: vertical
;
203 toolbar
[type
="menubar"] {
204 min-height: 0 !important
;
205 border: 0 !important
;
213 /********* menu ***********/
215 menubar
> menu:empty
{
216 visibility: collapse
;
223 /********* menupopup, panel, & tooltip ***********/
227 -moz-box-orient: vertical
;
239 -moz-box-orient: vertical
;
240 white-space: pre-wrap
;
244 @supports -moz-bool-pref
("xul.panel-animations.enabled") {
245 %ifdef MOZ_WIDGET_COCOA
246 /* On Mac, use the properties "-moz-window-transform" and "-moz-window-opacity"
247 instead of "transform" and "opacity" for these animations.
248 The -moz-window* properties apply to the whole window including the window's
249 shadow, and they don't affect the window's "shape", so the system doesn't
250 have to recompute the shadow shape during the animation. This makes them a
251 lot faster. In fact, Gecko no longer triggers shadow shape recomputations
253 These properties are not implemented on other platforms. */
254 panel
[type
="arrow"]:not
([animate
="false"]) {
255 -moz-window-opacity: 0;
256 -moz-window-transform: translateY
(-70px);
257 transition-property: -moz-window-transform
, -moz-window-opacity
;
258 transition-duration: 0.18s, 0.18s;
259 transition-timing-function:
260 var
(--animation-easing-function
), ease-out
;
263 panel
[type
="arrow"][side
="bottom"]:not
([animate
="false"]) {
264 -moz-window-transform: translateY
(70px);
267 /* [animate] is here only so that this rule has greater specificity than the
268 * rule right above */
269 panel
[type
="arrow"][animate
][animate
="open"] {
270 -moz-window-opacity: 1.0;
271 transition-duration: 0.18s, 0.18s;
272 -moz-window-transform: none
;
273 transition-timing-function:
274 var
(--animation-easing-function
), ease-in-out
;
277 panel
[type
="arrow"][animate
][animate
="cancel"] {
278 -moz-window-transform: none
;
281 panel
[type
="arrow"]:not
([animate
="false"]) {
283 transform: translateY
(-70px);
284 transition-property: transform
, opacity
;
285 transition-duration: 0.18s, 0.18s;
286 transition-timing-function:
287 var
(--animation-easing-function
), ease-out
;
290 panel
[type
="arrow"][side
="bottom"]:not
([animate
="false"]) {
291 transform: translateY
(70px);
294 /* [animate] is here only so that this rule has greater specificity than the
295 * rule right above */
296 panel
[type
="arrow"][animate
][animate
="open"] {
298 transition-duration: 0.18s, 0.18s;
300 transition-timing-function:
301 var
(--animation-easing-function
), ease-in-out
;
304 panel
[type
="arrow"][animate
][animate
="cancel"] {
310 panel
[type
="arrow"][animating
] {
311 pointer-events: none
;
314 /******** grid **********/
322 display: -moz-grid-group
;
327 display: -moz-grid-line
;
332 -moz-box-orient: vertical
;
335 /******** tree ******/
338 -moz-box-ordinal-group: 2147483646;
343 -moz-user-select: none
;
348 -moz-box-orient: vertical
;
353 tree
[hidecolumnpicker
="true"] treecolpicker
{
361 treecol
[hidden
="true"] {
362 visibility: collapse
;
366 /* ::::: lines connecting cells ::::: */
367 tree:not
([treelines
="true"]) treechildren::-moz-tree-line
{
371 treechildren::-moz-tree-cell
(ltr
) {
372 direction: ltr
!important
;
375 /********** deck & stack *********/
391 The default `min-height: auto` value makes grid items refuse to be smaller
392 than their content. This doesn't match the traditional behavior of XUL stack,
393 which often shoehorns tall content into a smaller stack and allows the content
394 to decide how to handle overflow (e.g. by scaling down if it's an image, or
395 by adding scrollbars if it's scrollable).
400 /********** tabbox *********/
403 -moz-box-orient: vertical
;
407 -moz-box-orient: horizontal
;
411 -moz-box-align: center
;
412 -moz-box-pack: center
;
415 tab
[selected
="true"]:not
([ignorefocus
="true"]) {
416 -moz-user-focus: normal
;
423 /********** tooltip *********/
425 tooltip
[titletip
="true"] {
426 /* The width of the tooltip isn't limited on cropped <tree> cells. */
430 /********** basic rule for anonymous content that needs to pass box properties through
431 ********** to an insertion point parent that holds the real kids **************/
434 -moz-box-orient: inherit
;
435 -moz-box-pack: inherit
;
436 -moz-box-align: inherit
;
437 -moz-box-direction: inherit
;
440 /********** textbox **********/
443 -moz-user-select: text
;
447 /* Prefix with (xul|*):root to workaround HTML tests loading xul.css */
448 :root html|
textarea:not
([resizable
="true"]) {
452 @supports -moz-bool-pref
("layout.css.emulate-moz-box-with-flex") {
453 html|
*.textbox-input
{
454 /* Be block-level, so that -moz-box-flex can take effect, when we are an item
455 in a -moz-box being emulated by modified modern flex. */
460 /********** autocomplete textbox **********/
462 /* SeaMonkey uses its own autocomplete and the toolkit's autocomplete widget */
465 .autocomplete-richlistbox {
466 -moz-user-focus: ignore
;
467 overflow-x: hidden
!important
;
470 .autocomplete-richlistitem {
471 -moz-box-orient: vertical
;
472 -moz-box-align: center
;
473 overflow: -moz-hidden-unscrollable
;
478 /* The following rule is here to fix bug 96899 (and now 117952).
479 Somehow trees create a situation
480 in which a popupset flows itself as if its popup child is directly within it
481 instead of the placeholder child that should actually be inside the popupset.
482 This is a stopgap measure, and it does not address the real bug. */
483 .autocomplete-result-popupset {
490 /********** menulist **********/
492 menulist
[popuponly
="true"] {
493 -moz-appearance: none
!important
;
494 margin: 0 !important
;
495 height: 0 !important
;
496 min-height: 0 !important
;
497 border: 0 !important
;
500 /********** splitter **********/
505 min-width: 0% ! important
;
506 min-height: 0% ! important
;
507 -moz-box-ordinal-group: 2147483646;
510 /******** scrollbar ********/
513 /* This is a hint to layerization that the scrollbar thumb can never leave
514 the scrollbar track. */
518 /******** scrollbox ********/
521 /* This makes it scrollable! */
525 scrollbox
[smoothscroll
=true
] {
526 scroll-behavior: smooth
;
529 /********** stringbundle **********/
536 /********** dialog **********/
540 -moz-box-orient: vertical
;
543 /********** wizard **********/
547 -moz-box-orient: vertical
;
553 -moz-box-orient: vertical
;
557 /********** Rich Listbox ********/
560 -moz-user-focus: normal
;
561 -moz-box-orient: vertical
;
564 /*********** findbar ************/
569 /*********** tabmodalprompt ************/
575 /* Some elements that in HTML blocks should be inline-level by default */
576 label
, button
, image
{
577 display: -moz-inline-box
;
580 .menulist-highlightable-label:not
([highlightable
="true"]),
581 .menulist-label
[highlightable
="true"],
582 .menu-iconic-highlightable-text:not
([highlightable
="true"]),
583 .menu-iconic-text[highlightable="true"] {
587 [orient
="vertical"] { -moz-box-orient: vertical
!important
; }
588 [orient
="horizontal"] { -moz-box-orient: horizontal
!important
; }
590 [align
="start"] { -moz-box-align: start
!important
; }
591 [align
="center"] { -moz-box-align: center
!important
; }
592 [align
="end"] { -moz-box-align: end
!important
; }
593 [align
="baseline"] { -moz-box-align: baseline
!important
; }
594 [align
="stretch"] { -moz-box-align: stretch
!important
; }
596 [pack
="start"] { -moz-box-pack: start
!important
; }
597 [pack
="center"] { -moz-box-pack: center
!important
; }
598 [pack
="end"] { -moz-box-pack: end
!important
; }
600 @supports -moz-bool-pref
("layout.css.emulate-moz-box-with-flex") {
601 /* This isn't a real solution for [flex] and [ordinal], but it covers enough
602 cases to render the browser chrome for us to test emulated flex mode without
603 mass-changing existing markup and CSS.
604 If we get attr() in Bug 435426 this could work for all cases. */
605 [flex
="1"] { -moz-box-flex: 1; }
606 [flex
="2"] { -moz-box-flex: 2; }
607 [flex
="3"] { -moz-box-flex: 3; }
608 [flex
="4"] { -moz-box-flex: 4; }
609 [flex
="5"] { -moz-box-flex: 5; }
610 [flex
="6"] { -moz-box-flex: 6; }
611 [flex
="7"] { -moz-box-flex: 7; }
612 [flex
="8"] { -moz-box-flex: 8; }
613 [flex
="9"] { -moz-box-flex: 9; }
614 [flex
="100"] { -moz-box-flex: 100; }
615 [flex
="400"] { -moz-box-flex: 400; }
616 [flex
="1000"] { -moz-box-flex: 1000; }
617 [flex
="10000"] { -moz-box-flex: 10000; }
619 [ordinal
="1"] { -moz-box-ordinal-group: 1; }
620 [ordinal
="2"] { -moz-box-ordinal-group: 2; }
621 [ordinal
="3"] { -moz-box-ordinal-group: 3; }
622 [ordinal
="4"] { -moz-box-ordinal-group: 4; }
623 [ordinal
="5"] { -moz-box-ordinal-group: 5; }
624 [ordinal
="6"] { -moz-box-ordinal-group: 6; }
625 [ordinal
="7"] { -moz-box-ordinal-group: 7; }
626 [ordinal
="8"] { -moz-box-ordinal-group: 8; }
627 [ordinal
="9"] { -moz-box-ordinal-group: 9; }
628 [ordinal
="1000"] { -moz-box-ordinal-group: 1000; }