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 ***********/
368 /* Make sure that popups are interactable when shown, since they escape the
369 * usual layering rules */
371 /* Popups can't have overflow */
379 -moz-default-appearance: tooltip
;
381 white-space: pre-wrap
;
383 background-color: InfoBackground
;
389 pointer-events: none
;
393 * It's important that these styles are in a UA sheet, because the default
394 * tooltip is native anonymous content
396 @media (-moz-platform: linux
) {
398 padding: 6px 10px; /* Matches Adwaita. */
399 line-height: 1.4; /* For Noto Sans; note that 1.2 may clip descenders. */
403 @media (-moz-platform: macos
) {
405 padding: 2px 6px; /* Matches native metrics. */
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 /******** tree ******/
447 flex-direction: column
;
450 tree
[hidecolumnpicker
="true"] treecolpicker
{
456 /* This preserves the behavior of -moz-box-ordinal-group. To change this we'd
457 * need to migrate the persisted ordinal values etc. */
461 treecol
[hidden
="true"] {
462 visibility: collapse
;
466 /* ::::: lines connecting cells ::::: */
467 tree:not
([treelines
="true"]) treechildren::-moz-tree-line
{
471 treechildren::-moz-tree-cell
(ltr
) {
472 direction: ltr
!important
;
475 /********** deck, tabpanels & stack *********/
477 tabpanels
> *|
*:not
(:-moz-native-anonymous
) {
478 /* tabpanels is special: we want to avoid displaying them, but we still want
479 * the hidden children to be accessible */
480 -moz-subtree-hidden-only-visually: 1;
483 deck
> *|
*:not
(:-moz-native-anonymous
) {
487 tabpanels
> .deck-selected
,
488 deck
> .deck-selected
{
489 -moz-subtree-hidden-only-visually: 0;
500 /* We shouldn't style native anonymous children like scrollbars or what not. */
501 tabpanels
> *|
*:not
(:-moz-native-anonymous
),
502 deck
> *|
*:not
(:-moz-native-anonymous
),
503 stack
> *|
*:not
(:-moz-native-anonymous
) {
508 The default `min-height: auto` value makes grid items refuse to be smaller
509 than their content. This doesn't match the traditional behavior of XUL stack,
510 which often shoehorns tall content into a smaller stack and allows the content
511 to decide how to handle overflow (e.g. by scaling down if it's an image, or
512 by adding scrollbars if it's scrollable).
517 /********** tabbox *********/
520 flex-direction: column
;
534 justify-content: center
;
537 /********** tooltip *********/
539 tooltip
[titletip
="true"] {
540 /* The width of the tooltip isn't limited on cropped <tree> cells. */
544 /********** basic rule for anonymous content that needs to pass box properties through
545 ********** to an insertion point parent that holds the real kids **************/
548 align-items: inherit
;
549 justify-content: inherit
;
551 flex-shrink: inherit
;
552 flex-direction: inherit
;
555 /********** textbox **********/
561 /* Prefix with (xul|*):root to workaround HTML tests loading xul.css */
562 :root html|
textarea:not
([resizable
="true"]) {
566 /********** autocomplete textbox **********/
568 .autocomplete-richlistbox {
569 -moz-user-focus: ignore
;
570 overflow-x: hidden
!important
;
574 .autocomplete-richlistitem {
575 flex-direction: column
;
580 /* The following rule is here to fix bug 96899 (and now 117952).
581 Somehow trees create a situation
582 in which a popupset flows itself as if its popup child is directly within it
583 instead of the placeholder child that should actually be inside the popupset.
584 This is a stopgap measure, and it does not address the real bug. */
585 .autocomplete-result-popupset {
592 /********** menulist **********/
594 menulist
[popuponly
] {
595 appearance: none
!important
;
596 margin: 0 !important
;
597 height: 0 !important
;
598 min-height: 0 !important
;
599 border: 0 !important
;
600 padding: 0 !important
;
603 /********** splitter **********/
610 appearance: none
!important
;
611 border: none
!important
;
612 background: none
!important
;
617 /******** scrollbar ********/
620 /* This is a hint to layerization that the scrollbar thumb can never leave
621 the scrollbar track. */
625 /******** scrollbox ********/
628 /* This makes it scrollable! */
632 @media (prefers-reduced-motion: no-preference
) {
633 scrollbox
[smoothscroll
=true
] {
634 scroll-behavior: smooth
;
638 /********** stringbundle **********/
645 /********** dialog **********/
649 flex-direction: column
;
652 /********** wizard **********/
656 flex-direction: column
;
657 contain: inline-size
;
662 wizard
> wizardpage
{
667 wizard
> wizardpage:not
(.selected
) {
672 flex-direction: column
;
676 /********** Rich Listbox ********/
679 flex-direction: column
;
689 /*********** findbar ************/
692 contain: inline-size
;
695 /* Some elements that in HTML blocks should be inline-level by default */
697 display: inline-flex
;
700 .menu-iconic-highlightable-text:not
([highlightable
="true"]),
701 .menu-iconic-text[highlightable="true"] {
705 [orient
="vertical"] { flex-direction: column
!important
; }
706 [orient
="horizontal"] { flex-direction: row
!important
; }
708 [align
="start"] { align-items: flex-start
!important
; }
709 [align
="center"] { align-items: center
!important
; }
710 [align
="end"] { align-items: flex-end
!important
; }
711 [align
="baseline"] { align-items: baseline
!important
; }
712 [align
="stretch"] { align-items: stretch
!important
; }
714 [pack
="start"] { justify-content: start
!important
; }
715 [pack
="center"] { justify-content: center
!important
; }
716 [pack
="end"] { justify-content: flex-end
!important
; }
718 [flex
="0"] { flex: none
!important
; }
719 [flex
="1"] { flex: 1 !important
; }