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/. */
4
5/**
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.)
12 *
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
16 * browser.css.
17 */
18
19@import url("chrome://global/skin/tooltip.css");
20
21@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */
22@namespace html url("http://www.w3.org/1999/xhtml"); /* namespace for HTML elements */
23
24/* TODO: investigate unifying these two root selectors
25 * https://bugzilla.mozilla.org/show_bug.cgi?id=1592344
26 */
27*|*:root {
28  --animation-easing-function: cubic-bezier(.07, .95, 0, 1);
29}
30
31:root {
32  text-rendering: optimizeLegibility;
33  -moz-control-character-visibility: visible;
34}
35
36:root:-moz-locale-dir(rtl) {
37  direction: rtl;
38}
39
40/* XUL doesn't show outlines by default */
41:focus-visible {
42  outline: initial;
43}
44
45/*
46 * Native anonymous popups and tooltips in html are document-level, which means
47 * that they don't inherit from the root, so this is needed.
48 */
49popupgroup:-moz-native-anonymous:-moz-locale-dir(rtl),
50tooltip:-moz-native-anonymous:-moz-locale-dir(rtl) {
51  direction: rtl;
52}
53
54/* ::::::::::
55   :: Rules for 'hiding' portions of the chrome for special
56   :: kinds of windows (not JUST browser windows) with toolbars
57   ::::: */
58
59*|*:root[chromehidden~="menubar"] .chromeclass-menubar,
60*|*:root[chromehidden~="directories"] .chromeclass-directories,
61*|*:root[chromehidden~="status"] .chromeclass-status,
62*|*:root[chromehidden~="extrachrome"] .chromeclass-extrachrome,
63*|*:root[chromehidden~="location"] .chromeclass-location,
64*|*:root[chromehidden~="location"][chromehidden~="toolbar"] .chromeclass-toolbar,
65*|*:root[chromehidden~="toolbar"] .chromeclass-toolbar-additional {
66  display: none;
67}
68
69/* ::::::::::
70   :: Rules for forcing direction for entry and display of URIs
71   :: or URI elements
72   ::::: */
73
74.uri-element {
75  direction: ltr !important;
76}
77
78/****** elements that have no visual representation ******/
79
80script, data, commandset, command,
81broadcasterset, broadcaster, observes,
82keyset, key, toolbarpalette, template,
83treeitem, treeseparator, treerow, treecell {
84  display: none;
85}
86
87/********** focus rules **********/
88
89button,
90checkbox,
91menulist,
92radiogroup,
93tree,
94browser,
95editor,
96iframe {
97  -moz-user-focus: normal;
98}
99
100/******** window & page ******/
101
102window {
103  overflow: clip;
104  -moz-box-orient: vertical;
105}
106
107/******** box *******/
108
109vbox {
110  -moz-box-orient: vertical;
111}
112
113/********** label **********/
114
115label {
116  display: inline-block;
117}
118
119description {
120  display: flow-root;
121}
122
123label.text-link, label[onclick] {
124  -moz-user-focus: normal;
125}
126
127label html|span.accesskey {
128  text-decoration: underline;
129  text-decoration-skip-ink: none;
130}
131
132/********** toolbarbutton **********/
133
134toolbar[mode="icons"] .toolbarbutton-text,
135toolbar[mode="text"] .toolbarbutton-icon,
136html|label.toolbarbutton-badge:empty {
137  display: none;
138}
139
140/********** button **********/
141
142button {
143  -moz-default-appearance: button;
144  appearance: auto;
145}
146
147/******** browser, editor, iframe ********/
148
149browser,
150editor,
151iframe {
152  display: inline;
153}
154
155@supports -moz-bool-pref("layout.css.emulate-moz-box-with-flex") {
156  browser,
157  editor,
158  iframe {
159    display: block;
160  }
161}
162
163/* Allow the browser to shrink below its intrinsic size, to match legacy
164 * behavior */
165browser {
166  align-self: stretch;
167  justify-self: stretch;
168  min-height: 0;
169  min-width: 0;
170}
171
172/*********** popup notification ************/
173popupnotification {
174  -moz-box-orient: vertical;
175}
176
177.popup-notification-menubutton:not([label]) {
178  display: none;
179}
180
181/********** radio **********/
182
183radiogroup {
184  -moz-box-orient: vertical;
185}
186
187/******** groupbox *********/
188
189groupbox {
190  -moz-box-orient: vertical;
191}
192
193/******** draggable elements *********/
194
195%ifndef MOZ_WIDGET_GTK
196titlebar,
197toolbar:not([nowindowdrag="true"], [customizing="true"]) {
198  -moz-window-dragging: drag;
199}
200%endif
201
202/* The list below is non-comprehensive and will probably need some tweaking. */
203toolbaritem,
204toolbarbutton,
205toolbarseparator,
206button,
207search-textbox,
208html|input,
209tab,
210radio,
211splitter,
212menulist {
213  -moz-window-dragging: no-drag;
214}
215
216titlebar {
217  pointer-events: auto !important;
218}
219
220/******* toolbar *******/
221
222toolbox {
223  -moz-box-orient: vertical;
224}
225
226%ifdef XP_MACOSX
227toolbar[type="menubar"] {
228  min-height: 0 !important;
229  border: 0 !important;
230}
231%endif
232
233toolbarspring {
234  -moz-box-flex: 1000;
235}
236
237/********* menu ***********/
238
239menubar > menu:empty {
240  visibility: collapse;
241}
242
243.menu-text {
244  -moz-box-flex: 1;
245}
246
247/********* menupopup, panel, & tooltip ***********/
248
249menupopup,
250panel {
251  -moz-box-orient: vertical;
252}
253
254menupopup,
255panel,
256tooltip {
257  display: -moz-popup;
258  z-index: 2147483647;
259  text-shadow: none;
260}
261
262tooltip {
263  -moz-box-orient: vertical;
264  white-space: pre-wrap;
265}
266
267tooltip:not([position]) {
268  margin-top: 21px;
269}
270
271% excluding Android here to work around bug 1637975:
272%ifndef ANDROID
273@supports -moz-bool-pref("xul.panel-animations.enabled") {
274@media (prefers-reduced-motion: no-preference) {
275%ifdef MOZ_WIDGET_COCOA
276  /* On Mac, use the properties "-moz-window-transform" and "-moz-window-opacity"
277     instead of "transform" and "opacity" for these animations.
278     The -moz-window* properties apply to the whole window including the window's
279     shadow, and they don't affect the window's "shape", so the system doesn't
280     have to recompute the shadow shape during the animation. This makes them a
281     lot faster. In fact, Gecko no longer triggers shadow shape recomputations
282     for repaints.
283     These properties are not implemented on other platforms. */
284  panel[type="arrow"]:not([animate="false"]) {
285    transition-property: -moz-window-transform, -moz-window-opacity;
286    transition-duration: 0.18s, 0.18s;
287    transition-timing-function:
288      var(--animation-easing-function), ease-out;
289  }
290
291  /* Only do the fade-in animation on pre-Big Sur to avoid missing shadows on
292   * Big Sur, see bug 1672091. */
293  @media (-moz-mac-big-sur-theme: 0) {
294    panel[type="arrow"]:not([animate="false"]) {
295      -moz-window-opacity: 0;
296      -moz-window-transform: translateY(-70px);
297    }
298
299    panel[type="arrow"][side="bottom"]:not([animate="false"]) {
300      -moz-window-transform: translateY(70px);
301    }
302  }
303
304  /* [animate] is here only so that this rule has greater specificity than the
305   * rule right above */
306  panel[type="arrow"][animate][animate="open"] {
307    -moz-window-opacity: 1.0;
308    transition-duration: 0.18s, 0.18s;
309    -moz-window-transform: none;
310    transition-timing-function:
311      var(--animation-easing-function), ease-in-out;
312  }
313
314  panel[type="arrow"][animate][animate="cancel"] {
315    -moz-window-opacity: 0;
316    -moz-window-transform: none;
317  }
318%else
319  panel[type="arrow"]:not([animate="false"]) {
320    opacity: 0;
321    transform: translateY(-70px);
322    transition-property: transform, opacity;
323    transition-duration: 0.18s, 0.18s;
324    transition-timing-function:
325      var(--animation-easing-function), ease-out;
326  }
327
328  panel[type="arrow"][side="bottom"]:not([animate="false"]) {
329    transform: translateY(70px);
330  }
331
332  /* [animate] is here only so that this rule has greater specificity than the
333   * rule right above */
334  panel[type="arrow"][animate][animate="open"] {
335    opacity: 1.0;
336    transition-duration: 0.18s, 0.18s;
337    transform: none;
338    transition-timing-function:
339      var(--animation-easing-function), ease-in-out;
340  }
341
342  panel[type="arrow"][animate][animate="cancel"] {
343    transform: none;
344  }
345%endif
346}
347}
348%endif
349
350panel[type="arrow"][animating] {
351  pointer-events: none;
352}
353
354/******** tree ******/
355
356treecolpicker {
357  -moz-box-ordinal-group: 2147483646;
358}
359
360treechildren {
361  display: -moz-box;
362  user-select: none;
363  -moz-box-flex: 1;
364}
365
366tree {
367  -moz-box-orient: vertical;
368  width: 10px;
369  height: 10px;
370}
371
372tree[hidecolumnpicker="true"] treecolpicker {
373  display: none;
374}
375
376treecol {
377  min-width: 16px;
378}
379
380treecol[hidden="true"] {
381  visibility: collapse;
382  display: -moz-box;
383}
384
385/* ::::: lines connecting cells ::::: */
386tree:not([treelines="true"]) treechildren::-moz-tree-line {
387  visibility: hidden;
388}
389
390treechildren::-moz-tree-cell(ltr) {
391  direction: ltr !important;
392}
393
394/********** deck & stack *********/
395
396deck {
397  display: -moz-deck;
398}
399
400stack {
401  display: grid;
402  position: relative;
403}
404
405/* We shouldn't style native anonymous children like scrollbars or what not */
406stack > *|*:not(:-moz-native-anonymous) {
407  grid-area: 1 / 1;
408  z-index: 0;
409
410  /*
411    The default `min-height: auto` value makes grid items refuse to be smaller
412    than their content. This doesn't match the traditional behavior of XUL stack,
413    which often shoehorns tall content into a smaller stack and allows the content
414    to decide how to handle overflow (e.g. by scaling down if it's an image, or
415    by adding scrollbars if it's scrollable).
416  */
417  min-height: 0;
418}
419
420legacy-stack {
421  display: -moz-stack;
422}
423
424/********** tabbox *********/
425
426tabbox {
427  -moz-box-orient: vertical;
428}
429
430tabs {
431  -moz-box-orient: horizontal;
432}
433
434tab {
435  -moz-box-align: center;
436  -moz-box-pack: center;
437}
438
439tab[selected="true"]:not([ignorefocus="true"]) {
440  -moz-user-focus: normal;
441}
442
443tabpanels {
444  display: -moz-deck;
445}
446
447/********** tooltip *********/
448
449tooltip[titletip="true"] {
450  /* The width of the tooltip isn't limited on cropped <tree> cells. */
451  max-width: none;
452}
453
454/********** basic rule for anonymous content that needs to pass box properties through
455 ********** to an insertion point parent that holds the real kids **************/
456
457.box-inherit {
458  -moz-box-orient: inherit;
459  -moz-box-pack: inherit;
460  -moz-box-align: inherit;
461  -moz-box-direction: inherit;
462}
463
464/********** textbox **********/
465
466search-textbox {
467  user-select: text;
468  text-shadow: none;
469}
470
471/* Prefix with (xul|*):root to workaround HTML tests loading xul.css */
472:root html|textarea:not([resizable="true"]) {
473  resize: none;
474}
475
476@supports -moz-bool-pref("layout.css.emulate-moz-box-with-flex") {
477  html|*.textbox-input {
478    /* Be block-level, so that -moz-box-flex can take effect, when we are an item
479       in a -moz-box being emulated by modified modern flex. */
480    display: block;
481  }
482}
483
484/********** autocomplete textbox **********/
485
486/* SeaMonkey uses its own autocomplete and the toolkit's autocomplete widget */
487%ifndef MOZ_SUITE
488
489.autocomplete-richlistbox {
490  -moz-user-focus: ignore;
491  overflow-x: hidden !important;
492}
493
494.autocomplete-richlistitem {
495  -moz-box-orient: vertical;
496  -moz-box-align: center;
497  overflow: clip;
498}
499
500%endif
501
502/* The following rule is here to fix bug 96899 (and now 117952).
503   Somehow trees create a situation
504   in which a popupset flows itself as if its popup child is directly within it
505   instead of the placeholder child that should actually be inside the popupset.
506   This is a stopgap measure, and it does not address the real bug.  */
507.autocomplete-result-popupset {
508  max-width: 0px;
509  width: 0 !important;
510  min-width: 0%;
511  min-height: 0%;
512}
513
514/********** menulist **********/
515
516menulist[popuponly] {
517  appearance: none !important;
518  margin: 0 !important;
519  height: 0 !important;
520  min-height: 0 !important;
521  border: 0 !important;
522}
523
524/********** splitter **********/
525
526.tree-splitter {
527  width: 0px;
528  max-width: 0px;
529  min-width: 0% ! important;
530  min-height: 0% ! important;
531  -moz-box-ordinal-group: 2147483646;
532}
533
534/******** scrollbar ********/
535
536slider {
537  /* This is a hint to layerization that the scrollbar thumb can never leave
538     the scrollbar track. */
539  overflow: hidden;
540}
541
542/******** scrollbox ********/
543
544scrollbox {
545  /* This makes it scrollable! */
546  overflow: hidden;
547}
548
549scrollbox[smoothscroll=true] {
550  scroll-behavior: smooth;
551}
552
553/********** stringbundle **********/
554
555stringbundle,
556stringbundleset {
557  display: none;
558}
559
560/********** dialog **********/
561
562dialog {
563  -moz-box-flex: 1;
564  -moz-box-orient: vertical;
565}
566
567/********** wizard **********/
568
569wizard {
570  -moz-box-flex: 1;
571  -moz-box-orient: vertical;
572  width: 40em;
573  height: 30em;
574}
575
576wizard > wizardpage {
577  grid-area: 1 / 1;
578  min-height: 0;
579}
580
581wizard > wizardpage:not(.selected) {
582  visibility: hidden;
583}
584
585wizardpage {
586  -moz-box-orient: vertical;
587  overflow: auto;
588}
589
590/********** Rich Listbox ********/
591
592richlistbox {
593  -moz-user-focus: normal;
594  -moz-box-orient: vertical;
595}
596
597/*********** findbar ************/
598findbar {
599  overflow-x: hidden;
600}
601
602/* Some elements that in HTML blocks should be inline-level by default */
603button, image {
604  display: -moz-inline-box;
605}
606
607.menu-iconic-highlightable-text:not([highlightable="true"]),
608.menu-iconic-text[highlightable="true"] {
609  display: none;
610}
611
612[orient="vertical"] { -moz-box-orient: vertical !important; }
613[orient="horizontal"] { -moz-box-orient: horizontal !important; }
614
615[align="start"] { -moz-box-align: start !important; }
616[align="center"] { -moz-box-align: center !important; }
617[align="end"] { -moz-box-align: end !important; }
618[align="baseline"] { -moz-box-align: baseline !important; }
619[align="stretch"] { -moz-box-align: stretch !important; }
620
621[pack="start"] { -moz-box-pack: start !important; }
622[pack="center"] { -moz-box-pack: center !important; }
623[pack="end"] { -moz-box-pack: end !important; }
624
625@supports -moz-bool-pref("layout.css.emulate-moz-box-with-flex") {
626  /* This isn't a real solution for [flex] and [ordinal], but it covers enough
627     cases to render the browser chrome for us to test emulated flex mode without
628     mass-changing existing markup and CSS.
629     If we get attr() in Bug 435426 this could  work for all cases. */
630  [flex="1"] { -moz-box-flex: 1; }
631  [flex="2"] { -moz-box-flex: 2; }
632  [flex="3"] { -moz-box-flex: 3; }
633  [flex="4"] { -moz-box-flex: 4; }
634  [flex="5"] { -moz-box-flex: 5; }
635  [flex="6"] { -moz-box-flex: 6; }
636  [flex="7"] { -moz-box-flex: 7; }
637  [flex="8"] { -moz-box-flex: 8; }
638  [flex="9"] { -moz-box-flex: 9; }
639  [flex="100"] { -moz-box-flex: 100; }
640  [flex="400"] { -moz-box-flex: 400; }
641  [flex="1000"] { -moz-box-flex: 1000; }
642  [flex="10000"] { -moz-box-flex: 10000; }
643}
644