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 browser can be found in
19 @namespace url
("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */
20 @namespace html url
("http://www.w3.org/1999/xhtml"); /* namespace for HTML elements */
22 /* TODO: investigate unifying these two root selectors
23 * https://bugzilla.mozilla.org/show_bug.cgi?id=1592344
26 --animation-easing-function: cubic-bezier
(.07, .95, 0, 1);
31 text-rendering: optimizeLegibility
;
32 -moz-control-character-visibility: visible
;
37 :root:-moz-locale-dir
(rtl
) {
41 /* XUL doesn't show outlines by default */
47 * Native anonymous popups and tooltips in html are document-level, which means
48 * that they don't inherit from the root, so this is needed.
50 popupgroup:-moz-native-anonymous:-moz-locale-dir
(rtl
),
51 tooltip:-moz-native-anonymous:-moz-locale-dir
(rtl
) {
56 :: Rules for 'hiding' portions of the chrome for special
57 :: kinds of windows (not JUST browser windows) with toolbars
60 *|
*:root
[chromehidden
~="menubar"] .chromeclass-menubar
,
61 *|
*:root
[chromehidden
~="directories"] .chromeclass-directories
,
62 *|
*:root
[chromehidden
~="status"] .chromeclass-status
,
63 *|
*:root
[chromehidden
~="extrachrome"] .chromeclass-extrachrome
,
64 *|
*:root
[chromehidden
~="location"] .chromeclass-location
,
65 *|
*:root
[chromehidden
~="location"][chromehidden
~="toolbar"] .chromeclass-toolbar
,
66 *|
*:root
[chromehidden
~="toolbar"] .chromeclass-toolbar-additional
{
71 :: Rules for forcing direction for entry and display of URIs
76 direction: ltr
!important
;
79 /****** elements that have no visual representation ******/
81 script
, data
, commandset
, command
,
82 broadcasterset
, broadcaster
, observes
,
83 keyset
, key
, toolbarpalette
, template
,
84 treeitem
, treeseparator
, treerow
, treecell
{
88 /********** focus rules **********/
99 label:is
(.text-link
, [onclick
]),
100 tab
[selected
="true"]:not
([ignorefocus
="true"]) {
101 -moz-user-focus: normal
;
104 /* Avoid losing focus on tabs by keeping them focusable, since some browser
105 * tests rely on this.
107 * TODO(emilio): Remove this and fix the tests / front-end code:
108 * * browser/base/content/test/general/browser_tabfocus.js
111 -moz-user-focus: normal
;
114 /******** window & page ******/
118 -moz-box-orient: vertical
;
121 /******** box *******/
124 -moz-box-orient: vertical
;
127 /********** label **********/
130 display: inline-block
;
137 label html|span
.accesskey
{
138 text-decoration: underline
;
139 text-decoration-skip-ink: none
;
142 /********** toolbarbutton **********/
144 toolbar
[mode
="icons"] .toolbarbutton-text
,
145 toolbar
[mode
="text"] .toolbarbutton-icon
,
146 html|label
.toolbarbutton-badge:empty
{
152 .toolbarbutton-badge-stack
,
153 .toolbarbutton-menu-dropmarker
,
155 /* Preserves legacy behavior */
156 pointer-events: none
;
159 /********** button **********/
162 -moz-default-appearance: button
;
166 /******** browser, editor, iframe ********/
174 @media (-moz-box-flexbox-emulation
) {
176 -moz-box-layout: flex
;
180 /* Allow the browser to shrink below its intrinsic size, to match legacy
184 justify-self: stretch
;
190 /*********** popup notification ************/
192 -moz-box-orient: vertical
;
195 .popup-notification-menubutton:not([label]) {
199 /********** radio **********/
202 -moz-box-orient: vertical
;
205 /******** groupbox *********/
208 -moz-box-orient: vertical
;
211 /******** draggable elements *********/
213 toolbar:not
([nowindowdrag
="true"], [customizing
="true"]) {
214 -moz-window-dragging: drag
;
217 /* The list below is non-comprehensive and will probably need some tweaking. */
229 -moz-window-dragging: no-drag
;
233 pointer-events: auto
!important
;
236 /******* toolbar *******/
239 -moz-box-orient: vertical
;
242 @media (-moz-platform: macos
) {
243 toolbar
[type
="menubar"] {
244 min-height: 0 !important
;
245 border: 0 !important
;
253 /********* menu ***********/
255 menubar
> menu:empty
{
256 visibility: collapse
;
263 /********* menupopup, panel, & tooltip ***********/
267 -moz-box-orient: vertical
;
280 -moz-default-appearance: tooltip
;
281 -moz-font-smoothing-background-color: -moz-mac-tooltip
;
283 -moz-box-orient: vertical
;
284 white-space: pre-wrap
;
286 background-color: InfoBackground
;
292 pointer-events: none
;
295 tooltip:not
([position
]) {
300 * It's important that these styles are in a UA sheet, because the default
301 * tooltip is native anonymous content
303 @media (-moz-platform: linux
) {
305 padding: 6px 10px; /* Matches Adwaita. */
310 @media (-moz-platform: windows
) {
316 @media
(-moz-windows-default-theme
) {
318 background-color: #f9f9fb;
320 border-color: #67676c;
324 @media
(prefers-color-scheme: dark
) {
326 background-color: #2b2a33;
328 border-color: #f9f9fb;
334 @supports -moz-bool-pref
("xul.panel-animations.enabled") {
335 @media (prefers-reduced-motion: no-preference
) {
336 @media (-moz-platform: macos
) {
337 /* On Mac, use the properties "-moz-window-transform" and "-moz-window-opacity"
338 instead of "transform" and "opacity" for these animations.
339 The -moz-window* properties apply to the whole window including the window's
340 shadow, and they don't affect the window's "shape", so the system doesn't
341 have to recompute the shadow shape during the animation. This makes them a
342 lot faster. In fact, Gecko no longer triggers shadow shape recomputations
344 These properties are not implemented on other platforms. */
345 panel
[type
="arrow"]:not
([animate
="false"]) {
346 transition-property: -moz-window-transform
, -moz-window-opacity
;
347 transition-duration: 0.18s, 0.18s;
348 transition-timing-function:
349 var
(--animation-easing-function
), ease-out
;
352 /* Only do the fade-in animation on pre-Big Sur to avoid missing shadows on
353 * Big Sur, see bug 1672091. */
354 @media
(-moz-mac-big-sur-theme: 0) {
355 panel
[type
="arrow"]:not
([animate
="false"]) {
356 -moz-window-opacity: 0;
357 -moz-window-transform: translateY
(-70px);
360 panel
[type
="arrow"][side
="bottom"]:not
([animate
="false"]) {
361 -moz-window-transform: translateY
(70px);
365 /* [animate] is here only so that this rule has greater specificity than the
366 * rule right above */
367 panel
[type
="arrow"][animate
][animate
="open"] {
368 -moz-window-opacity: 1.0;
369 transition-duration: 0.18s, 0.18s;
370 -moz-window-transform: none
;
371 transition-timing-function:
372 var
(--animation-easing-function
), ease-in-out
;
375 panel
[type
="arrow"][animate
][animate
="cancel"] {
376 -moz-window-opacity: 0;
377 -moz-window-transform: none
;
379 } /* end of macOS rules */
381 @media not
(-moz-platform: macos
) {
382 panel
[type
="arrow"]:not
([animate
="false"]) {
384 transform: translateY
(-70px);
385 transition-property: transform
, opacity
;
386 transition-duration: 0.18s, 0.18s;
387 transition-timing-function:
388 var
(--animation-easing-function
), ease-out
;
391 panel
[type
="arrow"][side
="bottom"]:not
([animate
="false"]) {
392 transform: translateY
(70px);
395 /* [animate] is here only so that this rule has greater specificity than the
396 * rule right above */
397 panel
[type
="arrow"][animate
][animate
="open"] {
399 transition-duration: 0.18s, 0.18s;
401 transition-timing-function:
402 var
(--animation-easing-function
), ease-in-out
;
405 panel
[type
="arrow"][animate
][animate
="cancel"] {
408 } /* end of non-macOS rules */
412 panel
[type
="arrow"][animating
] {
413 pointer-events: none
;
416 /******** tree ******/
419 -moz-box-ordinal-group: 2147483646;
429 -moz-box-orient: vertical
;
432 tree
[hidecolumnpicker
="true"] treecolpicker
{
440 treecol
[hidden
="true"] {
441 visibility: collapse
;
445 /* ::::: lines connecting cells ::::: */
446 tree:not
([treelines
="true"]) treechildren::-moz-tree-line
{
450 treechildren::-moz-tree-cell
(ltr
) {
451 direction: ltr
!important
;
454 /********** deck, tabpanels & stack *********/
456 tabpanels
> *|
*:not
(:-moz-native-anonymous
) {
457 /* tabpanels is special: we want to avoid displaying them, but we still want
458 * the hidden children to be accessible */
459 -moz-subtree-hidden-only-visually: 1;
462 deck
> *|
*:not
(:-moz-native-anonymous
) {
466 tabpanels
> .deck-selected
,
467 deck
> .deck-selected
{
468 -moz-subtree-hidden-only-visually: 0;
479 /* We shouldn't style native anonymous children like scrollbars or what not. */
480 tabpanels
> *|
*:not
(:-moz-native-anonymous
),
481 deck
> *|
*:not
(:-moz-native-anonymous
),
482 stack
> *|
*:not
(:-moz-native-anonymous
) {
487 The default `min-height: auto` value makes grid items refuse to be smaller
488 than their content. This doesn't match the traditional behavior of XUL stack,
489 which often shoehorns tall content into a smaller stack and allows the content
490 to decide how to handle overflow (e.g. by scaling down if it's an image, or
491 by adding scrollbars if it's scrollable).
496 /********** tabbox *********/
499 -moz-box-orient: vertical
;
503 -moz-box-orient: horizontal
;
507 -moz-box-align: center
;
508 -moz-box-pack: center
;
511 /********** tooltip *********/
513 tooltip
[titletip
="true"] {
514 /* The width of the tooltip isn't limited on cropped <tree> cells. */
518 /********** basic rule for anonymous content that needs to pass box properties through
519 ********** to an insertion point parent that holds the real kids **************/
522 -moz-box-orient: inherit
;
523 -moz-box-pack: inherit
;
524 -moz-box-align: inherit
;
525 -moz-box-direction: inherit
;
528 /********** textbox **********/
535 /* Prefix with (xul|*):root to workaround HTML tests loading xul.css */
536 :root html|
textarea:not
([resizable
="true"]) {
540 /********** autocomplete textbox **********/
542 .autocomplete-richlistbox {
543 -moz-user-focus: ignore
;
544 overflow-x: hidden
!important
;
548 .autocomplete-richlistitem {
549 -moz-box-orient: vertical
;
550 -moz-box-align: center
;
554 /* The following rule is here to fix bug 96899 (and now 117952).
555 Somehow trees create a situation
556 in which a popupset flows itself as if its popup child is directly within it
557 instead of the placeholder child that should actually be inside the popupset.
558 This is a stopgap measure, and it does not address the real bug. */
559 .autocomplete-result-popupset {
566 /********** menulist **********/
568 menulist
[popuponly
] {
569 appearance: none
!important
;
570 margin: 0 !important
;
571 height: 0 !important
;
572 min-height: 0 !important
;
573 border: 0 !important
;
576 /********** splitter **********/
581 appearance: none
!important
;
582 min-width: 0 !important
;
583 min-height: 0 !important
;
584 border: none
!important
;
585 -moz-box-ordinal-group: 2147483646;
588 /******** scrollbar ********/
591 /* This is a hint to layerization that the scrollbar thumb can never leave
592 the scrollbar track. */
596 /******** scrollbox ********/
599 /* This makes it scrollable! */
603 scrollbox
[smoothscroll
=true
] {
604 scroll-behavior: smooth
;
607 /********** stringbundle **********/
614 /********** dialog **********/
618 -moz-box-orient: vertical
;
621 /********** wizard **********/
625 -moz-box-orient: vertical
;
630 wizard
> wizardpage
{
635 wizard
> wizardpage:not
(.selected
) {
640 -moz-box-orient: vertical
;
644 /********** Rich Listbox ********/
647 -moz-box-orient: vertical
;
653 /*********** findbar ************/
656 contain: inline-size
;
659 /* Some elements that in HTML blocks should be inline-level by default */
661 display: -moz-inline-box
;
664 .menu-iconic-highlightable-text:not
([highlightable
="true"]),
665 .menu-iconic-text[highlightable="true"] {
669 [orient
="vertical"] { -moz-box-orient: vertical
!important
; }
670 [orient
="horizontal"] { -moz-box-orient: horizontal
!important
; }
672 [align
="start"] { -moz-box-align: start
!important
; }
673 [align
="center"] { -moz-box-align: center
!important
; }
674 [align
="end"] { -moz-box-align: end
!important
; }
675 [align
="baseline"] { -moz-box-align: baseline
!important
; }
676 [align
="stretch"] { -moz-box-align: stretch
!important
; }
678 [pack
="start"] { -moz-box-pack: start
!important
; }
679 [pack
="center"] { -moz-box-pack: center
!important
; }
680 [pack
="end"] { -moz-box-pack: end
!important
; }
682 [flex
="0"] { -moz-box-flex: 0 !important
; }
683 [flex
="1"] { -moz-box-flex: 1 !important
; }