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
;
264 -moz-default-appearance: -moz-menulist-arrow-button
;
268 /******** browser, editor, iframe ********/
276 /* Allow the browser to shrink below its intrinsic size, to match legacy
280 justify-self: stretch
;
286 /*********** popup notification ************/
288 flex-direction: column
;
291 .popup-notification-menubutton:not([label]) {
295 /********** radio **********/
298 flex-direction: column
;
301 /******** groupbox *********/
304 flex-direction: column
;
307 /******** draggable elements *********/
309 toolbar:not
([nowindowdrag
="true"], [customizing
="true"]) {
310 -moz-window-dragging: drag
;
313 /* The list below is non-comprehensive and will probably need some tweaking. */
325 -moz-window-dragging: no-drag
;
329 pointer-events: auto
!important
;
332 /******* toolbar *******/
335 flex-direction: column
;
338 @media (-moz-platform: macos
) {
339 toolbar
[type
="menubar"] {
340 min-height: 0 !important
;
341 border: 0 !important
;
349 /********* menu ***********/
351 menubar
> menu:empty
{
352 visibility: collapse
;
359 /********* menupopup, panel, & tooltip ***********/
363 flex-direction: column
;
373 /* Popups can't have overflow */
381 -moz-default-appearance: tooltip
;
383 white-space: pre-wrap
;
385 background-color: InfoBackground
;
391 pointer-events: none
;
394 tooltip:not
([position
]) {
399 * It's important that these styles are in a UA sheet, because the default
400 * tooltip is native anonymous content
402 @media (-moz-platform: linux
) {
404 padding: 6px 10px; /* Matches Adwaita. */
405 line-height: 1.4; /* For Noto Sans; note that 1.2 may clip descenders. */
409 @media (-moz-platform: windows
) {
415 /* TODO(emilio): Probably make InfoText/InfoBackground do the right thing and
417 @media not
(prefers-contrast
) {
419 background-color: #f9f9fb;
421 border-color: #67676c;
425 @media
(prefers-color-scheme: dark
) {
427 background-color: #2b2a33;
429 border-color: #f9f9fb;
435 @media (-moz-panel-animations
) and
(prefers-reduced-motion: no-preference
) {
436 @media (-moz-platform: macos
) {
437 /* On Mac, use the properties "-moz-window-transform" and "-moz-window-opacity"
438 instead of "transform" and "opacity" for these animations.
439 The -moz-window* properties apply to the whole window including the window's
440 shadow, and they don't affect the window's "shape", so the system doesn't
441 have to recompute the shadow shape during the animation. This makes them a
442 lot faster. In fact, Gecko no longer triggers shadow shape recomputations
444 These properties are not implemented on other platforms. */
445 panel
[type
="arrow"]:not
([animate
="false"]) {
446 transition-property: -moz-window-transform
, -moz-window-opacity
;
447 transition-duration: 0.18s, 0.18s;
448 transition-timing-function:
449 var
(--animation-easing-function
), ease-out
;
452 /* Only do the fade-in animation on pre-Big Sur to avoid missing shadows on
453 * Big Sur, see bug 1672091. */
454 @media
(-moz-mac-big-sur-theme: 0) {
455 panel
[type
="arrow"]:not
([animate
="false"]) {
456 -moz-window-opacity: 0;
457 -moz-window-transform: translateY
(-70px);
460 panel
[type
="arrow"][side
="bottom"]:not
([animate
="false"]) {
461 -moz-window-transform: translateY
(70px);
465 /* [animate] is here only so that this rule has greater specificity than the
466 * rule right above */
467 panel
[type
="arrow"][animate
][animate
="open"] {
468 -moz-window-opacity: 1.0;
469 transition-duration: 0.18s, 0.18s;
470 -moz-window-transform: none
;
471 transition-timing-function:
472 var
(--animation-easing-function
), ease-in-out
;
475 panel
[type
="arrow"][animate
][animate
="cancel"] {
476 -moz-window-opacity: 0;
477 -moz-window-transform: none
;
479 } /* end of macOS rules */
481 @media not
(-moz-platform: macos
) {
482 panel
[type
="arrow"]:not
([animate
="false"]) {
484 transform: translateY
(-70px);
485 transition-property: transform
, opacity
;
486 transition-duration: 0.18s, 0.18s;
487 transition-timing-function:
488 var
(--animation-easing-function
), ease-out
;
489 will-change: transform
, opacity
;
492 panel
[type
="arrow"][side
="bottom"]:not
([animate
="false"]) {
493 transform: translateY
(70px);
496 /* [animate] is here only so that this rule has greater specificity than the
497 * rule right above */
498 panel
[type
="arrow"][animate
][animate
="open"] {
500 transition-duration: 0.18s, 0.18s;
502 transition-timing-function:
503 var
(--animation-easing-function
), ease-in-out
;
506 panel
[type
="arrow"][animate
][animate
="cancel"] {
509 } /* end of non-macOS rules */
512 panel
[type
="arrow"][animating
] {
513 pointer-events: none
;
516 /******** tree ******/
528 flex-direction: column
;
531 tree
[hidecolumnpicker
="true"] treecolpicker
{
537 /* This preserves the behavior of -moz-box-ordinal-group. To change this we'd
538 * need to migrate the persisted ordinal values etc. */
542 treecol
[hidden
="true"] {
543 visibility: collapse
;
547 /* ::::: lines connecting cells ::::: */
548 tree:not
([treelines
="true"]) treechildren::-moz-tree-line
{
552 treechildren::-moz-tree-cell
(ltr
) {
553 direction: ltr
!important
;
556 /********** deck, tabpanels & stack *********/
558 tabpanels
> *|
*:not
(:-moz-native-anonymous
) {
559 /* tabpanels is special: we want to avoid displaying them, but we still want
560 * the hidden children to be accessible */
561 -moz-subtree-hidden-only-visually: 1;
564 deck
> *|
*:not
(:-moz-native-anonymous
) {
568 tabpanels
> .deck-selected
,
569 deck
> .deck-selected
{
570 -moz-subtree-hidden-only-visually: 0;
581 /* We shouldn't style native anonymous children like scrollbars or what not. */
582 tabpanels
> *|
*:not
(:-moz-native-anonymous
),
583 deck
> *|
*:not
(:-moz-native-anonymous
),
584 stack
> *|
*:not
(:-moz-native-anonymous
) {
589 The default `min-height: auto` value makes grid items refuse to be smaller
590 than their content. This doesn't match the traditional behavior of XUL stack,
591 which often shoehorns tall content into a smaller stack and allows the content
592 to decide how to handle overflow (e.g. by scaling down if it's an image, or
593 by adding scrollbars if it's scrollable).
598 /********** tabbox *********/
601 flex-direction: column
;
615 justify-content: center
;
618 /********** tooltip *********/
620 tooltip
[titletip
="true"] {
621 /* The width of the tooltip isn't limited on cropped <tree> cells. */
625 /********** basic rule for anonymous content that needs to pass box properties through
626 ********** to an insertion point parent that holds the real kids **************/
629 align-items: inherit
;
630 justify-content: inherit
;
632 flex-shrink: inherit
;
633 flex-direction: inherit
;
636 /********** textbox **********/
642 /* Prefix with (xul|*):root to workaround HTML tests loading xul.css */
643 :root html|
textarea:not
([resizable
="true"]) {
647 /********** autocomplete textbox **********/
649 .autocomplete-richlistbox {
650 -moz-user-focus: ignore
;
651 overflow-x: hidden
!important
;
655 .autocomplete-richlistitem {
656 flex-direction: column
;
661 /* The following rule is here to fix bug 96899 (and now 117952).
662 Somehow trees create a situation
663 in which a popupset flows itself as if its popup child is directly within it
664 instead of the placeholder child that should actually be inside the popupset.
665 This is a stopgap measure, and it does not address the real bug. */
666 .autocomplete-result-popupset {
673 /********** menulist **********/
675 menulist
[popuponly
] {
676 appearance: none
!important
;
677 margin: 0 !important
;
678 height: 0 !important
;
679 min-height: 0 !important
;
680 border: 0 !important
;
681 padding: 0 !important
;
684 /********** splitter **********/
691 appearance: none
!important
;
692 border: none
!important
;
693 background: none
!important
;
698 /******** scrollbar ********/
701 /* This is a hint to layerization that the scrollbar thumb can never leave
702 the scrollbar track. */
706 /******** scrollbox ********/
709 /* This makes it scrollable! */
713 @media (prefers-reduced-motion: no-preference
) {
714 scrollbox
[smoothscroll
=true
] {
715 scroll-behavior: smooth
;
719 /********** stringbundle **********/
726 /********** dialog **********/
730 flex-direction: column
;
733 /********** wizard **********/
737 flex-direction: column
;
738 contain: inline-size
;
743 wizard
> wizardpage
{
748 wizard
> wizardpage:not
(.selected
) {
753 flex-direction: column
;
757 /********** Rich Listbox ********/
760 flex-direction: column
;
770 /*********** findbar ************/
773 contain: inline-size
;
776 /* Some elements that in HTML blocks should be inline-level by default */
778 display: inline-flex
;
781 .menu-iconic-highlightable-text:not
([highlightable
="true"]),
782 .menu-iconic-text[highlightable="true"] {
786 [orient
="vertical"] { flex-direction: column
!important
; }
787 [orient
="horizontal"] { flex-direction: row
!important
; }
789 [align
="start"] { align-items: flex-start
!important
; }
790 [align
="center"] { align-items: center
!important
; }
791 [align
="end"] { align-items: flex-end
!important
; }
792 [align
="baseline"] { align-items: baseline
!important
; }
793 [align
="stretch"] { align-items: stretch
!important
; }
795 [pack
="start"] { justify-content: start
!important
; }
796 [pack
="center"] { justify-content: center
!important
; }
797 [pack
="end"] { justify-content: flex-end
!important
; }
799 [flex
="0"] { flex: none
!important
; }
800 [flex
="1"] { flex: 1 !important
; }