toolkit/content/xul.css

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