LCARStrek/browser/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 @import url("chrome://global/skin/");
   6 @import url("downloads/indicator.css");
   7
   8 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
   9 @namespace html url("http://www.w3.org/1999/xhtml");
  10 @namespace svg url("http://www.w3.org/2000/svg");
  11
  12 toolbar {
  13   -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar");
  14 }
  15
  16 toolbar[customizable="true"] {
  17   -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-browsercustom");
  18 }
  19
  20 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme), (-moz-mac-yosemite-theme) {
  21   /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
  22   toolbar[customizable="true"]:not([nowindowdrag="true"]) {
  23     -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-drag-browsercustom");
  24   }
  25 }
  26
  27 toolbar[type="menubar"][autohide="true"] {
  28   -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-menubar-autohide");
  29 }
  30
  31 #toolbar-menubar[autohide="true"] {
  32   -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-menubar-autohide-browsercustom");
  33 }
  34
  35 menubar {
  36   -moz-binding: url("chrome://global/skin/globalBindings.xml#menubar");
  37 }
  38
  39 :root {
  40   /*--backbutton-urlbar-overlap: 5px;*/
  41
  42   /* icon width + border + horizontal padding (includes the overlap from backbutton-urlbar-overlap) */
  43   --forwardbutton-width: 27px;
  44   /* icon width + border + horizontal padding (without the overlap from backbutton-urlbar-overlap) /
  45   --forwardbutton-width: 25px;*/
  46
  47   --identity-box-verified-background-color: #000000;
  48
  49   --panel-separator-color: #A09090;
  50
  51   --urlbar-separator-color: #9C9CFF;
  52 }
  53
  54 #menubar-items {
  55   -moz-box-orient: vertical; /* for flex hack */
  56 }
  57
  58 #main-menubar {
  59   -moz-box-flex: 1; /* make menu items expand to fill toolbar height */
  60 }
  61
  62 /* ::::: primary toolbar ::::: */
  63
  64 .toolbar-primary > .toolbar-box > .toolbar-holder {
  65   background-color: #A09090;
  66 }
  67
  68 .toolbar-primary > .toolbar-box > .toolbar-startcap,
  69 .toolbar-primary > .toolbar-box > .toolbar-endcap {
  70   background-color: #9C9CFF;
  71 }
  72
  73 /* Hides the titlebar-placeholder underneath the window caption buttons when we
  74    are not autohiding the menubar. */
  75 #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-placeholder[type="caption-buttons"] {
  76   display: none;
  77 }
  78
  79 /* We want a 4px gap between the TabsToolbar and the toolbar-menubar when the
  80    toolbar-menu is displayed, and a 16px gap when it is not. 1px is taken care
  81    of by the (light) outer shadow of the tab, the remaining 3/15 are these margins. */
  82 #toolbar-menubar:not([autohide=true]) ~ #TabsToolbar:not([inFullscreen]),
  83 #toolbar-menubar[autohide=true]:not([inactive]) ~ #TabsToolbar:not([inFullscreen]) {
  84 /*  margin-top: 3px;*/
  85 }
  86
  87 #main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen])[chromehidden~="menubar"] #toolbar-menubar ~ #TabsToolbar,
  88 #main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen]) #toolbar-menubar[autohide="true"][inactive] ~ #TabsToolbar {
  89 /*  margin-top: var(--space-above-tabbar);*/
  90 }
  91
  92 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
  93   /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
  94   #main-window[tabsintitlebar]:not([inFullscreen="true"]) #TabsToolbar {
  95     padding-left: 60px;
  96   }
  97 }
  98
  99 #main-window[tabsintitlebar] #toolbar-menubar .toolbar-endcap {
 100   /* the titlebar buttons are shown right over the endcap but we have no power over the buttonbox position just for this case, so hide the endcap */
 101   display: none;
 102 }
 103
 104 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #toolbar-menubar[customizing-dragovertarget].customization-target::before,
 105 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #TabsToolbar[customizing-dragovertarget].customization-target::before,
 106 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #toolbar-menubar.customization-target:hover::before,
 107 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #TabsToolbar.customization-target:hover::before {
 108   outline-color: #A09090;
 109 }
 110
 111 #navigator-toolbox {
 112 }
 113
 114 #navigator-toolbox::after {
 115   content: "";
 116   display: -moz-box;
 117   -moz-box-ordinal-group: 101; /* tabs toolbar is 100 */
 118   height: 1px;
 119 }
 120
 121 #navigator-toolbox > toolbar {
 122 }
 123
 124 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(:-moz-lwtheme) {
 125 }
 126
 127 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar) {
 128   overflow: -moz-hidden-unscrollable;
 129   max-height: 4em;
 130   transition: min-height 170ms ease-out, max-height 170ms ease-out;
 131 }
 132
 133 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar)[collapsed=true] {
 134   min-height: 0.1px;
 135   max-height: 0;
 136   transition: min-height 170ms ease-out, max-height 170ms ease-out, visibility 170ms linear;
 137 }
 138
 139 @media (-moz-mac-graphite-theme: 0) and (-moz-mac-lion-theme: 0) {
 140   /* This is a hackish workaround to exclude most of Mac OS until bug 1060941 gets fixed. */
 141   /* Indent also due to non-applicable aero rule in original Windows theme. */
 142   #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme),
 143   #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme) {
 144     /* like menubar */
 145     background-color: #6000CF;
 146     color: #FF9F00;
 147   }
 148
 149   #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme):-moz-window-inactive,
 150   #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme):-moz-window-inactive {
 151     background-color: #8050B0;
 152     color: #FF9F00;
 153   }
 154
 155   #main-window[tabsintitlebar] #main-menubar > menu:not(:-moz-lwtheme) {
 156     /*color: inherit;*/
 157   }
 158
 159   #main-window[tabsintitlebar] #titlebar:-moz-lwtheme {
 160     visibility: hidden;
 161   }
 162
 163   #main-window[tabsintitlebar] #titlebar-content:-moz-lwtheme {
 164     -moz-binding: url("chrome://global/content/bindings/general.xml#windowdragbox");
 165     visibility: visible;
 166   }
 167 }
 168
 169 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
 170   /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
 171   #titlebar-buttonbox > .titlebar-button {
 172     display: none;
 173   }
 174 }
 175
 176 #nav-bar {
 177   /* Position the toolbar above the bottom of background tabs */
 178   position: relative;
 179   z-index: 1;
 180 }
 181
 182 #personal-bookmarks {
 183 /*  min-height: 24px; */
 184 }
 185
 186 #PersonalToolbar > #home-button {
 187   -moz-box-orient: horizontal;
 188 }
 189
 190 #PersonalToolbar > #home-button > .toolbarbutton-text {
 191   display: block;
 192 }
 193
 194 #print-preview-toolbar:not(:-moz-lwtheme) {
 195   /* -moz-appearance: toolbox; */
 196 }
 197
 198 #browser-bottombox:not(:-moz-lwtheme) {
 199 }
 200
 201 /* ::::: titlebar ::::: */
 202
 203 #titlebar {
 204   /* like menubar */
 205   background-color: #6000CF;
 206   color: #FF9F00;
 207 }
 208 #titlebar:-moz-window-inactive {
 209   background-color: #8050B0;
 210   color: #FF9F00;
 211 }
 212
 213 #main-window[sizemode="normal"] > #titlebar {
 214   margin-top: -3px;
 215   margin-bottom: 3px;
 216 }
 217
 218 #main-window[sizemode="maximized"] > #titlebar {
 219   margin-top: 4px;
 220 }
 221
 222 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
 223   /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
 224   #main-window[sizemode="normal"] > #titlebar,
 225   #main-window[sizemode="maximized"] > #titlebar {
 226     margin-top: 19px;
 227     /* There is a margin-bottom set to -23 by code. */
 228   }
 229 }
 230
 231 /* The button box must appear on top of the navigator-toolbox in order for
 232  * click and hover mouse events to work properly for the button in the restored
 233  * window state. Otherwise, elements in the navigator-toolbox, like the menubar,
 234  * can swallow those events. It will also place the buttons above the fog on
 235  * themes with Aero Glass.
 236  */
 237 #titlebar-buttonbox,
 238 #main-window[sizemode="maximized"] #titlebar-buttonbox {
 239   -moz-appearance: none;
 240   margin-top: 6px;
 241   margin-top: 4px;
 242   margin-inline-end: 3px;
 243   z-index: 1;
 244 }
 245
 246 .titlebar-placeholder[type="appmenu-button"] {
 247   margin-left: 4px;
 248 }
 249
 250 .titlebar-placeholder[type="caption-buttons"] {
 251   margin-left: 10px;
 252 }
 253
 254 /* titlebar command buttons */
 255 #titlebar-min {
 256   list-style-image: url("chrome://browser/skin/caption-buttons.svg#minimize");
 257 }
 258
 259 #titlebar-min:hover {
 260   list-style-image: url("chrome://browser/skin/caption-buttons.svg#minimize-hover");
 261 }
 262
 263 #titlebar-max {
 264   list-style-image: url("chrome://browser/skin/caption-buttons.svg#maximize");
 265 }
 266
 267 #titlebar-max:hover {
 268   list-style-image: url("chrome://browser/skin/caption-buttons.svg#maximize-hover");
 269 }
 270
 271 #main-window[sizemode="maximized"] #titlebar-max {
 272   list-style-image: url("chrome://browser/skin/caption-buttons.svg#restore");
 273 }
 274
 275 #main-window[sizemode="maximized"] #titlebar-max:hover {
 276   list-style-image: url("chrome://browser/skin/caption-buttons.svg#restore-hover");
 277 }
 278
 279 #titlebar-close {
 280   list-style-image: url("chrome://browser/skin/caption-buttons.svg#close");
 281 }
 282
 283 #titlebar-close:hover {
 284   list-style-image: url("chrome://browser/skin/caption-buttons.svg#close-hover");
 285 }
 286
 287 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
 288   /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
 289   #titlebar-fullscreen-button {
 290     -moz-appearance: none;
 291     list-style-image: url("chrome://browser/skin/icons/mac-fullscreen-icon.png");
 292     -moz-image-region: rect(0px, 16px, 16px, 0px);
 293   }
 294
 295   #titlebar-fullscreen-button:hover {
 296     -moz-image-region: rect(0px, 32px, 16px, 16px);
 297   }
 298
 299   @media (min-resolution: 2dppx) {
 300     #titlebar-fullscreen-button {
 301       list-style-image: url("chrome://browser/skin/icons/mac-fullscreen-icon@2x.png");
 302       -moz-image-region: rect(0px, 32px, 32px, 0px);
 303     }
 304
 305     #titlebar-fullscreen-button:hover {
 306       -moz-image-region: rect(0px, 64px, 32px, 32px);
 307     }
 308   }
 309 }
 310
 311
 312 /* ::::: bookmark buttons ::::: */
 313
 314 toolbarbutton.bookmark-item:not(.subviewbutton),
 315 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder {
 316 /*  margin: 0;
 317   padding: 2px 3px;
 318   -moz-appearance: none;
 319   border: 1px solid transparent;*/
 320 }
 321
 322 toolbarbutton.bookmark-item:not(.subviewbutton):hover:not([disabled="true"]):not([open]) {
 323 /*  border-color: var(--toolbarbutton-hover-bordercolor);
 324   background: var(--toolbarbutton-hover-background);*/
 325 }
 326
 327 toolbarbutton.bookmark-item:not(.subviewbutton):hover:active:not([disabled="true"]),toolbarbutton.bookmark-item[open="true"] {
 328 /*  border-color: var(--toolbarbutton-active-bordercolor);
 329   box-shadow: var(--toolbarbutton-active-boxshadow);
 330   background: var(--toolbarbutton-active-background);*/
 331 }
 332
 333 .bookmark-item > .toolbarbutton-icon,
 334 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
 335   width: 16px;
 336   height: 16px;
 337   margin-inline-start: 1px;
 338   margin-inline-end: 2px;
 339   margin-top: 1px;
 340   margin-bottom: 1px;
 341 }
 342
 343 /* Force the display of the label for bookmarks */
 344 .bookmark-item > .toolbarbutton-text,
 345 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-text {
 346   display: -moz-box !important;
 347 }
 348
 349 .bookmark-item > .toolbarbutton-menu-dropmarker {
 350   display: none;
 351 }
 352
 353 #bookmarks-toolbar-placeholder {
 354   list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png") !important;
 355   -moz-box-orient: horizontal;
 356 }
 357
 358 toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-placeholder,
 359 #personal-bookmarks[cui-areatype="menu-panel"] > #bookmarks-toolbar-placeholder {
 360   list-style-image: url("chrome://browser/skin/places/bookmarksToolbar-menuPanel.png") !important;
 361 }
 362
 363 /* ----- BOOKMARK STAR ANIMATION ----- */
 364
 365 @keyframes animation-bookmarkAdded {
 366   from { transform: rotate(0deg) translateX(-16px) rotate(0deg) scale(1); opacity: 0; }
 367   60%  { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(2.2); opacity: 1; }
 368   80%  { opacity: 1; }
 369   to   { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(1); opacity: 0; }
 370 }
 371
 372 @keyframes animation-bookmarkPulse {
 373   from { transform: scale(1); }
 374   50%  { transform: scale(1.3); }
 375   to   { transform: scale(1); }
 376 }
 377
 378 #bookmarked-notification-container {
 379   min-height: 1px;
 380   min-width: 1px;
 381   height: 1px;
 382   margin-bottom: -1px;
 383   z-index: 5;
 384   position: relative;
 385 }
 386
 387 #bookmarked-notification {
 388   background-size: 16px;
 389   background-position: center;
 390   background-repeat: no-repeat;
 391   width: 16px;
 392   height: 16px;
 393   opacity: 0;
 394 }
 395
 396 #bookmarked-notification-dropmarker-anchor {
 397   z-index: -1;
 398   position: relative;
 399 }
 400
 401 #bookmarked-notification-dropmarker-icon {
 402   width: 18px;
 403   height: 18px;
 404   visibility: hidden;
 405 }
 406
 407 #bookmarked-notification-anchor[notification="finish"] > #bookmarked-notification {
 408   background-image: url("chrome://browser/skin/places/bookmarks-notification-finish.png");
 409   animation: animation-bookmarkAdded 800ms;
 410   animation-timing-function: ease, ease, ease;
 411 }
 412
 413 #bookmarks-menu-button[notification="finish"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
 414   list-style-image: none !important;
 415 }
 416
 417 #bookmarked-notification-dropmarker-anchor[notification="finish"] > #bookmarked-notification-dropmarker-icon {
 418   visibility: visible;
 419   animation: animation-bookmarkPulse 300ms;
 420   animation-delay: 600ms;
 421   animation-timing-function: ease-out;
 422 }
 423
 424 /* ::::: bookmark menus ::::: */
 425
 426 menu.bookmark-item,
 427 menuitem.bookmark-item {
 428   min-width: 0;
 429   max-width: 32em;
 430 }
 431
 432 .bookmark-item:not(.subviewbutton) > .menu-iconic-left {
 433   margin-top: 0;
 434   margin-bottom: 0;
 435 }
 436
 437 .bookmark-item > .menu-iconic-left > .menu-iconic-icon {
 438   padding-inline-start: 0px;
 439 }
 440
 441 /* ::::: bookmark items ::::: */
 442
 443 .bookmark-item  {
 444   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
 445   -moz-image-region: auto;
 446 }
 447
 448 .bookmark-item[container] {
 449   list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
 450   -moz-image-region: auto;
 451 }
 452
 453 .bookmark-item[container][open] {
 454   list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
 455   -moz-image-region: auto;
 456 }
 457
 458 .bookmark-item[container][livemark] {
 459   list-style-image: url("chrome://communicator/skin/bookmarks/livemark-folder.png");
 460   -moz-image-region: auto;
 461 }
 462
 463 .bookmark-item[container][livemark] .bookmark-item {
 464   list-style-image: url("chrome://communicator/skin/bookmarks/livemark-item.png");
 465   -moz-image-region: rect(0px, 16px, 16px, 0px);
 466 }
 467
 468 .bookmark-item[container][livemark] .bookmark-item[visited] {
 469   -moz-image-region: rect(0px, 32px, 16px, 16px);
 470 }
 471
 472 .bookmark-item[container][query] {
 473   list-style-image: url("chrome://communicator/skin/bookmarks/query.png");
 474   -moz-image-region: auto;
 475 }
 476
 477 .bookmark-item[query][tagContainer] {
 478   list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
 479   -moz-image-region: auto;
 480 }
 481
 482 .bookmark-item[query][dayContainer] {
 483   list-style-image: url("chrome://communicator/skin/history/calendar.png");
 484   -moz-image-region: auto;
 485 }
 486
 487 .bookmark-item[query][hostContainer] {
 488   list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
 489   -moz-image-region: auto;
 490 }
 491
 492 .bookmark-item[query][hostContainer][open] {
 493   list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
 494   -moz-image-region: auto;
 495 }
 496
 497 .bookmark-item[cutting] > .toolbarbutton-icon,
 498 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-icon {
 499   opacity: 0.5;
 500 }
 501
 502 .bookmark-item[cutting] > .toolbarbutton-text,
 503 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-text {
 504   opacity: 0.7;
 505 }
 506
 507 /* ::::: primary toolbar buttons ::::: */
 508
 509 /* === BEGIN toolbarbuttons.inc.css === */
 510
 511 /* Whole section of this included file: */
 512 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
 513           #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
 514           #social-share-button, #open-file-button, #find-button, #developer-button,
 515           #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
 516           #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
 517           #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
 518           #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu),
 519 #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
 520   list-style-image: url("chrome://browser/skin/ToolbarFx.png");
 521 }
 522
 523 #back-button {
 524   -moz-image-region: rect(0, 36px, 18px, 18px);
 525 }
 526
 527 #back-button:hover:not([disabled="true"]) {
 528   -moz-image-region: rect(18px, 36px, 36px, 18px);
 529 }
 530
 531 #back-button[disabled="true"] {
 532   -moz-image-region: rect(36px, 36px, 54px, 18px);
 533 }
 534
 535 #forward-button {
 536   -moz-image-region: rect(0, 72px, 18px, 54px);
 537 }
 538
 539 #forward-button:hover:not([disabled="true"]) {
 540   -moz-image-region: rect(18px, 72px, 36px, 54px);
 541 }
 542
 543 #forward-button[disabled="true"] {
 544   -moz-image-region: rect(36px, 72px, 54px, 54px);
 545 }
 546
 547 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
 548 #forward-button:-moz-locale-dir(rtl) {
 549   transform: scaleX(-1);
 550 }
 551
 552 #home-button[cui-areatype="toolbar"] {
 553   -moz-image-region: rect(0, 126px, 18px, 108px);
 554 }
 555
 556 #home-button[cui-areatype="toolbar"]:hover {
 557   -moz-image-region: rect(18px, 126px, 36px, 108px);
 558 }
 559
 560 #bookmarks-menu-button[cui-areatype="toolbar"] {
 561   -moz-image-region: rect(0, 144px, 18px, 126px);
 562 }
 563
 564 #bookmarks-menu-button[cui-areatype="toolbar"]:hover,
 565 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] {
 566   -moz-image-region: rect(18px, 144px, 36px, 126px);
 567 }
 568
 569 /* When "new tab" page shows up, the menubutton-button (star button) is disabled */
 570 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button[disabled="true"] {
 571   -moz-image-region: rect(36px, 144px, 54px, 126px) !important;
 572   background-color: transparent !important;
 573 }
 574
 575 #bookmarks-menu-button[cui-areatype="toolbar"][starred] {
 576   -moz-image-region: rect(0, 162px, 18px, 144px);
 577 }
 578
 579 #bookmarks-menu-button[cui-areatype="toolbar"][starred]:hover,
 580 #bookmarks-menu-button[cui-areatype="toolbar"][starred][open="true"],
 581 #bookmarks-menu-button[cui-areatype="toolbar"][starred] > .toolbarbutton-menubutton-button[open="true"] {
 582   /* When starred and clicked (for edit/delete dialog),
 583    * then only the menubutton-button itself is open, but not the whole menubutton. */
 584   -moz-image-region: rect(18px, 162px, 36px, 144px);
 585 }
 586
 587 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
 588   -moz-image-region: rect(0, 630px, 18px, 612px);
 589 }
 590
 591 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker {
 592   padding: 1px;
 593   -moz-box-align: center;
 594 }
 595
 596 #bookmarks-menu-button[cui-areatype="toolbar"]:hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
 597 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
 598   -moz-image-region: rect(18px, 630px, 36px, 612px);
 599 }
 600
 601 #bookmarks-menu-button[cui-areatype="toolbar"]:hover:active > .toolbarbutton-menubutton-dropmarker,
 602 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker {
 603   padding-top: 2px;
 604   padding-bottom: 0px;
 605   padding-inline-start: 2px;
 606   padding-inline-end: 0px;
 607 }
 608
 609 #history-panelmenu[cui-areatype="toolbar"] {
 610   -moz-image-region: rect(0, 180px, 18px, 162px);
 611 }
 612
 613 #history-panelmenu[cui-areatype="toolbar"]:hover,
 614 #history-panelmenu[cui-areatype="toolbar"][open="true"] {
 615   -moz-image-region: rect(18px, 180px, 36px, 162px);
 616 }
 617
 618 #downloads-button[cui-areatype="toolbar"] {
 619   -moz-image-region: rect(0, 198px, 18px, 180px);
 620 }
 621
 622 #downloads-button[cui-areatype="toolbar"]:hover,
 623 #downloads-button[cui-areatype="toolbar"][open="true"] {
 624   -moz-image-region: rect(18px, 198px, 36px, 180px);
 625 }
 626
 627 #add-ons-button[cui-areatype="toolbar"] {
 628   -moz-image-region: rect(0, 216px, 18px, 198px);
 629 }
 630
 631 #add-ons-button[cui-areatype="toolbar"]:hover {
 632   -moz-image-region: rect(18px, 216px, 36px, 198px);
 633 }
 634
 635 #open-file-button[cui-areatype="toolbar"] {
 636   -moz-image-region: rect(0, 234px, 18px, 216px);
 637 }
 638
 639 #open-file-button[cui-areatype="toolbar"]:hover {
 640   -moz-image-region: rect(18px, 234px, 36px, 216px);
 641 }
 642
 643 #save-page-button[cui-areatype="toolbar"] {
 644   -moz-image-region: rect(0, 252px, 18px, 234px);
 645 }
 646
 647 #save-page-button[cui-areatype="toolbar"]:hover {
 648   -moz-image-region: rect(18px, 252px, 36px, 234px);
 649 }
 650
 651 #sync-button[cui-areatype="toolbar"] {
 652   -moz-image-region: rect(0, 792px, 18px, 774px);
 653 }
 654
 655 #sync-button[cui-areatype="toolbar"]:hover {
 656   -moz-image-region: rect(18px, 792px, 36px, 774px);
 657 }
 658
 659 #containers-panelmenu[cui-areatype="toolbar"] {
 660   -moz-image-region: rect(0, 810px, 18px, 792px);
 661 }
 662
 663 #containers-panelmenu[cui-areatype="toolbar"]:hover {
 664   -moz-image-region: rect(18px, 810px, 36px, 792px);
 665 }
 666
 667 #feed-button[cui-areatype="toolbar"] {
 668   -moz-image-region: rect(0, 288px, 18px, 270px);
 669 }
 670
 671 #feed-button[cui-areatype="menu-panel"][panel-multiview-anchor=true],
 672 #feed-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
 673   -moz-image-region: rect(18px, 288px, 36px, 270px);
 674 }
 675
 676 #feed-button[cui-areatype="toolbar"][disabled="true"] {
 677   -moz-image-region: rect(36px, 288px, 54px, 270px);
 678 }
 679
 680 #social-share-button[cui-areatype="toolbar"] {
 681   -moz-image-region: rect(0px, 306px, 18px, 288px);
 682 }
 683
 684 #social-share-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
 685 #social-share-button[cui-areatype="toolbar"][open="true"] {
 686   -moz-image-region: rect(18px, 306px, 36px, 288px);
 687 }
 688
 689 #social-share-button[cui-areatype="toolbar"][disabled="true"] {
 690   -moz-image-region: rect(36px, 306px, 54px, 288px);
 691 }
 692
 693 #characterencoding-button[cui-areatype="toolbar"] {
 694   -moz-image-region: rect(0, 324px, 18px, 306px);
 695 }
 696
 697 #characterencoding-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
 698 #characterencoding-button[cui-areatype="toolbar"][open="true"] {
 699   -moz-image-region: rect(18px, 324px, 36px, 306px);
 700 }
 701
 702 #characterencoding-button[cui-areatype="toolbar"][disabled="true"] {
 703   -moz-image-region: rect(36px, 324px, 54px, 306px);
 704 }
 705
 706 #new-window-button[cui-areatype="toolbar"] {
 707   -moz-image-region: rect(0, 342px, 18px, 324px);
 708 }
 709
 710 #new-window-button[cui-areatype="toolbar"]:hover {
 711   -moz-image-region: rect(18px, 342px, 36px, 324px);
 712 }
 713
 714 #e10s-button[cui-areatype="toolbar"] {
 715   -moz-image-region: rect(0, 342px, 18px, 324px);
 716 }
 717
 718 #e10s-button[cui-areatype="toolbar"]:hover {
 719   -moz-image-region: rect(18px, 342px, 36px, 324px);
 720 }
 721
 722 #e10s-button > .toolbarbutton-icon {
 723   transform: scaleY(-1);
 724 }
 725
 726 #new-tab-button[cui-areatype="toolbar"] {
 727   -moz-image-region: rect(0, 360px, 18px, 342px);
 728 }
 729
 730 #new-tab-button[cui-areatype="toolbar"]:hover {
 731   -moz-image-region: rect(18px, 360px, 36px, 342px);
 732 }
 733
 734 #privatebrowsing-button[cui-areatype="toolbar"] {
 735   -moz-image-region: rect(0, 378px, 18px, 360px);
 736 }
 737
 738 #privatebrowsing-button[cui-areatype="toolbar"]:hover {
 739   -moz-image-region: rect(18px, 378px, 36px, 360px);
 740 }
 741
 742 #find-button[cui-areatype="toolbar"] {
 743   -moz-image-region: rect(0, 396px, 18px, 378px);
 744 }
 745
 746 #find-button[cui-areatype="toolbar"]:hover {
 747   -moz-image-region: rect(18px, 396px, 36px, 378px);
 748 }
 749
 750 #print-button[cui-areatype="toolbar"] {
 751   -moz-image-region: rect(0, 414px, 18px, 396px);
 752 }
 753
 754 #print-button[cui-areatype="toolbar"]:hover {
 755   -moz-image-region: rect(18px, 414px, 36px, 396px);
 756 }
 757
 758 #fullscreen-button[cui-areatype="toolbar"] {
 759   -moz-image-region: rect(0, 432px, 18px, 414px);
 760 }
 761
 762 #fullscreen-button[cui-areatype="toolbar"]:hover {
 763   -moz-image-region: rect(18px, 432px, 36px, 414px);
 764 }
 765
 766 #developer-button[cui-areatype="toolbar"] {
 767   -moz-image-region: rect(0, 450px, 18px, 432px);
 768 }
 769
 770 #developer-button[cui-areatype="toolbar"]:hover,
 771 #developer-button[cui-areatype="toolbar"][open="true"] {
 772   -moz-image-region: rect(18px, 450px, 36px, 432px);
 773 }
 774
 775 #preferences-button[cui-areatype="toolbar"] {
 776   -moz-image-region: rect(0, 468px, 18px, 450px);
 777 }
 778
 779 #preferences-button[cui-areatype="toolbar"]:hover {
 780   -moz-image-region: rect(18px, 468px, 36px, 450px);
 781 }
 782
 783 #PanelUI-menu-button {
 784   -moz-image-region: rect(0, 486px, 18px, 468px);
 785 }
 786
 787 #PanelUI-menu-button:hover,
 788 #PanelUI-menu-button[open="true"] {
 789   -moz-image-region: rect(18px, 486px, 36px, 468px);
 790 }
 791
 792 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button {
 793   -moz-image-region: rect(0, 504px, 18px, 486px);
 794 }
 795
 796 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button:hover:not([disabled="true"]) {
 797   -moz-image-region: rect(18px, 504px, 36px, 486px);
 798 }
 799
 800 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button[disabled="true"] {
 801   -moz-image-region: rect(36px, 504px, 54px, 486px);
 802 }
 803
 804 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button {
 805   -moz-image-region: rect(0, 522px, 18px, 504px);
 806 }
 807
 808 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button:hover:not([disabled="true"]) {
 809   -moz-image-region: rect(18px, 522px, 36px, 504px);
 810 }
 811
 812 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button[disabled="true"] {
 813   -moz-image-region: rect(36px, 522px, 54px, 504px);
 814 }
 815
 816 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button {
 817   -moz-image-region: rect(0, 540px, 18px, 522px);
 818 }
 819
 820 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button:hover:not([disabled="true"]) {
 821   -moz-image-region: rect(18px, 540px, 36px, 522px);
 822 }
 823
 824 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button[disabled="true"] {
 825   -moz-image-region: rect(36px, 540px, 54px, 522px);
 826 }
 827
 828 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button {
 829   -moz-image-region: rect(0, 558px, 18px, 540px);
 830 }
 831
 832 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button:hover:not([disabled="true"]) {
 833   -moz-image-region: rect(18px, 558px, 36px, 540px);
 834 }
 835
 836 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button[disabled="true"] {
 837   -moz-image-region: rect(36px, 558px, 54px, 540px);
 838 }
 839
 840 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button {
 841   -moz-image-region: rect(0, 576px, 18px, 558px);
 842 }
 843
 844 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button:hover:not([disabled="true"]) {
 845   -moz-image-region: rect(18px, 576px, 36px, 558px);
 846 }
 847
 848 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button[disabled="true"] {
 849   -moz-image-region: rect(36px, 576px, 54px, 558px);
 850 }
 851
 852 #nav-bar-overflow-button {
 853   -moz-image-region: rect(0, 612px, 18px, 594px);
 854 }
 855
 856 #nav-bar-overflow-button:hover,
 857 #nav-bar-overflow-button[open="true"] {
 858   -moz-image-region: rect(18px, 612px, 36px, 594px);
 859 }
 860
 861 #nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
 862   transform: scaleX(-1);
 863 }
 864
 865 #tabview-button {
 866   -moz-image-region: rect(0, 648px, 18px, 630px);
 867 }
 868
 869 #tabview-button:hover {
 870   -moz-image-region: rect(18px, 648px, 36px, 630px);
 871 }
 872
 873 #email-link-button[cui-areatype="toolbar"] {
 874   -moz-image-region: rect(0, 666px, 18px, 648px);
 875 }
 876
 877 #email-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
 878   -moz-image-region: rect(18px, 666px, 36px, 648px);
 879 }
 880
 881 #email-button[cui-areatype="toolbar"][disabled="true"] {
 882   -moz-image-region: rect(36px, 666px, 54px, 648px);
 883 }
 884
 885 #sidebar-button[cui-areatype="toolbar"] {
 886   -moz-image-region: rect(0, 684px, 18px, 666px);
 887 }
 888
 889 #sidebar-button[cui-areatype="toolbar"]:hover {
 890   -moz-image-region: rect(18px, 684px, 36px, 666px);
 891 }
 892
 893 #panic-button[cui-areatype="toolbar"] {
 894   -moz-image-region: rect(0, 702px, 18px, 684px);
 895 }
 896
 897 #panic-button[cui-areatype="toolbar"]:hover,
 898 #panic-button[cui-areatype="toolbar"][open] {
 899   -moz-image-region: rect(18px, 702px, 36px, 684px);
 900 }
 901
 902 #panic-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
 903   transform: scaleX(-1);
 904 }
 905
 906 #webide-button[cui-areatype="toolbar"] {
 907   -moz-image-region: rect(0, 738px, 18px, 720px);
 908 }
 909
 910 #webide-button[cui-areatype="toolbar"]:hover {
 911   -moz-image-region: rect(18px, 738px, 36px, 720px);
 912 }
 913
 914 /* === END toolbarbuttons.inc.css === */
 915
 916 /* === BEGIN menupanel.inc.css === */
 917
 918 /* Menu panel and palette styles */
 919
 920 :root {
 921    /* avoid aero overrides with changed filenames */
 922   --menupanel-list-style-image: url(chrome://browser/skin/menuPanelFx.png);
 923   --menupanel-small-list-style-image: url(chrome://browser/skin/menuPanelFx-small.png);
 924 }
 925
 926 toolbaritem[sdkstylewidget="true"] > toolbarbutton,
 927 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
 928           #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
 929           #social-share-button, #open-file-button, #find-button, #developer-button,
 930           #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
 931           #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
 932           #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
 933           #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"],
 934 toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
 935           #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
 936           #social-share-button, #open-file-button, #find-button, #developer-button,
 937           #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
 938           #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
 939           #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
 940           #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu) {
 941   list-style-image: var(--menupanel-list-style-image);
 942 }
 943
 944 #home-button[cui-areatype="menu-panel"],
 945 toolbarpaletteitem[place="palette"] > #home-button {
 946   -moz-image-region: rect(0px, 128px, 32px, 96px);
 947 }
 948
 949 #home-button[cui-areatype="menu-panel"]:hover,
 950 toolbarpaletteitem[place="palette"] > #home-button:hover {
 951   -moz-image-region: rect(32px, 128px, 64px, 96px);
 952 }
 953
 954 #bookmarks-menu-button[cui-areatype="menu-panel"],
 955 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button {
 956   -moz-image-region: rect(0px, 192px, 32px, 160px);
 957 }
 958
 959 #bookmarks-menu-button[cui-areatype="menu-panel"]:hover,
 960 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button:hover {
 961   -moz-image-region: rect(32px, 192px, 64px, 160px);
 962 }
 963
 964 #bookmarks-menu-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
 965   -moz-image-region: rect(32px, 192px, 64px, 160px);
 966 }
 967
 968 #history-panelmenu[cui-areatype="menu-panel"],
 969 toolbarpaletteitem[place="palette"] > #history-panelmenu {
 970   -moz-image-region: rect(0px, 224px, 32px, 192px);
 971 }
 972
 973 #history-panelmenu[cui-areatype="menu-panel"]:hover,
 974 toolbarpaletteitem[place="palette"] > #history-panelmenu:hover {
 975   -moz-image-region: rect(32px, 224px, 64px, 192px);
 976 }
 977
 978 #history-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
 979   -moz-image-region: rect(32px, 224px, 64px, 192px);
 980 }
 981
 982 #downloads-button[cui-areatype="menu-panel"],
 983 toolbarpaletteitem[place="palette"] > #downloads-button {
 984   -moz-image-region: rect(0px, 256px, 32px, 224px);
 985 }
 986
 987 #downloads-button[cui-areatype="menu-panel"]:hover,
 988 toolbarpaletteitem[place="palette"] > #downloads-button:hover {
 989   -moz-image-region: rect(32px, 256px, 64px, 224px);
 990 }
 991
 992 #add-ons-button[cui-areatype="menu-panel"],
 993 toolbarpaletteitem[place="palette"] > #add-ons-button {
 994   -moz-image-region: rect(0px, 288px, 32px, 256px);
 995 }
 996
 997 #add-ons-button[cui-areatype="menu-panel"]:hover,
 998 toolbarpaletteitem[place="palette"] > #add-ons-button:hover {
 999   -moz-image-region: rect(32px, 288px, 64px, 256px);
