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@namespace html url("http://www.w3.org/1999/xhtml"); 6 7:root, 8body { 9 margin: 0; 10 padding: 0; 11 height: 100%; 12 width: 100%; 13 overflow: clip; 14} 15 16:root { 17 text-rendering: optimizeLegibility; 18 min-height: 95px; 19 min-width: 95px; 20} 21 22:root:-moz-locale-dir(rtl) { 23 direction: rtl; 24} 25 26:root:not([chromehidden~="toolbar"]) { 27 min-width: 450px; 28 min-height: 120px; 29} 30 31:root[customizing] { 32 min-width: -moz-fit-content; 33} 34 35/* Prevent shrinking the page content to 0 height and width */ 36.browserStack { 37 min-height: 25px; 38 min-width: 25px; 39} 40 41body { 42 display: -moz-box; 43 -moz-box-orient: vertical; 44 -moz-box-flex: 1; 45} 46 47#navigator-toolbox:-moz-lwtheme { 48 background-image: var(--lwt-additional-images); 49 background-repeat: var(--lwt-background-tiling); 50 background-position: var(--lwt-background-alignment); 51} 52 53/* TODO bug 1695280: Remove these media selectors and merge the rule below 54 with the ruleset above. We must set background properties on :root and not 55 #navigator-toolbox on Windows 7/8 due to a WebRender bug that hides the 56 minimize/maximize/close buttons. */ 57@media not (-moz-os-version: windows-win7) { 58 @media not (-moz-os-version: windows-win8) { 59 #navigator-toolbox:-moz-lwtheme { 60 background-color: var(--lwt-accent-color); 61 } 62 63 /* When a theme defines both theme_frame and additional_backgrounds, show 64 the latter atop the former. */ 65 :root[lwtheme-image] #navigator-toolbox { 66 background-image: var(--lwt-header-image), var(--lwt-additional-images); 67 background-repeat: no-repeat, var(--lwt-background-tiling); 68 background-position: right top, var(--lwt-background-alignment); 69 } 70 71 #navigator-toolbox:-moz-window-inactive:-moz-lwtheme { 72 background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color)); 73 } 74 } 75} 76/* TODO bug 1695280: Remove this block. */ 77@media (-moz-os-version: windows-win7), 78 (-moz-os-version: windows-win8) { 79 :root:-moz-lwtheme { 80 background-color: var(--lwt-accent-color); 81 background-image: var(--lwt-additional-images); 82 background-repeat: var(--lwt-background-tiling); 83 background-position: var(--lwt-background-alignment); 84 } 85 86 :root[lwtheme-image] { 87 background-image: var(--lwt-header-image, linear-gradient(transparent, transparent)), var(--lwt-additional-images) !important; 88 background-repeat: no-repeat, var(--lwt-background-tiling); 89 background-position: right top, var(--lwt-background-alignment) !important; 90 } 91 92 :root:-moz-lwtheme:-moz-window-inactive { 93 background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color)); 94 } 95} 96 97%ifdef MENUBAR_CAN_AUTOHIDE 98#toolbar-menubar[autohide="true"] { 99 overflow: hidden; 100} 101 102#toolbar-menubar[autohide="true"][inactive="true"]:not([customizing="true"]) { 103 min-height: 0 !important; 104 height: 0 !important; 105 appearance: none !important; 106} 107%endif 108 109%ifdef XP_MACOSX 110#toolbar-menubar { 111 visibility: collapse; 112} 113%endif 114 115panelmultiview { 116 -moz-box-align: start; 117} 118 119panelmultiview[transitioning] { 120 pointer-events: none; 121} 122 123panelview { 124 -moz-box-orient: vertical; 125} 126 127panelview:not([visible]) { 128 visibility: collapse; 129} 130 131/* Hide the header when a subview is reused as a main view. */ 132panelview[mainview] > .panel-header { 133 display: none; 134} 135 136.panel-viewcontainer { 137 overflow: hidden; 138} 139 140.panel-viewcontainer[panelopen] { 141 transition-property: height; 142 transition-timing-function: var(--animation-easing-function); 143 transition-duration: var(--panelui-subview-transition-duration); 144 will-change: height; 145} 146 147.panel-viewcontainer.offscreen { 148 display: block; 149} 150 151.panel-viewstack { 152 overflow: visible; 153 transition: height var(--panelui-subview-transition-duration); 154} 155 156:is(panel, menupopup)::part(arrow) { 157 display: none; 158} 159 160@supports -moz-bool-pref("layout.css.emulate-moz-box-with-flex") { 161 #tabbrowser-tabs { 162 /* Without this, the tabs container width extends beyond the window width */ 163 width: 0; 164 } 165 .tab-stack { 166 /* Without this, pinned tabs get a bit too tall when the tabstrip overflows. */ 167 vertical-align: top; 168 } 169} 170 171@supports not -moz-bool-pref("browser.tabs.tabmanager.enabled") { 172 #tabbrowser-tabs:not([overflow="true"], [hashiddentabs]) ~ #alltabs-button { 173 display: none; 174 } 175 #tabbrowser-tabs:not([overflow="true"])[using-closing-tabs-spacer] ~ #alltabs-button { 176 /* temporary space to keep a tab's close button under the cursor */ 177 display: -moz-box; 178 visibility: hidden; 179 } 180} 181 182#tabbrowser-tabs[hasadjacentnewtabbutton]:not([overflow="true"]) ~ #new-tab-button, 183#tabbrowser-tabs[overflow="true"] > #tabbrowser-arrowscrollbox > #tabs-newtab-button, 184#tabbrowser-tabs:not([hasadjacentnewtabbutton]) > #tabbrowser-arrowscrollbox > #tabs-newtab-button, 185#TabsToolbar[customizing="true"] #tabs-newtab-button { 186 display: none; 187} 188 189.tabbrowser-tab:not([pinned]) { 190 -moz-box-flex: 100; 191 max-width: 225px; 192 min-width: var(--tab-min-width); 193 width: 0; 194 transition: min-width 100ms ease-out, 195 max-width 100ms ease-out; 196} 197 198:root[uidensity=touch] .tabbrowser-tab:not([pinned]) { 199 /* Touch mode needs additional space for the close button. */ 200 min-width: calc(var(--tab-min-width) + 10px); 201} 202 203.tabbrowser-tab:not([pinned], [fadein]) { 204 max-width: 0.1px; 205 min-width: 0.1px; 206 visibility: hidden; 207} 208 209.tab-icon-image[fadein], 210.tab-close-button[fadein], 211.tabbrowser-tab[fadein]::after, 212.tab-background[fadein] { 213 /* This transition is only wanted for opening tabs. */ 214 transition: visibility 0ms 25ms; 215} 216 217.tab-icon-pending:not([fadein]), 218.tab-icon-image:not([fadein]), 219.tab-close-button:not([fadein]), 220.tabbrowser-tab:not([fadein])::after, 221.tab-background:not([fadein]) { 222 visibility: hidden; 223} 224 225.tab-label:not([fadein]), 226.tab-throbber:not([fadein]) { 227 display: none; 228} 229 230%ifdef NIGHTLY_BUILD 231@supports -moz-bool-pref("browser.tabs.hideThrobber") { 232 .tab-throbber { 233 display: none !important; 234 } 235} 236%endif 237 238#tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] { 239 position: fixed !important; 240 display: block; 241} 242 243#tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[selected], 244#tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[multiselected] { 245 position: relative; 246 z-index: 2; 247 pointer-events: none; /* avoid blocking dragover events on scroll buttons */ 248} 249 250@media (prefers-reduced-motion: no-preference) { 251 #tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[fadein]:not([selected]):not([multiselected]), 252 .tabbrowser-tab[tab-grouping], 253 .tabbrowser-tab[tabdrop-samewindow] { 254 transition: transform 200ms var(--animation-easing-function); 255 } 256} 257 258.tabbrowser-tab[tab-grouping][multiselected]:not([selected]) { 259 z-index: 2; 260} 261 262/* Make it easier to drag tabs by expanding the drag area downwards. */ 263#tabbrowser-tabs[movingtab] { 264 padding-bottom: 15px; 265 margin-bottom: -15px; 266} 267 268#navigator-toolbox[movingtab] > #nav-bar { 269 pointer-events: none; 270} 271 272/* Allow dropping a tab on buttons with associated drop actions. */ 273#navigator-toolbox[movingtab] > #nav-bar > #nav-bar-customization-target > #personal-bookmarks, 274#navigator-toolbox[movingtab] > #nav-bar > #nav-bar-customization-target > #home-button, 275#navigator-toolbox[movingtab] > #nav-bar > #nav-bar-customization-target > #downloads-button, 276#navigator-toolbox[movingtab] > #nav-bar > #nav-bar-customization-target > #bookmarks-menu-button { 277 pointer-events: auto; 278} 279 280/* The address bar needs to be able to render outside of the toolbar, but as 281 * long as it's within the toolbar's bounds we can clip the toolbar so that the 282 * rendering pipeline doesn't reserve an enormous texture for it. */ 283#nav-bar:not([urlbar-exceeds-toolbar-bounds]), 284/* When customizing, overflowable toolbars move automatically moved items back 285 * from the overflow menu, but we still don't want to render them outside of 286 * the customization target. */ 287toolbar[overflowable][customizing] > .customization-target { 288 overflow: clip; 289} 290 291toolbar:not([overflowing]) > .overflow-button, 292toolbar[customizing] > .overflow-button { 293 display: none; 294} 295 296toolbar[customizing] #ion-button, 297toolbar[customizing] #whats-new-menu-button { 298 display: none; 299} 300 301:root:not([chromehidden~="toolbar"]) #nav-bar[nonemptyoverflow] > .overflow-button, 302#nav-bar[customizing] > .overflow-button { 303 display: -moz-box; 304} 305 306/* The ids are ugly, but this should be reasonably performant, and 307 * using a tagname as the last item would be less so. 308 */ 309#widget-overflow-list:empty + #widget-overflow-fixed-separator, 310#widget-overflow:not([hasfixeditems]) #widget-overflow-fixed-separator { 311 display: none; 312} 313 314 315%ifdef MENUBAR_CAN_AUTOHIDE 316:root:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide=true]) + #TabsToolbar > .titlebar-buttonbox-container, 317:root:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide=true]) + #TabsToolbar .titlebar-spacer, 318%endif 319%ifndef MOZ_WIDGET_COCOA 320%ifndef MOZ_WIDGET_GTK 321:root:not([sizemode=normal]) .titlebar-spacer[type="pre-tabs"], 322%endif 323%endif 324:root:not([chromemargin]) .titlebar-buttonbox-container, 325:root[inFullscreen] .titlebar-buttonbox-container, 326:root[inFullscreen] .titlebar-spacer, 327:root:not([tabsintitlebar]) .titlebar-spacer { 328 display: none; 329} 330%ifdef MOZ_WIDGET_GTK 331@media (-moz-gtk-csd-reversed-placement: 0) { 332 :root:not([sizemode=normal]) .titlebar-spacer[type="pre-tabs"], 333 :root[gtktiledwindow=true] .titlebar-spacer[type="pre-tabs"] { 334 display: none; 335 } 336} 337@media (-moz-gtk-csd-reversed-placement) { 338 :root:not([sizemode=normal]) .titlebar-spacer[type="post-tabs"], 339 :root[gtktiledwindow=true] .titlebar-spacer[type="post-tabs"] { 340 display: none; 341 } 342} 343%endif 344 345:root:not([sizemode=maximized]) .titlebar-restore, 346:root[sizemode=maximized] .titlebar-max { 347 display: none; 348} 349 350%ifdef MENUBAR_CAN_AUTOHIDE 351#toolbar-menubar[autohide=true]:not([inactive]) + #TabsToolbar > .titlebar-buttonbox-container { 352 visibility: hidden; 353} 354%endif 355 356#titlebar { 357 -moz-window-dragging: drag; 358} 359 360:root[tabsintitlebar] .titlebar-buttonbox { 361 position: relative; 362} 363 364:root:not([tabsintitlebar]) .titlebar-buttonbox { 365 display: none; 366} 367 368.titlebar-buttonbox { 369 appearance: auto; 370 -moz-default-appearance: -moz-window-button-box; 371 position: relative; 372} 373 374#personal-toolbar-empty-description { 375 -moz-window-dragging: no-drag; 376} 377 378#personal-bookmarks { 379 -moz-window-dragging: inherit; 380} 381 382toolbarpaletteitem { 383 -moz-window-dragging: no-drag; 384 -moz-box-pack: start; 385} 386 387.titlebar-buttonbox-container { 388 -moz-box-ordinal-group: 1000; 389} 390 391%ifdef XP_MACOSX 392/** 393 * On macOS, the window caption buttons are on the left side of the window titlebar, 394 * even when using the RTL UI direction. These next rules enforce that ordering. 395 */ 396#titlebar-secondary-buttonbox:-moz-locale-dir(ltr) { 397 -moz-box-ordinal-group: 1000; 398} 399 400#titlebar-secondary-buttonbox:-moz-locale-dir(rtl), 401.titlebar-buttonbox-container:-moz-locale-dir(ltr) { 402 -moz-box-ordinal-group: 0; 403} 404%endif 405 406:root[inDOMFullscreen] #navigator-toolbox, 407:root[inDOMFullscreen] #fullscr-toggler, 408:root[inDOMFullscreen] #sidebar-box, 409:root[inDOMFullscreen] #sidebar-splitter, 410:root[inFullscreen]:not([macOSNativeFullscreen]) toolbar:not([fullscreentoolbar=true]), 411:root[inFullscreen] .global-notificationbox { 412 visibility: collapse; 413} 414 415#navigator-toolbox[fullscreenShouldAnimate] { 416 transition: 0.8s margin-top ease-out; 417} 418 419/* Rules to help integrate WebExtension buttons */ 420 421.webextension-browser-action > .toolbarbutton-badge-stack > .toolbarbutton-icon { 422 height: 16px; 423 width: 16px; 424} 425 426@media not all and (min-resolution: 1.1dppx) { 427 .webextension-browser-action { 428 list-style-image: var(--webextension-toolbar-image, inherit); 429 } 430 431 toolbar[brighttext] .webextension-browser-action { 432 list-style-image: var(--webextension-toolbar-image-light, inherit); 433 } 434 435 toolbar:not([brighttext]) .webextension-browser-action:-moz-lwtheme { 436 list-style-image: var(--webextension-toolbar-image-dark, inherit); 437 } 438 439 .webextension-browser-action[cui-areatype="menu-panel"] { 440 list-style-image: var(--webextension-menupanel-image, inherit); 441 } 442 443 :root[lwt-popup-brighttext] .webextension-browser-action[cui-areatype="menu-panel"] { 444 list-style-image: var(--webextension-menupanel-image-light, inherit); 445 } 446 447 :root:not([lwt-popup-brighttext]) .webextension-browser-action[cui-areatype="menu-panel"]:-moz-lwtheme { 448 list-style-image: var(--webextension-menupanel-image-dark, inherit); 449 } 450 451 .webextension-menuitem { 452 list-style-image: var(--webextension-menuitem-image, inherit) !important; 453 } 454} 455 456@media (min-resolution: 1.1dppx) { 457 .webextension-browser-action { 458 list-style-image: var(--webextension-toolbar-image-2x, inherit); 459 } 460 461 toolbar[brighttext] .webextension-browser-action { 462 list-style-image: var(--webextension-toolbar-image-2x-light, inherit); 463 } 464 465 toolbar:not([brighttext]) .webextension-browser-action:-moz-lwtheme { 466 list-style-image: var(--webextension-toolbar-image-2x-dark, inherit); 467 } 468 469 .webextension-browser-action[cui-areatype="menu-panel"] { 470 list-style-image: var(--webextension-menupanel-image-2x, inherit); 471 } 472 473 :root[lwt-popup-brighttext] .webextension-browser-action[cui-areatype="menu-panel"] { 474 list-style-image: var(--webextension-menupanel-image-2x-light, inherit); 475 } 476 477 :root:not([lwt-popup-brighttext]) .webextension-browser-action[cui-areatype="menu-panel"]:-moz-lwtheme { 478 list-style-image: var(--webextension-menupanel-image-2x-dark, inherit); 479 } 480 481 .webextension-menuitem { 482 list-style-image: var(--webextension-menuitem-image-2x, inherit) !important; 483 } 484} 485 486toolbarbutton.webextension-menuitem > .toolbarbutton-icon { 487 width: 16px; 488 height: 16px; 489} 490 491toolbarpaletteitem[removable="false"] { 492 opacity: 0.5; 493} 494 495%ifndef XP_MACOSX 496toolbarpaletteitem[place="palette"], 497toolbarpaletteitem[place="menu-panel"], 498toolbarpaletteitem[place="toolbar"] { 499 -moz-user-focus: normal; 500} 501%endif 502 503#bookmarks-toolbar-placeholder, 504#bookmarks-toolbar-button, 505toolbarpaletteitem > #personal-bookmarks > #PlacesToolbar, 506#personal-bookmarks:is([overflowedItem=true], [cui-areatype="menu-panel"]) > #PlacesToolbar { 507 display: none; 508} 509 510toolbarpaletteitem[place="toolbar"] > #personal-bookmarks > #bookmarks-toolbar-placeholder, 511toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-button, 512#personal-bookmarks:is([overflowedItem=true], [cui-areatype="menu-panel"]) > #bookmarks-toolbar-button { 513 display: -moz-box; 514} 515 516#personal-bookmarks { 517 position: relative; 518} 519 520#PlacesToolbarDropIndicatorHolder { 521 display: block; 522 position: absolute; 523} 524 525#nav-bar-customization-target > #personal-bookmarks, 526toolbar:not(#TabsToolbar) > #wrapper-personal-bookmarks, 527toolbar:not(#TabsToolbar) > #personal-bookmarks { 528 -moz-box-flex: 1; 529} 530 531#zoom-controls[cui-areatype="toolbar"]:not([overflowedItem=true]) > #zoom-reset-button > .toolbarbutton-text { 532 display: -moz-box; 533} 534 535#reload-button:not([displaystop]) + #stop-button, 536#reload-button[displaystop] { 537 display: none; 538} 539 540/* The reload-button is only disabled temporarily when it becomes visible 541 to prevent users from accidentally clicking it. We don't however need 542 to show this disabled state, as the flicker that it generates is short 543 enough to be visible but not long enough to explain anything to users. */ 544#reload-button[disabled]:not(:-moz-window-inactive) > .toolbarbutton-icon { 545 opacity: 1 !important; 546} 547 548/* Ensure stop-button and reload-button are displayed correctly when in the overflow menu */ 549.widget-overflow-list > #stop-reload-button > .toolbarbutton-1 { 550 -moz-box-flex: 1; 551} 552 553%ifdef XP_MACOSX 554:root[inFullscreen="true"] { 555 padding-top: 0; /* override drawintitlebar="true" */ 556} 557%endif 558 559/* Hide menu elements intended for keyboard access support */ 560#main-menubar[openedwithkey=false] .show-only-for-keyboard { 561 display: none; 562} 563 564/* ::::: location bar & search bar ::::: */ 565 566#urlbar, 567#searchbar { 568 /* Setting a width and min-width to let the location & search bars maintain 569 a constant width in case they haven't be resized manually. (bug 965772) */ 570 width: 1px; 571 min-width: 1px; 572} 573 574/* Align URLs to the right in RTL mode. */ 575#urlbar-input:-moz-locale-dir(rtl) { 576 text-align: right !important; 577} 578 579/* Make sure that the location bar's alignment changes according 580 to the input box direction if the user switches the text direction using 581 cmd_switchTextDirection (which applies a dir attribute to the <input>). */ 582#urlbar-input[dir=ltr]:-moz-locale-dir(rtl) { 583 text-align: left !important; 584} 585 586#urlbar-input[dir=rtl]:-moz-locale-dir(ltr) { 587 text-align: right !important; 588} 589 590/* 591 * Display visual cue that browser is under remote control. 592 * This is to help users visually distinguish a user agent session that 593 * is under remote control from those used for normal browsing sessions. 594 * 595 * Attribute is controlled by browser.js:/gRemoteControl. 596 */ 597:root[remotecontrol] #remote-control-box { 598 visibility: visible; 599 padding-inline: var(--urlbar-icon-padding); 600} 601 602:root[remotecontrol] #remote-control-icon { 603 list-style-image: url(chrome://browser/content/static-robot.png); 604 width: 16px; 605 height: 16px; 606} 607 608:root[remotecontrol] #urlbar-background { 609 background-image: repeating-linear-gradient( 610 -45deg, 611 rgba(255, 60, 60, 0.25) 0 25px, 612 rgba(175, 0, 0, 0.25) 25px 50px 613 ); 614 615 background-attachment: fixed; 616 /* Override the usual breakout animation so the gradient doesn't shift around 617 when the panel opens. */ 618 animation: none !important; 619} 620 621/* Show the url scheme in a static box when overflowing to the left */ 622.urlbar-input-box { 623 position: relative; 624 direction: ltr; 625} 626 627#urlbar-scheme { 628 position: absolute; 629 height: 100%; 630 visibility: hidden; 631 direction: ltr; 632 pointer-events: none; 633} 634 635#urlbar-input { 636 mask-repeat: no-repeat; 637 unicode-bidi: plaintext; 638 text-align: match-parent; 639} 640 641#urlbar:not([focused])[domaindir="ltr"]> #urlbar-input-container > .urlbar-input-box > #urlbar-input { 642 direction: ltr; 643 unicode-bidi: embed; 644} 645 646/* The following rules apply overflow masks to the unfocused urlbar 647 This mask may be overriden when a Contextual Feature Recommendation is shown, 648 see browser/themes/shared/urlbar-searchbar.inc.css for details */ 649 650#urlbar:not([focused])[textoverflow="both"] > #urlbar-input-container > .urlbar-input-box > #urlbar-input { 651 mask-image: linear-gradient(to right, transparent, black 3ch, black calc(100% - 3ch), transparent); 652} 653#urlbar:not([focused])[textoverflow="right"] > #urlbar-input-container > .urlbar-input-box > #urlbar-input { 654 mask-image: linear-gradient(to left, transparent, black 3ch); 655} 656#urlbar:not([focused])[textoverflow="left"] > #urlbar-input-container > .urlbar-input-box > #urlbar-input { 657 mask-image: linear-gradient(to right, transparent, black 3ch); 658} 659 660/* The protocol is visible if there is an RTL domain and we overflow to the left. 661 Uses the required-valid trick to check if it contains a value */ 662#urlbar:not([focused])[textoverflow="left"][domaindir="rtl"] > #urlbar-input-container > .urlbar-input-box > #urlbar-scheme:valid { 663 visibility: visible; 664} 665#urlbar:not([focused])[textoverflow="left"][domaindir="rtl"] > #urlbar-input-container > .urlbar-input-box > #urlbar-input { 666 mask-image: linear-gradient(to right, transparent var(--urlbar-scheme-size), black calc(var(--urlbar-scheme-size) + 3ch)); 667} 668 669/* Apply crisp rendering for favicons at exactly 2dppx resolution */ 670@media (resolution: 2dppx) { 671 .searchbar-engine-image { 672 image-rendering: -moz-crisp-edges; 673 } 674} 675 676#urlbar[actiontype="switchtab"][actionoverride] > #urlbar-input-container > #urlbar-label-box, 677#urlbar:not([actiontype="switchtab"], [actiontype="extension"], [searchmode]) > #urlbar-input-container > #urlbar-label-box, 678#urlbar:not([actiontype="switchtab"]) > #urlbar-input-container > #urlbar-label-box > #urlbar-label-switchtab, 679#urlbar:not([actiontype="extension"]) > #urlbar-input-container > #urlbar-label-box > #urlbar-label-extension, 680#urlbar[searchmode][breakout-extend] > #urlbar-input-container > #urlbar-label-box, 681#urlbar:not([searchmode]) > #urlbar-input-container > #urlbar-label-box > #urlbar-label-search-mode, 682#urlbar[breakout-extend] > #urlbar-input-container > #urlbar-label-box > #urlbar-label-search-mode { 683 display: none; 684} 685 686#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginsFooter"] { 687 -moz-box-pack: center; 688 color: FieldText; 689 min-height: 2.6666em; 690 border-top: 1px solid rgba(38,38,38,.15); 691 background-color: hsla(0,0%,80%,.35); /* match arrowpanel-dimmed */; 692} 693 694#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginsFooter"]:hover, 695#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginsFooter"][selected] { 696 background-color: hsla(0,0%,80%,.5); /* match arrowpanel-dimmed-further */ 697} 698 699/* Define the minimum width based on the style of result rows. 700 The order of the min-width rules below must be in increasing order. */ 701#PopupAutoComplete[resultstyles~="loginsFooter"], 702#PopupAutoComplete[resultstyles~="insecureWarning"] { 703 min-width: 17em; 704} 705 706#PopupAutoComplete[resultstyles~="importableLogins"], 707#PopupAutoComplete[resultstyles~="generatedPassword"] { 708 min-width: 22em; 709} 710 711#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] { 712 height: auto; 713} 714 715#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginWithOrigin"] > .ac-site-icon, 716#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-site-icon { 717 margin-inline-start: 0; 718 display: initial; 719} 720 721#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-title > .ac-text-overflow-container > .ac-title-text { 722 text-overflow: initial; 723 white-space: initial; 724} 725 726#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-title > label { 727 margin-inline-start: 0; 728} 729 730#urlbar-input-container[pageproxystate=invalid] > #page-action-buttons > .urlbar-page-action, 731#identity-box.chromeUI ~ #page-action-buttons > .urlbar-page-action:not(#star-button-box), 732#urlbar[usertyping] > #urlbar-input-container > #page-action-buttons > #urlbar-zoom-button, 733#urlbar:not([usertyping]) > #urlbar-input-container > #urlbar-go-button, 734#urlbar:not([focused]) > #urlbar-input-container > #urlbar-go-button { 735 display: none; 736} 737 738#nav-bar:not([keyNav=true]) #identity-box, 739#nav-bar:not([keyNav=true]) #tracking-protection-icon-container { 740 -moz-user-focus: normal; 741} 742 743/* We leave 350px plus whatever space the download button will need when it 744 * appears. Normally this should be 16px for the icon, plus 2 * 2px padding 745 * plus the toolbarbutton-inner-padding. We're adding 4px to ensure things 746 * like rounding on hidpi don't accidentally result in the button going 747 * into overflow. 748 */ 749 #urlbar-container { 750 min-width: calc(350px + 24px + 2 * var(--toolbarbutton-inner-padding)); 751} 752 753#nav-bar[downloadsbuttonshown] #urlbar-container { 754 min-width: 350px; 755} 756 757/* Customize mode is difficult to use at moderate window width if the Urlbar 758 remains 350px wide. */ 759:root[customizing] #urlbar-container { 760 min-width: 280px; 761} 762 763#identity-icon-box { 764 max-width: calc(30px + 10em); 765} 766 767@media (max-width: 770px) { 768 #urlbar-container { 769 min-width: calc(280px + 24px + 2 * var(--toolbarbutton-inner-padding)); 770 } 771 #nav-bar[downloadsbuttonshown] #urlbar-container { 772 min-width: 280px; 773 } 774 :root[customizing] #urlbar-container { 775 min-width: 245px; 776 } 777 #identity-icon-box { 778 max-width: 80px; 779 } 780 /* Contenxtual identity labels are user-customizable and can be very long, 781 so we only show the colored icon when the window gets small. */ 782 #userContext-label { 783 display: none; 784 } 785} 786 787/* The page actions menu is hidden by default, it is only shown in small 788 windows as the overflow target of multiple page action buttons */ 789#pageActionButton { 790 visibility: collapse; 791} 792 793/* 680px is just below half of popular 1366px wide screens, so when putting two 794 browser windows next to each other on such a screen, they'll be above this 795 threshold. */ 796@media (max-width: 680px) { 797 /* Page action buttons are duplicated in the page action menu so we can 798 safely hide them in small windows. */ 799 #pageActionSeparator, 800 #pageActionButton[multiple-children] ~ .urlbar-page-action { 801 display: none; 802 } 803 804 @media (-moz-proton) { 805 #pageActionButton[multiple-children] { 806 visibility: visible; 807 } 808 } 809} 810@media (max-width: 550px) { 811 #urlbar-container { 812 min-width: calc(216px + 24px + 2 * var(--toolbarbutton-inner-padding)); 813 } 814 #nav-bar[downloadsbuttonshown] #urlbar-container { 815 min-width: 216px; 816 } 817 #identity-icon-box { 818 max-width: 70px; 819 } 820 #urlbar-zoom-button { 821 display: none; 822 } 823} 824 825/* Flexible spacer sizing (gets overridden in the navbar) */ 826toolbarpaletteitem[place=toolbar][id^=wrapper-customizableui-special-spring], 827toolbarspring { 828 -moz-box-flex: 1; 829 min-width: 28px; 830 max-width: 112px; 831} 832 833#nav-bar toolbarpaletteitem[id^=wrapper-customizableui-special-spring], 834#nav-bar toolbarspring { 835 -moz-box-flex: 80; 836 /* We shrink the flexible spacers, but not to nothing so they can be 837 * manipulated in customize mode; the next rule shrinks them further 838 * outside customize mode. */ 839 min-width: 10px; 840} 841 842#nav-bar:not([customizing]) toolbarspring { 843 min-width: 1px; 844} 845 846#widget-overflow-list > toolbarspring { 847 display: none; 848} 849 850/* ::::: Unified Back-/Forward Button ::::: */ 851.unified-nav-current { 852 font-weight: bold; 853} 854 855.bookmark-item > label { 856 /* ensure we use the direction of the bookmarks label instead of the 857 * browser locale */ 858 unicode-bidi: plaintext; 859} 860 861/* Apply crisp rendering for favicons at exactly 2dppx resolution */ 862@media (resolution: 2dppx) { 863 .menuitem-with-favicon > .menu-iconic-left > .menu-iconic-icon { 864 image-rendering: -moz-crisp-edges; 865 } 866 867 .bookmark-item > .toolbarbutton-icon, 868 .bookmark-item > .menu-iconic-left > .menu-iconic-icon { 869 image-rendering: -moz-crisp-edges; 870 } 871} 872 873menupopup[emptyplacesresult="true"] > .hide-if-empty-places-result { 874 display: none; 875} 876 877/* Hide extension toolbars that neglected to set the proper class */ 878:root[chromehidden~="location"][chromehidden~="toolbar"] toolbar:not(.chromeclass-menubar) { 879 display: none; 880} 881 882#navigator-toolbox , 883#mainPopupSet { 884 min-width: 1px; 885} 886 887/* History Swipe Animation */ 888 889#historySwipeAnimationContainer { 890 overflow: hidden; 891 pointer-events: none; 892} 893 894#historySwipeAnimationPreviousArrow { 895 background: url("chrome://browser/content/history-swipe-arrow.svg") 896 center left / 64px 128px no-repeat transparent; 897} 898#historySwipeAnimationNextArrow { 899 background: url("chrome://browser/content/history-swipe-arrow.svg") 900 center left / 64px 128px no-repeat transparent; 901 transform: rotate(180deg); 902} 903 904/* Full Screen UI */ 905 906#fullscr-toggler { 907 top: 0; 908 left: 0; 909 right: 0; 910 height: 1px; 911 position: fixed; 912 z-index: 2147483647; 913} 914 915#fullscreen-and-pointerlock-wrapper { 916 position: fixed; 917 z-index: 2147483647 !important; 918 width: 100%; 919 height: 100%; 920 top: 0; 921 pointer-events: none; 922} 923 924.pointerlockfswarning { 925 position: fixed; 926 visibility: visible; 927 transition: transform 300ms ease-in; 928 /* To center the warning box horizontally, 929 we use left: 50% with translateX(-50%). */ 930 top: 0; left: 50%; 931 transform: translate(-50%, -100%); 932 box-sizing: border-box; 933 width: max-content; 934 max-width: 95%; 935 pointer-events: none; 936} 937.pointerlockfswarning:not([hidden]) { 938 display: flex; 939 will-change: transform; 940} 941.pointerlockfswarning[onscreen] { 942 transform: translate(-50%, 50px); 943} 944.pointerlockfswarning[ontop] { 945 /* Use -10px to hide the border and border-radius on the top */ 946 transform: translate(-50%, -10px); 947} 948:root[macOSNativeFullscreen] .pointerlockfswarning[ontop] { 949 transform: translate(-50%, 80px); 950} 951 952.pointerlockfswarning-domain-text, 953.pointerlockfswarning-generic-text { 954 word-wrap: break-word; 955 /* We must specify a min-width, otherwise word-wrap:break-word doesn't work. Bug 630864. */ 956 min-width: 1px 957} 958.pointerlockfswarning-domain-text:not([hidden]) + .pointerlockfswarning-generic-text { 959 display: none; 960} 961 962#fullscreen-exit-button { 963 pointer-events: auto; 964} 965 966/* notification anchors should only be visible when their associated 967 notifications are */ 968#nav-bar:not([keyNav=true]) .notification-anchor-icon { 969 -moz-user-focus: normal; 970} 971 972#blocked-permissions-container > .blocked-permission-icon:not([showing]), 973.notification-anchor-icon:not([showing]) { 974 display: none; 975} 976 977#invalid-form-popup > description { 978 max-width: 280px; 979} 980 981.popup-anchor { 982 /* should occupy space but not be visible */ 983 opacity: 0; 984 pointer-events: none; 985 position: absolute; 986} 987 988browser[tabmodalPromptShowing], browser[tabDialogShowing] { 989 -moz-user-focus: none !important; 990} 991 992/* Status panel */ 993 994#statuspanel { 995 display: block; 996 position: fixed; 997 margin-top: -3em; 998 max-width: calc(100% - 5px); 999 pointer-events: none; 1000} 1001 1002#statuspanel[mirror] { 1003 inset-inline-start: auto; 1004 inset-inline-end: 0; 1005} 1006 1007#statuspanel[sizelimit] { 1008 max-width: 50%; 1009} 1010 1011#statuspanel[type=status] { 1012 min-width: 23em; 1013} 1014 1015@media all and (max-width: 800px) { 1016 #statuspanel[type=status] { 1017 min-width: 33%; 1018 } 1019} 1020 1021#statuspanel[type=overLink] { 1022 transition: opacity 120ms ease-out, visibility 120ms; 1023} 1024 1025#statuspanel:is([type=overLink], [inactive][previoustype=overLink]) > #statuspanel-inner { 1026 direction: ltr; 1027} 1028 1029#statuspanel[inactive] { 1030 transition: none; 1031 opacity: 0; 1032 visibility: hidden; 1033} 1034 1035#statuspanel[inactive][previoustype=overLink] { 1036 transition: opacity 200ms ease-out, visibility 200ms; 1037} 1038 1039#statuspanel-inner { 1040 height: 3em; 1041 width: 100%; 1042 -moz-box-align: end; 1043} 1044 1045/*** Visibility of downloads indicator controls ***/ 1046 1047/* Hide the default icon, show the anchor instead. */ 1048#downloads-button[indicator] > .toolbarbutton-badge-stack > image.toolbarbutton-icon { 1049 display: none; 1050} 1051 1052toolbarpaletteitem[place="palette"] > #downloads-button[indicator] > .toolbarbutton-badge-stack > image.toolbarbutton-icon { 1053 display: -moz-box; 1054} 1055 1056toolbarpaletteitem[place="palette"] > #downloads-button[indicator] > .toolbarbutton-badge-stack > #downloads-indicator-anchor { 1057 display: none; 1058} 1059 1060/* Give this menupopup an arrow panel styling */ 1061#BMB_bookmarksPopup { 1062 background: transparent; 1063 border: none; 1064 /* The popup inherits -moz-image-region from the button, must reset it */ 1065 -moz-image-region: auto; 1066} 1067 1068#BMB_bookmarksPopup, 1069#BMB_bookmarksPopup menupopup { 1070 appearance: none; 1071} 1072 1073@supports -moz-bool-pref("xul.panel-animations.enabled") { 1074@media (prefers-reduced-motion: no-preference) { 1075%ifdef MOZ_WIDGET_COCOA 1076 /* On Mac, use the properties "-moz-window-transform" and "-moz-window-opacity" 1077 instead of "transform" and "opacity" for these animations. 1078 The -moz-window* properties apply to the whole window including the window's 1079 shadow, and they don't affect the window's "shape", so the system doesn't 1080 have to recompute the shadow shape during the animation. This makes them a 1081 lot faster. In fact, Gecko no longer triggers shadow shape recomputations 1082 for repaints. 1083 These properties are not implemented on other platforms. */ 1084 #BMB_bookmarksPopup:not([animate="false"]) { 1085 transition-property: -moz-window-transform, -moz-window-opacity; 1086 transition-duration: 0.18s, 0.18s; 1087 transition-timing-function: 1088 var(--animation-easing-function), ease-out; 1089 } 1090 1091 /* Only do the fade-in animation on pre-Big Sur to avoid missing shadows on 1092 * Big Sur, see bug 1672091. */ 1093 @media (-moz-mac-big-sur-theme: 0) { 1094 #BMB_bookmarksPopup:not([animate="false"]) { 1095 -moz-window-opacity: 0; 1096 -moz-window-transform: translateY(-70px); 1097 } 1098 1099 #BMB_bookmarksPopup[side="bottom"]:not([animate="false"]) { 1100 -moz-window-transform: translateY(70px); 1101 } 1102 } 1103 1104 /* [animate] is here only so that this rule has greater specificity than the 1105 * rule right above */ 1106 #BMB_bookmarksPopup[animate][animate="open"] { 1107 -moz-window-opacity: 1.0; 1108 transition-duration: 0.18s, 0.18s; 1109 -moz-window-transform: none; 1110 transition-timing-function: 1111 var(--animation-easing-function), ease-in-out; 1112 } 1113 1114 #BMB_bookmarksPopup[animate][animate="cancel"] { 1115 -moz-window-opacity: 0; 1116 -moz-window-transform: none; 1117 } 1118%else 1119 #BMB_bookmarksPopup:not([animate="false"]) { 1120 opacity: 0; 1121 transform: translateY(-70px); 1122 transition-property: transform, opacity; 1123 transition-duration: 0.18s, 0.18s; 1124 transition-timing-function: 1125 var(--animation-easing-function), ease-out; 1126 } 1127 1128 #BMB_bookmarksPopup[side="bottom"]:not([animate="false"]) { 1129 transform: translateY(70px); 1130 } 1131 1132 /* [animate] is here only so that this rule has greater specificity than the 1133 * rule right above */ 1134 #BMB_bookmarksPopup[animate][animate="open"] { 1135 opacity: 1.0; 1136 transition-duration: 0.18s, 0.18s; 1137 transform: none; 1138 transition-timing-function: 1139 var(--animation-easing-function), ease-in-out; 1140 } 1141 1142 #BMB_bookmarksPopup[animate][animate="cancel"] { 1143 transform: none; 1144 } 1145%endif 1146} 1147} 1148 1149/* Apply crisp rendering for favicons at exactly 2dppx resolution */ 1150@media (resolution: 2dppx) { 1151 .PanelUI-remotetabs-clientcontainer > toolbarbutton > .toolbarbutton-icon, 1152 #PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon, 1153 #PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon, 1154 #PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon { 1155 image-rendering: -moz-crisp-edges; 1156 } 1157} 1158 1159#customization-container { 1160 -moz-box-orient: horizontal; 1161 flex-direction: column; 1162} 1163 1164#customization-container:not([hidden]) { 1165 /* In a separate rule to avoid 'display:flex' causing the node to be 1166 * displayed while the container is still hidden. */ 1167 display: flex; 1168} 1169 1170#customization-content-container { 1171 display: flex; 1172 flex-grow: 1; /* Grow so there isn't empty space below the footer */ 1173 min-height: 0; /* Allow this to shrink so the footer doesn't get pushed out. */ 1174} 1175 1176#customization-panelHolder { 1177 padding-top: 10px; 1178 padding-bottom: 10px; 1179} 1180 1181#customization-panelHolder > #widget-overflow-fixed-list { 1182 flex: 1 1 auto; /* Grow within the available space, and allow ourselves to shrink */ 1183 display: flex; 1184 flex-direction: column; 1185 overflow-y: auto; 1186 overflow-x: hidden; 1187} 1188 1189#customization-panelWrapper, 1190#customization-panelWrapper > .panel-arrowcontent, 1191#customization-panelHolder { 1192 flex-direction: column; 1193 display: flex; 1194 min-height: calc(174px + 9em); 1195} 1196 1197#customization-panelWrapper { 1198 flex: 1 1 auto; 1199 height: 0; /* Don't let my contents affect ancestors' content-based sizing */ 1200 align-items: end; /* align to the end on the cross-axis (affects arrow) */ 1201} 1202 1203#customization-panelWrapper, 1204#customization-panelWrapper > .panel-arrowcontent { 1205 -moz-box-flex: 1; 1206} 1207 1208#customization-panel-container { 1209 overflow-y: auto; 1210 display: flex; 1211 flex-direction: column; 1212 flex: none; 1213} 1214 1215toolbarpaletteitem[dragover] { 1216 border-inline-color: transparent; 1217} 1218 1219#customization-palette-container { 1220 display: flex; 1221 flex-direction: column; 1222 flex-grow: 1; 1223} 1224 1225#customization-palette:not([hidden]) { 1226 display: block; 1227 flex: 1 1 auto; 1228 overflow: auto; 1229 min-height: 3em; 1230} 1231 1232#customization-footer-spacer, 1233#customization-spacer { 1234 flex: 1 1 auto; 1235} 1236 1237#customization-footer { 1238 display: flex; 1239 flex-shrink: 0; 1240 flex-wrap: wrap; 1241} 1242 1243#customization-toolbar-visibility-button > .box-inherit > .button-menu-dropmarker { 1244 display: -moz-box; 1245} 1246 1247@media (-moz-proton) { 1248#customization-lwtheme-button > .box-inherit > .button-menu-dropmarker, 1249#customization-uidensity-button > .box-inherit > .button-menu-dropmarker { 1250 display: -moz-box; 1251} 1252} /*** END proton ***/ 1253 1254toolbarpaletteitem[place="palette"] { 1255 -moz-box-orient: vertical; 1256 width: 7em; 1257 max-width: 7em; 1258 /* icon (16) + margin (9 + 12) + 3 lines of text: */ 1259 height: calc(39px + 3em); 1260 margin-bottom: 5px; 1261 margin-inline-end: 24px; 1262 overflow: visible; 1263 display: inline-block; 1264 vertical-align: top; 1265} 1266 1267toolbarpaletteitem[place="palette"][hidden] { 1268 display: none; 1269} 1270 1271toolbarpaletteitem > toolbarbutton, 1272toolbarpaletteitem > toolbaritem { 1273 /* Prevent children from getting events */ 1274 pointer-events: none; 1275 -moz-box-pack: center; 1276} 1277 1278toolbarpaletteitem:not([place="palette"]) > #stop-reload-button { 1279 -moz-box-pack: inherit; 1280} 1281 1282:root[customizing=true] .addon-banner-item, 1283:root[customizing=true] .panel-banner-item { 1284 display: none; 1285} 1286 1287/* UI Tour */ 1288 1289@keyframes uitour-wobble { 1290 from { 1291 transform: rotate(0deg) translateX(3px) rotate(0deg); 1292 } 1293 50% { 1294 transform: rotate(360deg) translateX(3px) rotate(-360deg); 1295 } 1296 to { 1297 transform: rotate(720deg) translateX(0px) rotate(-720deg); 1298 } 1299} 1300 1301@keyframes uitour-zoom { 1302 from { 1303 transform: scale(0.8); 1304 } 1305 50% { 1306 transform: scale(1.0); 1307 } 1308 to { 1309 transform: scale(0.8); 1310 } 1311} 1312 1313@keyframes uitour-color { 1314 from { 1315 border-color: #5B9CD9; 1316 } 1317 50% { 1318 border-color: #FF0000; 1319 } 1320 to { 1321 border-color: #5B9CD9; 1322 } 1323} 1324 1325#UITourHighlightContainer, 1326#UITourHighlight { 1327 pointer-events: none; 1328} 1329 1330#UITourHighlight[active] { 1331 animation-delay: 2s; 1332 animation-fill-mode: forwards; 1333 animation-iteration-count: infinite; 1334 animation-timing-function: linear; 1335} 1336 1337#UITourHighlight[active="wobble"] { 1338 animation-name: uitour-wobble; 1339 animation-delay: 0s; 1340 animation-duration: 1.5s; 1341 animation-iteration-count: 1; 1342} 1343#UITourHighlight[active="zoom"] { 1344 animation-name: uitour-zoom; 1345 animation-duration: 1s; 1346} 1347#UITourHighlight[active="color"] { 1348 animation-name: uitour-color; 1349 animation-duration: 2s; 1350} 1351 1352/* Combined context-menu items */ 1353#context-navigation > .menuitem-iconic > .menu-iconic-text, 1354#context-navigation > .menuitem-iconic > .menu-accel-container { 1355 display: none; 1356} 1357 1358.popup-notification-invalid-input { 1359 box-shadow: 0 0 1.5px 1px red; 1360} 1361 1362.popup-notification-invalid-input[focused] { 1363 box-shadow: 0 0 2px 2px rgba(255,0,0,0.4); 1364} 1365 1366.popup-notification-description[popupid=webauthn-prompt-register-direct] { 1367 white-space: pre-line; 1368} 1369 1370.dragfeedback-tab { 1371 appearance: none; 1372 opacity: 0.65; 1373 -moz-window-shadow: none; 1374} 1375 1376/* Page action buttons */ 1377.pageAction-panel-button > .toolbarbutton-icon { 1378 list-style-image: var(--pageAction-image-16px, inherit); 1379} 1380.urlbar-page-action { 1381 list-style-image: var(--pageAction-image-16px, inherit); 1382} 1383@media (min-resolution: 1.1dppx) { 1384 .pageAction-panel-button > .toolbarbutton-icon { 1385 list-style-image: var(--pageAction-image-32px, inherit); 1386 } 1387 .urlbar-page-action { 1388 list-style-image: var(--pageAction-image-32px, inherit); 1389 } 1390} 1391 1392/* Print pending */ 1393.printSettingsBrowser { 1394 width: 250px !important; 1395} 1396 1397.previewStack { 1398 background-color: #f9f9fa; 1399 color: #0c0c0d; 1400} 1401 1402.previewRendering { 1403 background-image: url("chrome://browser/skin/tabbrowser/pendingpaint.png"); 1404 background-repeat: no-repeat; 1405 background-size: 60px 60px; 1406 background-position: center center; 1407 display: flex; 1408 align-items: center; 1409 justify-content: center; 1410 visibility: hidden; 1411} 1412 1413.previewStack[rendering=true] > .previewRendering { 1414 visibility: visible; 1415} 1416 1417.printPreviewBrowser { 1418 visibility: collapse; 1419 opacity: 1; 1420 transition: opacity 60ms; 1421} 1422 1423.previewStack[previewtype="source"] > .printPreviewBrowser[previewtype="source"], 1424.previewStack[previewtype="selection"] > .printPreviewBrowser[previewtype="selection"], 1425.previewStack[previewtype="simplified"] > .printPreviewBrowser[previewtype="simplified"] { 1426 visibility: visible; 1427} 1428 1429.previewStack[rendering=true] > .printPreviewBrowser { 1430 opacity: 0; 1431 transition: opacity 1ms 250ms; 1432} 1433 1434.print-pending-label { 1435 margin-top: 110px; 1436 font-size: large; 1437} 1438 1439printpreview-pagination { 1440 opacity: 0; 1441 transition: opacity 100ms 500ms; 1442} 1443printpreview-pagination:focus-within, 1444.previewStack:hover printpreview-pagination { 1445 opacity: 1; 1446 transition: opacity 100ms; 1447} 1448.previewStack[rendering=true] printpreview-pagination { 1449 opacity: 0; 1450} 1451 1452@media (-moz-toolbar-prefers-color-scheme: dark) { 1453 .previewStack { 1454 background-color: #2A2A2E; 1455 color: rgb(249, 249, 250); 1456 } 1457} 1458 1459/* WebExtension Sidebars */ 1460#sidebar-box[sidebarcommand$="-sidebar-action"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon { 1461 list-style-image: var(--webextension-menuitem-image, inherit); 1462 -moz-context-properties: fill; 1463 fill: currentColor; 1464 width: 16px; 1465 height: 16px; 1466} 1467 1468@media (min-resolution: 1.1dppx) { 1469 #sidebar-box[sidebarcommand$="-sidebar-action"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon { 1470 list-style-image: var(--webextension-menuitem-image-2x, inherit); 1471 } 1472} 1473 1474toolbar[keyNav=true]:not([collapsed=true], [customizing=true]) toolbartabstop { 1475 -moz-user-focus: normal; 1476} 1477 1478/* Frame used for rendering the DevTools inspector highlighters */ 1479:root > iframe.devtools-highlighter-renderer { 1480 border: none; 1481 pointer-events: none; 1482 position: fixed; 1483 top: 0; 1484 left: 0; 1485 width: 100%; 1486 height: 100%; 1487 z-index: 2; 1488} 1489 1490/** 1491 * Dialogs 1492 */ 1493 1494.dialogStack { 1495 /* Should outrank the z-index values of other UI elements, particularly the devtools 1496 splitter element. */ 1497 z-index: 2; 1498} 1499 1500.dialogStack.temporarilyHidden { 1501 /* For some printing use cases we need to visually hide the dialog before 1502 * actually closing it / make it disappear from the frame tree. */ 1503 visibility: hidden; 1504} 1505 1506.dialogOverlay { 1507 visibility: hidden; 1508} 1509 1510.dialogOverlay[topmost="true"] { 1511 z-index: 1; 1512} 1513 1514.dialogBox { 1515 background-clip: content-box; 1516 box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.2); 1517 display: -moz-box; 1518 margin: 0; 1519 padding: 0; 1520 overflow-x: auto; 1521} 1522 1523@media (-moz-proton) { 1524.dialogBox { 1525 border-radius: 8px; 1526} 1527} 1528 1529.dialogBox[resizable="true"] { 1530 resize: both; 1531 overflow: hidden; 1532 min-height: 20em; 1533} 1534 1535.dialogBox[sizeto="available"] { 1536 --box-inline-margin: 4px; 1537 --box-block-margin: 4px; 1538 --box-ideal-width: 1000; 1539 --box-ideal-height: 650; 1540 --box-max-width-margin: calc(100vw - 2 * var(--box-inline-margin)); 1541 --box-max-height-margin: calc(100vh - var(--box-top-px) - var(--box-block-margin)); 1542 --box-max-width-ratio: 70vw; 1543 --box-max-height-ratio: calc(var(--box-ideal-height) / var(--box-ideal-width) * var(--box-max-width-ratio)); 1544 max-width: min(max(var(--box-ideal-width) * 1px, var(--box-max-width-ratio)), var(--box-max-width-margin)); 1545 max-height: min(max(var(--box-ideal-height) * 1px, var(--box-max-height-ratio)), var(--box-max-height-margin)); 1546 width: 100vw; 1547 height: 100vh; 1548} 1549 1550@media (min-width: 550px) { 1551 .dialogBox[sizeto="available"] { 1552 --box-inline-margin: min(calc(4px + (100vw - 550px) / 4), 16px); 1553 } 1554} 1555 1556@media (min-width: 800px) { 1557 .dialogBox[sizeto="available"] { 1558 --box-inline-margin: min(calc(16px + (100vw - 800px) / 4), 32px); 1559 } 1560} 1561 1562@media (min-height: 350px) { 1563 .dialogBox[sizeto="available"] { 1564 --box-block-margin: min(calc(4px + (100vh - 350px) / 4), 16px); 1565 } 1566} 1567 1568@media (min-height: 550px) { 1569 .dialogBox[sizeto="available"] { 1570 --box-block-margin: min(calc(16px + (100vh - 550px) / 4), 32px); 1571 } 1572} 1573 1574.content-prompt-dialog > .dialogOverlay { 1575 display: grid; 1576 place-content: center; 1577 /* 90% for 5% top/bottom margins, the document height so that 1578 * smaller dialogs don't become too big. */ 1579 grid-auto-rows: min(90%, var(--doc-height-px)); 1580} 1581 1582:not(.content-prompt-dialog) > .dialogOverlay > .dialogBox { 1583 /* Make dialogs overlap with upper chrome UI. */ 1584 margin-top: -5px; 1585} 1586 1587#window-modal-dialog { 1588 overflow: visible; 1589 padding: 0; 1590 --chrome-offset: 20px; /* gets overridden from JS, but pick some default... */ 1591 margin-top: max( 1592 /* Do not go below 8px, corresponding to the negative margin above plus 1593 * a tiny bit of space, as otherwise the top of the dialog would be 1594 * adjacent to or clipped by the top of the window. */ 1595 8px, 1596 /* Otherwise, use the chrome height, 1597 * or the height of the parent window minus the height of the dialog, 1598 * whichever is smaller. */ 1599 min( 1600 var(--chrome-offset), 1601 calc(100vh - var(--inner-height)) 1602 ) 1603 ); 1604} 1605 1606.dialogFrame { 1607 margin: 0; 1608 -moz-box-flex: 1; 1609 /* Default dialog dimensions */ 1610 width: 34em; 1611 /* will get overridden, but need to change the default so small 1612 * dialogs don't end up being 150px tall */ 1613 height: 80px; 1614} 1615 1616/* Override default <html:dialog> styles */ 1617#window-modal-dialog { 1618 border-width: 0; 1619 background-color: transparent; 1620} 1621 1622.dialogOverlay[topmost="true"], 1623#window-modal-dialog::backdrop { 1624 background-color: rgba(28, 27, 34, 0.45); 1625} 1626 1627#window-modal-dialog.showToolbar::backdrop { 1628 background: linear-gradient(transparent, rgba(28, 27, 34, 0.45) 20%); 1629} 1630 1631/* For the window-modal dialog, the background is supplied by the HTML dialog 1632 * backdrop, so the dialogOverlay background above "double backgrounds" - so 1633 * we remove it here: */ 1634#window-modal-dialog > .dialogOverlay[topmost="true"] { 1635 background-color: transparent; 1636} 1637 1638/* Hide tab-modal dialogs when a window-modal one is up. */ 1639:root[window-modal-open] .browserStack > .dialogStack { 1640 visibility: hidden; 1641} 1642 1643/** 1644 * End Dialogs 1645 */ 1646