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 * Rules for everything related to XUL except scrollbars can be found in this
9 * This file should also not contain any app specific styling. Defaults for
10 * widgets of a particular application should be in that application's style
11 * sheet. For example, style definitions for browser can be found in
15 @namespace url
("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */
16 @namespace html url
("http://www.w3.org/1999/xhtml"); /* namespace for HTML elements */
19 -moz-user-focus: ignore
;
21 box-sizing: border-box
;
24 /* hide the content and destroy the frame */
29 /* hide the content, but don't destroy the frames */
34 /* TODO: investigate unifying these two root selectors
35 * https://bugzilla.mozilla.org/show_bug.cgi?id=1592344
38 --animation-easing-function: cubic-bezier
(.07, .95, 0, 1);
40 -moz-box-collapse: legacy
;
44 text-rendering: optimizeLegibility
;
45 -moz-control-character-visibility: visible
;
51 :root:-moz-locale-dir
(rtl
) {
55 /* XUL doesn't show outlines by default */
61 * Native anonymous popups and tooltips in html are document-level, which means
62 * that they don't inherit from the root, so this is needed.
64 popupgroup:-moz-native-anonymous:-moz-locale-dir
(rtl
),
65 tooltip:-moz-native-anonymous:-moz-locale-dir
(rtl
) {
70 :: Rules for 'hiding' portions of the chrome for special
71 :: kinds of windows (not JUST browser windows) with toolbars
74 *|
*:root
[chromehidden
~="menubar"] .chromeclass-menubar
,
75 *|
*:root
[chromehidden
~="directories"] .chromeclass-directories
,
76 *|
*:root
[chromehidden
~="status"] .chromeclass-status
,
77 *|
*:root
[chromehidden
~="extrachrome"] .chromeclass-extrachrome
,
78 *|
*:root
[chromehidden
~="location"] .chromeclass-location
,
79 *|
*:root
[chromehidden
~="location"][chromehidden
~="toolbar"] .chromeclass-toolbar
,
80 *|
*:root
[chromehidden
~="toolbar"] .chromeclass-toolbar-additional
{
85 :: Rules for forcing direction for entry and display of URIs
90 direction: ltr
!important
;
93 /****** elements that have no visual representation ******/
95 script
, data
, commandset
, command
,
96 broadcasterset
, broadcaster
, observes
,
97 keyset
, key
, toolbarpalette
, template
,
98 treeitem
, treeseparator
, treerow
, treecell
{
102 /********** focus rules **********/
113 label:is
(.text-link
, [onclick
]),
114 tab
[selected
="true"]:not
([ignorefocus
="true"]) {
115 -moz-user-focus: normal
;
118 /* Avoid losing focus on tabs by keeping them focusable, since some browser
119 * tests rely on this.
121 * TODO(emilio): Remove this and fix the tests / front-end code:
122 * * browser/base/content/test/general/browser_tabfocus.js
125 -moz-user-focus: normal
;
128 /******** window & page ******/
132 flex-direction: column
;
135 /******** box *******/
138 flex-direction: column
;
141 /********** label **********/
144 display: inline-block
;
151 label html|span
.accesskey
{
152 text-decoration: underline
;
153 text-decoration-skip-ink: none
;
156 description:where
([value
]) {
157 /* Preserves legacy behavior, maybe could be removed */
161 label:where
([value
]) {
162 /* Preserves legacy behavior, maybe could be removed */
163 display: inline-flex
;
166 :is
(label
, description
)[value
] {
170 :is
(label
, description
)[value
]::before
{
171 /* This displays the value attribute, along with the underlined
172 * accesskey if needed */
173 content: -moz-label-content
;
177 label
[value
=""]::before
{
178 content: "\200b" !important
; /* zwsp */
181 :is
(label
, description
)[value
][crop
] {
185 :is
(label
, description
)[value
][crop
]::before
{
188 /* This implements crop=end */
190 text-overflow: ellipsis
;
193 /* Invert the direction to clip at the start rather than end */
194 :is
(label
, description
)[value
][crop
="start"]::before
{
196 /* Mark text as ltr to preserve punctuation/numeric order */
197 content: "\200e" -moz-label-content
;
200 :is
(label
, description
)[value
][crop
="start"]:-moz-locale-dir
(rtl
)::before
{
202 /* Mark text as rtl to preserve punctuation/numeric order */
203 content: "\200f" -moz-label-content
;
211 /********** toolbarbutton **********/
215 justify-content: center
;
218 toolbarbutton
.tabbable
{
219 -moz-user-focus: normal
!important
;
222 toolbarbutton
[crop
] {
226 .toolbarbutton-text {
231 toolbar
[mode
="icons"] .toolbarbutton-text
,
232 toolbar
[mode
="text"] .toolbarbutton-icon
,
233 html|label
.toolbarbutton-badge:empty
{
239 .toolbarbutton-badge-stack
,
240 .toolbarbutton-menu-dropmarker
,
242 .treecol-sortdirection
,
247 .menu-iconic-highlightable-text
,
250 .menu-accel-container
,
252 /* Preserves legacy behavior */
253 pointer-events: none
;
256 /********** button **********/
259 -moz-default-appearance: button
;
263 /******** browser, editor, iframe ********/
271 /* Allow the browser to shrink below its intrinsic size, to match legacy
275 justify-self: stretch
;
281 /*********** popup notification ************/
283 flex-direction: column
;
286 .popup-notification-menubutton:not([label]) {
290 /********** radio **********/
293 flex-direction: column
;
296 /******** groupbox *********/
299 flex-direction: column
;
302 /******** draggable elements *********/
304 toolbar:not
([nowindowdrag
="true"], [customizing
="true"]) {
305 -moz-window-dragging: drag
;
308 /* The list below is non-comprehensive and will probably need some tweaking. */
320 -moz-window-dragging: no-drag
;
324 pointer-events: auto
!important
;
327 /******* toolbar *******/
330 flex-direction: column
;
333 @media (-moz-platform: macos
) {
334 toolbar
[type
="menubar"] {
335 min-height: 0 !important
;
336 border: 0 !important
;
344 /********* menu ***********/
346 menubar
> menu:empty
{
347 visibility: collapse
;
354 /********* menupopup, panel, & tooltip ***********/
358 flex-direction: column
;
368 /* Popups can't have overflow */
376 -moz-default-appearance: tooltip
;
377 -moz-font-smoothing-background-color: -moz-mac-tooltip
;
379 white-space: pre-wrap
;
381 background-color: InfoBackground
;
387 pointer-events: none
;
390 tooltip:not
([position
]) {
395 * It's important that these styles are in a UA sheet, because the default
396 * tooltip is native anonymous content
398 @media (-moz-platform: linux
) {
400 padding: 6px 10px; /* Matches Adwaita. */
401 line-height: 1.4; /* For Noto Sans; note that 1.2 may clip descenders. */
405 @media (-moz-platform: windows
) {
411 /* TODO(emilio): Probably make InfoText/InfoBackground do the right thing and
413 @media not
(prefers-contrast
) {
415 background-color: #f9f9fb;
417 border-color: #67676c;
421 @media
(prefers-color-scheme: dark
) {
423 background-color: #2b2a33;
425 border-color: #f9f9fb;
431 @media (-moz-panel-animations
) and
(prefers-reduced-motion: no-preference
) {
432 @media (-moz-platform: macos
) {
433 /* On Mac, use the properties "-moz-window-transform" and "-moz-window-opacity"
434 instead of "transform" and "opacity" for these animations.
435 The -moz-window* properties apply to the whole window including the window's
436 shadow, and they don't affect the window's "shape", so the system doesn't
437 have to recompute the shadow shape during the animation. This makes them a
438 lot faster. In fact, Gecko no longer triggers shadow shape recomputations
440 These properties are not implemented on other platforms. */
441 panel
[type
="arrow"]:not
([animate
="false"]) {
442 transition-property: -moz-window-transform
, -moz-window-opacity
;
443 transition-duration: 0.18s, 0.18s;
444 transition-timing-function:
445 var
(--animation-easing-function
), ease-out
;
448 /* Only do the fade-in animation on pre-Big Sur to avoid missing shadows on
449 * Big Sur, see bug 1672091. */
450 @media
(-moz-mac-big-sur-theme: 0) {
451 panel
[type
="arrow"]:not
([animate
="false"]) {
452 -moz-window-opacity: 0;
453 -moz-window-transform: translateY
(-70px);
456 panel
[type
="arrow"][side
="bottom"]:not
([animate
="false"]) {
457 -moz-window-transform: translateY
(70px);
461 /* [animate] is here only so that this rule has greater specificity than the
462 * rule right above */
463 panel
[type
="arrow"][animate
][animate
="open"] {
464 -moz-window-opacity: 1.0;
465 transition-duration: 0.18s, 0.18s;
466 -moz-window-transform: none
;
467 transition-timing-function:
468 var
(--animation-easing-function
), ease-in-out
;
471 panel
[type
="arrow"][animate
][animate
="cancel"] {
472 -moz-window-opacity: 0;
473 -moz-window-transform: none
;
475 } /* end of macOS rules */
477 @media not
(-moz-platform: macos
) {
478 panel
[type
="arrow"]:not
([animate
="false"]) {
480 transform: translateY
(-70px);
481 transition-property: transform
, opacity
;
482 transition-duration: 0.18s, 0.18s;
483 transition-timing-function:
484 var
(--animation-easing-function
), ease-out
;
485 will-change: transform
, opacity
;
488 panel
[type
="arrow"][side
="bottom"]:not
([animate
="false"]) {
489 transform: translateY
(70px);
492 /* [animate] is here only so that this rule has greater specificity than the
493 * rule right above */
494 panel
[type
="arrow"][animate
][animate
="open"] {
496 transition-duration: 0.18s, 0.18s;
498 transition-timing-function:
499 var
(--animation-easing-function
), ease-in-out
;
502 panel
[type
="arrow"][animate
][animate
="cancel"] {
505 } /* end of non-macOS rules */
508 panel
[type
="arrow"][animating
] {
509 pointer-events: none
;
512 /******** tree ******/
524 flex-direction: column
;
527 tree
[hidecolumnpicker
="true"] treecolpicker
{
533 /* This preserves the behavior of -moz-box-ordinal-group. To change this we'd
534 * need to migrate the persisted ordinal values etc. */
538 treecol
[hidden
="true"] {
539 visibility: collapse
;
543 /* ::::: lines connecting cells ::::: */
544 tree:not
([treelines
="true"]) treechildren::-moz-tree-line
{
548 treechildren::-moz-tree-cell
(ltr
) {
549 direction: ltr
!important
;
552 /********** deck, tabpanels & stack *********/
554 tabpanels
> *|
*:not
(:-moz-native-anonymous
) {
555 /* tabpanels is special: we want to avoid displaying them, but we still want
556 * the hidden children to be accessible */
557 -moz-subtree-hidden-only-visually: 1;
560 deck
> *|
*:not
(:-moz-native-anonymous
) {
564 tabpanels
> .deck-selected
,
565 deck
> .deck-selected
{
566 -moz-subtree-hidden-only-visually: 0;
577 /* We shouldn't style native anonymous children like scrollbars or what not. */
578 tabpanels
> *|
*:not
(:-moz-native-anonymous
),
579 deck
> *|
*:not
(:-moz-native-anonymous
),
580 stack
> *|
*:not
(:-moz-native-anonymous
) {
585 The default `min-height: auto` value makes grid items refuse to be smaller
586 than their content. This doesn't match the traditional behavior of XUL stack,
587 which often shoehorns tall content into a smaller stack and allows the content
588 to decide how to handle overflow (e.g. by scaling down if it's an image, or
589 by adding scrollbars if it's scrollable).
594 /********** tabbox *********/
597 flex-direction: column
;
611 justify-content: center
;
614 /********** tooltip *********/
616 tooltip
[titletip
="true"] {
617 /* The width of the tooltip isn't limited on cropped <tree> cells. */
621 /********** basic rule for anonymous content that needs to pass box properties through
622 ********** to an insertion point parent that holds the real kids **************/
625 align-items: inherit
;
626 justify-content: inherit
;
628 flex-shrink: inherit
;
629 flex-direction: inherit
;
632 /********** textbox **********/
638 /* Prefix with (xul|*):root to workaround HTML tests loading xul.css */
639 :root html|
textarea:not
([resizable
="true"]) {
643 /********** autocomplete textbox **********/
645 .autocomplete-richlistbox {
646 -moz-user-focus: ignore
;
647 overflow-x: hidden
!important
;
651 .autocomplete-richlistitem {
652 flex-direction: column
;
657 /* The following rule is here to fix bug 96899 (and now 117952).
658 Somehow trees create a situation
659 in which a popupset flows itself as if its popup child is directly within it
660 instead of the placeholder child that should actually be inside the popupset.
661 This is a stopgap measure, and it does not address the real bug. */
662 .autocomplete-result-popupset {
669 /********** menulist **********/
671 menulist
[popuponly
] {
672 appearance: none
!important
;
673 margin: 0 !important
;
674 height: 0 !important
;
675 min-height: 0 !important
;
676 border: 0 !important
;
677 padding: 0 !important
;
680 /********** splitter **********/
687 appearance: none
!important
;
688 border: none
!important
;
689 background: none
!important
;
694 /******** scrollbar ********/
697 /* This is a hint to layerization that the scrollbar thumb can never leave
698 the scrollbar track. */
702 /******** scrollbox ********/
705 /* This makes it scrollable! */
709 @media (prefers-reduced-motion: no-preference
) {
710 scrollbox
[smoothscroll
=true
] {
711 scroll-behavior: smooth
;
715 /********** stringbundle **********/
722 /********** dialog **********/
726 flex-direction: column
;
729 /********** wizard **********/
733 flex-direction: column
;
734 contain: inline-size
;
739 wizard
> wizardpage
{
744 wizard
> wizardpage:not
(.selected
) {
749 flex-direction: column
;
753 /********** Rich Listbox ********/
756 flex-direction: column
;
766 /*********** findbar ************/
769 contain: inline-size
;
772 /* Some elements that in HTML blocks should be inline-level by default */
774 display: inline-flex
;
777 .menu-iconic-highlightable-text:not
([highlightable
="true"]),
778 .menu-iconic-text[highlightable="true"] {
782 [orient
="vertical"] { flex-direction: column
!important
; }
783 [orient
="horizontal"] { flex-direction: row
!important
; }
785 [align
="start"] { align-items: flex-start
!important
; }
786 [align
="center"] { align-items: center
!important
; }
787 [align
="end"] { align-items: flex-end
!important
; }
788 [align
="baseline"] { align-items: baseline
!important
; }
789 [align
="stretch"] { align-items: stretch
!important
; }
791 [pack
="start"] { justify-content: start
!important
; }
792 [pack
="center"] { justify-content: center
!important
; }
793 [pack
="end"] { justify-content: flex-end
!important
; }
795 [flex
="0"] { flex: none
!important
; }
796 [flex
="1"] { flex: 1 !important
; }