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