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: macos
) {
411 padding: 2px 6px; /* Matches native metrics. */
415 @media (-moz-platform: windows
) {
421 /* TODO(emilio): Probably make InfoText/InfoBackground do the right thing and
423 @media not
(prefers-contrast
) {
425 background-color: #f9f9fb;
427 border-color: #67676c;
431 @media
(prefers-color-scheme: dark
) {
433 background-color: #2b2a33;
435 border-color: #f9f9fb;
441 @media (-moz-panel-animations
) and
(prefers-reduced-motion: no-preference
) {
442 @media (-moz-platform: macos
) {
443 /* On Mac, use the properties "-moz-window-transform" and "-moz-window-opacity"
444 instead of "transform" and "opacity" for these animations.
445 The -moz-window* properties apply to the whole window including the window's
446 shadow, and they don't affect the window's "shape", so the system doesn't
447 have to recompute the shadow shape during the animation. This makes them a
448 lot faster. In fact, Gecko no longer triggers shadow shape recomputations
450 These properties are not implemented on other platforms. */
451 panel
[type
="arrow"]:not
([animate
="false"]) {
452 transition-property: -moz-window-transform
, -moz-window-opacity
;
453 transition-duration: 0.18s, 0.18s;
454 transition-timing-function:
455 var
(--animation-easing-function
), ease-out
;
458 /* Only do the fade-in animation on pre-Big Sur to avoid missing shadows on
459 * Big Sur, see bug 1672091. */
460 @media
(-moz-mac-big-sur-theme: 0) {
461 panel
[type
="arrow"]:not
([animate
="false"]) {
462 -moz-window-opacity: 0;
463 -moz-window-transform: translateY
(-70px);
466 panel
[type
="arrow"][side
="bottom"]:not
([animate
="false"]) {
467 -moz-window-transform: translateY
(70px);
471 /* [animate] is here only so that this rule has greater specificity than the
472 * rule right above */
473 panel
[type
="arrow"][animate
][animate
="open"] {
474 -moz-window-opacity: 1.0;
475 transition-duration: 0.18s, 0.18s;
476 -moz-window-transform: none
;
477 transition-timing-function:
478 var
(--animation-easing-function
), ease-in-out
;
481 panel
[type
="arrow"][animate
][animate
="cancel"] {
482 -moz-window-opacity: 0;
483 -moz-window-transform: none
;
485 } /* end of macOS rules */
487 @media not
(-moz-platform: macos
) {
488 panel
[type
="arrow"]:not
([animate
="false"]) {
490 transform: translateY
(-70px);
491 transition-property: transform
, opacity
;
492 transition-duration: 0.18s, 0.18s;
493 transition-timing-function:
494 var
(--animation-easing-function
), ease-out
;
495 will-change: transform
, opacity
;
498 panel
[type
="arrow"][side
="bottom"]:not
([animate
="false"]) {
499 transform: translateY
(70px);
502 /* [animate] is here only so that this rule has greater specificity than the
503 * rule right above */
504 panel
[type
="arrow"][animate
][animate
="open"] {
506 transition-duration: 0.18s, 0.18s;
508 transition-timing-function:
509 var
(--animation-easing-function
), ease-in-out
;
512 panel
[type
="arrow"][animate
][animate
="cancel"] {
515 } /* end of non-macOS rules */
518 panel
[type
="arrow"][animating
] {
519 pointer-events: none
;
522 /******** tree ******/
534 flex-direction: column
;
537 tree
[hidecolumnpicker
="true"] treecolpicker
{
543 /* This preserves the behavior of -moz-box-ordinal-group. To change this we'd
544 * need to migrate the persisted ordinal values etc. */
548 treecol
[hidden
="true"] {
549 visibility: collapse
;
553 /* ::::: lines connecting cells ::::: */
554 tree:not
([treelines
="true"]) treechildren::-moz-tree-line
{
558 treechildren::-moz-tree-cell
(ltr
) {
559 direction: ltr
!important
;
562 /********** deck, tabpanels & stack *********/
564 tabpanels
> *|
*:not
(:-moz-native-anonymous
) {
565 /* tabpanels is special: we want to avoid displaying them, but we still want
566 * the hidden children to be accessible */
567 -moz-subtree-hidden-only-visually: 1;
570 deck
> *|
*:not
(:-moz-native-anonymous
) {
574 tabpanels
> .deck-selected
,
575 deck
> .deck-selected
{
576 -moz-subtree-hidden-only-visually: 0;
587 /* We shouldn't style native anonymous children like scrollbars or what not. */
588 tabpanels
> *|
*:not
(:-moz-native-anonymous
),
589 deck
> *|
*:not
(:-moz-native-anonymous
),
590 stack
> *|
*:not
(:-moz-native-anonymous
) {
595 The default `min-height: auto` value makes grid items refuse to be smaller
596 than their content. This doesn't match the traditional behavior of XUL stack,
597 which often shoehorns tall content into a smaller stack and allows the content
598 to decide how to handle overflow (e.g. by scaling down if it's an image, or
599 by adding scrollbars if it's scrollable).
604 /********** tabbox *********/
607 flex-direction: column
;
621 justify-content: center
;
624 /********** tooltip *********/
626 tooltip
[titletip
="true"] {
627 /* The width of the tooltip isn't limited on cropped <tree> cells. */
631 /********** basic rule for anonymous content that needs to pass box properties through
632 ********** to an insertion point parent that holds the real kids **************/
635 align-items: inherit
;
636 justify-content: inherit
;
638 flex-shrink: inherit
;
639 flex-direction: inherit
;
642 /********** textbox **********/
648 /* Prefix with (xul|*):root to workaround HTML tests loading xul.css */
649 :root html|
textarea:not
([resizable
="true"]) {
653 /********** autocomplete textbox **********/
655 .autocomplete-richlistbox {
656 -moz-user-focus: ignore
;
657 overflow-x: hidden
!important
;
661 .autocomplete-richlistitem {
662 flex-direction: column
;
667 /* The following rule is here to fix bug 96899 (and now 117952).
668 Somehow trees create a situation
669 in which a popupset flows itself as if its popup child is directly within it
670 instead of the placeholder child that should actually be inside the popupset.
671 This is a stopgap measure, and it does not address the real bug. */
672 .autocomplete-result-popupset {
679 /********** menulist **********/
681 menulist
[popuponly
] {
682 appearance: none
!important
;
683 margin: 0 !important
;
684 height: 0 !important
;
685 min-height: 0 !important
;
686 border: 0 !important
;
687 padding: 0 !important
;
690 /********** splitter **********/
697 appearance: none
!important
;
698 border: none
!important
;
699 background: none
!important
;
704 /******** scrollbar ********/
707 /* This is a hint to layerization that the scrollbar thumb can never leave
708 the scrollbar track. */
712 /******** scrollbox ********/
715 /* This makes it scrollable! */
719 @media (prefers-reduced-motion: no-preference
) {
720 scrollbox
[smoothscroll
=true
] {
721 scroll-behavior: smooth
;
725 /********** stringbundle **********/
732 /********** dialog **********/
736 flex-direction: column
;
739 /********** wizard **********/
743 flex-direction: column
;
744 contain: inline-size
;
749 wizard
> wizardpage
{
754 wizard
> wizardpage:not
(.selected
) {
759 flex-direction: column
;
763 /********** Rich Listbox ********/
766 flex-direction: column
;
776 /*********** findbar ************/
779 contain: inline-size
;
782 /* Some elements that in HTML blocks should be inline-level by default */
784 display: inline-flex
;
787 .menu-iconic-highlightable-text:not
([highlightable
="true"]),
788 .menu-iconic-text[highlightable="true"] {
792 [orient
="vertical"] { flex-direction: column
!important
; }
793 [orient
="horizontal"] { flex-direction: row
!important
; }
795 [align
="start"] { align-items: flex-start
!important
; }
796 [align
="center"] { align-items: center
!important
; }
797 [align
="end"] { align-items: flex-end
!important
; }
798 [align
="baseline"] { align-items: baseline
!important
; }
799 [align
="stretch"] { align-items: stretch
!important
; }
801 [pack
="start"] { justify-content: start
!important
; }
802 [pack
="center"] { justify-content: center
!important
; }
803 [pack
="end"] { justify-content: flex-end
!important
; }
805 [flex
="0"] { flex: none
!important
; }
806 [flex
="1"] { flex: 1 !important
; }