1000 }
1001
1002 #open-file-button[cui-areatype="menu-panel"],
1003 toolbarpaletteitem[place="palette"] > #open-file-button {
1004   -moz-image-region: rect(0px, 320px, 32px, 288px);
1005 }
1006
1007 #open-file-button[cui-areatype="menu-panel"]:hover,
1008 toolbarpaletteitem[place="palette"] > #open-file-button:hover {
1009   -moz-image-region: rect(32px, 320px, 64px, 288px);
1010 }
1011
1012 #save-page-button[cui-areatype="menu-panel"],
1013 toolbarpaletteitem[place="palette"] > #save-page-button {
1014   -moz-image-region: rect(0px, 352px, 32px, 320px);
1015 }
1016
1017 #save-page-button[cui-areatype="menu-panel"]:hover,
1018 toolbarpaletteitem[place="palette"] > #save-page-button:hover {
1019   -moz-image-region: rect(32px, 352px, 64px, 320px);
1020 }
1021
1022 #sync-button[cui-areatype="menu-panel"],
1023 toolbarpaletteitem[place="palette"] > #sync-button {
1024   -moz-image-region: rect(0px, 1024px, 32px, 992px);
1025 }
1026
1027 #sync-button[cui-areatype="menu-panel"]:hover,
1028 toolbarpaletteitem[place="palette"] > #sync-button:hover {
1029   -moz-image-region: rect(32px, 1024px, 64px, 992px);
1030 }
1031
1032 #containers-panelmenu[cui-areatype="menu-panel"],
1033 toolbarpaletteitem[place="palette"] > #containers-panelmenu {
1034   -moz-image-region: rect(0px, 1056px, 32px, 1024px);
1035 }
1036
1037 #containers-panelmenu[cui-areatype="menu-panel"]:hover,
1038 toolbarpaletteitem[place="palette"] > #containers-panelmenu:hover,
1039 #containers-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1040   -moz-image-region: rect(32px, 1056px, 64px, 1024px);
1041 }
1042
1043 #feed-button[cui-areatype="menu-panel"],
1044 toolbarpaletteitem[place="palette"] > #feed-button {
1045   -moz-image-region: rect(0px, 416px, 32px, 384px);
1046 }
1047
1048 #feed-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1049 toolbarpaletteitem[place="palette"] > #feed-button:hover:not([disabled="true"]) {
1050   -moz-image-region: rect(32px, 416px, 64px, 384px);
1051 }
1052
1053 #feed-button[cui-areatype="menu-panel"][disabled="true"],
1054 toolbarpaletteitem[place="palette"] > #feed-button[disabled="true"] {
1055   -moz-image-region: rect(64px, 416px, 96px, 384px);
1056 }
1057
1058 #social-share-button[cui-areatype="menu-panel"],
1059 toolbarpaletteitem[place="palette"] > #social-share-button {
1060   -moz-image-region: rect(0px, 448px, 32px, 416px);
1061 }
1062
1063 #social-share-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1064 toolbarpaletteitem[place="palette"] > #social-share-button:hover:not([disabled="true"]) {
1065   -moz-image-region: rect(32px, 448px, 64px, 416px);
1066 }
1067
1068 #social-share-button[cui-areatype="menu-panel"][disabled="true"],
1069 toolbarpaletteitem[place="palette"] > #social-share-button[disabled="true"] {
1070   -moz-image-region: rect(64px, 448px, 96px, 416px);
1071 }
1072
1073 #characterencoding-button[cui-areatype="menu-panel"],
1074 toolbarpaletteitem[place="palette"] > #characterencoding-button {
1075   -moz-image-region: rect(0px, 480px, 32px, 448px);
1076 }
1077
1078 #characterencoding-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1079 toolbarpaletteitem[place="palette"] > #characterencoding-button:hover:not([disabled="true"]) {
1080   -moz-image-region: rect(32px, 480px, 64px, 448px);
1081 }
1082
1083 #characterencoding-button[cui-areatype="menu-panel"][disabled="true"],
1084 toolbarpaletteitem[place="palette"] > #characterencoding-button[disabled="true"] {
1085   -moz-image-region: rect(64px, 480px, 96px, 448px);
1086 }
1087
1088 #characterencoding-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1089   -moz-image-region: rect(32px, 480px, 64px, 448px);
1090 }
1091
1092 #new-window-button[cui-areatype="menu-panel"],
1093 toolbarpaletteitem[place="palette"] > #new-window-button {
1094   -moz-image-region: rect(0px, 512px, 32px, 480px);
1095 }
1096
1097 #new-window-button[cui-areatype="menu-panel"]:hover,
1098 toolbarpaletteitem[place="palette"] > #new-window-button:hover {
1099   -moz-image-region: rect(32px, 512px, 64px, 480px);
1100 }
1101
1102 #e10s-button[cui-areatype="menu-panel"],
1103 toolbarpaletteitem[place="palette"] > #e10s-button {
1104   -moz-image-region: rect(0px, 512px, 32px, 480px);
1105 }
1106
1107 #e10s-button[cui-areatype="menu-panel"]:hover,
1108 toolbarpaletteitem[place="palette"] > #e10s-button:hover {
1109   -moz-image-region: rect(32px, 512px, 64px, 480px);
1110 }
1111
1112 #new-tab-button[cui-areatype="menu-panel"],
1113 toolbarpaletteitem[place="palette"] > #new-tab-button {
1114   -moz-image-region: rect(0px, 544px, 32px, 512px);
1115 }
1116
1117 #new-tab-button[cui-areatype="menu-panel"]:hover,
1118 toolbarpaletteitem[place="palette"] > #new-tab-button:hover {
1119   -moz-image-region: rect(32px, 544px, 64px, 512px);
1120 }
1121
1122 #privatebrowsing-button[cui-areatype="menu-panel"],
1123 toolbarpaletteitem[place="palette"] > #privatebrowsing-button {
1124   -moz-image-region: rect(0px, 576px, 32px, 544px);
1125 }
1126
1127 #privatebrowsing-button[cui-areatype="menu-panel"]:hover,
1128 toolbarpaletteitem[place="palette"] > #privatebrowsing-button:hover {
1129   -moz-image-region: rect(32px, 576px, 64px, 544px);
1130 }
1131
1132 #tabview-button[cui-areatype="menu-panel"],
1133 toolbarpaletteitem[place="palette"] > #tabview-button {
1134   -moz-image-region: rect(0px, 608px, 32px, 576px);
1135 }
1136
1137 #tabview-button[cui-areatype="menu-panel"]:hover,
1138 toolbarpaletteitem[place="palette"] > #tabview-button:hover {
1139   -moz-image-region: rect(32px, 608px, 64px, 576px);
1140 }
1141
1142 #find-button[cui-areatype="menu-panel"],
1143 toolbarpaletteitem[place="palette"] > #find-button {
1144   -moz-image-region: rect(0px, 640px, 32px, 608px);
1145 }
1146
1147 #find-button[cui-areatype="menu-panel"]:hover,
1148 toolbarpaletteitem[place="palette"] > #find-button:hover {
1149   -moz-image-region: rect(32px, 640px, 64px, 608px);
1150 }
1151
1152 #print-button[cui-areatype="menu-panel"],
1153 toolbarpaletteitem[place="palette"] > #print-button {
1154   -moz-image-region: rect(0px, 672px, 32px, 640px);
1155 }
1156
1157 #print-button[cui-areatype="menu-panel"]:hover,
1158 toolbarpaletteitem[place="palette"] > #print-button:hover {
1159   -moz-image-region: rect(32px, 672px, 64px, 640px);
1160 }
1161
1162 #fullscreen-button[cui-areatype="menu-panel"],
1163 toolbarpaletteitem[place="palette"] > #fullscreen-button {
1164   -moz-image-region: rect(0px, 704px, 32px, 672px);
1165 }
1166
1167 #fullscreen-button[cui-areatype="menu-panel"]:hover,
1168 toolbarpaletteitem[place="palette"] > #fullscreen-button:hover {
1169   -moz-image-region: rect(32px, 704px, 64px, 672px);
1170 }
1171
1172 #developer-button[cui-areatype="menu-panel"],
1173 toolbarpaletteitem[place="palette"] > #developer-button {
1174   -moz-image-region: rect(0px, 736px, 32px, 704px);
1175 }
1176
1177 #developer-button[cui-areatype="menu-panel"]:hover,
1178 toolbarpaletteitem[place="palette"] > #developer-button:hover {
1179   -moz-image-region: rect(32px, 736px, 64px, 704px);
1180 }
1181
1182 #developer-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1183   -moz-image-region: rect(32px, 736px, 64px, 704px);
1184 }
1185
1186 #preferences-button[cui-areatype="menu-panel"],
1187 toolbarpaletteitem[place="palette"] > #preferences-button {
1188   -moz-image-region: rect(0px, 768px, 32px, 736px);
1189 }
1190
1191 #preferences-button[cui-areatype="menu-panel"]:hover,
1192 toolbarpaletteitem[place="palette"] > #preferences-button:hover {
1193   -moz-image-region: rect(32px, 768px, 64px, 736px);
1194 }
1195
1196 #email-link-button[cui-areatype="menu-panel"],
1197 toolbarpaletteitem[place="palette"] > #email-link-button {
1198   -moz-image-region: rect(0, 800px, 32px, 768px);
1199 }
1200
1201 #email-link-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1202 toolbarpaletteitem[place="palette"] > #email-link-button:hover:not([disabled="true"]) {
1203   -moz-image-region: rect(32px, 800px, 64px, 768px);
1204 }
1205
1206 #email-link-button[cui-areatype="menu-panel"][disabled="true"],
1207 toolbarpaletteitem[place="palette"] > #email-link-button[disabled="true"] {
1208   -moz-image-region: rect(64px, 800px, 96px, 768px);
1209 }
1210
1211 #sidebar-button[cui-areatype="menu-panel"],
1212 toolbarpaletteitem[place="palette"] > #sidebar-button {
1213   -moz-image-region: rect(0, 864px, 32px, 832px);
1214 }
1215
1216 #sidebar-button[cui-areatype="menu-panel"]:hover,
1217 toolbarpaletteitem[place="palette"] > #sidebar-button:hover,
1218 #sidebar-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1219   -moz-image-region: rect(32px, 864px, 64px, 832px);
1220 }
1221
1222 #panic-button[cui-areatype="menu-panel"],
1223 toolbarpaletteitem[place="palette"] > #panic-button {
1224   -moz-image-region: rect(0, 896px, 32px, 864px);
1225 }
1226
1227 #panic-button[cui-areatype="menu-panel"]:hover,
1228 toolbarpaletteitem[place="palette"] > #panic-button:hover,
1229 #panic-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1230   -moz-image-region: rect(32px, 896px, 64px, 864px);
1231 }
1232
1233 #webide-button[cui-areatype="menu-panel"],
1234 toolbarpaletteitem[place="palette"] > #webide-button {
1235   -moz-image-region: rect(0px, 960px, 32px, 928px);
1236 }
1237
1238 #webide-button[cui-areatype="menu-panel"]:hover,
1239 toolbarpaletteitem[place="palette"] > #webide-button:hover {
1240   -moz-image-region: rect(32px, 960px, 64px, 928px);
1241 }
1242
1243 toolbaritem[sdkstylewidget="true"] > toolbarbutton {
1244   -moz-image-region: rect(0, 832px, 32px, 800px);
1245 }
1246
1247 /* Wide panel control icons */
1248
1249 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1250 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1251 toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton,
1252 toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton {
1253   list-style-image: var(--menupanel-small-list-style-image);
1254 }
1255
1256 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button,
1257 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button {
1258   -moz-image-region: rect(0px, 32px, 16px, 16px);
1259 }
1260
1261 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:hover:not([disabled="true"]),
1262 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button:hover:not([disabled="true"]) {
1263   -moz-image-region: rect(16px, 32px, 32px, 16px);
1264 }
1265
1266 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button[disabled="true"],
1267 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button[disabled="true"] {
1268   -moz-image-region: rect(32px, 32px, 48px, 16px);
1269 }
1270
1271 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
1272 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button {
1273   -moz-image-region: rect(0px, 48px, 16px, 32px);
1274 }
1275
1276 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button:hover:not([disabled="true"]),
1277 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button:hover:not([disabled="true"]) {
1278   -moz-image-region: rect(16px, 48px, 32px, 32px);
1279 }
1280
1281 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button[disabled="true"],
1282 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button[disabled="true"] {
1283   -moz-image-region: rect(32px, 48px, 48px, 32px);
1284 }
1285
1286 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button,
1287 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button {
1288   -moz-image-region: rect(0px, 64px, 16px, 48px);
1289 }
1290
1291 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:hover:not([disabled="true"]),
1292 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button:hover:not([disabled="true"]) {
1293   -moz-image-region: rect(16px, 64px, 32px, 48px);
1294 }
1295
1296 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button[disabled="true"],
1297 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button[disabled="true"] {
1298   -moz-image-region: rect(32px, 64px, 48px, 48px);
1299 }
1300
1301 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button,
1302 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button {
1303   -moz-image-region: rect(0px, 80px, 16px, 64px);
1304 }
1305
1306 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:hover:not([disabled="true"]),
1307 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button:hover:not([disabled="true"]) {
1308   -moz-image-region: rect(16px, 80px, 32px, 64px);
1309 }
1310
1311 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button[disabled="true"],
1312 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button[disabled="true"] {
1313   -moz-image-region: rect(32px, 80px, 48px, 64px);
1314 }
1315
1316 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button,
1317 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button {
1318   -moz-image-region: rect(0px, 96px, 16px, 80px);
1319 }
1320
1321 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:hover:not([disabled="true"]),
1322 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button:hover:not([disabled="true"]) {
1323   -moz-image-region: rect(16px, 96px, 32px, 80px);
1324 }
1325
1326 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button[disabled="true"],
1327 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button[disabled="true"] {
1328   -moz-image-region: rect(32px, 96px, 48px, 80px);
1329 }
1330
1331 #add-share-provider {
1332   list-style-image: var(--menupanel-small-list-style-image);
1333   -moz-image-region: rect(0px, 96px, 16px, 80px);
1334 }
1335
1336 /* === END menupanel.inc.css === */
1337
1338 .toolbarbutton-1:not([type="menu-button"]) {
1339   -moz-box-orient: vertical;
1340 }
1341
1342 .toolbarbutton-1,
1343 .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1344 /*  min-width: 36px;
1345   min-height: 36px;*/
1346 }
1347
1348 .toolbarbutton-1,
1349 .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1350 .toolbarbutton-1[disabled="true"]:hover:active,
1351 .toolbarbutton-1[disabled="true"]:hover:active > .toolbarbutton-menubutton-button {
1352   padding: 1px 2px;
1353 }
1354
1355 .toolbarbutton-1:hover:active,
1356 .toolbarbutton-1[open="true"],
1357 .toolbarbutton-1:hover:active > .toolbarbutton-menubutton-button {
1358   padding-top: 2px;
1359   padding-bottom: 0px;
1360   padding-inline-start: 3px;
1361   padding-inline-end: 1px;
1362 }
1363
1364 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon,
1365 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker,
1366 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker,
1367 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1368 #main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled=true] > .toolbarbutton-icon {
1369 }
1370
1371 .toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
1372 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1373 }
1374
1375 toolbar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker:-moz-lwtheme-brighttext,
1376 toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-lwtheme-brighttext {
1377 }
1378
1379 .toolbarbutton-1 > .toolbarbutton-icon,
1380 .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1381 }
1382
1383 .findbar-button,
1384 #nav-bar .toolbarbutton-1,
1385 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1386 }
1387
1388 #nav-bar .toolbarbutton-1:not([type=menu-button]),
1389 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1390 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1391 }
1392
1393 #nav-bar #PanelUI-menu-button {
1394 /*  padding-inline-start: 7px;
1395   padding-inline-end: 5px;*/
1396 }
1397
1398 #nav-bar .toolbarbutton-1[type=panel],
1399 #nav-bar .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#PanelUI-menu-button) {
1400 /*  padding-left: 5px;
1401   padding-right: 5px;*/
1402 }
1403
1404 #nav-bar .toolbarbutton-1 > menupopup {
1405 /*  margin-top: -3px;*/
1406 }
1407
1408 #nav-bar .toolbarbutton-1 > menupopup.cui-widget-panel {
1409   margin-top: -4px;
1410 }
1411
1412 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1413 /*  padding-inline-end: 0;*/
1414 }
1415
1416 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1417 /*  padding-inline-start: 0;
1418   -moz-box-align: center;*/
1419 }
1420
1421 .findbar-button > .toolbarbutton-text,
1422 #nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
1423 #nav-bar .toolbarbutton-1 > .toolbarbutton-text,
1424 #nav-bar .toolbarbutton-1 > .toolbarbutton-badge-stack,
1425 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1426 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1427 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1428 /*  padding: 2px 6px;
1429   border: 1px solid;
1430   border-color: transparent;
1431   transition-property: background-color, border-color;
1432   transition-duration: 150ms;*/
1433 }
1434 /*
1435 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-icon,
1436 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-badge-stack,
1437 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1438    padding: calc(var(--toolbarbutton-vertical-inner-padding) + 1px) 7px;
1439 }
1440 */
1441
1442 /* Help SDK icons fit: */
1443 toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon,
1444 toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
1445   width: 16px;
1446 }
1447
1448 #nav-bar toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
1449   /* XXXgijs box models strike again: this is 16px + 2 * 7px padding + 2 * 1px border (from the rules above) */
1450   width: 32px;
1451 }
1452
1453 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
1454 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-badge-stack,
1455 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button) > .toolbarbutton-icon,
1456 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button) > .toolbarbutton-badge-stack,
1457 #nav-bar .toolbarbutton-1[type=menu] > .toolbarbutton-text /* hack for add-ons that forcefully display the label */ {
1458 /*  padding-inline-end: 17px;*/
1459 }
1460
1461 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
1462 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button) > .toolbarbutton-icon {
1463   /* horizontal padding + border + icon width */
1464 /*  max-width: 43px;*/
1465 }
1466
1467 #nav-bar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
1468 }
1469
1470 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1471 }
1472
1473 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1474 }
1475
1476 #nav-bar .toolbaritem-combined-buttons {
1477 /*  margin-left: 2px;
1478   margin-right: 2px;*/
1479 }
1480
1481 #nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1 {
1482 /*  padding-left: 0;
1483   padding-right: 0;*/
1484 }
1485
1486 #nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before,
1487 #nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1:-moz-any(:not(:hover):not([open]),[disabled=true]) + .toolbarbutton-1:-moz-any(:not(:hover):not([open]),[disabled=true])::before {
1488 /*
1489   content: "";
1490   display: -moz-box;
1491   width: 1px;
1492   height: 16px;
1493   margin-inline-end: -1px;
1494 */
1495 }
1496
1497 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1498 }
1499
1500 .findbar-button:not(:-moz-any([checked="true"],[disabled="true"])):hover > .toolbarbutton-text,
1501 #nav-bar .toolbarbutton-1:not([disabled=true]) > .toolbarbutton-menubutton-button[open] + .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1502 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1503 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1504 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
1505 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
1506 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-stack,
1507 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button:not([open]):not(:active):not([disabled=true]):hover > .toolbarbutton-icon,
1508 #nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon {
1509 }
1510
1511 .findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active) > .toolbarbutton-text,
1512 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open]) > .toolbarbutton-icon,
1513 #nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon,
1514 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
1515 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
1516 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-stack {
1517 }
1518
1519 #TabsToolbar .toolbarbutton-1,
1520 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1521 .tabbrowser-arrowscrollbox > .scrollbutton-up,
1522 .tabbrowser-arrowscrollbox > .scrollbutton-down {
1523 }
1524
1525 #TabsToolbar .toolbarbutton-1:not([disabled=true]):hover,
1526 #TabsToolbar .toolbarbutton-1[open],
1527 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover,
1528 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled=true]):hover,
1529 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled=true]):hover {
1530 }
1531
1532 /* unified back/forward button */
1533
1534 #forward-button {
1535   -moz-box-align: stretch; /* let the button shape grow vertically with the location bar */
1536 }
1537
1538 #forward-button > menupopup {
1539   margin-top: 1px !important;
1540 }
1541
1542 #forward-button > .toolbarbutton-icon {
1543   background-clip: padding-box !important;
1544   /*mask: url(keyhole-forward-mask.svg#mask); XXX: this regresses twinopen */
1545   /*clip-path: url(chrome://browser/content/browser.xul#keyhole-forward-clip-path) !important;*/
1546 }
1547
1548 #forward-button {
1549   margin-inline-start: -4px !important;
1550   padding-left: 5px;
1551   padding-right: 5px;
1552   margin-top: 3px;
1553   margin-bottom: 3px;
1554   border-radius: 0 10000px 10000px 0;
1555 /*  max-width: calc(var(--forwardbutton-width) + var(--backbutton-urlbar-overlap)) !important; */
1556 }
1557
1558 #forward-button:-moz-locale-dir(rtl) {
1559   border-radius: 10000px 0 0 10000px;
1560 }
1561
1562 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not([switchingtabs]) > #forward-button {
1563   transition: margin-left 150ms ease-out;
1564 }
1565
1566 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] {
1567   margin-left: calc(0px - var(--forwardbutton-width)/* - var(--backbutton-urlbar-overlap)*/);
1568 }
1569
1570 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] {
1571   /* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */
1572   transition-delay: 100s;
1573 }
1574
1575 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] {
1576   /* when not hovered anymore, trigger a new transition to hide the forward button immediately */
1577   margin-left: calc(-0.01px - var(--forwardbutton-width)/* - var(--backbutton-urlbar-overlap)*/);
1578 }
1579
1580 #back-button {
1581 /*  padding-top: 3px !important;
1582   padding-bottom: 3px !important;
1583   padding-inline-start: 5px !important;
1584   padding-inline-end: 0 !important;*/
1585   position: relative;
1586   z-index: 1;
1587   border-radius: 10000px;
1588   width: 30px;
1589   height: 30px;
1590   margin-top: -2px;
1591   margin-bottom: -2px;
1592 }
1593
1594 #back-button:-moz-locale-dir(rtl) {
1595 }
1596
1597 #back-button > menupopup {
1598   margin-top: -1px !important;
1599 }
1600
1601 #back-button > .toolbarbutton-icon {
1602   border-radius: 10000px !important;
1603   background-clip: padding-box !important;
1604 /*  background-color: hsla(210,25%,98%,.08) !important;
1605   padding: 6px !important;
1606   border-style: none !important;
1607   box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1608               0 0 0 1px hsla(210,4%,10%,.25);*/
1609   transition-property: background-color, box-shadow !important;
1610   transition-duration: 250ms !important;
1611 }
1612
1613 #back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon {
1614 /*  background-color: hsla(210,4%,10%,.08) !important;*/
1615 }
1616
1617 #back-button:not([disabled="true"]):hover:active > .toolbarbutton-icon,
1618 #back-button[open="true"] > .toolbarbutton-icon {
1619 /*  background-color: hsla(210,4%,10%,.12) !important;
1620   box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1621               0 0 0 1px hsla(210,4%,10%,.25),
1622               0 1px 0 0 hsla(210,80%,20%,.1) inset !important;*/
1623 }
1624
1625 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
1626   transform: scaleX(-1);
1627 }
1628 /*
1629 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
1630 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
1631   list-style-image: url("chrome://browser/skin/menu-back.png") !important;
1632 }
1633
1634 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr),
1635 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) {
1636   list-style-image: url("chrome://browser/skin/menu-forward.png") !important;
1637 }
1638
1639 #home-button.bookmark-item {
1640   list-style-image: url("chrome://browser/skin/Toolbar.png");
1641 }
1642
1643 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1644 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1645 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1646 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1647 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1648 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1649 #home-button.bookmark-item:-moz-lwtheme-brighttext {
1650   position: relative;
1651   z-index: 1;
1652   list-style-image: url("chrome://browser/skin/Toolbar-inverted.png");
1653 }
1654
1655 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1656 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme) {
1657   list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png");
1658 }
1659 */
1660
1661 #downloads-button > .toolbarbutton-icon {
1662   margin: 0;
1663 }
1664
1665 /* tabview menu item */
1666
1667 #menu_tabview {
1668   list-style-image: url("chrome://browser/skin/tabview/tabviewFx.png");
1669   -moz-image-region: rect(1px, 89px, 17px, 73px);
1670 }
1671
1672 #menu_tabview[groups="0"] {
1673   -moz-image-region: rect(1px, 17px, 17px, 1px);
1674 }
1675
1676 #menu_tabview[groups="1"] {
1677   -moz-image-region: rect(1px, 35px, 17px, 19px);
1678 }
1679
1680 #menu_tabview[groups="2"] {
1681   -moz-image-region: rect(1px, 53px, 17px, 37px);
1682 }
1683
1684 #menu_tabview[groups="3"] {
1685   -moz-image-region: rect(1px, 71px, 17px, 55px);
1686 }
1687
1688 /* undo close tab menu item */
1689 #alltabs_undoCloseTab {
1690   list-style-image: url(chrome://browser/skin/undoCloseTab.png);
1691 }
1692
1693 @media (min-resolution: 1.1dppx) {
1694   #alltabs_undoCloseTab {
1695     list-style-image: url(chrome://browser/skin/undoCloseTab@2x.png);
1696   }
1697   #alltabs_undoCloseTab > .toolbarbutton-icon {
1698     width: 16px;
1699   }
1700 }
1701
1702 /* zoom control text (reset) button special case: */
1703
1704 #nav-bar #zoom-reset-button > .toolbarbutton-text {
1705   /* To make this line up with the icons, it needs the same height (18px) +
1706    * padding (2 * 2px) + border (2 * 1px), but as a minimum because otherwise
1707    * increase in text sizes would break things...
1708    */
1709   min-height: 20px;
1710 }
1711
1712 /* ::::: fullscreen window controls ::::: */
1713
1714 #minimize-button,
1715 #restore-button,
1716 #close-button {
1717   -moz-appearance: none;
1718   border: none;
1719 /*  margin: 0 !important;
1720   padding: 6px 12px;*/
1721 }
1722
1723 #minimize-button {
1724   list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize);
1725 }
1726
1727 #minimize-button:hover {
1728   list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-hover);
1729 }
1730
1731 #restore-button {
1732   list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore);
1733 }
1734
1735 #restore-button:hover {
1736   list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-hover);
1737 }
1738
1739 #minimize-button:hover,
1740 #restore-button:hover {
1741 /*  background-color: hsla(0, 0%, 0%, .12);*/
1742 }
1743
1744 #minimize-button:hover:active,
1745 #restore-button:hover:active {
1746 /*  background-color: hsla(0, 0%, 0%, .22);*/
1747 }
1748
1749 #close-button {
1750   list-style-image: url(chrome://browser/skin/caption-buttons.svg#close);
1751 }
1752
1753 #close-button:hover {
1754 /*  background-color: hsl(355, 86%, 49%);*/
1755   list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-hover);
1756 }
1757
1758 #close-button:hover:active {
1759 /*  background-color: hsl(355, 82%, 69%);*/
1760 }
1761
1762 /* ::::: Location Bar ::::: */
1763
1764 #urlbar,
1765 .searchbar-textbox {
1766   border-radius: 5px;
1767   margin: 2px 0;
1768   margin-inline-start: 3px;
1769 }
1770
1771 #urlbar {
1772   /* make color as light as possible to deal with dark non-domain parts */
1773   color: #FFBFFF;
1774 }
1775
1776 #urlbar:-moz-lwtheme,
1777 .searchbar-textbox:-moz-lwtheme {
1778   /* background-color: rgba(255,255,255,.8);
1779   @navbarTextboxCustomBorder@
1780   color: black; */
1781 }
1782
1783 #urlbar:-moz-lwtheme:hover:not([focused]):not([readonly]),
1784 .searchbar-textbox:-moz-lwtheme:hover:not([focused]) {
1785 /*  background-color: rgba(255,255,255,.9);*/
1786 }
1787
1788 #urlbar:-moz-lwtheme[focused]:not([readonly]),
1789 .searchbar-textbox:-moz-lwtheme[focused] {
1790 /*  background-color: white;*/
1791 }
1792
1793 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar {
1794 /*  border-inline-start: none;
1795   margin-left: 0;*/
1796 }
1797
1798 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(ltr) {
1799 /*  border-top-left-radius: 0;
1800   border-bottom-left-radius: 0; */
1801 }
1802
1803 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1804 /*  border-top-right-radius: 0;
1805   border-bottom-right-radius: 0; */
1806 }
1807
1808 window:not([chromehidden~="toolbar"]) #urlbar-wrapper {
1809 /*  clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path");*/
1810 /*  margin-inline-start: calc(-1 * var(--backbutton-urlbar-overlap)); */
1811 }
1812
1813 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl),
1814 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1815   /* let urlbar-back-button-clip-path clip the urlbar's right side for RTL */
1816   transform: scaleX(-1);
1817 }
1818
1819 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl) {
1820   -moz-box-direction: reverse;
1821 }
1822
1823 html|*.urlbar-input:-moz-lwtheme::-moz-placeholder,
1824 .searchbar-textbox:-moz-lwtheme > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::-moz-placeholder {
1825   color: #E7ADE7;
1826 }
1827
1828 #urlbar-container {
1829   -moz-box-orient: horizontal;
1830   -moz-box-align: stretch;
1831 }
1832
1833 .urlbar-textbox-container {
1834   -moz-box-align: stretch;
1835 }
1836
1837 .urlbar-input-box {
1838   margin-inline-start: 0;
1839 }
1840
1841 .urlbar-input-box,
1842
1843 #urlbar-display-box {
1844   padding-inline-start: 4px;
1845   border-inline-start: 1px solid var(--urlbar-separator-color);
1846   border-inline-end: 1px solid var(--urlbar-separator-color);
1847   border-image: linear-gradient(transparent 15%, var(--urlbar-separator-color) 15%, var(--urlbar-separator-color) 85%, transparent 85%);
1848   border-image-slice: 1;
1849 }
1850
1851 #urlbar-icons {
1852   -moz-box-align: center;
1853 }
1854
1855 .urlbar-icon {
1856   padding: 0 2px;
1857   /* 16x16 icon with border-box sizing */
1858   width: 20px;
1859   height: 16px;
1860 }
1861
1862 .search-go-container {
1863   padding: 2px;
1864 }
1865
1866 .search-go-container > .search-go-button {
1867   padding: 0;
1868 }
1869
1870 #urlbar-search-footer {
1871   border-top: 1px solid #A09090;
1872 }
1873
1874 #urlbar-search-settings {
1875 }
1876
1877 #urlbar-search-settings:hover {
1878 }
1879
1880 #urlbar-search-settings:hover:active {
1881 }
1882
1883 #urlbar-search-splitter {
1884   min-width: 6px;
1885   margin-inline-start: -3px;
1886   border: none;
1887   background: transparent;
1888 }
1889
1890 #urlbar-search-splitter + #urlbar-container > #urlbar,
1891 #urlbar-search-splitter + #search-container > #searchbar > .searchbar-textbox {
1892   margin-inline-start: 0;
1893 }
1894
1895 .urlbar-display {
1896   border-inline-end: 1px solid #9C9CFF;
1897   margin-inline-end: 3px;
1898   margin-top: 0;
1899   margin-bottom: 0;
1900   margin-inline-start: 0;
1901   color: #8050B0;
1902 }
1903
1904 /* === BEGIN urlbarSearchSuggestionsNotification.inc.css === */
1905
1906 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] {
1907   border-bottom: 1px solid #A09090;
1908   background-color: #000000;
1909   padding: 6px 0;
1910   padding-inline-start: 44px;
1911   padding-inline-end: 6px;
1912   background-image: url("chrome://browser/skin/info.svg");
1913   background-clip: padding-box;
1914   background-position: 20px center;
1915   background-repeat: no-repeat;
1916   background-size: 16px 16px;
1917 }
1918
1919 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) {
1920   background-position: right 20px center;
1921 }
1922
1923 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description {
1924   margin: 0;
1925   padding: 0;
1926 }
1927
1928 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description > label.text-link {
1929   margin-inline-start: 0;
1930 }
1931
1932 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
1933   -moz-appearance: none;
1934   min-width: 80px;
1935   border-radius: 3px;
1936   padding: 4px 16px;
1937   margin: 0;
1938   margin-inline-start: 10px;
1939 }
1940
1941 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"] {
1942 }
1943
1944 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"]:hover {
1945 }
1946
1947 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"] {
1948 }
1949
1950 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"]:hover {
1951 }
1952
1953 /* === END urlbarSearchSuggestionsNotification.inc.css === */
1954
1955 #search-container {
1956   min-width: calc(54px + 11ch);
1957 }
1958
1959 /* identity box */
1960
1961 #identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) {
1962   background-color: var(--identity-box-verified-background-color);
1963 }
1964
1965 #identity-box:-moz-focusring {
1966   outline: 1px dotted #008484;
1967   outline-offset: -1px;
1968 }
1969
1970 #identity-box.verifiedDomain:-moz-focusring,
1971 #identity-box.verifiedIdentity:-moz-focusring {
1972   outline-color: #000000;
1973 }
1974
1975 /* Location bar dropmarker */
1976
1977 .urlbar-history-dropmarker:not(:hover):not([open="true"]) {
1978   background-color: transparent;
1979 }
1980
1981 #urlbar-container[combined="true"] > #urlbar > .urlbar-history-dropmarker,
1982 #urlbar-wrapper > #urlbar > .urlbar-history-dropmarker,
1983 #urlbar-wrapper > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
1984   border: none;
1985   border-radius: 0px;
1986   transition: opacity 0.15s ease;
1987 }
1988
1989 #urlbar-wrapper[switchingtabs] > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
1990   transition: none;
1991 }
1992
1993 #navigator-toolbox:not(:hover) #nav-bar:not([customizing="true"]) #urlbar:not([focused]) > .urlbar-textbox-container > .urlbar-history-dropmarker {
1994   opacity: 0;
1995 }
1996
1997 .urlbar-history-dropmarker:hover {
1998 }
1999
2000 .urlbar-history-dropmarker:hover:active,
2001 .urlbar-history-dropmarker[open="true"] {
2002 }
2003
2004 /* page proxy icon */
2005
2006 /* === BEGIN identity-block.inc.css === */
2007
2008 #identity-box {
2009   --identity-box-verified-color: #008484;
2010   /* Default theme does different color per channel, we can't as they do it build-time. */
2011   --identity-box-chrome-color: #9C9CFF;
2012
2013   font-size: .9em;
2014   border-radius: 2px;
2015   padding: 3px 5px;
2016   overflow: hidden;
2017   /* The latter two properties have a transition to handle the delayed hiding of
2018      the forward button when hovered. */
2019   transition: background-color 150ms ease, padding-left, padding-right;
2020 }
2021
2022 #identity-box:-moz-locale-dir(ltr) {
2023   border-top-right-radius: 0;
2024   border-bottom-right-radius: 0;
2025 }
2026
2027 #identity-box:-moz-locale-dir(rtl) {
2028   border-top-left-radius: 0;
2029   border-bottom-left-radius: 0;
2030 }
2031
2032 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
2033   color: var(--identity-box-chrome-color);
2034   border-inline-end: 1px solid var(--identity-box-chrome-color);
2035 }
2036
2037 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
2038   color: var(--identity-box-verified-color);
2039   border-inline-end: 1px solid var(--identity-box-verified-color);
2040 }
2041
2042 #identity-icon-labels:-moz-locale-dir(ltr) {
2043   padding-left: 2px;
2044 }
2045
2046 #identity-icon-labels:-moz-locale-dir(rtl) {
2047   padding-right: 2px;
2048 }
2049
2050 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box {
2051 /*   border-radius: 0;
2052   padding-inline-start: 2px; */
2053   padding-inline-end: 2px;
2054   margin-inline-end: 1px;
2055 }
2056
2057 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > #identity-box {
2058   padding-inline-start: 2px;
2059 }
2060
2061 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar > #identity-box {
2062   /* Forward button hiding is delayed when hovered, so we should use the same
2063      delay for the identity box. We handle both horizontal paddings (for LTR and
2064      RTL), the latter two delays here are for padding-left and padding-right. */
2065   transition-delay: 0s, 100s, 100s;
2066 }
2067
2068 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar > #identity-box {
2069   /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
2070   padding-inline-start: 2.01px;
2071 }
2072
2073 /* MAIN IDENTITY ICON */
2074
2075 #identity-icon {
2076   width: 16px;
2077   height: 16px;
2078   list-style-image: url(chrome://browser/skin/identity-icon.svg#normal);
2079 }
2080
2081 #identity-box:hover > #identity-icon:not(.no-hover),
2082 #identity-box[open=true] > #identity-icon {
2083   list-style-image: url(chrome://browser/skin/identity-icon.svg#hover);
2084 }
2085
2086 #identity-box.grantedPermissions > #identity-icon {
2087   list-style-image: url(chrome://browser/skin/identity-icon.svg#notice);
2088 }
2089
2090 #identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover),
2091 #identity-box.grantedPermissions[open=true] > #identity-icon {
2092   list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-hover);
2093 }
2094
2095 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon {
2096   list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
2097 }
2098
2099 #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon {
2100   opacity: 0.3;
2101 }
2102
2103 #urlbar[actiontype="searchengine"] > #identity-box > #identity-icon {
2104   -moz-image-region: inherit;
2105   list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon);
2106   width: 16px;
2107   height: 16px;
2108   opacity: 1;
2109 }
2110
2111 /* TRACKING PROTECTION ICON */
2112
2113 #tracking-protection-icon {
2114   width: 16px;
2115   height: 16px;
2116   margin-inline-start: 2px;
2117   margin-inline-end: 0;
2118   list-style-image: url(chrome://browser/skin/tracking-protection-16.svg);
2119   opacity: 1;
2120 }
2121
2122 #tracking-protection-icon[state="loaded-tracking-content"] {
2123   list-style-image: url(chrome://browser/skin/tracking-protection-disabled-16.svg);
2124 }
2125
2126 #tracking-protection-icon[animate] {
2127   transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
2128 }
2129
2130 #tracking-protection-icon:not([state]) {
2131   margin-inline-end: -18px;
2132   pointer-events: none;
2133   opacity: 0;
2134   /* Only animate the shield in, when it disappears hide it immediately. */
2135   transition: none;
2136 }
2137
2138 #urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
2139   visibility: collapse;
2140 }
2141
2142 /* CONNECTION ICON */
2143
2144 #connection-icon {
2145   width: 16px;
2146   height: 16px;
2147   margin-inline-start: 2px;
2148   visibility: collapse;
2149 }
2150
2151 #urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon,
2152 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon,
2153 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon {
2154   list-style-image: url(chrome://browser/skin/identity-secure.svg);
2155   visibility: visible;
2156 }
2157
2158 #urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon {
2159   list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg);
2160   visibility: visible;
2161 }
2162
2163 #urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon,
2164 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon {
2165   list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg);
2166   visibility: visible;
2167 }
2168
2169 #urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon,
2170 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon,
2171 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon {
2172   list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg);
2173   visibility: visible;
2174 }
2175
2176 /* === END identity-block.inc.css === */
2177
2178 #page-proxy-favicon {
2179   -moz-image-region: rect(0, 16px, 16px, 0);
2180 }
2181
2182 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
2183 /*  margin-inline-end: 1px;*/
2184 }
2185
2186 #identity-box:hover > #page-proxy-favicon {
2187   -moz-image-region: rect(0, 32px, 16px, 16px);
2188 }
2189
2190 #identity-box:hover:active > #page-proxy-favicon,
2191 #identity-box[open=true] > #page-proxy-favicon {
2192   -moz-image-region: rect(0, 48px, 16px, 32px);
2193 }
2194
2195 #identity-box:hover {
2196   background-color: #FFCF00;
2197   color: #000000;
2198 }
2199
2200 #identity-box:hover:active,
2201 #identity-box[open=true] {
2202   background-color: #FF9F00;
2203   color: #000000;
2204 }
2205
2206 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover,
2207 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active,
2208 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] {
2209   background-color: #9C9CFF;
2210   color: #000000;
2211 }
2212
2213 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover,
2214 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active,
2215 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] {
2216   background-color: #008484;
2217   color: #000000;
2218 }
2219
2220 /* autocomplete */
2221
2222 #treecolAutoCompleteImage {
2223   max-width: 36px;
2224 }
2225
2226 /*
2227 .autocomplete-richlistbox {
2228   padding: 4px;
2229 }
2230
2231 .autocomplete-richlistitem {
2232   height: 30px;
2233   min-height: 30px;
2234   font: message-box;
2235   border-radius: 2px;
2236   border: 1px solid transparent;
2237 }
2238
2239 .autocomplete-richlistitem[selected=true] {
2240   background-color: hsl(210, 80%, 52%);
2241 }
2242 */
2243 .ac-title {
2244   font-size: 14px;
2245 /*  color: hsl(0, 0%, 0%);*/
2246 }
2247
2248 .ac-tags {
2249   font-size: 12px;
2250 }
2251 /*
2252 html|span.ac-tag {
2253   background-color: hsl(216, 0%, 88%);
2254   color: hsl(0, 0%, 0%);
2255   border-radius: 2px;
2256   border: 1px solid transparent;
2257   padding: 0 1px;
2258 }
2259 */
2260
2261 .ac-separator,
2262 .ac-url,
2263 .ac-action {
2264   font-size: 12px;
2265 }
2266
2267 .ac-separator {
2268 /*  color: hsl(0, 0%, 50%);*/
2269 }
2270
2271 .ac-url {
2272   color: #9C9CFF;
2273 }
2274
2275 .ac-action {
2276   color: #9C9CFF;
2277 }
2278
2279 .ac-title[selected=true],
2280 .ac-separator[selected],
2281 .ac-url[selected=true],
2282 .ac-action[selected=true] {
2283   color: #000000;
2284 }
2285
2286 .ac-tags-text[selected] > html|span.ac-tag {
2287   background-color: #A09090;
2288   color: #000000;
2289 }
2290
2291 html|span.ac-emphasize-text-title,
2292 html|span.ac-emphasize-text-tag,
2293 html|span.ac-emphasize-text-url {
2294   font-weight: 600;
2295 }
2296
2297 .ac-type-icon[type=bookmark] {
2298   list-style-image: url("chrome://browser/skin/urlbar-star.svg#star");
2299 }
2300
2301 .ac-type-icon[type=bookmark][selected][current] {
2302 /*  list-style-image: url("chrome://browser/skin/urlbar-star.svg#star-inverted");*/
2303 }
2304
2305 .ac-result-type-bookmark,
2306 .autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) {
2307   list-style-image: url("chrome://browser/skin/places/bookmark.png");
2308   -moz-image-region: rect(0px 16px 16px 0px);
2309   width: 16px;
2310   height: 16px;
2311 }
2312
2313 richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark,
2314 .autocomplete-treebody::-moz-tree-image(selected, current, bookmark, treecolAutoCompleteImage) {
2315 /*  -moz-image-region: rect(0px 48px 16px 32px);*/
2316 }
2317
2318 .ac-type-icon[type=keyword],
2319 .ac-site-icon[type=searchengine],
2320 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage) {
2321   list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon");
2322 }
2323
2324 .ac-type-icon[type=keyword][selected],
2325 .ac-site-icon[type=searchengine][selected],
2326 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage, selected) {
2327   list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon-inverted");
2328 }
2329
2330 .ac-result-type-tag,
2331 .autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) {
2332   list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
2333   width: 16px;
2334   height: 16px;
2335 }
2336
2337 .ac-type-icon[type=switchtab],
2338 .ac-type-icon[type=remotetab] {
2339   list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab");
2340 }
2341
2342 .ac-type-icon[type=switchtab][selected],
2343 .ac-type-icon[type=remotetab][selected] {
2344   list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab-inverted");
2345 }
2346
2347 .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
2348 .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
2349 {
2350   color: #8050B0;
2351   font-size: smaller;
2352 }
2353
2354 .autocomplete-treebody::-moz-tree-cell(suggesthint) {
2355   border-top: 1px solid #9C9CFF;
2356 }
2357
2358 /* combined go/reload/stop button in location bar */
2359
2360 #urlbar-go-button,
2361 #urlbar-reload-button,
2362 #urlbar-stop-button {
2363   border-style: none;
2364   list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
2365 /*  margin: 0 9px; */
2366   margin-inline-start: 0px;
2367   border-inline-start: 1px solid var(--urlbar-separator-color);
2368   border-image: linear-gradient(transparent 15%,
2369                                 var(--urlbar-separator-color) 15%,
2370                                 var(--urlbar-separator-color) 85%,
2371                                 transparent 85%);
2372   border-image-slice: 1;
2373 }
2374
2375 #urlbar:-moz-locale-dir(ltr) > toolbarbutton {
2376   border-top-left-radius: 0px;
2377   border-bottom-left-radius: 0px;
2378 }
2379
2380 #urlbar:-moz-locale-dir(rtl) > toolbarbutton {
2381   border-top-right-radius: 0px;
2382   border-bottom-right-radius: 0px;
2383 }
2384
2385 #urlbar > toolbarbutton:not([disabled=true]):active:hover,
2386 #urlbar-reload-button:not(:hover) {
2387   border-inline-start-style: none;
2388   padding-inline-start: 3px;
2389 }
2390
2391 #urlbar-reload-button {
2392   -moz-image-region: rect(0px, 14px, 14px, 0px);
2393 }
2394
2395 #urlbar-reload-button[disabled=true] {
2396   -moz-image-region: rect(28px, 14px, 42px, 0px);
2397 }
2398
2399 #urlbar-reload-button:not([disabled=true]):hover {
2400   -moz-image-region: rect(14px, 14px, 28px, 0px);
2401 }
2402
2403 #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2404   transform: scaleX(-1);
2405 }
2406
2407 #urlbar-go-button {
2408   -moz-image-region: rect(0, 42px, 14px, 28px);
2409 }
2410
2411 #urlbar-go-button:hover {
2412   -moz-image-region: rect(14px, 42px, 28px, 28px);
2413 }
2414
2415 #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2416   transform: scaleX(-1);
2417 }
2418
2419 #urlbar-stop-button {
2420   -moz-image-region: rect(0px, 28px, 14px, 14px);
2421 }
2422
2423 #urlbar-stop-button:hover {
2424   -moz-image-region: rect(14px, 28px, 28px, 14px);
2425 }
2426
2427 @media (min-resolution: 1.1dppx) {
2428   #urlbar-go-button,
2429   #urlbar-reload-button,
2430   #urlbar-stop-button {
2431     list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
2432   }
2433
2434   #urlbar-go-button > .toolbarbutton-icon,
2435   #urlbar-reload-button > .toolbarbutton-icon,
2436   #urlbar-stop-button > .toolbarbutton-icon {
2437     width: 14px;
2438   }
2439
2440   #urlbar-go-button {
2441     -moz-image-region: rect(0, 84px, 28px, 56px);
2442   }
2443
2444   #urlbar-go-button:hover {
2445     -moz-image-region: rect(28px, 84px, 56px, 56px);
2446   }
2447
2448   #urlbar-go-button:hover:active {
2449     -moz-image-region: rect(56px, 84px, 84px, 56px);
2450   }
2451
2452   #urlbar-reload-button {
2453     -moz-image-region: rect(0, 28px, 28px, 0);
2454   }
2455
2456   #urlbar-reload-button:not([disabled]):hover {
2457     -moz-image-region: rect(28px, 28px, 56px, 0);
2458   }
2459
2460   #urlbar-reload-button:not([disabled]):hover:active {
2461     -moz-image-region: rect(56px, 28px, 84px, 0);
2462   }
2463
2464   #urlbar-stop-button {
2465     -moz-image-region: rect(0, 56px, 28px, 28px);
2466   }
2467
2468   #urlbar-stop-button:not([disabled]):hover {
2469     -moz-image-region: rect(28px, 56px, 56px, 28px);
2470   }
2471
2472   #urlbar-stop-button:hover:active {
2473     -moz-image-region: rect(56px, 56px, 84px, 28px);
2474   }
2475 }
2476
2477 /* popup blocker button */
2478
2479 #page-report-button {
2480   list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
2481   -moz-image-region: rect(0, 16px, 16px, 0);
2482 }
2483
2484 #page-report-button:hover ,
2485 #page-report-button:hover:active,
2486 #page-report-button[open="true"] {
2487   -moz-image-region: rect(0, 32px, 16px, 16px);
2488 }
2489
2490 /* Reader mode button */
2491
2492 #reader-mode-button {
2493   list-style-image: url("chrome://browser/skin/readerMode.svg");
2494   -moz-image-region: rect(0, 16px, 16px, 0);
2495 }
2496
2497 #reader-mode-button:hover,
2498 #reader-mode-button[readeractive]:hover {
2499   -moz-image-region: rect(0, 32px, 16px, 16px);
2500 }
2501
2502 #reader-mode-button:hover:active,
2503 #reader-mode-button[readeractive] {
2504   -moz-image-region: rect(0, 48px, 16px, 32px);
2505 }
2506
2507 /* social share panel */
2508
2509 .social-share-frame {
2510   min-width: 756px;
2511   height: 150px;
2512 }
2513
2514 #share-container {
2515   min-width: 756px;
2516   background-color: white;
2517   background-repeat: no-repeat;
2518   background-position: center center;
2519 }
2520 #share-container[loading] {
2521   background-image: url(chrome://browser/skin/tabbrowser/pendingpaint.png);
2522 }
2523 #share-container > browser {
2524   transition: opacity 150ms ease-in-out;
2525   opacity: 1;
2526 }
2527 #share-container[loading] > browser {
2528   opacity: 0;
2529 }
2530
2531 .social-share-toolbar {
2532   border-bottom: 1px solid #9C9CFF;
2533   padding: 2px;
2534 }
2535
2536 #social-share-provider-buttons {
2537   padding: 0;
2538   margin: 0;
2539 }
2540
2541 .share-provider-button {
2542   padding: 5px;
2543   margin: 2px;
2544 }
2545
2546 .share-provider-button > .toolbarbutton-text {
2547   display: none;
2548 }
2549 .share-provider-button > .toolbarbutton-icon {
2550   width: 16px;
2551   min-height: 16px;
2552   max-height: 16px;
2553 }
2554
2555 /* fixup corners for share panel */
2556 .social-panel > .social-panel-frame {
2557   border-radius: inherit;
2558 }
2559
2560 #social-share-panel {
2561   min-height: 100px;
2562   min-width: 766px;
2563 }
2564
2565 #share-container,
2566 .social-share-frame {
2567   border-top-left-radius: 0;
2568   border-bottom-left-radius: inherit;
2569   border-top-right-radius: 0;
2570   border-bottom-right-radius: inherit;
2571 }
2572
2573 #social-share-panel > .social-share-toolbar {
2574   border-top-left-radius: inherit;
2575   border-top-right-radius: inherit;
2576 }
2577
2578 #social-share-provider-buttons {
2579   border-top-left-radius: inherit;
2580   border-top-right-radius: inherit;
2581 }
2582
2583 /* social recommending panel */
2584
2585 #social-mark-button {
2586   -moz-image-region: rect(0, 16px, 16px, 0);
2587 }
2588
2589 /* bookmarks menu-button */
2590
2591 #bookmarks-menu-button.bookmark-item {
2592   list-style-image: url("chrome://browser/skin/places/bookmark.png");
2593   -moz-image-region: rect(0px 16px 16px 0px);
2594 }
2595
2596 #bookmarks-menu-button.bookmark-item[starred] {
2597   -moz-image-region: rect(0px 32px 16px 16px);
2598 }
2599
2600 #nav-bar #bookmarks-menu-button[cui-areatype="toolbar"]:not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
2601   padding-top: 2px;
2602   padding-bottom: 2px;
2603 }
2604
2605 #BMB_bookmarksPopup[side="top"],
2606 #BMB_bookmarksPopup[side="bottom"] {
2607   margin-left: -20px;
2608   margin-right: -20px;
2609 }
2610
2611 #BMB_bookmarksPopup[side="left"],
2612 #BMB_bookmarksPopup[side="right"] {
2613   margin-top: -20px;
2614   margin-bottom: -20px;
2615 }
2616
2617 /* bookmarking panel */
2618
2619 #editBookmarkPanelStarIcon {
2620   list-style-image: url("chrome://browser/skin/places/starred48.png");
2621   width: 48px;
2622   height: 48px;
2623 }
2624
2625 #editBookmarkPanelStarIcon[unstarred] {
2626   list-style-image: url("chrome://browser/skin/places/unstarred48.png");
2627 }
2628
2629 #editBookmarkPanelTitle {
2630   font-size: 130%;
2631 }
2632
2633 #editBookmarkPanelHeader,
2634 #editBookmarkPanelContent {
2635   margin-bottom: .5em;
2636 }
2637
2638 /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
2639 #editBMPanel_folderTree {
2640   min-width: 27em;
2641 }
2642
2643 /* ::::: content area ::::: */
2644
2645 #sidebar-box {
2646   background-color: #9C9CFF;
2647   color: #000000;
2648 }
2649
2650 #sidebar {
2651   background-color: #000000;
2652 }
2653
2654 #sidebar-splitter {
2655   margin-inline-start: 0;
2656 }
2657
2658 #sidebar-header {
2659   color: #000000;
2660   padding: 2px;
2661 }
2662
2663 #sidebar-title {
2664   padding-inline-start: 0px;
2665 }
2666
2667 #sidebar-header > .close-icon {
2668 /*  padding: 4px 2px;
2669   margin: 0;
2670   border: none;*/
2671   list-style-image: url("chrome://global/skin/icons/close-button.gif");
2672 }
2673
2674 #sidebar-header > .close-icon:hover,
2675 #sidebar-header > .close-icon:hover:active {
2676   list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2677 }
2678
2679 #sidebar-splitter:-moz-locale-dir(ltr),
2680 #sidebar:-moz-locale-dir(ltr) {
2681   border-radius: 0 5px 0 0;
2682 }
2683
2684 #sidebar-splitter:-moz-locale-dir(rtl),
2685 #sidebar:-moz-locale-dir(rtl) {
2686   border-radius: 5px 0 0 0;
2687 }
2688
2689 .browserContainer > findbar {
2690 /*
2691   background-color: -moz-dialog;
2692   color: -moz-DialogText;
2693 */
2694 }
2695
2696 /* Tabstrip */
2697
2698 #TabsToolbar {
2699   min-height: 0;
2700   padding: 0;
2701   -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
2702 }
2703
2704 #TabsToolbar .toolbar-holder {
2705   background-color: #000000; /* correct effect of being an actual toolbar */
2706 }
2707
2708 #main-window[disablechrome] #TabsToolbar,
2709 #TabsToolbar[tabsontop="false"] {
2710   border-bottom: 1px solid #008484;
2711 }
2712
2713 /* === BEGIN tabs.inc.css === */
2714
2715 :root {
2716   /* --tab-toolbar-navbar-overlap: 1px; */
2717   /* --navbar-tab-toolbar-highlight-overlap: 1px; */
2718   /* --tab-min-height: 31px; */
2719 }
2720 #TabsToolbar {
2721   /* --tab-stroke-background-size: auto 100%; */
2722 }
2723
2724 .tabbrowser-tab,
2725 .tabs-newtab-button,
2726 #TabsToolbar > #new-tab-button {
2727   margin-top: 0px;
2728 }
2729
2730 .tabbrowser-tab {
2731   padding: 1px 4px 2px;
2732 }
2733
2734 .tabbrowser-tab:first-of-type {
2735   margin-inline-start: 2px;
2736 }
2737
2738 .tabs-newtab-button,
2739 #TabsToolbar > #new-tab-button,
2740 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
2741 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
2742   border-radius: 8px 8px 0px 0px;
2743   margin-inline-start: 0;
2744 }
2745
2746 .tabs-newtab-button:not(:hover),
2747 #TabsToolbar > #new-tab-button:not(:hover),
2748 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
2749 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
2750   background-color: #C09070;
2751 }
2752
2753 /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
2754 .tabbrowser-tab[visuallyselected=true] {
2755 /*  position: relative;
2756   z-index: 2;*/
2757 }
2758
2759 .tab-background-middle {
2760 }
2761
2762 .tab-content {
2763 }
2764
2765 .tab-content[pinned] {
2766 }
2767
2768 .tab-throbber,
2769 .tab-icon-image,
2770 .tab-sharing-icon-overlay,
2771 .tab-icon-sound,
2772 .tab-close-button {
2773 }
2774
2775 .tab-throbber,
2776 .tab-sharing-icon-overlay,
2777 .tab-icon-image {
2778   height: 16px;
2779   width: 16px;
2780   margin-inline-end: 3px;
2781 }
2782
2783 .tab-icon-image {
2784   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
2785 }
2786
2787 .tab-icon-image[sharing]:not([selected]),
2788 .tab-sharing-icon-overlay {
2789   animation: 3s linear pulse infinite;
2790 }
2791
2792 @keyframes pulse {
2793   0%, 16.66%, 83.33%, 100% {
2794     opacity: 0;
2795   }
2796   33.33%, 66.66% {
2797     opacity: 1;
2798   }
2799 }
2800
2801 .tab-icon-image[sharing]:not([selected]) {
2802   animation-delay: -1.5s;
2803 }
2804
2805 .tab-sharing-icon-overlay {
2806   /* 16px of the icon + 6px of margin-inline-end of .tab-icon-image */
2807   margin-inline-start: -22px;
2808   position: relative;
2809 }
2810
2811 .tab-sharing-icon-overlay[sharing="camera"] {
2812   list-style-image: url("chrome://browser/skin/notification-icons.svg#camera");
2813 }
2814
2815 .tab-sharing-icon-overlay[sharing="microphone"] {
2816   list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone");
2817 }
2818
2819 .tab-sharing-icon-overlay[sharing="screen"] {
2820   list-style-image: url("chrome://browser/skin/notification-icons.svg#screen");
2821 }
2822
2823 .tab-sharing-icon-overlay[sharing] {
2824   filter: url("chrome://browser/skin/filters.svg#fill");
2825   fill: #FFCF00;
2826 }
2827
2828 .tab-icon-overlay {
2829   width: 16px;
2830   height: 16px;
2831   margin-top: -8px;
2832   margin-inline-start: -15px;
2833   margin-inline-end: -1px;
2834   position: relative;
2835 }
2836
2837 .tab-icon-overlay[crashed] {
2838   list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
2839 }
2840
2841 .tab-icon-overlay[soundplaying],
2842 .tab-icon-overlay[muted]:not([crashed]) {
2843   border-radius: 10px;
2844 }
2845
2846 .tab-icon-overlay[soundplaying]:hover,
2847 .tab-icon-overlay[muted]:hover {
2848   background-color: #FFCF00;
2849 }
2850
2851 .tab-icon-overlay[soundplaying] {
2852   display: -moz-box;
2853   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio");
2854 }
2855
2856 .tab-icon-overlay[muted]:not([crashed]) {
2857   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
2858 }
2859
2860 #TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not(:hover) {
2861   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white");
2862 }
2863
2864
2865 #TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not(:hover) {
2866   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted");
2867 }
2868
2869 .tab-throbber[busy] {
2870   list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png");
2871 }
2872
2873 .tab-throbber[progress] {
2874   list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.png");
2875 }
2876
2877 @media (min-resolution: 1.1dppx) {
2878   .tab-throbber[busy] {
2879     list-style-image: url("chrome://communicator/skin/brand/throbber-anim-connect.png");
2880   }
2881
2882   .tab-throbber[progress] {
2883     list-style-image: url("chrome://communicator/skin/brand/throbber-anim.png");
2884   }
2885 }
2886
2887 .tab-throbber[pinned],
2888 .tab-icon-image[pinned] {
2889   margin-inline-start: 2px;
2890   margin-inline-end: 2px;
2891 }
2892
2893 .tab-label {
2894   /* this needs to add up to the 16px of the icon image */
2895   height: 12px;
2896   margin-top: 2px !important;
2897   margin-bottom: 2px !important;
2898 }
2899
2900 .tab-icon-sound {
2901   margin-inline-start: 4px;
2902   width: 16px;
2903   height: 16px;
2904   padding: 0;
2905 }
2906
2907 .tab-icon-sound[muted] {
2908   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
2909 }
2910
2911 .tab-icon-sound[muted]:hover {
2912   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover");
2913 }
2914
2915 .tab-icon-sound[muted]:hover:active {
2916   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed");
2917 }
2918
2919 .tab-icon-sound[soundplaying] {
2920   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab");
2921 }
2922
2923 .tab-icon-sound[soundplaying]:hover {
2924   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-hover");
2925 }
2926
2927 .tab-icon-sound[soundplaying]:hover:active {
2928   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-pressed");
2929 }
2930
2931 .tab-icon-sound[muted] {
2932   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted");
2933 }
2934
2935 .tab-icon-sound[muted]:hover {
2936   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-hover");
2937 }
2938
2939 .tab-icon-sound[muted]:hover:active {
2940   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-pressed");
2941 }
2942
2943 .tab-icon-sound[visuallyselected=true][soundplaying] {
2944   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio");
2945 }
2946
2947 .tab-icon-sound[visuallyselected=true][soundplaying]:hover {
2948   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-hover");
2949 }
2950
2951 .tab-icon-sound[visuallyselected=true][soundplaying]:hover:active {
2952   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-pressed");
2953 }
2954
2955 .tab-icon-sound[visuallyselected=true][muted] {
2956   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
2957 }
2958
2959 .tab-icon-sound[visuallyselected=true][muted]:hover {
2960   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover");
2961 }
2962
2963 .tab-icon-sound[visuallyselected=true][muted]:hover:active {
2964   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed");
2965 }
2966
2967 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying] {
2968   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white");
2969 }
2970
2971 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover {
2972   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-hover");
2973 }
2974
2975 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover:active {
2976   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-pressed");
2977 }
2978
2979 #TabsToolbar[brighttext] .tab-icon-sound[muted] {
2980   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white");
2981 }
2982
2983 #TabsToolbar[brighttext] .tab-icon-sound[muted]:hover {
2984   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-hover");
2985 }
2986
2987 #TabsToolbar[brighttext] .tab-icon-sound[muted]:hover:active {
2988   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-pressed");
2989 }
2990
2991 .tab-close-button {
2992   margin-top: 1px;
2993   padding: 0;
2994 }
2995
2996 .tab-background,
2997 .tabs-newtab-button {
2998   /* overlap the tab curves */
2999 }
3000
3001 .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
3002 }
3003
3004 /* Tab Overflow */
3005 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
3006 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3007 }
3008
3009 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:-moz-locale-dir(rtl),
3010 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:-moz-locale-dir(ltr) {
3011 }
3012
3013 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]) {
3014 }
3015
3016 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3017 }
3018
3019 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator[collapsed],
3020 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator[collapsed] {
3021 }
3022
3023 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator,
3024 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator {
3025 }
3026
3027 .tab-background-start[visuallyselected=true]::after,
3028 .tab-background-start[visuallyselected=true]::before,
3029 .tab-background-start,
3030 .tab-background-end,
3031 .tab-background-end[visuallyselected=true]::after,
3032 .tab-background-end[visuallyselected=true]::before {
3033 }
3034
3035 .tabbrowser-tab:not([visuallyselected=true]),
3036 .tabbrowser-tab:-moz-lwtheme {
3037 }
3038
3039 /* tabbrowser-tab focus ring */
3040 .tabbrowser-tab:focus {
3041   outline: 1px dotted;
3042 }
3043
3044 /* Selected tab */
3045
3046 .tabbrowser-tab[visuallyselected="true"] {
3047 }
3048
3049 /* End selected tab */
3050
3051 /* Tab pointer-events */
3052 /*
3053 .tabbrowser-tab {
3054   pointer-events: none;
3055 }
3056
3057 .tab-background-middle,
3058 .tabs-newtab-button,
3059 .tab-icon-overlay[soundplaying],
3060 .tab-icon-overlay[muted]:not([crashed]),
3061 .tab-icon-sound,
3062 .tab-close-button {
3063   pointer-events: auto;
3064 }
3065 */
3066 /* Pinned tabs */
3067
3068 /*
3069 .tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([visuallyselected="true"]),
3070 .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([visuallyselected="true"]) {
3071 */
3072 .tabbrowser-tab:-moz-any([image], [pinned]):-moz-any([attention], [titlechanged]):not([visuallyselected="true"]) {
3073   background-color: #E7ADE7;
3074 }
3075
3076 .tab-label[attention]:not([visuallyselected="true"]) {
3077   font-weight: bold;
3078 }
3079
3080 .tabbrowser-tab[pinned][titlechanged]:not([visuallyselected="true"]):hover {
3081   background-color: #3333FF;
3082   color: #000000;
3083 }
3084
3085 /* Tab separators */
3086 /*
3087 .tabbrowser-tab::after,
3088 .tabbrowser-tab::before {
3089   width: 1px;
3090   margin-inline-start: -1px;
3091   background-image: linear-gradient(transparent 5px,
3092                                     currentColor 5px,
3093                                     currentColor calc(100% - 4px),
3094                                     transparent calc(100% - 4px));
3095   opacity: 0.2;
3096 }
3097
3098 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::before,
3099 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::after {
3100   opacity: 0.4;
3101 }
3102 */
3103 /* Also show separators beside the selected tab when dragging it. */
3104 /*
3105 #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
3106 .tabbrowser-tab:not([visuallyselected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
3107 #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([visuallyselected]):not([beforehovered]):not(:hover)::after {
3108   content: "";
3109   display: -moz-box;
3110 }
3111 */
3112 /* New tab button */
3113
3114 .tabs-newtab-button {
3115   width: 28px;
3116   /* width: calc(36px + var(--tab-curve-width)); */
3117 }
3118 @media (min-resolution: 1.1dppx) {
3119   /* image preloading hack from like lowdpi styles */
3120   #tabbrowser-tabs::before {
3121   }
3122
3123   .tabbrowser-tab:hover > .tab-stack > .tab-background:not([visuallyselected=true]),
3124   .tabs-newtab-button:hover {
3125   }
3126
3127   .tab-background-middle[visuallyselected=true] {
3128   }
3129
3130   .tab-background-start[visuallyselected=true]:-moz-locale-dir(ltr)::after,
3131   .tab-background-end[visuallyselected=true]:-moz-locale-dir(rtl)::after {
3132   }
3133
3134   .tab-background-end[visuallyselected=true]:-moz-locale-dir(ltr)::after,
3135   .tab-background-start[visuallyselected=true]:-moz-locale-dir(rtl)::after {
3136   }
3137
3138   .tab-icon-image {
3139     list-style-image: url("chrome://mozapps/skin/places/defaultFavicon@2x.png");
3140   }
3141 }
3142
3143 /* === END tabs.inc.css === */
3144
3145 /* Tab DnD indicator */
3146 .tab-drop-indicator {
3147   list-style-image: url("chrome://browser/skin/tabbrowser/tabDragIndicator.png");
3148   margin-bottom: -11px;
3149 }
3150
3151 /* Tab close button */
3152 .tab-close-button {
3153   list-style-image: url("chrome://global/skin/icons/close-button.gif");
3154 }
3155
3156 .tab-close-button:hover,
3157 .tab-close-button:hover[selected="true"] {
3158   list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
3159 }
3160
3161 .tab-close-button:hover:active,
3162 .tab-close-button:hover:active[selected="true"] {
3163   list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
3164 }
3165
3166 /* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
3167
3168 .tabbrowser-arrowscrollbox > .scrollbutton-up,
3169 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3170   margin: 0;
3171   padding-top: 0;
3172   padding-bottom: 0;
3173   background-origin: border-box;
3174 }
3175
3176 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3177 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3178 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext,
3179 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext {
3180  }
3181
3182 .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
3183 .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
3184  }
3185
3186 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
3187 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
3188 /*  transform: scaleX(-1);*/
3189 }
3190
3191 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3192   transition: 1s background-color ease-out;
3193 }
3194
3195 .tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] {
3196   background-color: #008484;
3197 }
3198
3199 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]),
3200 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]) {
3201 /*  border-width: 0 2px 0 0;
3202   border-style: solid;
3203   border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;*/
3204 }
3205
3206 .tabs-newtab-button > .toolbarbutton-icon {
3207   margin-top: -1px;
3208   margin-bottom: -1px;
3209 }
3210
3211 .tabs-newtab-button,
3212 #TabsToolbar > #new-tab-button,
3213 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
3214 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
3215   list-style-image: url("chrome://browser/skin/tabbrowser/newtab.svg");
3216   -moz-image-region: auto;
3217 }
3218
3219 .tabs-newtab-button,
3220 .tabs-newtab-button:hover,
3221 #TabsToolbar > #new-tab-button,
3222 #TabsToolbar > #new-tab-button:hover {
3223 }
3224
3225 #main-window[tabsintitlebar]:not([inFullscreen]) .tabs-newtab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3226 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3227 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3228 .tabs-newtab-button:-moz-lwtheme-brighttext,
3229 #TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext,
3230 #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext {
3231 }
3232
3233 #TabsToolbar > #new-tab-button {
3234   width: 26px;
3235 }
3236
3237 #alltabs-button {
3238   list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
3239 }
3240
3241 #alltabs-button:hover,
3242 #alltabs-button:hover:active,
3243 #alltabs-button[open="true"] {
3244   list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
3245 }
3246
3247 #main-window[tabsintitlebar]:not([inFullscreen]) #alltabs-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3248 #alltabs-button:-moz-lwtheme-brighttext {
3249 }
3250
3251 #alltabs-button > .toolbarbutton-icon {
3252 /*  margin: 0 2px;*/
3253 }
3254
3255 #alltabs-button > .toolbarbutton-menu-dropmarker {
3256   display: none;
3257 }
3258
3259 /* All tabs menupopup */
3260 .alltabs-item > .menu-iconic-left > .menu-iconic-icon {
3261   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
3262   -moz-image-region: auto;
3263 }
3264
3265 .alltabs-item[selected="true"] {
3266   font-weight: bold;
3267 }
3268
3269 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3270   list-style-image: url("chrome://global/skin/icons/loading.png");
3271 }
3272
3273 @media (min-resolution: 1.1dppx) {
3274   .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3275     list-style-image: url("chrome://global/skin/icons/loading@2x.png");
3276   }
3277 }
3278
3279 .alltabs-item[tabIsVisible]:not([_moz-menuactive="true"]) {
3280   background-color: #402800;
3281 }
3282
3283 .alltabs-endimage[muted] {
3284   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
3285 }
3286
3287 .alltabs-endimage[soundplaying] {
3288   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio");
3289 }
3290
3291 toolbarbutton.chevron {
3292   list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
3293 }
3294
3295 toolbarbutton.chevron:hover {
3296   list-style-image: url("chrome://global/skin/toolbar/chevron-hover.gif") !important;
3297 }
3298 /*
3299 toolbar[brighttext] toolbarbutton.chevron {
3300   list-style-image: url("chrome://global/skin/toolbar/chevron-inverted.png") !important;
3301 }
3302 */
3303 toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
3304 toolbarbutton.chevron:-moz-locale-dir(rtl):hover > .toolbarbutton-icon {
3305   transform: scaleX(-1);
3306 }
3307
3308 toolbarbutton.chevron > .toolbarbutton-text,
3309 toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
3310   display: none;
3311 }
3312
3313 toolbarbutton.chevron > .toolbarbutton-icon {
3314   margin: 0;
3315 }
3316
3317 #sidebar-throbber[loading="true"] {
3318   list-style-image: url("chrome://global/skin/icons/loading.png");
3319   margin-inline-end: 4px;
3320 }
3321
3322 @media (min-resolution: 1.1dppx) {
3323   #sidebar-throbber[loading="true"] {
3324     list-style-image: url("chrome://global/skin/icons/loading@2x.png");
3325     width: 16px;
3326   }
3327 }
3328
3329 /* Bookmarks toolbar */
3330 #PlacesToolbarDropIndicator {
3331   list-style-image: url("chrome://communicator/skin/bookmarks/toolbarDropMarker.png");
3332 }
3333
3334 toolbarbutton.bookmark-item[dragover="true"][open="true"] {
3335   background-color: #008484 !important;
3336   color: #FFCF00 !important;
3337 }
3338
3339 /* rules for menupopup drop indicators */
3340 .menupopup-drop-indicator-bar {
3341   position: relative;
3342   /* these two margins must together compensate the indicator's height */
3343   margin-top: -1px;
3344   margin-bottom: -1px;
3345 }
3346
3347 .menupopup-drop-indicator {
3348   list-style-image: none;
3349   height: 2px;
3350   margin-inline-end: -4em;
3351   background-color: #008484;
3352 }
3353
3354 /* === BEGIN notification-icons.inc.css === */
3355
3356 #notification-popup-box {
3357   border-radius: 3px 0 0 3px;
3358   padding: 5px 0px;
3359   margin: -5px 0px;
3360   margin-inline-end: -5px;
3361   padding-inline-end: 5px;
3362 }
3363
3364 /* This class can be used alone or in combination with the class defining the
3365    type of icon displayed. This rule must be defined before the others in order
3366    for its list-style-image to be overridden. */
3367 .notification-anchor-icon {
3368   width: 16px;
3369   height: 16px;
3370   margin-inline-start: 2px;
3371   list-style-image: url("chrome://global/skin/icons/information-16.png");
3372 }
3373
3374 .notification-anchor-icon:-moz-focusring {
3375   outline: 1px dotted #008484;
3376 }
3377
3378 @media (min-resolution: 1.1dppx) {
3379   .notification-anchor-icon {
3380     list-style-image: url(chrome://global/skin/icons/information-32.png);
3381   }
3382 }
3383
3384 .popup-notification-icon {
3385   width: 64px;
3386   height: 64px;
3387   margin-inline-end: 10px;
3388 }
3389
3390 #notification-popup-box > .notification-anchor-icon:not(.in-use):hover {
3391   fill: #000000;
3392 }
3393
3394 /* INDIVIDUAL NOTIFICATIONS */
3395
3396 /* For the moment we apply the color filter only on the icons listed here.
3397    The first two selectors are used by socialchat.xml (bug 1275558). */
3398 .webRTC-sharingDevices-notification-icon,
3399 .webRTC-sharingMicrophone-notification-icon,
3400 .camera-icon,
3401 .geo-icon,
3402 .indexedDB-icon,
3403 .install-icon,
3404 .login-icon,
3405 .microphone-icon,
3406 .plugin-icon,
3407 .pointerLock-icon,
3408 .popup-icon,
3409 .screen-icon,
3410 .desktop-notification-icon,
3411 .popup-notification-icon[popupid="geolocation"],
3412 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
3413 .popup-notification-icon[popupid="password"],
3414 .popup-notification-icon[popupid="pointerLock"],
3415 .popup-notification-icon[popupid="webRTC-shareDevices"],
3416 .popup-notification-icon[popupid="webRTC-shareMicrophone"],
3417 .popup-notification-icon[popupid="webRTC-shareScreen"],
3418 .popup-notification-icon[popupid="webRTC-sharingDevices"],
3419 .popup-notification-icon[popupid="webRTC-sharingMicrophone"],
3420 .popup-notification-icon[popupid="webRTC-sharingScreen"],
3421 .popup-notification-icon[popupid="web-notifications"] {
3422   filter: url(chrome://browser/skin/filters.svg#fill);
3423   fill: #A09090;
3424 }
3425
3426 /* The first two selectors are used by socialchat.xml (bug 1275558). The
3427    notifications in the chat window are only shown when they are in use. */
3428 .webRTC-sharingDevices-notification-icon,
3429 .webRTC-sharingMicrophone-notification-icon,
3430 .in-use {
3431   fill: #008484;
3432 }
3433
3434 .popup-notification-icon[popupid="web-notifications"],
3435 .desktop-notification-icon {
3436   list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification);
3437 }
3438
3439 .desktop-notification-icon.blocked {
3440   list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification-blocked);
3441 }
3442
3443 .geo-icon {
3444   list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows);
3445 }
3446
3447 .geo-icon.blocked {
3448   list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-blocked);
3449 }
3450
3451 .popup-notification-icon[popupid="geolocation"] {
3452   list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-detailed);
3453 }
3454
3455 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
3456 .indexedDB-icon {
3457   list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB);
3458 }
3459
3460 .indexedDB-icon.blocked {
3461   list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB-blocked);
3462 }
3463
3464 .login-icon {
3465   list-style-image: url(chrome://browser/skin/notification-icons.svg#login);
3466 }
3467
3468 .popup-notification-icon[popupid="password"] {
3469   list-style-image: url(chrome://browser/skin/notification-icons.svg#login-detailed);
3470 }
3471
3472 #login-fill-notification-icon {
3473   /* Temporary solution until the capture and fill doorhangers are unified. */
3474   transform: scaleX(-1);
3475 }
3476
3477 /* The first selector is used by socialchat.xml (bug 1275558). */
3478 .webRTC-sharingDevices-notification-icon,
3479 .camera-icon,
3480 .popup-notification-icon[popupid="webRTC-shareDevices"],
3481 .popup-notification-icon[popupid="webRTC-sharingDevices"] {
3482   list-style-image: url(chrome://browser/skin/notification-icons.svg#camera);
3483 }
3484
3485 .camera-icon.blocked {
3486   list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-blocked);
3487 }
3488
3489 /* The first selector is used by socialchat.xml (bug 1275558). */
3490 .webRTC-sharingMicrophone-notification-icon,
3491 .microphone-icon {
3492   list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone);
3493 }
3494
3495 .microphone-icon.blocked {
3496   list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-blocked);
3497 }
3498
3499 .popup-notification-icon[popupid="webRTC-shareMicrophone"],
3500 .popup-notification-icon[popupid="webRTC-sharingMicrophone"] {
3501   list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-detailed);
3502 }
3503
3504 .popup-notification-icon[popupid="webRTC-shareScreen"],
3505 .popup-notification-icon[popupid="webRTC-sharingScreen"],
3506 .screen-icon {
3507   list-style-image: url(chrome://browser/skin/notification-icons.svg#screen);
3508 }
3509
3510 .screen-icon.blocked {
3511   list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-blocked);
3512 }
3513
3514 .popup-notification-icon[popupid="pointerLock"],
3515 .pointerLock-icon {
3516   list-style-image: url(chrome://browser/skin/notification-icons.svg#pointerLock);
3517 }
3518
3519 .pointerLock-icon.blocked {
3520   list-style-image: url(chrome://browser/skin/notification-icons.svg#pointerLock-blocked);
3521 }
3522
3523 /* This icon has a block sign in it, so we don't need a blocked version. */
3524 .popup-icon {
3525   list-style-image: url("chrome://browser/skin/notification-icons.svg#popup");
3526 }
3527
3528 /* EME */
3529
3530 .popup-notification-icon[popupid="drmContentPlaying"],
3531 .drm-icon {
3532   list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
3533 }
3534
3535 .drm-icon:hover:active {
3536   list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed");
3537 }
3538
3539 #eme-notification-icon[firstplay=true] {
3540   animation: emeTeachingMoment 0.2s linear 0s 5 normal;
3541 }
3542
3543 @keyframes emeTeachingMoment {
3544   0% {transform: translateX(0); }
3545   25% {transform: translateX(3px) }
3546   75% {transform: translateX(-3px) }
3547   100% { transform: translateX(0); }
3548 }
3549
3550 /* INSTALL ADDONS */
3551
3552 .install-icon {
3553   list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#default);
3554 }
3555
3556 .popup-notification-icon[popupid="xpinstall-disabled"],
3557 .popup-notification-icon[popupid="addon-install-blocked"],
3558 .popup-notification-icon[popupid="addon-install-origin-blocked"] {
3559   list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg);
3560 }
3561
3562 .popup-notification-icon[popupid="addon-progress"] {
3563   list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg);
3564 }
3565
3566 .popup-notification-icon[popupid="addon-install-failed"] {
3567   list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg);
3568 }
3569
3570 .popup-notification-icon[popupid="addon-install-confirmation"] {
3571   list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg);
3572 }
3573
3574 #addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] {
3575   list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg);
3576 }
3577
3578 .popup-notification-icon[popupid="addon-install-complete"] {
3579   list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg);
3580 }
3581
3582 .popup-notification-icon[popupid="addon-install-restart"] {
3583   list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg);
3584 }
3585
3586 .popup-notification-icon[popupid="click-to-play-plugins"] {
3587   list-style-image: url(chrome://mozapps/skin/plugins/pluginBlocked-64.png);
3588 }
3589
3590 /* OFFLINE APPS */
3591
3592 .popup-notification-icon[popupid*="offline-app-requested"],
3593 .popup-notification-icon[popupid="offline-app-usage"] {
3594   list-style-image: url(chrome://global/skin/icons/question-64.png);
3595 }
3596
3597 /* PLUGINS */
3598
3599 .plugin-icon {
3600   list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
3601 }
3602
3603 .plugin-icon.plugin-blocked {
3604   list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
3605   fill: #FF0000 !important; /* important! to override the default hover color */
3606 }
3607
3608 #notification-popup-box[hidden] {
3609   /* Override display:none to make the pluginBlockedNotification animation work
3610      when showing the notification repeatedly. */
3611   display: -moz-box;
3612   visibility: collapse;
3613 }
3614
3615 #plugins-notification-icon.plugin-blocked[showing] {
3616   animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
3617 }
3618
3619 @keyframes pluginBlockedNotification {
3620   from {
3621     opacity: 0;
3622   }
3623   to {
3624     opacity: 1;
3625   }
3626 }
3627
3628 /* SOCIAL API */
3629
3630 .popup-notification-icon[popupid="servicesInstall"] {
3631   list-style-image: url(chrome://browser/skin/social/services-64.png);
3632 }
3633
3634 .service-icon {
3635   list-style-image: url(chrome://browser/skin/social/services-16.png);
3636 }
3637
3638 /* TRANSLATION */
3639
3640 .translation-icon {
3641   list-style-image: url(chrome://browser/skin/translation-16.png);
3642   -moz-image-region: rect(0px, 16px, 16px, 0px);
3643 }
3644
3645 .translation-icon.in-use {
3646   -moz-image-region: rect(0px, 32px, 16px, 16px);
3647 }
3648
3649 /* === END notification-icons.inc.css === */
3650
3651 .popup-notification-body[popupid="addon-progress"],
3652 .popup-notification-body[popupid="addon-install-confirmation"] {
3653   width: 28em;
3654   max-width: 28em;
3655 }
3656
3657 /* Translation infobar */
3658
3659 /* === BEGIN infobar.inc.css === */
3660
3661 notification[value="translation"] .messageImage {
3662   list-style-image: url("chrome://browser/skin/translation-16.png");
3663   -moz-image-region: rect(0, 32px, 16px, 16px);
3664 }
3665
3666 @media (min-resolution: 1.25dppx) {
3667   notification[value="translation"] .messageImage {
3668     list-style-image: url("chrome://browser/skin/translation-16@2x.png");
3669     -moz-image-region: rect(0, 64px, 32px, 32px);
3670   }
3671 }
3672
3673 notification[value="translation"][state="translating"] .messageImage {
3674   list-style-image: url("chrome://browser/skin/translating-16.png");
3675   -moz-image-region: auto;
3676 }
3677
3678 @media (min-resolution: 1.25dppx) {
3679   notification[value="translation"][state="translating"] .messageImage {
3680     list-style-image: url("chrome://browser/skin/translating-16@2x.png");
3681   }
3682 }
3683
3684 notification[value="translation"] hbox[anonid="details"] {
3685   overflow: hidden;
3686 }
3687
3688 notification[value="translation"] button,
3689 notification[value="translation"] menulist {
3690   min-width: 0;
3691 }
3692
3693 notification[value="translation"] menulist > .menulist-dropmarker {
3694 }
3695
3696 .translation-menupopup arrowscrollbox {
3697   padding-bottom: 0;
3698 }
3699
3700 .translation-attribution {
3701   cursor: pointer;
3702   -moz-box-align: end;
3703   font-size: small;
3704 }
3705
3706 .translation-attribution > label {
3707   margin-bottom: 0;
3708 }
3709
3710 .translation-attribution > image {
3711   width: 70px;
3712 }
3713
3714 .translation-welcome-panel {
3715   width: 305px;
3716 }
3717
3718 .translation-welcome-logo {
3719   height: 32px;
3720   width: 32px;
3721   list-style-image: url(chrome://browser/skin/translation-16@2x.png);
3722   -moz-image-region: rect(0, 64px, 32px, 32px);
3723 }
3724
3725 .translation-welcome-content {
3726   margin-inline-start: 16px;
3727 }
3728
3729 .translation-welcome-headline {
3730   font-size: larger;
3731   font-weight: bold;
3732 }
3733
3734 .translation-welcome-body {
3735   padding: 1em 0;
3736   margin: 0 0;
3737 }
3738
3739 /* === END infobar.inc.css === */
3740
3741 notification[value="translation"] {
3742   min-height: 40px;
3743 }
3744
3745 .translation-menupopup {
3746   -moz-appearance: none;
3747 }
3748
3749 /* Bookmarks roots menu-items */
3750 #subscribeToPageMenuitem:not([disabled]),
3751 #subscribeToPageMenupopup {
3752   list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
3753 }
3754
3755 #bookmarksToolbarFolderMenu,
3756 #BMB_bookmarksToolbar,
3757 #panelMenu_bookmarksToolbar {
3758   list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
3759   -moz-image-region: auto;
3760 }
3761
3762 #BMB_unsortedBookmarks,
3763 #panelMenu_unsortedBookmarks {
3764   list-style-image: url("chrome://communicator/skin/bookmarks/unsortedBookmarks.png");
3765   -moz-image-region: auto;
3766 }
3767
3768 /* Ctrl-Tab */
3769
3770 #ctrlTab-panel {
3771   -moz-appearance: none;
3772   background: rgba(0%,0%,0%,.7);
3773   color: #FF9F00;
3774   border-style: none;
3775   padding: 20px 10px 10px;
3776   font-weight: bold;
3777 }
3778
3779 .ctrlTab-favicon[src] {
3780   background-color: #000000;
3781   width: 20px;
3782   height: 20px;
3783   padding: 2px;
3784 }
3785
3786 .ctrlTab-preview-inner > .tabPreview-canvas {
3787 /*  box-shadow: 1px 1px 2px hsl(0,0%,12%);*/
3788 }
3789
3790 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
3791   margin-bottom: 2px;
3792 }
3793
3794 .ctrlTab-preview-inner {
3795   padding-bottom: 10px;
3796 }
3797
3798 #ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
3799   padding: 10px;
3800   background-color: #000000;
3801   border-radius: .5em;
3802 }
3803
3804 .ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
3805   color: white;
3806   background-color: #000000;
3807   text-shadow: none;
3808   padding: 8px;
3809   border: 2px solid #9C9CFF;
3810   border-radius: .5em;
3811 }
3812
3813 .ctrlTab-preview:not(#ctrlTab-showAll):focus > * > .ctrlTab-preview-inner {
3814   margin: -10px -10px 0;
3815 }
3816
3817 #ctrlTab-showAll {
3818   margin-top: .5em;
3819 }
3820
3821 /* Status panel */
3822
3823 .statuspanel-label {
3824   margin: 0;
3825   padding: 2px 4px;
3826   background: #404000;
3827   border: 1px none #9C9CFF;
3828   border-top-style: solid;
3829   color: #FF9F00;
3830   text-shadow: none;
3831 }
3832
3833 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
3834 .statuspanel-label:-moz-locale-dir(rtl)[mirror] {
3835   border-right-style: solid;
3836   border-top-right-radius: .3em;
3837   margin-right: 1em;
3838 }
3839
3840 .statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
3841 .statuspanel-label:-moz-locale-dir(ltr)[mirror] {
3842   border-left-style: solid;
3843   border-top-left-radius: .3em;
3844   margin-left: 1em;
3845 }
3846
3847 /* HACK to abolish devily color on main content */
3848
3849 #content {
3850   background-color: transparent !important;
3851 }
3852
3853 /* === BEGIN fullscreen/warning.inc.css === */
3854
3855 html|*.pointerlockfswarning {
3856   align-items: center;
3857   background: rgba(0, 0, 0, 0.9);
3858   border: 2px solid #A09090;
3859   box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
3860   border-radius: 8px;
3861   padding: 24px 16px;
3862   font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3863 }
3864
3865 html|*.pointerlockfswarning::before {
3866   margin: 0;
3867   width: 24px; height: 24px;
3868 }
3869
3870 html|*.pointerlockfswarning[data-identity="verifiedIdentity"]::before,
3871 html|*.pointerlockfswarning[data-identity="verifiedDomain"]::before {
3872   content: url("chrome://browser/skin/fullscreen/secure.svg");
3873 }
3874
3875 html|*.pointerlockfswarning[data-identity="unknownIdentity"]::before {
3876   content: url("chrome://browser/skin/fullscreen/insecure.svg");
3877 }
3878
3879 html|*.pointerlockfswarning-domain-text,
3880 html|*.pointerlockfswarning-generic-text {
3881   font-size: 21px;
3882   font-weight: lighter;
3883   color: #A09090;
3884   margin: 0 16px;
3885 }
3886
3887 html|*.pointerlockfswarning-domain {
3888   font-weight: bold;
3889   margin: 0;
3890 }
3891
3892 html|*.pointerlockfswarning-exit-button {
3893   padding: 5px 30px;
3894   font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3895   font-size: 14px;
3896   font-weight: lighter;
3897   margin: 0;
3898   box-sizing: content-box;
3899
3900   border-radius: 300px;
3901   border: none;
3902   background-color: #C09070;
3903   color: #000000;
3904 }
3905
3906 /* === END fullscreen/warning.inc.css === */
3907
3908 /* === BEGIN commandline.inc.css === */
3909
3910 /* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS.
3911    We are copy/pasting variables from light-theme and dark-theme,
3912    since they aren't loaded in this context (within browser.css). */
3913 :root #developer-toolbar {
3914   --gcli-background-color: #000000; /* --theme-toolbar-background */
3915   --gcli-input-background: rgba(0, 0, 0, .75); /* --theme-tab-toolbar-background */
3916   --gcli-input-focused-background: #000000; /* --theme-sidebar-background */
3917   --gcli-input-color: #FF9F00; /* --theme-body-color-alt */
3918   --gcli-border-color: #9C9CFF; /* --theme-splitter-color */
3919   --selection-background: #008484; /* --theme-selection-background */
3920   --selection-color: #000000; /* --theme-selection-color */
3921   --command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme); /* --theme-command-line-image */
3922   --command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme-focus); /* --theme-command-line-image-focus */
3923 }
3924
3925 /* Developer toolbar */
3926
3927 #developer-toolbar {
3928   border-top: 3px solid var(--gcli-background-color);
3929   border-bottom: none;
3930 }
3931
3932 #developer-toolbar .toolbar-holder {
3933   background-color: #8050B0;
3934   color: #FFCF00;
3935 }
3936
3937 #developer-toolbar .toolbar-holder {
3938   background-color: #8050B0;
3939   color: #FFCF00;
3940 }
3941
3942 #developer-toolbar .toolbar-startcap,
3943 #developer-toolbar .toolbar-endcap{
3944   background-color: #6000CF;
3945 }
3946
3947 #developer-toolbar {
3948 /*  padding: 0;
3949   min-height: 32px; */
3950 }
3951
3952 #developer-toolbar > toolbarbutton {
3953 /*  border: none;
3954   background-color: transparent;
3955   margin: 0;
3956   padding: 0 10px;
3957   width: 32px; */
3958 }
3959
3960 .developer-toolbar-button > image {
3961 /*  margin: auto 10px; */
3962 }
3963
3964 #developer-toolbar-toolbox-button > label {
3965   display: none;
3966 }
3967
3968 .developer-toolbar-button > .toolbarbutton-icon {
3969   width: 16px;
3970   height: 16px;
3971 }
3972
3973 #developer-toolbar-toolbox-button {
3974   list-style-image: url("chrome://devtools/skin/images/toggle-tools.png");
3975   -moz-image-region: rect(0px, 16px, 16px, 0px);
3976 }
3977
3978 #developer-toolbar-toolbox-button > label {
3979   display: none;
3980 }
3981
3982 #developer-toolbar-toolbox-button:hover,
3983 #developer-toolbar-toolbox-button:hover:active,
3984 #developer-toolbar-toolbox-button[checked=true] {
3985   -moz-image-region: rect(0px, 32px, 16px, 16px);
3986 }
3987
3988 @media (min-resolution: 2dppx) {
3989   #developer-toolbar-toolbox-button {
3990     list-style-image: url("chrome://devtools/skin/images/toggle-tools@2x.png");
3991     -moz-image-region: rect(0px, 32px, 32px, 0px);
3992   }
3993
3994   #developer-toolbar-toolbox-button:hover,
3995   #developer-toolbar-toolbox-button:hover:active,
3996   #developer-toolbar-toolbox-button[checked=true] {
3997     -moz-image-region: rect(0px, 64px, 32px, 32px);
3998   }
3999 }
4000
4001 /* GCLI */
4002
4003 html|*#gcli-tooltip-frame,
4004 html|*#gcli-output-frame {
4005   padding: 0;
4006   border-width: 0;
4007   background-color: transparent;
4008 }
4009
4010 #gcli-output,
4011 #gcli-tooltip {
4012   border-width: 0;
4013   background-color: transparent;
4014 }
4015
4016 .gclitoolbar-input-node,
4017 .gclitoolbar-complete-node {
4018   margin: 1px 3px;
4019   -moz-box-align: center;
4020   padding-top: 0;
4021   padding-bottom: 0;
4022   padding-right: 8px;
4023   background-color: transparent;
4024 }
4025
4026 .gclitoolbar-input-node {
4027 /*  line-height: 32px;
4028   outline-style: none; */
4029   background-repeat: no-repeat;
4030   background-color: var(--gcli-input-background);
4031 }
4032
4033 .gclitoolbar-input-node[focused="true"] {
4034   background-color: var(--gcli-input-focused-background);
4035 }
4036
4037 .gclitoolbar-input-node::before {
4038   content: "";
4039   display: inline-block;
4040   -moz-box-ordinal-group: 0;
4041   width: 16px;
4042   height: 16px;
4043   margin: 0 2px;
4044   background-image: var(--command-line-image);
4045 }
4046
4047 .gclitoolbar-input-node[focused="true"]::before {
4048   background-image: var(--command-line-image-focus);
4049 }
4050
4051 .gclitoolbar-input-node:not([focused="true"]) {
4052   border-color: transparent;
4053 }
4054
4055 .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
4056   background-color: var(--selection-background);
4057   color: var(--selection-color);
4058 }
4059
4060 .gclitoolbar-complete-node {
4061   padding-left: 21px;
4062   background-color: transparent;
4063   color: transparent;
4064   z-index: 100;
4065   pointer-events: none;
4066 }
4067
4068 .gcli-in-incomplete,
4069 .gcli-in-error,
4070 .gcli-in-ontab,
4071 .gcli-in-todo,
4072 .gcli-in-closebrace,
4073 .gcli-in-param,
4074 .gcli-in-valid {
4075   margin: 0;
4076   padding: 0;
4077 }
4078
4079 .gcli-in-incomplete {
4080   border-bottom: 2px dotted #8050B0;
4081 }
4082
4083 .gcli-in-error {
4084   border-bottom: 2px dotted #FF0000;
4085 }
4086
4087 .gcli-in-ontab {
4088   color: #9C9CFF;
4089 }
4090
4091 .gcli-in-todo {
4092   color: #795900;
4093 }
4094
4095 .gcli-in-closebrace {
4096   color: #8050B0;
4097 }
4098
4099 /* === END commandline.inc.css === */
4100
4101 /* === BEGIN responsivedesign.inc.css === */
4102
4103 /* Responsive Mode */
4104
4105 .browserContainer[responsivemode] {
4106   background-color: #221500;
4107   padding: 0 20px 20px 20px;
4108 }
4109
4110 .browserStack[responsivemode] {
4111   box-shadow: 0 0 7px #9C9CFF;
4112 }
4113
4114 .devtools-responsiveui-toolbar {
4115   background: transparent;
4116   /* text color is textColor from dark theme, since no theme is applied to
4117    * the responsive toolbar.
4118    */
4119   color: #FF9F00;
4120   margin: 10px 0;
4121   padding: 0;
4122   box-shadow: none;
4123   border-bottom-width: 0;
4124 }
4125
4126 .devtools-responsiveui-textinput {
4127 /*  -moz-appearance: none;
4128   background: #333;
4129   color: #fff;
4130   border: 1px solid #111;
4131   border-radius: 2px;
4132   padding: 0 5px;*/
4133   width: 200px;
4134   margin: 0;
4135 }
4136
4137 .devtools-responsiveui-textinput[attention] {
4138 /*  border-color: #38ace6;
4139   background: rgba(56,172,230,0.4);*/
4140 }
4141
4142 .devtools-responsiveui-menulist,
4143 .devtools-responsiveui-toolbarbutton {
4144   -moz-box-align: center;
4145   min-width: 32px;
4146 /*  min-height: 22px;*/
4147 /*  margin: 0 3px; */
4148 }
4149
4150 .devtools-responsiveui-menulist .menulist-editable-box {
4151   background-color: transparent;
4152 }
4153
4154 .devtools-responsiveui-menulist html|*.menulist-editable-input {
4155   color: inherit;
4156   text-align: center;
4157 }
4158
4159 .devtools-responsiveui-menulist html|*.menulist-editable-input::-moz-selection {
4160 /*  background: hsla(212,7%,57%,.35);*/
4161 }
4162
4163 .devtools-responsiveui-toolbarbutton > .toolbarbutton-icon {
4164   width: 16px;
4165   height: 16px;
4166 }
4167
4168 .devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button {
4169   -moz-box-orient: horizontal;
4170 }
4171
4172 .devtools-responsiveui-menulist:-moz-focusring,
4173 .devtools-responsiveui-toolbarbutton:-moz-focusring {
4174 /*  outline: 1px dotted hsla(210,30%,85%,0.7);
4175   outline-offset: -4px;*/
4176 }
4177
4178 .devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text {
4179   display: none;
4180 }
4181
4182 .devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active {
4183 /*  border-color: hsla(210,8%,5%,.6);
4184   background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
4185   box-shadow: 0 0 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15); */
4186 }
4187
4188 .devtools-responsiveui-menulist[open=true],
4189 .devtools-responsiveui-toolbarbutton[open=true],
4190 .devtools-responsiveui-toolbarbutton[checked=true] {
4191 /*  border-color: hsla(210,8%,5%,.6) !important;
4192   background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
4193   box-shadow: 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15); */
4194 }
4195
4196 .devtools-responsiveui-toolbarbutton[checked=true] {
4197 /*  color: hsl(208,100%,60%); */
4198 }
4199
4200 .devtools-responsiveui-toolbarbutton[checked=true]:hover {
4201 /*  background-color: transparent !important;*/
4202 }
4203
4204 .devtools-responsiveui-toolbarbutton[checked=true]:hover:active {
4205 /*  background-color: hsla(210,8%,5%,.2) !important;*/
4206 }
4207
4208 .devtools-responsiveui-menulist > .menulist-label-box {
4209   text-align: center;
4210 }
4211
4212 .devtools-responsiveui-menulist > .menulist-dropmarker {
4213 /*  display: -moz-box;
4214   background-color: transparent;
4215   list-style-image: url("chrome://devtools/skin/dropmarker.svg");
4216   -moz-box-align: center;
4217   border-width: 0;
4218   min-width: 16px;*/
4219 }
4220
4221 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
4222 /*  color: inherit;
4223   border-width: 0;
4224   border-inline-end: 1px solid hsla(210,8%,5%,.45);
4225   box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);*/
4226 }
4227
4228 .devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
4229 /*  box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);*/
4230 }
4231
4232 .devtools-responsiveui-toolbarbutton[type=menu-button] {
4233 /*  padding: 0 1px;*/
4234   -moz-box-align: stretch;
4235 }
4236
4237 .devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
4238 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
4239 /*  list-style-image: url("chrome://devtools/skin/dropmarker.svg");
4240   -moz-box-align: center;
4241   padding: 0 3px;*/
4242 }
4243
4244 .devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
4245 .devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
4246   margin-left: 3px;
4247 }
4248
4249 .devtools-responsiveui-close {
4250   list-style-image: url("chrome://devtools/skin/close.svg");
4251 }
4252
4253 .devtools-responsiveui-close:hover {
4254   filter: url(images/filters.svg#checked-icon-state);
4255 }
4256
4257 .devtools-responsiveui-rotate {
4258   list-style-image: url("chrome://devtools/skin/images/responsiveui-rotate.png");
4259   -moz-image-region: rect(0px,16px,16px,0px);
4260 }
4261
4262 .devtools-responsiveui-rotate:hover {
4263   -moz-image-region: rect(0px,32px,16px,16px);
4264 }
4265
4266 @media (min-resolution: 2dppx) {
4267   .devtools-responsiveui-rotate {
4268     list-style-image: url("chrome://devtools/skin/images/responsiveui-rotate@2x.png");
4269   }
4270
4271   .devtools-responsiveui-rotate:hover {
4272     -moz-image-region: rect(0px,64px,32px,32px);
4273   }
4274 }
4275
4276 .devtools-responsiveui-touch {
4277   list-style-image: url("chrome://devtools/skin/images/responsiveui-touch.png");
4278   -moz-image-region: rect(0px,16px,16px,0px);
4279 }
4280
4281 .devtools-responsiveui-touch:hover,
4282 .devtools-responsiveui-touch[checked],
4283 .devtools-responsiveui-touch[checked]:hover {
4284   -moz-image-region: rect(0px,32px,16px,16px);
4285 }
4286
4287 @media (min-resolution: 2dppx) {
4288   .devtools-responsiveui-touch {
4289     list-style-image: url("chrome://devtools/skin/images/responsiveui-touch@2x.png");
4290     -moz-image-region: rect(0px,32px,32px,0px);
4291   }
4292
4293   .devtools-responsiveui-touch:hover,
4294   .devtools-responsiveui-touch[checked],
4295   .devtools-responsiveui-touch[checked]:hover {
4296     -moz-image-region: rect(0px,64px,32px,32px);
4297   }
4298 }
4299
4300 .devtools-responsiveui-screenshot {
4301   list-style-image: url("chrome://devtools/skin/images/responsiveui-screenshot.png");
4302   -moz-image-region: rect(0px,16px,16px,0px);
4303 }
4304
4305 .devtools-responsiveui-screenshot:hover {
4306   -moz-image-region: rect(0px,32px,16px,16px);
4307 }
4308
4309 @media (min-resolution: 2dppx) {
4310   .devtools-responsiveui-screenshot {
4311     list-style-image: url("chrome://devtools/skin/images/responsiveui-screenshot@2x.png");
4312   }
4313
4314   .devtools-responsiveui-screenshot:hover {
4315     -moz-image-region: rect(0px,64px,32px,32px);
4316   }
4317 }
4318
4319 .devtools-responsiveui-resizebarV {
4320   width: 7px;
4321   height: 24px;
4322   cursor: ew-resize;
4323   transform: translate(12px, -12px);
4324   background-size: cover;
4325   background-image: url("chrome://devtools/skin/images/responsive-vertical-resizer.png");
4326 }
4327
4328 .devtools-responsiveui-resizebarH {
4329   width: 24px;
4330   height: 7px;
4331   cursor: ns-resize;
4332   transform: translate(-12px, 12px);
4333   background-size: cover;
4334   background-image: url("chrome://devtools/skin/images/responsive-horizontal-resizer.png");
4335 }
4336
4337 .devtools-responsiveui-resizehandle {
4338   width: 16px;
4339   height: 16px;
4340   cursor: se-resize;
4341   transform: translate(12px, 12px);
4342   background-size: cover;
4343   background-image: url("chrome://devtools/skin/images/responsive-se-resizer.png");
4344 }
4345
4346 /* FxOS custom mode with additional buttons and phone look'n feel */
4347
4348 /* Hide devtools manual resizer */
4349 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizehandle,
4350 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarH,
4351 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarV {
4352   display: none;
4353 }
4354
4355 /* Gives responsive mode a phone look'n feel */
4356 .browserStack[responsivemode].fxos-mode {
4357   padding: 60px 15px 0;
4358
4359   border-radius: 25px / 20px;
4360   border-bottom-left-radius: 0;
4361   border-bottom-right-radius: 0;
4362   border: 1px solid #FFFFFF;
4363   border-bottom-width: 0;
4364
4365   background-color: #353535;
4366
4367   box-shadow: 0 3px 0.7px 1px #777777, 0 5px rgba(0, 0, 0, 0.4) inset;
4368
4369   background-image: linear-gradient(to right, #111 11%, #333 56%);
4370   min-width: 320px;
4371 }
4372
4373 .devtools-responsiveui-hardware-buttons {
4374   -moz-appearance: none;
4375   padding: 20px;
4376
4377   border: 1px solid #FFFFFF;
4378   border-bottom-left-radius: 25px;
4379   border-bottom-right-radius: 25px;
4380   border-top-width: 0;
4381
4382   box-shadow: 0 3px 0.7px 1px #777777, 0 -7px rgba(0, 0, 0, 0.4) inset;
4383
4384   background-image: linear-gradient(to right, #111 11%, #333 56%);
4385 }
4386
4387 .devtools-responsiveui-home-button {
4388   -moz-user-focus: ignore;
4389   width: 40px;
4390   height: 30px;
4391   list-style-image: url("chrome://devtools/skin/images/responsiveui-home.png");
4392 }
4393
4394 .devtools-responsiveui-sleep-button {
4395   -moz-user-focus: ignore;
4396   -moz-appearance: none;
4397   /* compensate browserStack top padding */
4398   margin-top: -67px;
4399   margin-right: 10px;
4400
4401   min-width: 10px;
4402   width: 50px;
4403   height: 5px;
4404
4405   border: 1px solid #444;
4406   border-top-right-radius: 12px;
4407   border-top-left-radius: 12px;
4408   border-bottom-color: transparent;
4409
4410   background-image: linear-gradient(to top, #111 11%, #333 56%);
4411 }
4412
4413 .devtools-responsiveui-sleep-button:hover:active {
4414   background-image: linear-gradient(to top, #aaa 11%, #ddd 56%);
4415 }
4416
4417 .devtools-responsiveui-volume-buttons {
4418   margin-left: -29px;
4419 }
4420
4421 .devtools-responsiveui-volume-up-button,
4422 .devtools-responsiveui-volume-down-button {
4423   -moz-user-focus: ignore;
4424   -moz-appearance: none;
4425   border: 1px solid red;
4426   min-width: 8px;
4427   height: 40px;
4428
4429   border: 1px solid #444;
4430   border-right-color: transparent;
4431
4432   background-image: linear-gradient(to right, #111 11%, #333 56%);
4433 }
4434
4435 .devtools-responsiveui-volume-up-button:hover:active,
4436 .devtools-responsiveui-volume-down-button:hover:active {
4437   background-image: linear-gradient(to right, #aaa 11%, #ddd 56%);
4438 }
4439
4440 .devtools-responsiveui-volume-up-button {
4441   border-top-left-radius: 12px;
4442 }
4443
4444 .devtools-responsiveui-volume-down-button {
4445   border-bottom-left-radius: 12px;
4446 }
4447
4448 @media (min-resolution: 2dppx) {
4449   .devtools-responsiveui-resizebarV {
4450     background-image: url("chrome://devtools/skin/images/responsive-vertical-resizer@2x.png");
4451   }
4452
4453   .devtools-responsiveui-resizebarH {
4454     background-image: url("chrome://devtools/skin/images/responsive-horizontal-resizer@2x.png");
4455   }
4456
4457   .devtools-responsiveui-resizehandle {
4458     background-image: url("chrome://devtools/skin/images/responsive-se-resizer@2x.png");
4459   }
4460 }
4461
4462 /* === END responsivedesign.inc.css === */
4463
4464 /* === including indicator.css is done at the start of the file === */
4465
4466 /* Error counter */
4467
4468 #developer-toolbar-toolbox-button[error-count]:before {
4469   color: #000000;
4470   min-width: 16px;
4471   text-shadow: none;
4472   background-color: #FF0000;
4473   border-radius: 1px;
4474   margin-inline-end: 5px;
4475 }
4476
4477 /* social toolbar provider menu */
4478 .social-statusarea-popup {
4479   margin-top: 0;
4480   margin-left: -12px;
4481   margin-right: -12px;
4482 }
4483
4484 .social-statusarea-user {
4485   border-bottom: 1px solid #9C9CFF;
4486   background-color: #000000;
4487   color: #FF9F00;
4488   position: relative;
4489   cursor: pointer;
4490 }
4491
4492 .social-statusarea-user-portrait {
4493   width: 32px;
4494   height: 32px;
4495   border-radius: 2px;
4496   margin: 10px;
4497 }
4498
4499 .social-statusarea-loggedInStatus {
4500   background: transparent;
4501   border: none;
4502   color: #3333FF;
4503   min-width: 0;
4504   margin: 0 6px;
4505   list-style-image: none;
4506 }
4507
4508 #social-statusarea-user[_moz-menuactive] > vbox > .social-statusarea-loggedInStatus {
4509   text-decoration: underline;
4510 }
4511
4512 .social-panel > .panel-arrowcontainer > .panel-arrowcontent {
4513   padding: 0;
4514 }
4515
4516 .social-panel-frame {
4517   border-radius: inherit;
4518 }
4519
4520 /* === BEGIN chat.inc.css === */
4521
4522 #social-sidebar-header {
4523   padding: 3px;
4524 }
4525
4526 #manage-share-providers,
4527 #social-sidebar-button {
4528   list-style-image: url("chrome://browser/skin/ToolbarFx.png");
4529   -moz-image-region: rect(0, 468px, 18px, 450px);
4530 }
4531
4532 #social-sidebar-button {
4533   -moz-appearance: none;
4534   border: none;
4535   padding: 0;
4536   margin: 2px;
4537 }
4538 #manage-share-providers > .toolbarbutton-icon,
4539 #social-sidebar-button > .toolbarbutton-icon {
4540   min-height: 18px;
4541   min-width: 18px;
4542 }
4543 #manage-share-providers:hover,
4544 #manage-share-providers:hover:active,
4545 #social-sidebar-button:hover,
4546 #social-sidebar-button:hover:active {
4547   -moz-image-region: rect(18px, 468px, 36px, 450px);
4548 }
4549 #social-sidebar-button > .toolbarbutton-menu-dropmarker {
4550   display: none;
4551 }
4552
4553 #social-sidebar-button[loading="true"] {
4554   list-style-image: url("chrome://global/skin/icons/loading.png");
4555 }
4556
4557 #social-sidebar-favico {
4558   max-height: 16px;
4559   max-width: 16px;
4560   padding: 0;
4561   margin: 2px;
4562 }
4563
4564 .chat-status-icon {
4565   max-height: 16px;
4566   max-width: 16px;
4567   padding: 0;
4568 }
4569
4570 .chat-toolbarbutton {
4571   -moz-appearance: none;
4572   border: none;
4573   padding: 0 3px;
4574   margin: 0;
4575   background: none;
4576 }
4577
4578 .chat-toolbarbutton > .toolbarbutton-text {
4579   display: none;
4580 }
4581
4582 .chat-toolbarbutton > .toolbarbutton-icon {
4583   width: 16px;
4584   height: 16px;
4585 }
4586
4587 .chat-close-button {
4588   list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close");
4589 }
4590
4591 .chat-close-button:hover {
4592   list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-hover");
4593 }
4594
4595 .chat-close-button:hover:active {
4596   list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-active");
4597 }
4598
4599 .chat-minimize-button {
4600   list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize");
4601 }
4602
4603 .chat-minimize-button:hover {
4604   list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-hover");
4605 }
4606
4607 .chat-minimize-button:hover:active {
4608   list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-active");
4609 }
4610
4611 .chat-swap-button {
4612   list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand");
4613   transform: rotate(180deg);
4614 }
4615
4616 .chat-swap-button:hover {
4617   list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-hover");
4618 }
4619
4620 .chat-swap-button:hover:active {
4621   list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-active");
4622 }
4623
4624 chatbar > chatbox > .chat-titlebar > .chat-swap-button {
4625   transform: none;
4626 }
4627
4628 .chat-title {
4629   color: #000000;
4630   text-shadow: none;
4631   cursor: inherit;
4632 }
4633
4634 .chat-titlebar {
4635   background-color: #9C9CFF;
4636   color: #000000;
4637   height: 26px;
4638   min-height: 26px;
4639   width: 100%;
4640   margin: 0;
4641   padding: 5px 4px;
4642   border: 1px solid #008484;
4643   border-bottom: 0;
4644   border-top-left-radius: 4px;
4645   border-top-right-radius: 4px;
4646   cursor: pointer;
4647   background-color: #A09090;
4648 }
4649
4650 .chat-titlebar[selected] {
4651   background-color: #008484;
4652 }
4653
4654 .chat-titlebar > .notification-anchor-icon {
4655   margin-left: 2px;
4656   margin-right: 2px;
4657 }
4658
4659 .chat-titlebar[minimized="true"] {
4660   border-bottom: none;
4661 }
4662
4663 .chat-titlebar[selected] {
4664   background-color: #008484;
4665 }
4666
4667 .chat-titlebar[activity] {
4668   background-color: #E7ADE7;
4669 }
4670
4671 .chat-frame {
4672   padding: 0;
4673   margin: 0;
4674   overflow: hidden;
4675 }
4676
4677 .chatbar-button {
4678   list-style-image: url("chrome://browser/skin/social/services-16.png");
4679   background-color: #000000;
4680   border: none;
4681   margin: 0;
4682   padding: 2px;
4683   height: 21px;
4684   width: 21px;
4685   border-top: 1px solid #008484;
4686   border-inline-end: 1px solid #008484;
4687 }
4688
4689 @media (min-resolution: 2dppx) {
4690   .chatbar-button {
4691     list-style-image: url("chrome://browser/skin/social/services-16@2x.png");
4692   }
4693 }
4694
4695 .chatbar-button:hover {
4696   background-color: #FFCF00;
4697 }
4698 .chatbar-button[open="true"] {
4699   background-color: #FF9F00;
4700 }
4701
4702 .chatbar-button[activity]:not([open]) {
4703   background-image: radial-gradient(circle farthest-corner at center 2px, rgb(160,144,144) 3%, rgba(160,144,144,0.9) 12%, rgba(156,156,255,0.6) 30%, rgba(156,156,255,0.2) 70%);
4704 }
4705
4706 .chatbar-button > .toolbarbutton-icon {
4707   width: 16px;
4708 }
4709
4710 .chatbar-button > menupopup > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
4711   width: auto;
4712   height: auto;
4713   max-height: 16px;
4714   max-width: 16px;
4715 }
4716
4717 .chatbar-button > .toolbarbutton-icon {
4718   opacity: .6;
4719   margin-inline-end: 0;
4720 }
4721 .chatbar-button:hover > .toolbarbutton-icon,
4722 .chatbar-button[open="true"] > .toolbarbutton-icon {
4723   opacity: 1;
4724 }
4725
4726 .chatbar-button:hover,
4727 .chatbar-button[open="true"] {
4728 }
4729
4730 .chatbar-button > .toolbarbutton-text,
4731 .chatbar-button > .toolbarbutton-menu-dropmarker {
4732   display: none;
4733 }
4734
4735 .chatbar-button[activity]:not([open="true"]) {
4736   background-color: #E7ADE7;
4737 }
4738
4739 .chatbar-button > menupopup > menuitem[activity] {
4740   font-weight: bold;
4741 }
4742
4743 .chatbar-innerbox {
4744   background: transparent;
4745   overflow: hidden;
4746 }
4747
4748 chatbar {
4749   margin-inline-end: 20px;
4750 }
4751
4752 chatbox {
4753   margin-inline-start: 4px;
4754   background-color: transparent;
4755 }
4756
4757 chatbar > chatbox {
4758   /* Apply the same border-radius as the .chat-titlebar to make the box-shadow
4759      go round nicely. */
4760 /*  border-top-left-radius: 4px;
4761   border-top-right-radius: 4px;*/
4762   /* Offset the chatbox the same amount as the box-shadows' spread, to make it
4763      visible. */
4764 /*  margin-inline-end: 5px;*/
4765 }
4766
4767 chatbox[minimized="true"] {
4768   width: 160px;
4769   height: 20px;
4770 }
4771
4772 window > chatbox {
4773   margin-inline-start: 0px;
4774   margin: 0px;
4775   border: none;
4776   padding: 0px;
4777 }
4778
4779 /* === END chat.inc.css === */
4780
4781 /* === BEGIN plugin-doorhanger.inc.css === */
4782
4783 /**
4784  * Plugin Doorhanger Styles
4785  */
4786
4787 #notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent {
4788   padding: 6px 1px 2px;
4789 }
4790
4791 .click-to-play-plugins-notification-center-box {
4792 }
4793
4794 .plugin-popupnotification-centeritem:nth-child(odd) {
4795 /*  background-color: rgba(0,0,0,0.1);*/
4796 }
4797
4798 .center-item-label {
4799   margin-bottom: 0;
4800   text-overflow: ellipsis;
4801 }
4802
4803 .center-item-warning-icon {
4804   background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.png");
4805   background-repeat: no-repeat;
4806   width: 16px;
4807   height: 15px;
4808   margin-inline-start: 6px;
4809 }
4810
4811 .click-to-play-plugins-notification-button-container {
4812 }
4813
4814 .click-to-play-popup-button {
4815   width: 50%;
4816 }
4817
4818 .click-to-play-plugins-notification-description-box {
4819   margin-left: 5px;
4820   margin-right: 5px;
4821   margin-top: 0;
4822   padding-bottom: 3px;
4823 }
4824
4825 .click-to-play-plugins-outer-description {
4826   margin-top: 1px;
4827 }
4828
4829 .click-to-play-plugins-notification-link,
4830 .center-item-link {
4831   margin: 0;
4832 }
4833
4834 .messageImage[value="plugin-hidden"] {
4835   list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
4836   filter: url(chrome://browser/skin/filters.svg#fill);
4837   fill: #A09090;
4838 }
4839
4840 /* Keep any changes to this style in sync with pluginProblem.css */
4841 notification.pluginVulnerable {
4842 }
4843
4844 notification.pluginVulnerable .messageImage {
4845   list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
4846   filter: url(chrome://browser/skin/filters.svg#fill);
4847   fill: #FF0000;
4848 }
4849
4850 /* === END plugin-doorhanger.inc.css === */
4851
4852 /* === BEGIN login-doorhanger.inc.css === */
4853
4854 #notification-popup[popupid="login-fill"] > .panel-arrowcontainer > .panel-arrowcontent {
4855   /* Since we display a sliding subview that extends to the border, we cannot
4856    * keep the default padding of arrow panels. We use the same padding in the
4857    * individual content views instead. Since we removed the padding, we also
4858    * have to ensure the contents are clipped to the border box. */
4859   padding: 0;
4860   overflow: hidden;
4861 }
4862
4863 #login-fill-mainview,
4864 #login-fill-details {
4865   padding: var(--panel-arrowcontent-padding);
4866 }
4867
4868 #login-fill-doorhanger[inDetailView] > #login-fill-mainview {
4869   transform: translateX(-14px);
4870 }
4871
4872 #login-fill-mainview,
4873 #login-fill-details {
4874   transition: transform 150ms;
4875 }
4876
4877 #login-fill-doorhanger:not([inDetailView]) > #login-fill-details {
4878   transform: translateX(105%);
4879 }
4880
4881 #login-fill-doorhanger:not([inDetailView]) > #login-fill-details:-moz-locale-dir(rtl) {
4882   transform: translateX(-105%);
4883 }
4884
4885 #login-fill-doorhanger[inDetailView] > #login-fill-clickcapturer {
4886   background-color: hsla(240,39%,100%,.1);
4887 }
4888
4889 #login-fill-testing {
4890   color: #FF0000;
4891   font-weight: bold;
4892 }
4893
4894 #login-fill-list {
4895   border: 1px solid #9C9CFF;
4896   max-height: 20em;
4897 }
4898
4899 .login-fill-item[disabled] {
4900   color: #8050B0;
4901   background-color: #000000;
4902 }
4903
4904 .login-fill-item[disabled][selected] {
4905   background-color: #008484;
4906 }
4907
4908 .login-hostname {
4909   margin: 4px;
4910   font-weight: bold;
4911 }
4912
4913 .login-fill-item.different-hostname > .login-hostname {
4914   color: #A09090;
4915   font-style: italic;
4916 }
4917
4918 .login-username {
4919   margin: 4px;
4920   color: #A09090;
4921 }
4922
4923 #login-fill-details {
4924   padding: 4px;
4925   background: var(--panel-arrowcontent-background);
4926   color: var(--panel-arrowcontent-color);
4927   background-clip: padding-box;
4928   border-left: 1px solid #9C9CFF;
4929   margin-inline-start: 38px;
4930 }
4931
4932 /* === END login-doorhanger.inc.css === */
4933
4934 /* === BEGIN customizeMode.inc.css === */
4935
4936 /* Customization mode */
4937
4938 :root {
4939   --drag-drop-transition-duration: .3s;
4940 }
4941
4942 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox {
4943   margin-bottom: 1em;
4944 }
4945
4946 #main-window:-moz-any([customize-entering],[customize-entered]) #content-deck,
4947 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4948 #main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
4949   margin-left: 1em;
4950   margin-right: 1em;
4951 }
4952
4953 #main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck {
4954   pointer-events: none;
4955 }
4956
4957 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4958 #PanelUI-contents > .panel-customization-placeholder {
4959   -moz-outline-radius: 2.5px;
4960   outline: 1px dashed transparent;
4961 }
4962
4963 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before {
4964   /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */
4965   -moz-box-ordinal-group: 0;
4966   content: "";
4967   display: -moz-box;
4968   height: 100%;
4969   left: 0;
4970   outline-offset: -2px;
4971   pointer-events: none;
4972   position: absolute;
4973   top: 0;
4974   width: 100%;
4975 }
4976
4977 /* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the
4978    #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the
4979    offset from the bottom effectively the same as other targets (-2px). */
4980 #main-window[customize-entered] #TabsToolbar.customization-target::before {
4981 /*  top: -2px;*/
4982 }
4983
4984 /* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */
4985 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover,
4986 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)),
4987 #main-window[customize-entered] #nav-bar-customization-target.customization-target {
4988   position: relative;
4989 }
4990
4991 /* Most target outlines are shown on hover and drag over but the panel menu uses
4992    placeholders instead. */
4993 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before,
4994 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4995 /* nav-bar and panel outlines are always shown */
4996 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4997   outline-color: #A09090;
4998 }
4999
5000 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
5001   transition: outline-color 250ms linear;
5002 }
5003
5004 #PanelUI-contents[showoutline=true] > .panel-customization-placeholder {
5005   transition: outline-color 250ms linear;
5006   outline-color: #9C9CFF;
5007 }
5008
5009 #PanelUI-contents > .panel-customization-placeholder {
5010   cursor: auto;
5011   outline-offset: -5px;
5012 }
5013
5014 #main-window[customizing] .customization-target:not(#PanelUI-contents) {
5015   min-width: 100px;
5016 /*  padding-left: 10px;
5017   padding-right: 10px;*/
5018 }
5019
5020 #main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck {
5021   padding: 0 2em 2em;
5022 }
5023
5024 #customization-container {
5025   background-color: #000000;
5026   color: #FF9F00;
5027 }
5028
5029 #customization-palette,
5030 #customization-empty {
5031   padding: 0 15px 15px;
5032 }
5033
5034 #customization-header {
5035   font-size: 1.75em;
5036   line-height: 1.75em;
5037   color: #9C9CFF;
5038   font-weight: 200;
5039   margin: 25px 25px 12px;
5040   padding-bottom: 12px;
5041   border-bottom: 1px solid #A09090;
5042 }
5043
5044 #customization-panel-container {
5045   padding: 10px 10px 0px;
5046 }
5047
5048 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
5049 #customization-footer {
5050   /*background-color: rgb(236,236,236);*/
5051 }
5052
5053 #customization-footer {
5054   border-top: 1px solid #9C9CFF;
5055   padding: 10px;
5056 }
5057
5058 .customizationmode-button {
5059   margin: 5px;
5060 }
5061
5062 .customizationmode-button:hover {
5063 }
5064
5065 #customization-titlebar-visibility-button[checked],
5066 #customization-devedition-theme-button[checked] {
5067   background-color: #008484;
5068 }
5069
5070 #customization-titlebar-visibility-button[checked]:hover,
5071 #customization-devedition-theme-button[checked]:hover {
5072   background-color: #FFCF00;
5073 }
5074
5075 #customization-titlebar-visibility-button[checked]:hover:active,
5076 #customization-devedition-theme-button[checked]:hover:active {
5077   background-color: #FF9F00;
5078 }
5079
5080 .customizationmode-button[disabled="true"] {
5081 }
5082
5083 .customizationmode-button > .box-inherit > .box-inherit > .button-icon,
5084 .customizationmode-button > .button-box > .button-icon {
5085 /*  height: 24px;*/
5086 }
5087
5088 #customization-titlebar-visibility-button {
5089   list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png");
5090   -moz-image-region: rect(0, 16px, 16px, 0);
5091 }
5092
5093 #customization-titlebar-visibility-button:hover {
5094   -moz-image-region: rect(16px, 16px, 32px, 0);
5095 }
5096
5097 #customization-lwtheme-button,
5098 #customization-titlebar-visibility-button  {
5099   padding: 0px 5px;
5100 }
5101
5102 #customization-titlebar-visibility-button > .button-box {
5103   padding-top: 0;
5104   padding-bottom: 1px;
5105 }
5106
5107 #customization-titlebar-visibility-button:hover:active > .button-box {
5108   padding-top: 1px;
5109   padding-bottom: 0;
5110 }
5111
5112 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-text,
5113 #customization-titlebar-visibility-button > .button-box > .button-text {
5114   /* Sadly, button.css thinks its margins are perfect for everyone. */
5115   margin-inline-start: 5px !important;
5116 }
5117
5118 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon {
5119   width: 20px;
5120   height: 20px;
5121   border-radius: 2px;
5122   background-size: contain;
5123 }
5124
5125 #customization-titlebar-visibility-button > .button-box > .button-icon {
5126   vertical-align: middle;
5127 }
5128
5129 #customization-titlebar-visibility-button[checked] {
5130   -moz-image-region: rect(0, 32px, 16px, 16px);
5131   background-color: #008484;
5132 }
5133
5134 #customization-titlebar-visibility-button[checked]:hover {
5135   -moz-image-region: rect(16px, 32px, 32px, 16px);
5136   background-color: #FFCF00;
5137 }
5138
5139 #customization-titlebar-visibility-button[checked]:hover:active {
5140   background-color: #FF9F00;
5141 }
5142
5143 @media (min-resolution: 1.1dppx) {
5144   #customization-titlebar-visibility-button {
5145     list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle@2x.png");
5146     -moz-image-region: rect(0, 48px, 48px, 0);
5147   }
5148
5149   #customization-titlebar-visibility-button:hover {
5150     -moz-image-region: rect(48px, 48px, 96px, 0);
5151   }
5152
5153   #customization-titlebar-visibility-button[checked] {
5154     -moz-image-region: rect(0, 96px, 48px, 48px);
5155   }
5156
5157   #customization-titlebar-visibility-button[checked]:hover {
5158     -moz-image-region: rect(48px, 96px, 96px, 48px);
5159   }
5160 }
5161
5162 #main-window[customize-entered] #customization-panel-container {
5163   background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5164   background-position: left top;
5165   background-repeat: repeat;
5166   background-size: auto;
5167   background-attachment: fixed;
5168 }
5169
5170 toolbarpaletteitem[place="toolbar"] {
5171   transition: border-width 250ms ease-in-out;
5172 }
5173
5174 toolbarpaletteitem[mousedown] {
5175   outline: 1px solid #008484;
5176   cursor: -moz-grabbing;
5177   opacity: 0.8;
5178 }
5179
5180 .panel-customization-placeholder,
5181 toolbarpaletteitem[place="palette"],
5182 toolbarpaletteitem[place="panel"] {
5183   transition: transform var(--drag-drop-transition-duration) ease-in-out;
5184 }
5185
5186 #customization-palette {
5187   transition: opacity .3s ease-in-out;
5188   opacity: 0;
5189 }
5190
5191 #customization-palette[showing="true"] {
5192   opacity: 1;
5193 }
5194
5195 toolbarpaletteitem toolbarbutton[disabled] {
5196 /*  color: inherit !important;*/
5197 }
5198
5199 toolbarpaletteitem[notransition].panel-customization-placeholder,
5200 toolbarpaletteitem[notransition][place="toolbar"],
5201 toolbarpaletteitem[notransition][place="palette"],
5202 toolbarpaletteitem[notransition][place="panel"] {
5203   transition: none;
5204 }
5205
5206 toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
5207 toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon,
5208 toolbarpaletteitem > toolbaritem.panel-wide-item,
5209 toolbarpaletteitem > toolbarbutton[type="menu-button"] {
5210   transition: transform  var(--drag-drop-transition-duration) cubic-bezier(.6, 2, .75, 1.5) !important;
5211 }
5212
5213 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon,
5214 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon {
5215   transform: scale(1.3);
5216 }
5217
5218 toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item,
5219 toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] {
5220   transform: scale(1.1);
5221 }
5222
5223 /* Override the toolkit styling for items being dragged over. */
5224 toolbarpaletteitem[place="toolbar"] {
5225   border-left-width: 0;
5226   border-right-width: 0;
5227   margin-right: 0;
5228   margin-left: 0;
5229 }
5230
5231 #customization-palette:not([hidden]) {
5232   margin-bottom: 25px;
5233 }
5234
5235 toolbarpaletteitem[place="palette"]:-moz-focusring,
5236 toolbarpaletteitem[place="panel"]:-moz-focusring,
5237 toolbarpaletteitem[place="toolbar"]:-moz-focusring {
5238   outline-width: 0;
5239 }
5240
5241 toolbarpaletteitem[place="palette"]:not([mousedown="true"]):-moz-focusring,
5242 toolbarpaletteitem[place="panel"]:not([mousedown="true"]):-moz-focusring,
5243 toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
5244   /* Delay adding the focusring back until after the transform transition completes. */
5245   transition: outline-width .01s linear var(--drag-drop-transition-duration);
5246   outline: 1px dotted #A09090;
5247   -moz-outline-radius: 2.5px;
5248 }
5249
5250 toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
5251   outline-offset: -5px;
5252 }
5253
5254 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
5255 #wrapper-edit-controls[place="palette"] > #edit-controls > separator,
5256 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
5257 #wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
5258   margin-top: 20px;
5259 }
5260
5261 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
5262 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
5263   margin-left: 0;
5264   margin-right: 0;
5265   max-width: 24px;
5266   min-width: 24px;
5267   max-height: 24px;
5268   min-height: 24px;
5269   padding: 4px;
5270 }
5271
5272 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
5273 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
5274   width: 16px;
5275 }
5276
5277 #wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
5278   opacity: 1; /* To ensure these buttons always look enabled in customize mode */
5279 }
5280
5281 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
5282 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
5283   display: none;
5284 }
5285
5286 #wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks {
5287   -moz-box-pack: center;
5288   min-height: 48px;
5289 }
5290
5291 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
5292   margin-inline-end: 5px;
5293 }
5294
5295 #customization-palette > toolbarpaletteitem > label {
5296   text-align: center;
5297   margin-left: 0;
5298   margin-right: 0;
5299 }
5300
5301 #customization-lwtheme-menu > .panel-arrowcontainer > .panel-arrowcontent {
5302   -moz-box-orient: vertical;
5303   /* Make the panel padding uniform across all platforms due to the
5304      styling of the section headers and footer. */
5305   padding: 10px;
5306 }
5307
5308 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
5309   width: 32px;
5310   height: 32px;
5311 }
5312
5313 .customization-lwtheme-menu-theme {
5314   -moz-appearance: none;
5315   margin: 0 -5px 5px;
5316   padding-top: 0;
5317   padding-inline-end: 5px;
5318   padding-bottom: 0;
5319   padding-inline-start: 0;
5320 }
5321
5322 .customization-lwtheme-menu-theme[defaulttheme] {
5323   list-style-image: url(chrome://browser/skin/Fxtheme-switcher-icon.png);
5324 }
5325
5326 .customization-lwtheme-menu-theme[active="true"] {
5327   background-color: #008484;
5328 }
5329
5330 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
5331   margin: 5px;
5332 }
5333
5334 .customization-lwtheme-menu-theme > .toolbarbutton-text {
5335   text-align: start;
5336 }
5337
5338 #customization-lwtheme-menu-header,
5339 #customization-lwtheme-menu-recommended {
5340   padding: 10px;
5341   margin-bottom: 5px;
5342 }
5343
5344 #customization-lwtheme-menu-header,
5345 #customization-lwtheme-menu-recommended,
5346 #customization-lwtheme-menu-footer {
5347   background-color: #A09090;
5348   color: #000000;
5349   margin-right: -10px;
5350   margin-left: -10px;
5351 }
5352
5353 #customization-lwtheme-menu-header {
5354   margin-top: -10px;
5355   border-top-right-radius: 3px;
5356   border-top-left-radius: 3px;
5357 }
5358
5359 #customization-lwtheme-menu-recommended {
5360 }
5361
5362 #customization-lwtheme-menu-footer {
5363   margin-bottom: -10px;
5364   border-bottom-right-radius: 3px;
5365   border-bottom-left-radius: 3px;
5366 }
5367
5368 .customization-lwtheme-menu-footeritem {
5369   -moz-appearance: none;
5370   -moz-box-flex: 1;
5371   background-color: #C09070;
5372   color: #000000;
5373   border: 1px solid transparent;
5374   padding: 10px;
5375   margin-left: 0;
5376   margin-right: 0;
5377 }
5378
5379 .customization-lwtheme-menu-footeritem:hover {
5380   background-color: #FFCF00;
5381 }
5382
5383 .customization-lwtheme-menu-footeritem:first-child {
5384 }
5385
5386 /* === END customizeMode.inc.css === */
5387
5388 /* === BEGIN customizeTip.inc.css === */
5389
5390 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent {
5391   padding: 0;
5392   margin: 0;
5393   min-width: 400px;
5394   max-width: 1000px;
5395   min-height: 200px;
5396   border-radius: 3px;
5397 /*  background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%);*/
5398   border: 1px solid #9C9CFF;
5399   color: #FF9F00;
5400 }
5401
5402 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) {
5403 /*  background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%);*/
5404 }
5405
5406 .customization-tipPanel-infoBox {
5407   margin: 20px 25px 25px;
5408   width: 25px;
5409   background-image: url("chrome://browser/skin/customizableui/info-icon-customizeTip.png");
5410   background-repeat: no-repeat;
5411 }
5412
5413 .customization-tipPanel-content {
5414   margin: 25px 0;
5415   font-size: 12px;
5416   line-height: 18px;
5417 }
5418
5419 .customization-tipPanel-em {
5420   margin: 0;
5421   font-weight: bold;
5422 }
5423
5424 .customization-tipPanel-contentImage {
5425   margin-top: 25px;
5426   list-style-image: url("chrome://browser/skin/customizableui/customize-illustration.png");
5427   min-width: 300px;
5428   max-width: 300px;
5429   min-height: 190px;
5430   max-height: 190px;
5431   display: -moz-box;
5432 }
5433
5434 .customization-tipPanel-contentImage:-moz-locale-dir(rtl) {
5435   list-style-image: url("chrome://browser/skin/customizableui/customize-illustration-rtl.png");
5436 }
5437
5438 .customization-tipPanel-link {
5439   -moz-appearance: none;
5440   background: transparent;
5441   border: none;
5442   box-shadow: none;
5443   color: #3333FF;
5444   margin: 0;
5445   cursor: pointer;
5446 }
5447
5448 .customization-tipPanel-link > .button-box > .button-text {
5449   margin: 0 !important;
5450 }
5451
5452 .customization-tipPanel-closeBox > .close-icon {
5453   -moz-appearance: none;
5454   border: 0;
5455   margin-inline-end: -25px;
5456 }
5457
5458 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"],
5459 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5460   list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png");
5461 }
5462
5463 /* === END customizeTip.inc.css === */
5464
5465 /**
5466  * This next rule is a hack to disable subpixel anti-aliasing on all
5467  * labels during the customize mode transition. Subpixel anti-aliasing
5468  * on Windows with Direct2D layers acceleration is particularly slow to
5469  * paint, so this hack is how we sidestep that performance bottleneck.
5470  */
5471 #main-window:-moz-any([customize-entering],[customize-exiting]) label {
5472   transform: perspective(0.01px);
5473 }
5474
5475 #main-window[customize-entered] > #tab-view-deck {
5476   background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5477   background-attachment: fixed;
5478 }
5479
5480 #main-window[customization-lwtheme] > #tab-view-deck:-moz-lwtheme {
5481   background-repeat: no-repeat;
5482   background-position: right top;
5483   background-attachment: fixed;
5484   /* The image will get set from CustomizeMode.jsm */
5485   background-image: none;
5486   background-color: transparent;
5487 }
5488
5489 #main-window[customization-lwtheme]:-moz-lwtheme {
5490   background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5491   background-repeat: repeat;
5492   background-attachment: fixed;
5493   background-position: left top;
5494 }
5495
5496 #main-window[customize-entered] #browser-bottombox,
5497 #main-window[customize-entered] #customization-container {
5498   border-left: 1px solid #9C9CFF;
5499   border-right: 1px solid #9C9CFF;
5500   background-clip: padding-box;
5501 }
5502
5503 #main-window[customize-entered] #browser-bottombox {
5504   border-bottom: 1px solid #9C9CFF;
5505 }
5506
5507 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"] {
5508   margin-right: -2px;
5509 }
5510
5511 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5512   margin-left: -2px;
5513 }
5514
5515 /* End customization mode */
5516
5517 /* Private browsing indicators */
5518
5519 /**
5520  * Currently, we have two places where we put private browsing indicators on
5521  * Windows. When tabsintitlebar is enabled, we draw the indicator in the titlebar.
5522  * When tabsintitlebar is disabled, we draw the indicator at the end of the
5523  * tabstrip. The titlebar indicator is the fiddliest of the bunch, since we
5524  * want the bottom border of the image to line up with the bottom of the window
5525  * caption buttons. That's why there's so much special-casing going on in here.
5526  */
5527 .private-browsing-indicator {
5528   display: none;
5529   pointer-events: none;
5530 }
5531
5532 #private-browsing-indicator-titlebar {
5533   display: block;
5534   position: absolute;
5535 }
5536
5537 #main-window[privatebrowsingmode=temporary][tabsintitlebar] #private-browsing-indicator-titlebar > .private-browsing-indicator {
5538   display: block;
5539 }
5540
5541 #main-window[privatebrowsingmode=temporary]:-moz-any([inFullscreen],:not([tabsintitlebar])) #TabsToolbar > .private-browsing-indicator {
5542   display: -moz-box;
5543 }
5544
5545 #TabsToolbar > .private-browsing-indicator {
5546   background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") no-repeat center -3px;
5547   margin-inline-start: 4px;
5548   width: 48px;
5549 }
5550
5551 /* Bug 1008183: We're intentionally using the titlebar asset here for fullscreen
5552  * mode, since the tabstrip "mimics" the titlebar in that case with its own
5553  * min/max/close window buttons.
5554  */
5555 #private-browsing-indicator-titlebar > .private-browsing-indicator,
5556 #main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
5557   background: url("chrome://browser/skin/privatebrowsing-mask-titlebar.png") no-repeat center 0px;
5558   margin-inline-end: 4px;
5559   width: 40px;
5560   height: 20px;
5561   position: relative;
5562 }
5563
5564 /* This one is for Linux */
5565 #main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
5566   background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") center no-repeat;
5567   width: 48px;
5568 }
5569
5570 /* End private browsing indicators */
5571
5572 /* === BEGIN UITour.inc.css === */
5573
5574 /* UI Tour */
5575
5576 #UITourHighlightContainer {
5577   -moz-appearance: none;
5578   border: none;
5579   background-color: transparent;
5580   /* This is a buffer to compensate for the movement in the "wobble" effect */
5581   padding: 4px;
5582 }
5583
5584 #UITourHighlight {
5585   background-image: radial-gradient(50% 100%, rgba(0,132,132,0.4) 50%, rgba(0,132,132,0.6) 100%);
5586   border-radius: 40px;
5587   border: 1px solid #9C9CFF;
5588   /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
5589      on Linux without an X compositor where opacity is either 0 or 1. */
5590   box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
5591   min-height: 32px;
5592   min-width: 32px;
5593 }
5594
5595 #UITourTooltipBody {
5596   -moz-box-align: start;
5597 }
5598
5599 #UITourTooltipTitleContainer {
5600   -moz-box-align: start;
5601   margin-bottom: 10px;
5602 }
5603
5604 #UITourTooltipIcon {
5605   width: 48px;
5606   height: 48px;
5607   margin-inline-end: 10px;
5608 }
5609
5610 #UITourTooltipTitle,
5611 #UITourTooltipDescription {
5612   max-width: 20rem;
5613 }
5614
5615 #UITourTooltipTitle {
5616   font-size: 1.45rem;
5617   font-weight: bold;
5618   margin: 0;
5619 }
5620
5621 #UITourTooltipDescription {
5622   margin-inline-start: 0;
5623   margin-inline-end: 0;
5624   font-size: 1.15rem;
5625   line-height: 1.8rem;
5626   margin-bottom: 0; /* Override global.css */
5627 }
5628
5629 #UITourTooltipClose {
5630   position: relative;
5631   -moz-appearance: none;
5632   border: none;
5633   background-color: transparent;
5634   min-width: 0;
5635   margin-inline-start: 4px;
5636   margin-top: -2px;
5637 }
5638
5639 #UITourTooltipClose > .toolbarbutton-text {
5640   display: none;
5641 }
5642
5643 #UITourTooltipButtons {
5644   -moz-box-pack: end;
5645   background-color: rgba(0,0,0,.2);
5646   border-top: 1px solid rgba(0,0,0,.4);
5647   margin: 10px -16px -16px;
5648   padding: 16px;
5649 }
5650
5651 #UITourTooltipButtons > label,
5652 #UITourTooltipButtons > button {
5653   margin: 0 15px;
5654 }
5655
5656 #UITourTooltipButtons > label:first-child,
5657 #UITourTooltipButtons > button:first-child {
5658   margin-inline-start: 0;
5659 }
5660
5661 #UITourTooltipButtons > label:last-child,
5662 #UITourTooltipButtons > button:last-child {
5663   margin-inline-end: 0;
5664 }
5665
5666 #UITourTooltipButtons > button[image] > .button-box > .button-icon {
5667   width: 16px;
5668   height: 16px;
5669   margin-inline-end: 5px;
5670 }
5671
5672 #UITourTooltipButtons > label,
5673 #UITourTooltipButtons > button .button-text {
5674   font-size: 1.15rem;
5675 }
5676
5677 #UITourTooltipButtons > button:not(.button-link) {
5678   -moz-appearance: none;
5679   background-color: #C09070;
5680   border-radius: 3000px;
5681   border: none;
5682   color: #000000;
5683   padding: 4px 30px;
5684   transition-property: background-color, color;
5685   transition-duration: 150ms;
5686 }
5687
5688 #UITourTooltipButtons > button:not(.button-link):not(:active):hover {
5689   background-color: #FFCF00;
5690   color: #000000;
5691 }
5692
5693 #UITourTooltipButtons > label,
5694 #UITourTooltipButtons > button.button-link {
5695   -moz-appearance: none;
5696   background: transparent;
5697   border: none;
5698   box-shadow: none;
5699   color: rgba(0,0,0,0.35);
5700   padding-left: 10px;
5701   padding-right: 10px;
5702 }
5703
5704 #UITourTooltipButtons > button.button-link:hover {
5705   color: black;
5706 }
5707
5708 /* The primary button gets the same color as the customize button. */
5709 #UITourTooltipButtons > button.button-primary {
5710   background-color: #A06060; /* LCARS default button background color */
5711   color: #000000;
5712   padding-left: 30px;
5713   padding-right: 30px;
5714 }
5715
5716 #UITourTooltipButtons > button.button-primary:not(:active):hover {
5717   background-color: #FFCF00;
5718   color: #000000;
5719 }
5720
5721 /* Notification overrides for Heartbeat UI */
5722
5723 notification.heartbeat {
5724   background-color: #A09090;
5725 /*  height: 40px;*/
5726 }
5727
5728 @keyframes pulse-onshow {
5729  0% {
5730    opacity: 0;
5731    transform: scale(1.0);
5732  }
5733  25% {
5734    opacity: 1;
5735    transform: scale(1.1);
5736  }
5737  50% {
5738    transform: scale(1.0);
5739  }
5740  75% {
5741    transform: scale(1.1);
5742  }
5743  100% {
5744    transform: scale(1.0);
5745  }
5746 }
5747
5748 @keyframes pulse-twice {
5749  0% {
5750    transform: scale(1.1);
5751  }
5752  50% {
5753    transform: scale(0.8);
5754  }
5755  100% {
5756    transform: scale(1);
5757  }
5758 }
5759
5760 .messageText.heartbeat {
5761   color: #000000;
5762 /*  text-shadow: none; */
5763   margin-inline-start: 0px;
5764 }
5765
5766 .messageImage.heartbeat {
5767   width: 24px;
5768   height: 24px;
5769   margin-inline-start: 8px;
5770   margin-inline-end: 8px;
5771 }
5772
5773 .messageImage.heartbeat.pulse-onshow {
5774   animation-name: pulse-onshow;
5775   animation-duration: 1.5s;
5776   animation-iteration-count: 1;
5777   animation-timing-function: cubic-bezier(.7,1.8,.9,1.1);
5778 }
5779
5780 .messageImage.heartbeat.pulse-twice {
5781   animation-name: pulse-twice;
5782   animation-duration: 1s;
5783   animation-iteration-count: 2;
5784   animation-timing-function: linear;
5785 }
5786
5787 /* Learn More link styles */
5788 .heartbeat > .text-link {
5789   color: #3333FF;
5790   margin-inline-start: 0px;
5791 }
5792
5793 .heartbeat > .text-link:hover {
5794   color: #9C9CFF;
5795   text-decoration: none;
5796 }
5797
5798 .heartbeat > .text-link:hover:active {
5799   color: #FF9F00;
5800 }
5801
5802 /* Heartbeat UI Rating Star Classes */
5803 .heartbeat > #star-rating-container {
5804   display: -moz-box;
5805 /*  margin-bottom: 4px;*/
5806 }
5807
5808 .heartbeat > #star-rating-container > #star5 {
5809   -moz-box-ordinal-group: 5;
5810 }
5811
5812 .heartbeat > #star-rating-container > #star4 {
5813   -moz-box-ordinal-group: 4;
5814 }
5815
5816 .heartbeat > #star-rating-container > #star3 {
5817   -moz-box-ordinal-group: 3;
5818 }
5819
5820 .heartbeat > #star-rating-container > #star2 {
5821   -moz-box-ordinal-group: 2;
5822 }
5823
5824 .heartbeat > #star-rating-container > .star-x  {
5825   background: url("chrome://browser/skin/heartbeat-star-off.svg");
5826   cursor: pointer;
5827   /* Overrides the margin-inline-end for all platforms defined in the .plain class */
5828   margin-inline-end: 4px !important;
5829   width: 16px;
5830   height: 16px;
5831 }
5832
5833 .heartbeat > #star-rating-container > .star-x:hover,
5834 .heartbeat > #star-rating-container > .star-x:hover ~ .star-x {
5835   background: url("chrome://browser/skin/heartbeat-star-lit.svg");
5836 }
5837
5838 /* === END UITour.inc.css === */
5839
5840 #UITourTooltipButtons {
5841   /**
5842    * Override the --panel-arrowcontent-padding so the background extends
5843    * to the sides and bottom of the panel.
5844    */
5845   margin-left: -10px;
5846   margin-right: -10px;
5847   margin-bottom: -10px;
5848 }
5849
5850 /* === BEGIN contextmenu.inc.css === */
5851
5852 menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left {
5853 }
5854
5855 #context-navigation > .menuitem-iconic {
5856   -moz-box-flex: 1;
5857   -moz-box-pack: center;
5858   -moz-box-align: center;
5859 }
5860
5861 #context-navigation > .menuitem-iconic[disabled="true"] {
5862   background-color: transparent;
5863 }
5864
5865 #context-navigation > .menuitem-iconic > .menu-iconic-left {
5866   -moz-appearance: none;
5867 }
5868
5869 #context-back > .menu-iconic-left {
5870   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back"); */
5871   list-style-image: url("chrome://browser/skin/ToolbarFx.png");
5872   -moz-image-region: rect(0, 54px, 18px, 36px);
5873 }
5874
5875 #context-back:not([disabled="true"]):hover > .menu-iconic-left {
5876   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back-active"); */
5877   -moz-image-region: rect(18px, 54px, 36px, 36px);
5878 }
5879
5880 #context-back[disabled="true"] > .menu-iconic-left {
5881   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back-disabled"); */
5882   -moz-image-region: rect(36px, 54px, 54px, 36px);
5883 }
5884
5885 #context-forward > .menu-iconic-left {
5886   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward"); */
5887   list-style-image: url("chrome://browser/skin/ToolbarFx.png");
5888   -moz-image-region: rect(0, 72px, 18px, 54px);
5889 }
5890
5891 #context-forward:not([disabled="true"]):hover > .menu-iconic-left {
5892   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward-active"); */
5893   -moz-image-region: rect(18px, 72px, 36px, 54px);
5894 }
5895
5896 #context-forward[disabled="true"] > .menu-iconic-left {
5897   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward-disabled"); */
5898   -moz-image-region: rect(36px, 72px, 54px, 54px);
5899 }
5900
5901 #context-reload > .menu-iconic-left {
5902   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload"); */
5903   list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
5904   -moz-image-region: rect(0, 14px, 14px, 0);
5905 }
5906
5907 #context-reload:not([disabled="true"]):hover > .menu-iconic-left {
5908   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload-active"); */
5909   -moz-image-region: rect(14px, 14px, 28px, 0);
5910 }
5911
5912 #context-reload[disabled="true"] > .menu-iconic-left {
5913   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload-disabled"); */
5914   -moz-image-region: rect(28px, 14px, 42px, 0);
5915 }
5916
5917 #context-stop > .menu-iconic-left {
5918   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop"); */
5919   list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
5920   -moz-image-region: rect(0, 28px, 14px, 14px);
5921 }
5922
5923 #context-stop:not([disabled="true"]):hover > .menu-iconic-left {
5924   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop-active"); */
5925   -moz-image-region: rect(14px, 28px, 28px, 14px);
5926 }
5927
5928 #context-stop[disabled="true"] > .menu-iconic-left {
5929   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop-disabled"); */
5930   -moz-image-region: rect(28px, 28px, 42px, 14px);
5931 }
5932
5933 #context-bookmarkpage > .menu-iconic-left {
5934   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark"); */
5935   list-style-image: url("chrome://browser/skin/ToolbarFx.png");
5936   -moz-image-region: rect(0, 144px, 18px, 126px);
5937 }
5938
5939 #context-bookmarkpage:not([disabled="true"]):hover > .menu-iconic-left {
5940   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-active"); */
5941   -moz-image-region: rect(18px, 144px, 36px, 126px);
5942 }
5943
5944 #context-bookmarkpage[disabled="true"] > .menu-iconic-left {
5945   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-disabled"); */
5946   -moz-image-region: rect(36px, 144px, 54px, 126px);
5947 }
5948
5949 #context-bookmarkpage[starred=true] {
5950   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked"); */
5951   -moz-image-region: rect(0px, 162px, 18px, 144px);
5952 }
5953
5954 #context-bookmarkpage[starred=true][_moz-menuactive=true] {
5955   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-active"); */
5956   -moz-image-region: rect(18px, 162px, 36px, 144px);
5957 }
5958
5959 #context-bookmarkpage[starred=true][disabled=true] {
5960   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-disabled"); */
5961   -moz-image-region: rect(36px, 162px, 54px, 144px);
5962 }
5963
5964 #context-back:-moz-locale-dir(rtl),
5965 #context-forward:-moz-locale-dir(rtl),
5966 #context-reload:-moz-locale-dir(rtl) {
5967   transform: scaleX(-1);
5968 }
5969
5970 #context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
5971   width: 18px; /*16px;*/
5972   height: 18px; /*16px;*/
5973   margin: 7px;
5974 }
5975
5976 #context-navigation > #context-reload > .menu-iconic-left > .menu-iconic-icon,
5977 #context-navigation > #context-stop > .menu-iconic-left > .menu-iconic-icon {
5978   width: 14px;
5979   height: 14px;
5980   margin: 9px;
5981 }
5982
5983 #context-media-eme-learnmore {
5984   list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
5985 }
5986
5987 #context-media-eme-learnmore {
5988   list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
5989 }
5990
5991 /* === END contextmenu.inc.css === */
5992
5993 #context-navigation {
5994 }
5995
5996 #context-sep-navigation {
5997 /*  margin-top: -4px; */
5998 }
5999
6000 .browser-extension-panel > .panel-arrowcontainer > .panel-arrowcontent {
6001   padding: 0;
6002   overflow: hidden;
6003 }