browser/base/content/browser.css

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