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