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