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