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::placeholder,
1824 .searchbar-textbox:-moz-lwtheme > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::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 #urlbar-display-box {
1843   padding-inline-start: 4px;
1844 /*  border-inline-start: 1px solid var(--urlbar-separator-color);
1845   border-inline-end: 1px solid var(--urlbar-separator-color);
1846   border-image: linear-gradient(transparent 15%, var(--urlbar-separator-color) 15%, var(--urlbar-separator-color) 85%, transparent 85%);
1847   border-image-slice: 1; */
1848 }
1849
1850 #urlbar-icons {
1851   -moz-box-align: center;
1852 }
1853
1854 .urlbar-icon {
1855   padding: 0 2px;
1856   /* 16x16 icon with border-box sizing */
1857   width: 20px;
1858   height: 16px;
1859 }
1860
1861 .search-go-container {
1862   padding: 2px;
1863 }
1864
1865 .search-go-container > .search-go-button {
1866   padding: 0;
1867 }
1868
1869 #urlbar-search-footer {
1870   border-top: 1px solid #A09090;
1871 }
1872
1873 #urlbar-search-settings {
1874 }
1875
1876 #urlbar-search-settings:hover {
1877 }
1878
1879 #urlbar-search-settings:hover:active {
1880 }
1881
1882 #urlbar-search-splitter {
1883   min-width: 6px;
1884   margin-inline-start: -3px;
1885   border: none;
1886   background: transparent;
1887 }
1888
1889 #urlbar-search-splitter + #urlbar-container > #urlbar,
1890 #urlbar-search-splitter + #search-container > #searchbar > .searchbar-textbox {
1891   margin-inline-start: 0;
1892 }
1893
1894 .urlbar-display {
1895   border-inline-end: 1px solid #9C9CFF;
1896   margin-inline-end: 3px;
1897   margin-top: 0;
1898   margin-bottom: 0;
1899   margin-inline-start: 0;
1900   color: #8050B0;
1901 }
1902
1903 /* === BEGIN urlbarSearchSuggestionsNotification.inc.css === */
1904
1905 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] {
1906   border-bottom: 1px solid #A09090;
1907   background-color: #000000;
1908   padding: 6px 0;
1909   padding-inline-start: 44px;
1910   padding-inline-end: 6px;
1911   background-image: url("chrome://browser/skin/info.svg");
1912   background-clip: padding-box;
1913   background-position: 20px center;
1914   background-repeat: no-repeat;
1915   background-size: 16px 16px;
1916 }
1917
1918 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) {
1919   background-position: right 20px center;
1920 }
1921
1922 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description {
1923   margin: 0;
1924   padding: 0;
1925 }
1926
1927 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description > label.text-link {
1928   margin-inline-start: 0;
1929 }
1930
1931 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
1932   -moz-appearance: none;
1933   min-width: 80px;
1934   border-radius: 3px;
1935   padding: 4px 16px;
1936   margin: 0;
1937   margin-inline-start: 10px;
1938 }
1939
1940 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"] {
1941 }
1942
1943 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"]:hover {
1944 }
1945
1946 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"] {
1947 }
1948
1949 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"]:hover {
1950 }
1951
1952 /* === END urlbarSearchSuggestionsNotification.inc.css === */
1953
1954 #search-container {
1955   min-width: calc(54px + 11ch);
1956 }
1957
1958 /* identity box */
1959
1960 #identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) {
1961   background-color: var(--identity-box-verified-background-color);
1962 }
1963
1964 #identity-box:-moz-focusring {
1965   outline: 1px dotted #008484;
1966   outline-offset: -1px;
1967 }
1968
1969 #identity-box.verifiedDomain:-moz-focusring,
1970 #identity-box.verifiedIdentity:-moz-focusring {
1971   outline-color: #000000;
1972 }
1973
1974 /* Location bar dropmarker */
1975
1976 .urlbar-history-dropmarker:not(:hover):not([open="true"]) {
1977   background-color: transparent;
1978 }
1979
1980 #urlbar-container[combined="true"] > #urlbar > .urlbar-history-dropmarker,
1981 #urlbar-wrapper > #urlbar > .urlbar-history-dropmarker,
1982 #urlbar-wrapper > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
1983   border: none;
1984   border-radius: 0px;
1985   transition: opacity 0.15s ease;
1986 }
1987
1988 #urlbar-wrapper[switchingtabs] > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
1989   transition: none;
1990 }
1991
1992 #navigator-toolbox:not(:hover) #nav-bar:not([customizing="true"]) #urlbar:not([focused]) > .urlbar-textbox-container > .urlbar-history-dropmarker {
1993   opacity: 0;
1994 }
1995
1996 .urlbar-history-dropmarker:hover {
1997 }
1998
1999 .urlbar-history-dropmarker:hover:active,
2000 .urlbar-history-dropmarker[open="true"] {
2001 }
2002
2003 /* page proxy icon */
2004
2005 /* === BEGIN identity-block.inc.css === */
2006
2007 #identity-box {
2008   --identity-box-verified-color: #008484;
2009   /* Default theme does different color per channel, we can't as they do it build-time. */
2010   --identity-box-chrome-color: #9C9CFF;
2011
2012   font-size: .9em;
2013   border-radius: 2px;
2014   padding: 3px 5px;
2015   overflow: hidden;
2016   /* The latter two properties have a transition to handle the delayed hiding of
2017      the forward button when hovered. */
2018   transition: background-color 150ms ease, padding-left, padding-right;
2019 }
2020
2021 #identity-box:-moz-locale-dir(ltr) {
2022   border-top-right-radius: 0;
2023   border-bottom-right-radius: 0;
2024 }
2025
2026 #identity-box:-moz-locale-dir(rtl) {
2027   border-top-left-radius: 0;
2028   border-bottom-left-radius: 0;
2029 }
2030
2031 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
2032   color: var(--identity-box-chrome-color);
2033   border-inline-end: 1px solid var(--identity-box-chrome-color);
2034 }
2035
2036 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
2037   color: var(--identity-box-verified-color);
2038   border-inline-end: 1px solid var(--identity-box-verified-color);
2039 }
2040
2041 #identity-icon-labels:-moz-locale-dir(ltr) {
2042   padding-left: 2px;
2043 }
2044
2045 #identity-icon-labels:-moz-locale-dir(rtl) {
2046   padding-right: 2px;
2047 }
2048
2049 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box {
2050 /*   border-radius: 0;
2051   padding-inline-start: 2px; */
2052   padding-inline-end: 2px;
2053   margin-inline-end: 1px;
2054 }
2055
2056 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > #identity-box {
2057   padding-inline-start: 2px;
2058 }
2059
2060 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar > #identity-box {
2061   /* Forward button hiding is delayed when hovered, so we should use the same
2062      delay for the identity box. We handle both horizontal paddings (for LTR and
2063      RTL), the latter two delays here are for padding-left and padding-right. */
2064   transition-delay: 0s, 100s, 100s;
2065 }
2066
2067 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar > #identity-box {
2068   /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
2069   padding-inline-start: 2.01px;
2070 }
2071
2072 /* MAIN IDENTITY ICON */
2073
2074 #identity-icon {
2075   width: 16px;
2076   height: 16px;
2077   list-style-image: url(chrome://browser/skin/identity-icon.svg#normal);
2078 }
2079
2080 #identity-box:hover > #identity-icon:not(.no-hover),
2081 #identity-box[open=true] > #identity-icon {
2082   list-style-image: url(chrome://browser/skin/identity-icon.svg#hover);
2083 }
2084
2085 #identity-box.grantedPermissions > #identity-icon {
2086   list-style-image: url(chrome://browser/skin/identity-icon.svg#notice);
2087 }
2088
2089 #identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover),
2090 #identity-box.grantedPermissions[open=true] > #identity-icon {
2091   list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-hover);
2092 }
2093
2094 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon {
2095   list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
2096 }
2097
2098 #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon {
2099   opacity: 0.3;
2100 }
2101
2102 #urlbar[actiontype="searchengine"] > #identity-box > #identity-icon {
2103   -moz-image-region: inherit;
2104   list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon);
2105   width: 16px;
2106   height: 16px;
2107   opacity: 1;
2108 }
2109
2110 /* TRACKING PROTECTION ICON */
2111
2112 #tracking-protection-icon {
2113   width: 16px;
2114   height: 16px;
2115   margin-inline-start: 2px;
2116   margin-inline-end: 0;
2117   list-style-image: url(chrome://browser/skin/tracking-protection-16.svg);
2118   opacity: 1;
2119 }
2120
2121 #tracking-protection-icon[state="loaded-tracking-content"] {
2122   list-style-image: url(chrome://browser/skin/tracking-protection-disabled-16.svg);
2123 }
2124
2125 #tracking-protection-icon[animate] {
2126   transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
2127 }
2128
2129 #tracking-protection-icon:not([state]) {
2130   margin-inline-end: -18px;
2131   pointer-events: none;
2132   opacity: 0;
2133   /* Only animate the shield in, when it disappears hide it immediately. */
2134   transition: none;
2135 }
2136
2137 #urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
2138   visibility: collapse;
2139 }
2140
2141 /* CONNECTION ICON */
2142
2143 #connection-icon {
2144   width: 16px;
2145   height: 16px;
2146   margin-inline-start: 2px;
2147   visibility: collapse;
2148 }
2149
2150 #urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon,
2151 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon,
2152 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon {
2153   list-style-image: url(chrome://browser/skin/identity-secure.svg);
2154   visibility: visible;
2155 }
2156
2157 #urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon {
2158   list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg);
2159   visibility: visible;
2160 }
2161
2162 #urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon,
2163 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon {
2164   list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg);
2165   visibility: visible;
2166 }
2167
2168 #urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon,
2169 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon,
2170 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon {
2171   list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg);
2172   visibility: visible;
2173 }
2174
2175 /* === END identity-block.inc.css === */
2176
2177 #page-proxy-favicon {
2178   -moz-image-region: rect(0, 16px, 16px, 0);
2179 }
2180
2181 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
2182 /*  margin-inline-end: 1px;*/
2183 }
2184
2185 #identity-box:hover > #page-proxy-favicon {
2186   -moz-image-region: rect(0, 32px, 16px, 16px);
2187 }
2188
2189 #identity-box:hover:active > #page-proxy-favicon,
2190 #identity-box[open=true] > #page-proxy-favicon {
2191   -moz-image-region: rect(0, 48px, 16px, 32px);
2192 }
2193
2194 #identity-box:hover {
2195   background-color: #FFCF00;
2196   color: #000000;
2197 }
2198
2199 #identity-box:hover:active,
2200 #identity-box[open=true] {
2201   background-color: #A09090;
2202   color: #000000;
2203 }
2204
2205 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover,
2206 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active,
2207 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] {
2208   background-color: #9C9CFF;
2209   color: #000000;
2210 }
2211
2212 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover,
2213 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active,
2214 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] {
2215   background-color: #008484;
2216   color: #000000;
2217 }
2218
2219 #identity-box:hover > image,
2220 #identity-box:hover:active > image,
2221 #identity-box[open=true] > image {
2222   filter: url(chrome://global/skin/icons/filters.svg#active-icon-state);
2223 }
2224
2225 /* autocomplete */
2226
2227 #treecolAutoCompleteImage {
2228   max-width: 36px;
2229 }
2230
2231 /*
2232 .autocomplete-richlistbox {
2233   padding: 4px;
2234 }
2235
2236 .autocomplete-richlistitem {
2237   height: 30px;
2238   min-height: 30px;
2239   font: message-box;
2240   border-radius: 2px;
2241   border: 1px solid transparent;
2242 }
2243
2244 .autocomplete-richlistitem[selected=true] {
2245   background-color: hsl(210, 80%, 52%);
2246 }
2247 */
2248 .ac-title {
2249   font-size: 14px;
2250 /*  color: hsl(0, 0%, 0%);*/
2251 }
2252
2253 .ac-tags {
2254   font-size: 12px;
2255 }
2256 /*
2257 html|span.ac-tag {
2258   background-color: hsl(216, 0%, 88%);
2259   color: hsl(0, 0%, 0%);
2260   border-radius: 2px;
2261   border: 1px solid transparent;
2262   padding: 0 1px;
2263 }
2264 */
2265
2266 .ac-separator,
2267 .ac-url,
2268 .ac-action {
2269   font-size: 12px;
2270 }
2271
2272 .ac-separator {
2273 /*  color: hsl(0, 0%, 50%);*/
2274 }
2275
2276 .ac-url {
2277   color: #9C9CFF;
2278 }
2279
2280 .ac-action {
2281   color: #9C9CFF;
2282 }
2283
2284 .ac-title[selected=true],
2285 .ac-separator[selected],
2286 .ac-url[selected=true],
2287 .ac-action[selected=true] {
2288   color: #000000;
2289 }
2290
2291 .ac-tags-text[selected] > html|span.ac-tag {
2292   background-color: #A09090;
2293   color: #000000;
2294 }
2295
2296 html|span.ac-emphasize-text-title,
2297 html|span.ac-emphasize-text-tag,
2298 html|span.ac-emphasize-text-url {
2299   font-weight: 600;
2300 }
2301
2302 .ac-type-icon[type=bookmark] {
2303   list-style-image: url("chrome://browser/skin/urlbar-star.svg#star");
2304 }
2305
2306 .ac-type-icon[type=bookmark][selected][current] {
2307 /*  list-style-image: url("chrome://browser/skin/urlbar-star.svg#star-inverted");*/
2308 }
2309
2310 .ac-result-type-bookmark,
2311 .autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) {
2312   list-style-image: url("chrome://browser/skin/places/bookmark.png");
2313   -moz-image-region: rect(0px 16px 16px 0px);
2314   width: 16px;
2315   height: 16px;
2316 }
2317
2318 richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark,
2319 .autocomplete-treebody::-moz-tree-image(selected, current, bookmark, treecolAutoCompleteImage) {
2320 /*  -moz-image-region: rect(0px 48px 16px 32px);*/
2321 }
2322
2323 .ac-type-icon[type=keyword],
2324 .ac-site-icon[type=searchengine],
2325 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage) {
2326   list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon");
2327 }
2328
2329 .ac-type-icon[type=keyword][selected],
2330 .ac-site-icon[type=searchengine][selected],
2331 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage, selected) {
2332   list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon-inverted");
2333 }
2334
2335 .ac-result-type-tag,
2336 .autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) {
2337   list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
2338   width: 16px;
2339   height: 16px;
2340 }
2341
2342 .ac-type-icon[type=switchtab],
2343 .ac-type-icon[type=remotetab] {
2344   list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab");
2345 }
2346
2347 .ac-type-icon[type=switchtab][selected],
2348 .ac-type-icon[type=remotetab][selected] {
2349   list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab-inverted");
2350 }
2351
2352 .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
2353 .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
2354 {
2355   color: #8050B0;
2356   font-size: smaller;
2357 }
2358
2359 .autocomplete-treebody::-moz-tree-cell(suggesthint) {
2360   border-top: 1px solid #9C9CFF;
2361 }
2362
2363 /* combined go/reload/stop button in location bar */
2364
2365 #urlbar-go-button,
2366 #urlbar-reload-button,
2367 #urlbar-stop-button {
2368   border-style: none;
2369   list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
2370 /*  margin: 0 9px; */
2371   margin-inline-start: 0px;
2372   border-inline-start: 1px solid var(--urlbar-separator-color);
2373   border-image: linear-gradient(transparent 15%,
2374                                 var(--urlbar-separator-color) 15%,
2375                                 var(--urlbar-separator-color) 85%,
2376                                 transparent 85%);
2377   border-image-slice: 1;
2378 }
2379
2380 #urlbar:-moz-locale-dir(ltr) > toolbarbutton {
2381   border-top-left-radius: 0px;
2382   border-bottom-left-radius: 0px;
2383 }
2384
2385 #urlbar:-moz-locale-dir(rtl) > toolbarbutton {
2386   border-top-right-radius: 0px;
2387   border-bottom-right-radius: 0px;
2388 }
2389
2390 #urlbar > toolbarbutton:not([disabled=true]):active:hover,
2391 #urlbar-reload-button:not(:hover) {
2392   border-inline-start-style: none;
2393   padding-inline-start: 3px;
2394 }
2395
2396 #urlbar-reload-button {
2397   -moz-image-region: rect(0px, 14px, 14px, 0px);
2398 }
2399
2400 #urlbar-reload-button[disabled=true] {
2401   -moz-image-region: rect(28px, 14px, 42px, 0px);
2402 }
2403
2404 #urlbar-reload-button:not([disabled=true]):hover {
2405   -moz-image-region: rect(14px, 14px, 28px, 0px);
2406 }
2407
2408 #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2409   transform: scaleX(-1);
2410 }
2411
2412 #urlbar-go-button {
2413   -moz-image-region: rect(0, 42px, 14px, 28px);
2414 }
2415
2416 #urlbar-go-button:hover {
2417   -moz-image-region: rect(14px, 42px, 28px, 28px);
2418 }
2419
2420 #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2421   transform: scaleX(-1);
2422 }
2423
2424 #urlbar-stop-button {
2425   -moz-image-region: rect(0px, 28px, 14px, 14px);
2426 }
2427
2428 #urlbar-stop-button:hover {
2429   -moz-image-region: rect(14px, 28px, 28px, 14px);
2430 }
2431
2432 @media (min-resolution: 1.1dppx) {
2433   #urlbar-go-button,
2434   #urlbar-reload-button,
2435   #urlbar-stop-button {
2436     list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
2437   }
2438
2439   #urlbar-go-button > .toolbarbutton-icon,
2440   #urlbar-reload-button > .toolbarbutton-icon,
2441   #urlbar-stop-button > .toolbarbutton-icon {
2442     width: 14px;
2443   }
2444
2445   #urlbar-go-button {
2446     -moz-image-region: rect(0, 84px, 28px, 56px);
2447   }
2448
2449   #urlbar-go-button:hover {
2450     -moz-image-region: rect(28px, 84px, 56px, 56px);
2451   }
2452
2453   #urlbar-go-button:hover:active {
2454     -moz-image-region: rect(56px, 84px, 84px, 56px);
2455   }
2456
2457   #urlbar-reload-button {
2458     -moz-image-region: rect(0, 28px, 28px, 0);
2459   }
2460
2461   #urlbar-reload-button:not([disabled]):hover {
2462     -moz-image-region: rect(28px, 28px, 56px, 0);
2463   }
2464
2465   #urlbar-reload-button:not([disabled]):hover:active {
2466     -moz-image-region: rect(56px, 28px, 84px, 0);
2467   }
2468
2469   #urlbar-stop-button {
2470     -moz-image-region: rect(0, 56px, 28px, 28px);
2471   }
2472
2473   #urlbar-stop-button:not([disabled]):hover {
2474     -moz-image-region: rect(28px, 56px, 56px, 28px);
2475   }
2476
2477   #urlbar-stop-button:hover:active {
2478     -moz-image-region: rect(56px, 56px, 84px, 28px);
2479   }
2480 }
2481
2482 /* popup blocker button */
2483
2484 #page-report-button {
2485   list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
2486   -moz-image-region: rect(0, 16px, 16px, 0);
2487 }
2488
2489 #page-report-button:hover ,
2490 #page-report-button:hover:active,
2491 #page-report-button[open="true"] {
2492   -moz-image-region: rect(0, 32px, 16px, 16px);
2493 }
2494
2495 /* Reader mode button */
2496
2497 #reader-mode-button {
2498   list-style-image: url("chrome://browser/skin/readerMode.svg");
2499   -moz-image-region: rect(0, 16px, 16px, 0);
2500 }
2501
2502 #reader-mode-button:hover,
2503 #reader-mode-button[readeractive]:hover {
2504   -moz-image-region: rect(0, 32px, 16px, 16px);
2505 }
2506
2507 #reader-mode-button:hover:active,
2508 #reader-mode-button[readeractive] {
2509   -moz-image-region: rect(0, 48px, 16px, 32px);
2510 }
2511
2512 /* social share panel */
2513
2514 .social-share-frame {
2515   min-width: 756px;
2516   height: 150px;
2517 }
2518
2519 #share-container {
2520   min-width: 756px;
2521   background-color: white;
2522   background-repeat: no-repeat;
2523   background-position: center center;
2524 }
2525 #share-container[loading] {
2526   background-image: url(chrome://browser/skin/tabbrowser/pendingpaint.png);
2527 }
2528 #share-container > browser {
2529   transition: opacity 150ms ease-in-out;
2530   opacity: 1;
2531 }
2532 #share-container[loading] > browser {
2533   opacity: 0;
2534 }
2535
2536 .social-share-toolbar {
2537   border-bottom: 1px solid #9C9CFF;
2538   padding: 2px;
2539 }
2540
2541 #social-share-provider-buttons {
2542   padding: 0;
2543   margin: 0;
2544 }
2545
2546 .share-provider-button {
2547   padding: 5px;
2548   margin: 2px;
2549 }
2550
2551 .share-provider-button > .toolbarbutton-text {
2552   display: none;
2553 }
2554 .share-provider-button > .toolbarbutton-icon {
2555   width: 16px;
2556   min-height: 16px;
2557   max-height: 16px;
2558 }
2559
2560 /* fixup corners for share panel */
2561 .social-panel > .social-panel-frame {
2562   border-radius: inherit;
2563 }
2564
2565 #social-share-panel {
2566   min-height: 100px;
2567   min-width: 766px;
2568 }
2569
2570 #share-container,
2571 .social-share-frame {
2572   border-top-left-radius: 0;
2573   border-bottom-left-radius: inherit;
2574   border-top-right-radius: 0;
2575   border-bottom-right-radius: inherit;
2576 }
2577
2578 #social-share-panel > .social-share-toolbar {
2579   border-top-left-radius: inherit;
2580   border-top-right-radius: inherit;
2581 }
2582
2583 #social-share-provider-buttons {
2584   border-top-left-radius: inherit;
2585   border-top-right-radius: inherit;
2586 }
2587
2588 /* social recommending panel */
2589
2590 #social-mark-button {
2591   -moz-image-region: rect(0, 16px, 16px, 0);
2592 }
2593
2594 /* bookmarks menu-button */
2595
2596 #bookmarks-menu-button.bookmark-item {
2597   list-style-image: url("chrome://browser/skin/places/bookmark.png");
2598   -moz-image-region: rect(0px 16px 16px 0px);
2599 }
2600
2601 #bookmarks-menu-button.bookmark-item[starred] {
2602   -moz-image-region: rect(0px 32px 16px 16px);
2603 }
2604
2605 #nav-bar #bookmarks-menu-button[cui-areatype="toolbar"]:not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
2606   padding-top: 2px;
2607   padding-bottom: 2px;
2608 }
2609
2610 #BMB_bookmarksPopup[side="top"],
2611 #BMB_bookmarksPopup[side="bottom"] {
2612   margin-left: -20px;
2613   margin-right: -20px;
2614 }
2615
2616 #BMB_bookmarksPopup[side="left"],
2617 #BMB_bookmarksPopup[side="right"] {
2618   margin-top: -20px;
2619   margin-bottom: -20px;
2620 }
2621
2622 /* bookmarking panel */
2623
2624 #editBookmarkPanelStarIcon {
2625   list-style-image: url("chrome://browser/skin/places/starred48.png");
2626   width: 48px;
2627   height: 48px;
2628 }
2629
2630 #editBookmarkPanelStarIcon[unstarred] {
2631   list-style-image: url("chrome://browser/skin/places/unstarred48.png");
2632 }
2633
2634 #editBookmarkPanelTitle {
2635   font-size: 130%;
2636 }
2637
2638 #editBookmarkPanelHeader,
2639 #editBookmarkPanelContent {
2640   margin-bottom: .5em;
2641 }
2642
2643 /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
2644 #editBMPanel_folderTree {
2645   min-width: 27em;
2646 }
2647
2648 /* ::::: content area ::::: */
2649
2650 #sidebar-box {
2651   background-color: #9C9CFF;
2652   color: #000000;
2653 }
2654
2655 #sidebar {
2656   background-color: #000000;
2657 }
2658
2659 #sidebar-splitter {
2660   margin-inline-start: 0;
2661 }
2662
2663 #sidebar-header {
2664   color: #000000;
2665   padding: 2px;
2666 }
2667
2668 #sidebar-title {
2669   padding-inline-start: 0px;
2670 }
2671
2672 #sidebar-header > .close-icon {
2673 /*  padding: 4px 2px;
2674   margin: 0;
2675   border: none;*/
2676   list-style-image: url("chrome://global/skin/icons/close-button.gif");
2677 }
2678
2679 #sidebar-header > .close-icon:hover,
2680 #sidebar-header > .close-icon:hover:active {
2681   list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2682 }
2683
2684 #sidebar-splitter:-moz-locale-dir(ltr),
2685 #sidebar:-moz-locale-dir(ltr) {
2686   border-radius: 0 5px 0 0;
2687 }
2688
2689 #sidebar-splitter:-moz-locale-dir(rtl),
2690 #sidebar:-moz-locale-dir(rtl) {
2691   border-radius: 5px 0 0 0;
2692 }
2693
2694 .browserContainer > findbar {
2695 /*
2696   background-color: -moz-dialog;
2697   color: -moz-DialogText;
2698 */
2699 }
2700
2701 /* Tabstrip */
2702
2703 #TabsToolbar {
2704   min-height: 0;
2705   padding: 0;
2706   -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
2707 }
2708
2709 #TabsToolbar .toolbar-holder {
2710   background-color: #000000; /* correct effect of being an actual toolbar */
2711 }
2712
2713 #main-window[disablechrome] #TabsToolbar,
2714 #TabsToolbar[tabsontop="false"] {
2715   border-bottom: 1px solid #008484;
2716 }
2717
2718 /* === BEGIN tabs.inc.css === */
2719
2720 :root {
2721   /* --tab-toolbar-navbar-overlap: 1px; */
2722   /* --navbar-tab-toolbar-highlight-overlap: 1px; */
2723   /* --tab-min-height: 31px; */
2724 }
2725 #TabsToolbar {
2726   /* --tab-stroke-background-size: auto 100%; */
2727 }
2728
2729 .tabbrowser-tab,
2730 .tabs-newtab-button,
2731 #TabsToolbar > #new-tab-button {
2732   margin-top: 0px;
2733 }
2734
2735 .tabbrowser-tab {
2736   padding: 1px 4px 2px;
2737 }
2738
2739 .tabbrowser-tab:first-of-type {
2740   margin-inline-start: 2px;
2741 }
2742
2743 .tabs-newtab-button,
2744 #TabsToolbar > #new-tab-button,
2745 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
2746 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
2747   border-radius: 8px 8px 0px 0px;
2748   margin-inline-start: 0;
2749 }
2750
2751 .tabs-newtab-button:not(:hover),
2752 #TabsToolbar > #new-tab-button:not(:hover),
2753 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
2754 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
2755   background-color: #C09070;
2756 }
2757
2758 /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
2759 .tabbrowser-tab[visuallyselected=true] {
2760 /*  position: relative;
2761   z-index: 2;*/
2762 }
2763
2764 .tab-background-middle {
2765 }
2766
2767 .tab-content {
2768 }
2769
2770 .tab-content[pinned] {
2771 }
2772
2773 .tab-throbber,
2774 .tab-icon-image,
2775 .tab-sharing-icon-overlay,
2776 .tab-icon-sound,
2777 .tab-close-button {
2778 }
2779
2780 .tab-throbber,
2781 .tab-sharing-icon-overlay,
2782 .tab-icon-image {
2783   height: 16px;
2784   width: 16px;
2785   margin-inline-end: 3px;
2786 }
2787
2788 .tab-icon-image {
2789   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
2790 }
2791
2792 .tab-icon-image[sharing]:not([selected]),
2793 .tab-sharing-icon-overlay {
2794   animation: 3s linear pulse infinite;
2795 }
2796
2797 @keyframes pulse {
2798   0%, 16.66%, 83.33%, 100% {
2799     opacity: 0;
2800   }
2801   33.33%, 66.66% {
2802     opacity: 1;
2803   }
2804 }
2805
2806 .tab-icon-image[sharing]:not([selected]) {
2807   animation-delay: -1.5s;
2808 }
2809
2810 .tab-sharing-icon-overlay {
2811   /* 16px of the icon + 6px of margin-inline-end of .tab-icon-image */
2812   margin-inline-start: -22px;
2813   position: relative;
2814 }
2815
2816 .tab-sharing-icon-overlay[sharing="camera"] {
2817   list-style-image: url("chrome://browser/skin/notification-icons.svg#camera");
2818 }
2819
2820 .tab-sharing-icon-overlay[sharing="microphone"] {
2821   list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone");
2822 }
2823
2824 .tab-sharing-icon-overlay[sharing="screen"] {
2825   list-style-image: url("chrome://browser/skin/notification-icons.svg#screen");
2826 }
2827
2828 .tab-sharing-icon-overlay[sharing] {
2829   filter: url("chrome://browser/skin/filters.svg#fill");
2830   fill: #FFCF00;
2831 }
2832
2833 .tab-icon-overlay {
2834   width: 16px;
2835   height: 16px;
2836   margin-top: -8px;
2837   margin-inline-start: -15px;
2838   margin-inline-end: -1px;
2839   position: relative;
2840 }
2841
2842 .tab-icon-overlay[crashed] {
2843   list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
2844 }
2845
2846 .tab-icon-overlay[soundplaying],
2847 .tab-icon-overlay[muted]:not([crashed]) {
2848   border-radius: 10px;
2849 }
2850
2851 .tab-icon-overlay[soundplaying]:hover,
2852 .tab-icon-overlay[muted]:hover {
2853   background-color: #FFCF00;
2854 }
2855
2856 .tab-icon-overlay[soundplaying] {
2857   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio");
2858 }
2859
2860 .tab-icon-overlay[muted]:not([crashed]) {
2861   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
2862 }
2863
2864 #TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not(:hover) {
2865   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white");
2866 }
2867
2868
2869 #TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not(:hover) {
2870   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted");
2871 }
2872
2873 .tab-throbber[busy] {
2874   list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png");
2875 }
2876
2877 .tab-throbber[progress] {
2878   list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.png");
2879 }
2880
2881 @media (min-resolution: 1.1dppx) {
2882   .tab-throbber[busy] {
2883     list-style-image: url("chrome://communicator/skin/brand/throbber-anim-connect.png");
2884   }
2885
2886   .tab-throbber[progress] {
2887     list-style-image: url("chrome://communicator/skin/brand/throbber-anim.png");
2888   }
2889 }
2890
2891 .tab-throbber[pinned],
2892 .tab-icon-image[pinned] {
2893   margin-inline-start: 2px;
2894   margin-inline-end: 2px;
2895 }
2896
2897 .tab-label {
2898   /* this needs to add up to the 16px of the icon image */
2899   height: 12px;
2900   margin-top: 2px !important;
2901   margin-bottom: 2px !important;
2902 }
2903
2904 .tab-icon-sound {
2905   margin-inline-start: 4px;
2906   width: 16px;
2907   height: 16px;
2908   padding: 0;
2909 }
2910
2911 .tab-icon-sound[muted] {
2912   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
2913 }
2914
2915 .tab-icon-sound[muted]:hover {
2916   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover");
2917 }
2918
2919 .tab-icon-sound[muted]:hover:active {
2920   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed");
2921 }
2922
2923 .tab-icon-sound[soundplaying] {
2924   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab");
2925 }
2926
2927 .tab-icon-sound[soundplaying]:hover {
2928   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-hover");
2929 }
2930
2931 .tab-icon-sound[soundplaying]:hover:active {
2932   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-pressed");
2933 }
2934
2935 .tab-icon-sound[muted] {
2936   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted");
2937 }
2938
2939 .tab-icon-sound[muted]:hover {
2940   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-hover");
2941 }
2942
2943 .tab-icon-sound[muted]:hover:active {
2944   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-pressed");
2945 }
2946
2947 .tab-icon-sound[visuallyselected=true][soundplaying] {
2948   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio");
2949 }
2950
2951 .tab-icon-sound[visuallyselected=true][soundplaying]:hover {
2952   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-hover");
2953 }
2954
2955 .tab-icon-sound[visuallyselected=true][soundplaying]:hover:active {
2956   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-pressed");
2957 }
2958
2959 .tab-icon-sound[visuallyselected=true][muted] {
2960   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
2961 }
2962
2963 .tab-icon-sound[visuallyselected=true][muted]:hover {
2964   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover");
2965 }
2966
2967 .tab-icon-sound[visuallyselected=true][muted]:hover:active {
2968   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed");
2969 }
2970
2971 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying] {
2972   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white");
2973 }
2974
2975 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover {
2976   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-hover");
2977 }
2978
2979 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover:active {
2980   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-pressed");
2981 }
2982
2983 #TabsToolbar[brighttext] .tab-icon-sound[muted] {
2984   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white");
2985 }
2986
2987 #TabsToolbar[brighttext] .tab-icon-sound[muted]:hover {
2988   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-hover");
2989 }
2990
2991 #TabsToolbar[brighttext] .tab-icon-sound[muted]:hover:active {
2992   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-pressed");
2993 }
2994
2995 .tab-close-button {
2996   margin-top: 1px;
2997   padding: 0;
2998 }
2999
3000 .tab-background,
3001 .tabs-newtab-button {
3002   /* overlap the tab curves */
3003 }
3004
3005 .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
3006 }
3007
3008 /* Tab Overflow */
3009 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
3010 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3011 }
3012
3013 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:-moz-locale-dir(rtl),
3014 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:-moz-locale-dir(ltr) {
3015 }
3016
3017 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]) {
3018 }
3019
3020 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3021 }
3022
3023 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator[collapsed],
3024 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator[collapsed] {
3025 }
3026
3027 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator,
3028 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator {
3029 }
3030
3031 .tab-background-start[visuallyselected=true]::after,
3032 .tab-background-start[visuallyselected=true]::before,
3033 .tab-background-start,
3034 .tab-background-end,
3035 .tab-background-end[visuallyselected=true]::after,
3036 .tab-background-end[visuallyselected=true]::before {
3037 }
3038
3039 .tabbrowser-tab:not([visuallyselected=true]),
3040 .tabbrowser-tab:-moz-lwtheme {
3041 }
3042
3043 /* tabbrowser-tab focus ring */
3044 .tabbrowser-tab:focus {
3045   outline: 1px dotted;
3046 }
3047
3048 /* Selected tab */
3049
3050 .tabbrowser-tab[visuallyselected="true"] {
3051 }
3052
3053 /* End selected tab */
3054
3055 /* Tab pointer-events */
3056 /*
3057 .tabbrowser-tab {
3058   pointer-events: none;
3059 }
3060
3061 .tab-background-middle,
3062 .tabs-newtab-button,
3063 .tab-icon-overlay[soundplaying],
3064 .tab-icon-overlay[muted]:not([crashed]),
3065 .tab-icon-sound,
3066 .tab-close-button {
3067   pointer-events: auto;
3068 }
3069 */
3070 /* Pinned tabs */
3071
3072 /*
3073 .tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([visuallyselected="true"]),
3074 .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([visuallyselected="true"]) {
3075 */
3076 .tabbrowser-tab:-moz-any([image], [pinned]):-moz-any([attention], [titlechanged]):not([visuallyselected="true"]) {
3077   background-color: #E7ADE7;
3078 }
3079
3080 .tab-label[attention]:not([visuallyselected="true"]) {
3081   font-weight: bold;
3082 }
3083
3084 .tabbrowser-tab[pinned][titlechanged]:not([visuallyselected="true"]):hover {
3085   background-color: #3333FF;
3086   color: #000000;
3087 }
3088
3089 /* Tab separators */
3090 /*
3091 .tabbrowser-tab::after,
3092 .tabbrowser-tab::before {
3093   width: 1px;
3094   margin-inline-start: -1px;
3095   background-image: linear-gradient(transparent 5px,
3096                                     currentColor 5px,
3097                                     currentColor calc(100% - 4px),
3098                                     transparent calc(100% - 4px));
3099   opacity: 0.2;
3100 }
3101
3102 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::before,
3103 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::after {
3104   opacity: 0.4;
3105 }
3106 */
3107 /* Also show separators beside the selected tab when dragging it. */
3108 /*
3109 #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
3110 .tabbrowser-tab:not([visuallyselected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
3111 #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([visuallyselected]):not([beforehovered]):not(:hover)::after {
3112   content: "";
3113   display: -moz-box;
3114 }
3115 */
3116 /* New tab button */
3117
3118 .tabs-newtab-button {
3119   width: 28px;
3120   /* width: calc(36px + var(--tab-curve-width)); */
3121 }
3122 @media (min-resolution: 1.1dppx) {
3123   /* image preloading hack from like lowdpi styles */
3124   #tabbrowser-tabs::before {
3125   }
3126
3127   .tabbrowser-tab:hover > .tab-stack > .tab-background:not([visuallyselected=true]),
3128   .tabs-newtab-button:hover {
3129   }
3130
3131   .tab-background-middle[visuallyselected=true] {
3132   }
3133
3134   .tab-background-start[visuallyselected=true]:-moz-locale-dir(ltr)::after,
3135   .tab-background-end[visuallyselected=true]:-moz-locale-dir(rtl)::after {
3136   }
3137
3138   .tab-background-end[visuallyselected=true]:-moz-locale-dir(ltr)::after,
3139   .tab-background-start[visuallyselected=true]:-moz-locale-dir(rtl)::after {
3140   }
3141
3142   .tab-icon-image {
3143     list-style-image: url("chrome://mozapps/skin/places/defaultFavicon@2x.png");
3144   }
3145 }
3146
3147 /* === END tabs.inc.css === */
3148
3149 /* Tab DnD indicator */
3150 .tab-drop-indicator {
3151   list-style-image: url("chrome://browser/skin/tabbrowser/tabDragIndicator.png");
3152   margin-bottom: -11px;
3153 }
3154
3155 /* Tab close button */
3156 .tab-close-button {
3157   list-style-image: url("chrome://global/skin/icons/close-button.gif");
3158 }
3159
3160 .tab-close-button:hover,
3161 .tab-close-button:hover[selected="true"] {
3162   list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
3163 }
3164
3165 .tab-close-button:hover:active,
3166 .tab-close-button:hover:active[selected="true"] {
3167   list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
3168 }
3169
3170 /* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
3171
3172 .tabbrowser-arrowscrollbox > .scrollbutton-up,
3173 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3174   margin: 0;
3175   padding-top: 0;
3176   padding-bottom: 0;
3177   background-origin: border-box;
3178 }
3179
3180 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3181 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3182 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext,
3183 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext {
3184  }
3185
3186 .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
3187 .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
3188  }
3189
3190 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
3191 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
3192 /*  transform: scaleX(-1);*/
3193 }
3194
3195 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3196   transition: 1s background-color ease-out;
3197 }
3198
3199 .tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] {
3200   background-color: #008484;
3201 }
3202
3203 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]),
3204 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]) {
3205 /*  border-width: 0 2px 0 0;
3206   border-style: solid;
3207   border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;*/
3208 }
3209
3210 .tabs-newtab-button > .toolbarbutton-icon {
3211   margin-top: -1px;
3212   margin-bottom: -1px;
3213 }
3214
3215 .tabs-newtab-button,
3216 #TabsToolbar > #new-tab-button,
3217 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
3218 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
3219   list-style-image: url("chrome://browser/skin/tabbrowser/newtab.svg");
3220   -moz-image-region: auto;
3221 }
3222
3223 .tabs-newtab-button,
3224 .tabs-newtab-button:hover,
3225 #TabsToolbar > #new-tab-button,
3226 #TabsToolbar > #new-tab-button:hover {
3227 }
3228
3229 #main-window[tabsintitlebar]:not([inFullscreen]) .tabs-newtab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3230 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3231 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3232 .tabs-newtab-button:-moz-lwtheme-brighttext,
3233 #TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext,
3234 #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext {
3235 }
3236
3237 #TabsToolbar > #new-tab-button {
3238   width: 26px;
3239 }
3240
3241 #alltabs-button {
3242   list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
3243 }
3244
3245 #alltabs-button:hover,
3246 #alltabs-button:hover:active,
3247 #alltabs-button[open="true"] {
3248   list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
3249 }
3250
3251 #main-window[tabsintitlebar]:not([inFullscreen]) #alltabs-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3252 #alltabs-button:-moz-lwtheme-brighttext {
3253 }
3254
3255 #alltabs-button > .toolbarbutton-icon {
3256 /*  margin: 0 2px;*/
3257 }
3258
3259 #alltabs-button > .toolbarbutton-menu-dropmarker {
3260   display: none;
3261 }
3262
3263 /* All tabs menupopup */
3264 .alltabs-item > .menu-iconic-left > .menu-iconic-icon {
3265   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
3266   -moz-image-region: auto;
3267 }
3268
3269 .alltabs-item[selected="true"] {
3270   font-weight: bold;
3271 }
3272
3273 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3274   list-style-image: url("chrome://global/skin/icons/loading.png");
3275 }
3276
3277 @media (min-resolution: 1.1dppx) {
3278   .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3279     list-style-image: url("chrome://global/skin/icons/loading@2x.png");
3280   }
3281 }
3282
3283 .alltabs-item[tabIsVisible]:not([_moz-menuactive="true"]) {
3284   background-color: #402800;
3285 }
3286
3287 .alltabs-endimage[muted] {
3288   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
3289 }
3290
3291 .alltabs-endimage[soundplaying] {
3292   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio");
3293 }
3294
3295 toolbarbutton.chevron {
3296   list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
3297 }
3298
3299 toolbarbutton.chevron:hover {
3300   list-style-image: url("chrome://global/skin/toolbar/chevron-hover.gif") !important;
3301 }
3302 /*
3303 toolbar[brighttext] toolbarbutton.chevron {
3304   list-style-image: url("chrome://global/skin/toolbar/chevron-inverted.png") !important;
3305 }
3306 */
3307 toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
3308 toolbarbutton.chevron:-moz-locale-dir(rtl):hover > .toolbarbutton-icon {
3309   transform: scaleX(-1);
3310 }
3311
3312 toolbarbutton.chevron > .toolbarbutton-text,
3313 toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
3314   display: none;
3315 }
3316
3317 toolbarbutton.chevron > .toolbarbutton-icon {
3318   margin: 0;
3319 }
3320
3321 #sidebar-throbber[loading="true"] {
3322   list-style-image: url("chrome://global/skin/icons/loading.png");
3323   margin-inline-end: 4px;
3324 }
3325
3326 @media (min-resolution: 1.1dppx) {
3327   #sidebar-throbber[loading="true"] {
3328     list-style-image: url("chrome://global/skin/icons/loading@2x.png");
3329     width: 16px;
3330   }
3331 }
3332
3333 /* Bookmarks toolbar */
3334 #PlacesToolbarDropIndicator {
3335   list-style-image: url("chrome://communicator/skin/bookmarks/toolbarDropMarker.png");
3336 }
3337
3338 toolbarbutton.bookmark-item[dragover="true"][open="true"] {
3339   background-color: #008484 !important;
3340   color: #FFCF00 !important;
3341 }
3342
3343 /* rules for menupopup drop indicators */
3344 .menupopup-drop-indicator-bar {
3345   position: relative;
3346   /* these two margins must together compensate the indicator's height */
3347   margin-top: -1px;
3348   margin-bottom: -1px;
3349 }
3350
3351 .menupopup-drop-indicator {
3352   list-style-image: none;
3353   height: 2px;
3354   margin-inline-end: -4em;
3355   background-color: #008484;
3356 }
3357
3358 /* === BEGIN notification-icons.inc.css === */
3359
3360 #notification-popup-box {
3361   border-radius: 3px 0 0 3px;
3362   padding: 5px 0px;
3363   margin: -5px 0px;
3364   margin-inline-end: -5px;
3365   padding-inline-end: 5px;
3366 }
3367
3368 /* This class can be used alone or in combination with the class defining the
3369    type of icon displayed. This rule must be defined before the others in order
3370    for its list-style-image to be overridden. */
3371 .notification-anchor-icon {
3372   width: 16px;
3373   height: 16px;
3374   margin-inline-start: 2px;
3375   list-style-image: url("chrome://global/skin/icons/information-16.png");
3376 }
3377
3378 .notification-anchor-icon:-moz-focusring {
3379   outline: 1px dotted #008484;
3380 }
3381
3382 @media (min-resolution: 1.1dppx) {
3383   .notification-anchor-icon {
3384     list-style-image: url(chrome://global/skin/icons/information-32.png);
3385   }
3386 }
3387
3388 .popup-notification-icon {
3389   width: 64px;
3390   height: 64px;
3391   margin-inline-end: 10px;
3392 }
3393
3394 #notification-popup-box > .notification-anchor-icon:not(.in-use):hover {
3395   fill: #000000;
3396 }
3397
3398 /* INDIVIDUAL NOTIFICATIONS */
3399
3400 /* For the moment we apply the color filter only on the icons listed here.
3401    The first two selectors are used by socialchat.xml (bug 1275558). */
3402 .webRTC-sharingDevices-notification-icon,
3403 .webRTC-sharingMicrophone-notification-icon,
3404 .camera-icon,
3405 .geo-icon,
3406 .indexedDB-icon,
3407 .install-icon,
3408 .login-icon,
3409 .microphone-icon,
3410 .plugin-icon,
3411 .pointerLock-icon,
3412 .popup-icon,
3413 .screen-icon,
3414 .desktop-notification-icon,
3415 .popup-notification-icon[popupid="geolocation"],
3416 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
3417 .popup-notification-icon[popupid="password"],
3418 .popup-notification-icon[popupid="pointerLock"],
3419 .popup-notification-icon[popupid="webRTC-shareDevices"],
3420 .popup-notification-icon[popupid="webRTC-shareMicrophone"],
3421 .popup-notification-icon[popupid="webRTC-shareScreen"],
3422 .popup-notification-icon[popupid="webRTC-sharingDevices"],
3423 .popup-notification-icon[popupid="webRTC-sharingMicrophone"],
3424 .popup-notification-icon[popupid="webRTC-sharingScreen"],
3425 .popup-notification-icon[popupid="web-notifications"] {
3426   filter: url(chrome://browser/skin/filters.svg#fill);
3427   fill: #A09090;
3428 }
3429
3430 /* The first two selectors are used by socialchat.xml (bug 1275558). The
3431    notifications in the chat window are only shown when they are in use. */
3432 .webRTC-sharingDevices-notification-icon,
3433 .webRTC-sharingMicrophone-notification-icon,
3434 .in-use {
3435   fill: #008484;
3436 }
3437
3438 .popup-notification-icon[popupid="web-notifications"],
3439 .desktop-notification-icon {
3440   list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification);
3441 }
3442
3443 .desktop-notification-icon.blocked {
3444   list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification-blocked);
3445 }
3446
3447 .geo-icon {
3448   list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows);
3449 }
3450
3451 .geo-icon.blocked {
3452   list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-blocked);
3453 }
3454
3455 .popup-notification-icon[popupid="geolocation"] {
3456   list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-detailed);
3457 }
3458
3459 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
3460 .indexedDB-icon {
3461   list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB);
3462 }
3463
3464 .indexedDB-icon.blocked {
3465   list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB-blocked);
3466 }
3467
3468 .login-icon {
3469   list-style-image: url(chrome://browser/skin/notification-icons.svg#login);
3470 }
3471
3472 .popup-notification-icon[popupid="password"] {
3473   list-style-image: url(chrome://browser/skin/notification-icons.svg#login-detailed);
3474 }
3475
3476 #login-fill-notification-icon {
3477   /* Temporary solution until the capture and fill doorhangers are unified. */
3478   transform: scaleX(-1);
3479 }
3480
3481 /* The first selector is used by socialchat.xml (bug 1275558). */
3482 .webRTC-sharingDevices-notification-icon,
3483 .camera-icon,
3484 .popup-notification-icon[popupid="webRTC-shareDevices"],
3485 .popup-notification-icon[popupid="webRTC-sharingDevices"] {
3486   list-style-image: url(chrome://browser/skin/notification-icons.svg#camera);
3487 }
3488
3489 .camera-icon.blocked {
3490   list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-blocked);
3491 }
3492
3493 /* The first selector is used by socialchat.xml (bug 1275558). */
3494 .webRTC-sharingMicrophone-notification-icon,
3495 .microphone-icon {
3496   list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone);
3497 }
3498
3499 .microphone-icon.blocked {
3500   list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-blocked);
3501 }
3502
3503 .popup-notification-icon[popupid="webRTC-shareMicrophone"],
3504 .popup-notification-icon[popupid="webRTC-sharingMicrophone"] {
3505   list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-detailed);
3506 }
3507
3508 .popup-notification-icon[popupid="webRTC-shareScreen"],
3509 .popup-notification-icon[popupid="webRTC-sharingScreen"],
3510 .screen-icon {
3511   list-style-image: url(chrome://browser/skin/notification-icons.svg#screen);
3512 }
3513
3514 .screen-icon.blocked {
3515   list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-blocked);
3516 }
3517
3518 .popup-notification-icon[popupid="pointerLock"],
3519 .pointerLock-icon {
3520   list-style-image: url(chrome://browser/skin/notification-icons.svg#pointerLock);
3521 }
3522
3523 .pointerLock-icon.blocked {
3524   list-style-image: url(chrome://browser/skin/notification-icons.svg#pointerLock-blocked);
3525 }
3526
3527 /* This icon has a block sign in it, so we don't need a blocked version. */
3528 .popup-icon {
3529   list-style-image: url("chrome://browser/skin/notification-icons.svg#popup");
3530 }
3531
3532 /* EME */
3533
3534 .popup-notification-icon[popupid="drmContentPlaying"],
3535 .drm-icon {
3536   list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
3537 }
3538
3539 .drm-icon:hover:active {
3540   list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed");
3541 }
3542
3543 #eme-notification-icon[firstplay=true] {
3544   animation: emeTeachingMoment 0.2s linear 0s 5 normal;
3545 }
3546
3547 @keyframes emeTeachingMoment {
3548   0% {transform: translateX(0); }
3549   25% {transform: translateX(3px) }
3550   75% {transform: translateX(-3px) }
3551   100% { transform: translateX(0); }
3552 }
3553
3554 /* INSTALL ADDONS */
3555
3556 .install-icon {
3557   list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#default);
3558 }
3559
3560 .popup-notification-icon[popupid="xpinstall-disabled"],
3561 .popup-notification-icon[popupid="addon-install-blocked"],
3562 .popup-notification-icon[popupid="addon-install-origin-blocked"] {
3563   list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg);
3564 }
3565
3566 .popup-notification-icon[popupid="addon-progress"] {
3567   list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg);
3568 }
3569
3570 .popup-notification-icon[popupid="addon-install-failed"] {
3571   list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg);
3572 }
3573
3574 .popup-notification-icon[popupid="addon-install-confirmation"] {
3575   list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg);
3576 }
3577
3578 #addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] {
3579   list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg);
3580 }
3581
3582 .popup-notification-icon[popupid="addon-install-complete"] {
3583   list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg);
3584 }
3585
3586 .popup-notification-icon[popupid="addon-install-restart"] {
3587   list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg);
3588 }
3589
3590 .popup-notification-icon[popupid="click-to-play-plugins"] {
3591   list-style-image: url(chrome://mozapps/skin/plugins/pluginBlocked-64.png);
3592 }
3593
3594 /* OFFLINE APPS */
3595
3596 .popup-notification-icon[popupid*="offline-app-requested"],
3597 .popup-notification-icon[popupid="offline-app-usage"] {
3598   list-style-image: url(chrome://global/skin/icons/question-64.png);
3599 }
3600
3601 /* PLUGINS */
3602
3603 .plugin-icon {
3604   list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
3605 }
3606
3607 .plugin-icon.plugin-blocked {
3608   list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
3609   fill: #FF0000 !important; /* important! to override the default hover color */
3610 }
3611
3612 #notification-popup-box[hidden] {
3613   /* Override display:none to make the pluginBlockedNotification animation work
3614      when showing the notification repeatedly. */
3615   display: -moz-box;
3616   visibility: collapse;
3617 }
3618
3619 #plugins-notification-icon.plugin-blocked[showing] {
3620   animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
3621 }
3622
3623 @keyframes pluginBlockedNotification {
3624   from {
3625     opacity: 0;
3626   }
3627   to {
3628     opacity: 1;
3629   }
3630 }
3631
3632 /* SOCIAL API */
3633
3634 .popup-notification-icon[popupid="servicesInstall"] {
3635   list-style-image: url(chrome://browser/skin/social/services-64.png);
3636 }
3637
3638 .service-icon {
3639   list-style-image: url(chrome://browser/skin/social/services-16.png);
3640 }
3641
3642 /* TRANSLATION */
3643
3644 .translation-icon {
3645   list-style-image: url(chrome://browser/skin/translation-16.png);
3646   -moz-image-region: rect(0px, 16px, 16px, 0px);
3647 }
3648
3649 .translation-icon.in-use {
3650   -moz-image-region: rect(0px, 32px, 16px, 16px);
3651 }
3652
3653 /* === END notification-icons.inc.css === */
3654
3655 .popup-notification-body[popupid="addon-progress"],
3656 .popup-notification-body[popupid="addon-install-confirmation"] {
3657   width: 28em;
3658   max-width: 28em;
3659 }
3660
3661 /* Translation infobar */
3662
3663 /* === BEGIN infobar.inc.css === */
3664
3665 notification[value="translation"] .messageImage {
3666   list-style-image: url("chrome://browser/skin/translation-16.png");
3667   -moz-image-region: rect(0, 32px, 16px, 16px);
3668 }
3669
3670 @media (min-resolution: 1.25dppx) {
3671   notification[value="translation"] .messageImage {
3672     list-style-image: url("chrome://browser/skin/translation-16@2x.png");
3673     -moz-image-region: rect(0, 64px, 32px, 32px);
3674   }
3675 }
3676
3677 notification[value="translation"][state="translating"] .messageImage {
3678   list-style-image: url("chrome://browser/skin/translating-16.png");
3679   -moz-image-region: auto;
3680 }
3681
3682 @media (min-resolution: 1.25dppx) {
3683   notification[value="translation"][state="translating"] .messageImage {
3684     list-style-image: url("chrome://browser/skin/translating-16@2x.png");
3685   }
3686 }
3687
3688 notification[value="translation"] hbox[anonid="details"] {
3689   overflow: hidden;
3690 }
3691
3692 notification[value="translation"] button,
3693 notification[value="translation"] menulist {
3694   min-width: 0;
3695 }
3696
3697 notification[value="translation"] menulist > .menulist-dropmarker {
3698 }
3699
3700 .translation-menupopup arrowscrollbox {
3701   padding-bottom: 0;
3702 }
3703
3704 .translation-attribution {
3705   cursor: pointer;
3706   -moz-box-align: end;
3707   font-size: small;
3708 }
3709
3710 .translation-attribution > label {
3711   margin-bottom: 0;
3712 }
3713
3714 .translation-attribution > image {
3715   width: 70px;
3716 }
3717
3718 .translation-welcome-panel {
3719   width: 305px;
3720 }
3721
3722 .translation-welcome-logo {
3723   height: 32px;
3724   width: 32px;
3725   list-style-image: url(chrome://browser/skin/translation-16@2x.png);
3726   -moz-image-region: rect(0, 64px, 32px, 32px);
3727 }
3728
3729 .translation-welcome-content {
3730   margin-inline-start: 16px;
3731 }
3732
3733 .translation-welcome-headline {
3734   font-size: larger;
3735   font-weight: bold;
3736 }
3737
3738 .translation-welcome-body {
3739   padding: 1em 0;
3740   margin: 0 0;
3741 }
3742
3743 /* === END infobar.inc.css === */
3744
3745 notification[value="translation"] {
3746   min-height: 40px;
3747 }
3748
3749 .translation-menupopup {
3750   -moz-appearance: none;
3751 }
3752
3753 /* Bookmarks roots menu-items */
3754 #subscribeToPageMenuitem:not([disabled]),
3755 #subscribeToPageMenupopup {
3756   list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
3757 }
3758
3759 #bookmarksToolbarFolderMenu,
3760 #BMB_bookmarksToolbar,
3761 #panelMenu_bookmarksToolbar {
3762   list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
3763   -moz-image-region: auto;
3764 }
3765
3766 #BMB_unsortedBookmarks,
3767 #panelMenu_unsortedBookmarks {
3768   list-style-image: url("chrome://communicator/skin/bookmarks/unsortedBookmarks.png");
3769   -moz-image-region: auto;
3770 }
3771
3772 /* Ctrl-Tab */
3773
3774 #ctrlTab-panel {
3775   -moz-appearance: none;
3776   background: rgba(0%,0%,0%,.7);
3777   color: #FF9F00;
3778   border-style: none;
3779   padding: 20px 10px 10px;
3780   font-weight: bold;
3781 }
3782
3783 .ctrlTab-favicon[src] {
3784   background-color: #000000;
3785   width: 20px;
3786   height: 20px;
3787   padding: 2px;
3788 }
3789
3790 .ctrlTab-preview-inner > .tabPreview-canvas {
3791 /*  box-shadow: 1px 1px 2px hsl(0,0%,12%);*/
3792 }
3793
3794 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
3795   margin-bottom: 2px;
3796 }
3797
3798 .ctrlTab-preview-inner {
3799   padding-bottom: 10px;
3800 }
3801
3802 #ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
3803   padding: 10px;
3804   background-color: #000000;
3805   border-radius: .5em;
3806 }
3807
3808 .ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
3809   color: white;
3810   background-color: #000000;
3811   text-shadow: none;
3812   padding: 8px;
3813   border: 2px solid #9C9CFF;
3814   border-radius: .5em;
3815 }
3816
3817 .ctrlTab-preview:not(#ctrlTab-showAll):focus > * > .ctrlTab-preview-inner {
3818   margin: -10px -10px 0;
3819 }
3820
3821 #ctrlTab-showAll {
3822   margin-top: .5em;
3823 }
3824
3825 /* Status panel */
3826
3827 .statuspanel-label {
3828   margin: 0;
3829   padding: 2px 4px;
3830   background: #404000;
3831   border: 1px none #9C9CFF;
3832   border-top-style: solid;
3833   color: #FF9F00;
3834   text-shadow: none;
3835 }
3836
3837 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
3838 .statuspanel-label:-moz-locale-dir(rtl)[mirror] {
3839   border-right-style: solid;
3840   border-top-right-radius: .3em;
3841   margin-right: 1em;
3842 }
3843
3844 .statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
3845 .statuspanel-label:-moz-locale-dir(ltr)[mirror] {
3846   border-left-style: solid;
3847   border-top-left-radius: .3em;
3848   margin-left: 1em;
3849 }
3850
3851 /* HACK to abolish devily color on main content */
3852
3853 #content {
3854   background-color: transparent !important;
3855 }
3856
3857 /* === BEGIN fullscreen/warning.inc.css === */
3858
3859 html|*.pointerlockfswarning {
3860   align-items: center;
3861   background: rgba(0, 0, 0, 0.9);
3862   border: 2px solid #A09090;
3863   box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
3864   border-radius: 8px;
3865   padding: 24px 16px;
3866   font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3867 }
3868
3869 html|*.pointerlockfswarning::before {
3870   margin: 0;
3871   width: 24px; height: 24px;
3872 }
3873
3874 html|*.pointerlockfswarning[data-identity="verifiedIdentity"]::before,
3875 html|*.pointerlockfswarning[data-identity="verifiedDomain"]::before {
3876   content: url("chrome://browser/skin/fullscreen/secure.svg");
3877 }
3878
3879 html|*.pointerlockfswarning[data-identity="unknownIdentity"]::before {
3880   content: url("chrome://browser/skin/fullscreen/insecure.svg");
3881 }
3882
3883 html|*.pointerlockfswarning-domain-text,
3884 html|*.pointerlockfswarning-generic-text {
3885   font-size: 21px;
3886   font-weight: lighter;
3887   color: #A09090;
3888   margin: 0 16px;
3889 }
3890
3891 html|*.pointerlockfswarning-domain {
3892   font-weight: bold;
3893   margin: 0;
3894 }
3895
3896 html|*.pointerlockfswarning-exit-button {
3897   padding: 5px 30px;
3898   font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3899   font-size: 14px;
3900   font-weight: lighter;
3901   margin: 0;
3902   box-sizing: content-box;
3903
3904   border-radius: 300px;
3905   border: none;
3906   background-color: #C09070;
3907   color: #000000;
3908 }
3909
3910 /* === END fullscreen/warning.inc.css === */
3911
3912 /* === BEGIN commandline.inc.css === */
3913
3914 /* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS.
3915    We are copy/pasting variables from light-theme and dark-theme,
3916    since they aren't loaded in this context (within browser.css). */
3917 :root #developer-toolbar {
3918   --gcli-background-color: #000000; /* --theme-toolbar-background */
3919   --gcli-input-background: rgba(0, 0, 0, .75); /* --theme-tab-toolbar-background */
3920   --gcli-input-focused-background: #000000; /* --theme-sidebar-background */
3921   --gcli-input-color: #FF9F00; /* --theme-body-color-alt */
3922   --gcli-border-color: #9C9CFF; /* --theme-splitter-color */
3923   --selection-background: #008484; /* --theme-selection-background */
3924   --selection-color: #000000; /* --theme-selection-color */
3925   --command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme); /* --theme-command-line-image */
3926   --command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme-focus); /* --theme-command-line-image-focus */
3927 }
3928
3929 /* Developer toolbar */
3930
3931 #developer-toolbar {
3932   border-top: 3px solid var(--gcli-background-color);
3933   border-bottom: none;
3934 }
3935
3936 #developer-toolbar .toolbar-holder {
3937   background-color: #8050B0;
3938   color: #FFCF00;
3939 }
3940
3941 #developer-toolbar .toolbar-holder {
3942   background-color: #8050B0;
3943   color: #FFCF00;
3944 }
3945
3946 #developer-toolbar .toolbar-startcap,
3947 #developer-toolbar .toolbar-endcap{
3948   background-color: #6000CF;
3949 }
3950
3951 #developer-toolbar {
3952 /*  padding: 0;
3953   min-height: 32px; */
3954 }
3955
3956 #developer-toolbar > toolbarbutton {
3957 /*  border: none;
3958   background-color: transparent;
3959   margin: 0;
3960   padding: 0 10px;
3961   width: 32px; */
3962 }
3963
3964 .developer-toolbar-button > image {
3965 /*  margin: auto 10px; */
3966 }
3967
3968 #developer-toolbar-toolbox-button > label {
3969   display: none;
3970 }
3971
3972 .developer-toolbar-button > .toolbarbutton-icon {
3973   width: 16px;
3974   height: 16px;
3975 }
3976
3977 #developer-toolbar-toolbox-button {
3978   list-style-image: url("chrome://devtools/skin/images/toggle-tools.png");
3979   -moz-image-region: rect(0px, 16px, 16px, 0px);
3980 }
3981
3982 #developer-toolbar-toolbox-button > label {
3983   display: none;
3984 }
3985
3986 #developer-toolbar-toolbox-button:hover,
3987 #developer-toolbar-toolbox-button:hover:active,
3988 #developer-toolbar-toolbox-button[checked=true] {
3989   -moz-image-region: rect(0px, 32px, 16px, 16px);
3990 }
3991
3992 @media (min-resolution: 2dppx) {
3993   #developer-toolbar-toolbox-button {
3994     list-style-image: url("chrome://devtools/skin/images/toggle-tools@2x.png");
3995     -moz-image-region: rect(0px, 32px, 32px, 0px);
3996   }
3997
3998   #developer-toolbar-toolbox-button:hover,
3999   #developer-toolbar-toolbox-button:hover:active,
4000   #developer-toolbar-toolbox-button[checked=true] {
4001     -moz-image-region: rect(0px, 64px, 32px, 32px);
4002   }
4003 }
4004
4005 /* GCLI */
4006
4007 html|*#gcli-tooltip-frame,
4008 html|*#gcli-output-frame {
4009   padding: 0;
4010   border-width: 0;
4011   background-color: transparent;
4012 }
4013
4014 #gcli-output,
4015 #gcli-tooltip {
4016   border-width: 0;
4017   background-color: transparent;
4018 }
4019
4020 .gclitoolbar-input-node,
4021 .gclitoolbar-complete-node {
4022   margin: 1px 3px;
4023   -moz-box-align: center;
4024   padding-top: 0;
4025   padding-bottom: 0;
4026   padding-right: 8px;
4027   background-color: transparent;
4028 }
4029
4030 .gclitoolbar-input-node {
4031 /*  line-height: 32px;
4032   outline-style: none; */
4033   background-repeat: no-repeat;
4034   background-color: var(--gcli-input-background);
4035 }
4036
4037 .gclitoolbar-input-node[focused="true"] {
4038   background-color: var(--gcli-input-focused-background);
4039 }
4040
4041 .gclitoolbar-input-node::before {
4042   content: "";
4043   display: inline-block;
4044   -moz-box-ordinal-group: 0;
4045   width: 16px;
4046   height: 16px;
4047   margin: 0 2px;
4048   background-image: var(--command-line-image);
4049 }
4050
4051 .gclitoolbar-input-node[focused="true"]::before {
4052   background-image: var(--command-line-image-focus);
4053 }
4054
4055 .gclitoolbar-input-node:not([focused="true"]) {
4056   border-color: transparent;
4057 }
4058
4059 .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
4060   background-color: var(--selection-background);
4061   color: var(--selection-color);
4062 }
4063
4064 .gclitoolbar-complete-node {
4065   padding-left: 21px;
4066   background-color: transparent;
4067   color: transparent;
4068   z-index: 100;
4069   pointer-events: none;
4070 }
4071
4072 .gcli-in-incomplete,
4073 .gcli-in-error,
4074 .gcli-in-ontab,
4075 .gcli-in-todo,
4076 .gcli-in-closebrace,
4077 .gcli-in-param,
4078 .gcli-in-valid {
4079   margin: 0;
4080   padding: 0;
4081 }
4082
4083 .gcli-in-incomplete {
4084   border-bottom: 2px dotted #8050B0;
4085 }
4086
4087 .gcli-in-error {
4088   border-bottom: 2px dotted #FF0000;
4089 }
4090
4091 .gcli-in-ontab {
4092   color: #9C9CFF;
4093 }
4094
4095 .gcli-in-todo {
4096   color: #795900;
4097 }
4098
4099 .gcli-in-closebrace {
4100   color: #8050B0;
4101 }
4102
4103 /* === END commandline.inc.css === */
4104
4105 /* === BEGIN responsivedesign.inc.css === */
4106
4107 /* Responsive Mode */
4108
4109 .browserContainer[responsivemode] {
4110   background-color: #221500;
4111   padding: 0 20px 20px 20px;
4112 }
4113
4114 .browserStack[responsivemode] {
4115   box-shadow: 0 0 7px #9C9CFF;
4116 }
4117
4118 .devtools-responsiveui-toolbar {
4119   background: transparent;
4120   /* text color is textColor from dark theme, since no theme is applied to
4121    * the responsive toolbar.
4122    */
4123   color: #FF9F00;
4124   margin: 10px 0;
4125   padding: 0;
4126   box-shadow: none;
4127   border-bottom-width: 0;
4128 }
4129
4130 .devtools-responsiveui-textinput {
4131 /*  -moz-appearance: none;
4132   background: #333;
4133   color: #fff;
4134   border: 1px solid #111;
4135   border-radius: 2px;
4136   padding: 0 5px;*/
4137   width: 200px;
4138   margin: 0;
4139 }
4140
4141 .devtools-responsiveui-textinput[attention] {
4142 /*  border-color: #38ace6;
4143   background: rgba(56,172,230,0.4);*/
4144 }
4145
4146 .devtools-responsiveui-menulist,
4147 .devtools-responsiveui-toolbarbutton {
4148   -moz-box-align: center;
4149   min-width: 32px;
4150 /*  min-height: 22px;*/
4151 /*  margin: 0 3px; */
4152 }
4153
4154 .devtools-responsiveui-menulist .menulist-editable-box {
4155   background-color: transparent;
4156 }
4157
4158 .devtools-responsiveui-menulist html|*.menulist-editable-input {
4159   color: inherit;
4160   text-align: center;
4161 }
4162
4163 .devtools-responsiveui-menulist html|*.menulist-editable-input::-moz-selection {
4164 /*  background: hsla(212,7%,57%,.35);*/
4165 }
4166
4167 .devtools-responsiveui-toolbarbutton > .toolbarbutton-icon {
4168   width: 16px;
4169   height: 16px;
4170 }
4171
4172 .devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button {
4173   -moz-box-orient: horizontal;
4174 }
4175
4176 .devtools-responsiveui-menulist:-moz-focusring,
4177 .devtools-responsiveui-toolbarbutton:-moz-focusring {
4178 /*  outline: 1px dotted hsla(210,30%,85%,0.7);
4179   outline-offset: -4px;*/
4180 }
4181
4182 .devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text {
4183   display: none;
4184 }
4185
4186 .devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active {
4187 /*  border-color: hsla(210,8%,5%,.6);
4188   background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
4189   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); */
4190 }
4191
4192 .devtools-responsiveui-menulist[open=true],
4193 .devtools-responsiveui-toolbarbutton[open=true],
4194 .devtools-responsiveui-toolbarbutton[checked=true] {
4195 /*  border-color: hsla(210,8%,5%,.6) !important;
4196   background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
4197   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); */
4198 }
4199
4200 .devtools-responsiveui-toolbarbutton[checked=true] {
4201 /*  color: hsl(208,100%,60%); */
4202 }
4203
4204 .devtools-responsiveui-toolbarbutton[checked=true]:hover {
4205 /*  background-color: transparent !important;*/
4206 }
4207
4208 .devtools-responsiveui-toolbarbutton[checked=true]:hover:active {
4209 /*  background-color: hsla(210,8%,5%,.2) !important;*/
4210 }
4211
4212 .devtools-responsiveui-menulist > .menulist-label-box {
4213   text-align: center;
4214 }
4215
4216 .devtools-responsiveui-menulist > .menulist-dropmarker {
4217 /*  display: -moz-box;
4218   background-color: transparent;
4219   list-style-image: url("chrome://devtools/skin/dropmarker.svg");
4220   -moz-box-align: center;
4221   border-width: 0;
4222   min-width: 16px;*/
4223 }
4224
4225 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
4226 /*  color: inherit;
4227   border-width: 0;
4228   border-inline-end: 1px solid hsla(210,8%,5%,.45);
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]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
4233 /*  box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);*/
4234 }
4235
4236 .devtools-responsiveui-toolbarbutton[type=menu-button] {
4237 /*  padding: 0 1px;*/
4238   -moz-box-align: stretch;
4239 }
4240
4241 .devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
4242 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
4243 /*  list-style-image: url("chrome://devtools/skin/dropmarker.svg");
4244   -moz-box-align: center;
4245   padding: 0 3px;*/
4246 }
4247
4248 .devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
4249 .devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
4250   margin-left: 3px;
4251 }
4252
4253 .devtools-responsiveui-close {
4254   list-style-image: url("chrome://devtools/skin/close.svg");
4255 }
4256
4257 .devtools-responsiveui-close:hover {
4258   filter: url(chrome://devtools/skin/images/filters.svg#checked-icon-state);
4259 }
4260
4261 .devtools-responsiveui-rotate {
4262   list-style-image: url("chrome://devtools/skin/images/responsiveui-rotate.png");
4263   -moz-image-region: rect(0px,16px,16px,0px);
4264 }
4265
4266 .devtools-responsiveui-rotate:hover {
4267   -moz-image-region: rect(0px,32px,16px,16px);
4268 }
4269
4270 @media (min-resolution: 2dppx) {
4271   .devtools-responsiveui-rotate {
4272     list-style-image: url("chrome://devtools/skin/images/responsiveui-rotate@2x.png");
4273   }
4274
4275   .devtools-responsiveui-rotate:hover {
4276     -moz-image-region: rect(0px,64px,32px,32px);
4277   }
4278 }
4279
4280 .devtools-responsiveui-touch {
4281   list-style-image: url("chrome://devtools/skin/images/responsiveui-touch.png");
4282   -moz-image-region: rect(0px,16px,16px,0px);
4283 }
4284
4285 .devtools-responsiveui-touch:hover,
4286 .devtools-responsiveui-touch[checked],
4287 .devtools-responsiveui-touch[checked]:hover {
4288   -moz-image-region: rect(0px,32px,16px,16px);
4289 }
4290
4291 @media (min-resolution: 2dppx) {
4292   .devtools-responsiveui-touch {
4293     list-style-image: url("chrome://devtools/skin/images/responsiveui-touch@2x.png");
4294     -moz-image-region: rect(0px,32px,32px,0px);
4295   }
4296
4297   .devtools-responsiveui-touch:hover,
4298   .devtools-responsiveui-touch[checked],
4299   .devtools-responsiveui-touch[checked]:hover {
4300     -moz-image-region: rect(0px,64px,32px,32px);
4301   }
4302 }
4303
4304 .devtools-responsiveui-screenshot {
4305   list-style-image: url("chrome://devtools/skin/images/responsiveui-screenshot.png");
4306   -moz-image-region: rect(0px,16px,16px,0px);
4307 }
4308
4309 .devtools-responsiveui-screenshot:hover {
4310   -moz-image-region: rect(0px,32px,16px,16px);
4311 }
4312
4313 @media (min-resolution: 2dppx) {
4314   .devtools-responsiveui-screenshot {
4315     list-style-image: url("chrome://devtools/skin/images/responsiveui-screenshot@2x.png");
4316   }
4317
4318   .devtools-responsiveui-screenshot:hover {
4319     -moz-image-region: rect(0px,64px,32px,32px);
4320   }
4321 }
4322
4323 .devtools-responsiveui-resizebarV {
4324   width: 7px;
4325   height: 24px;
4326   cursor: ew-resize;
4327   transform: translate(12px, -12px);
4328   background-size: cover;
4329   background-image: url("chrome://devtools/skin/images/responsive-vertical-resizer.png");
4330 }
4331
4332 .devtools-responsiveui-resizebarH {
4333   width: 24px;
4334   height: 7px;
4335   cursor: ns-resize;
4336   transform: translate(-12px, 12px);
4337   background-size: cover;
4338   background-image: url("chrome://devtools/skin/images/responsive-horizontal-resizer.png");
4339 }
4340
4341 .devtools-responsiveui-resizehandle {
4342   width: 16px;
4343   height: 16px;
4344   cursor: se-resize;
4345   transform: translate(12px, 12px);
4346   background-size: cover;
4347   background-image: url("chrome://devtools/skin/images/responsive-se-resizer.png");
4348 }
4349
4350 /* FxOS custom mode with additional buttons and phone look'n feel */
4351
4352 /* Hide devtools manual resizer */
4353 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizehandle,
4354 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarH,
4355 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarV {
4356   display: none;
4357 }
4358
4359 /* Gives responsive mode a phone look'n feel */
4360 .browserStack[responsivemode].fxos-mode {
4361   padding: 60px 15px 0;
4362
4363   border-radius: 25px / 20px;
4364   border-bottom-left-radius: 0;
4365   border-bottom-right-radius: 0;
4366   border: 1px solid #FFFFFF;
4367   border-bottom-width: 0;
4368
4369   background-color: #353535;
4370
4371   box-shadow: 0 3px 0.7px 1px #777777, 0 5px rgba(0, 0, 0, 0.4) inset;
4372
4373   background-image: linear-gradient(to right, #111 11%, #333 56%);
4374   min-width: 320px;
4375 }
4376
4377 .devtools-responsiveui-hardware-buttons {
4378   -moz-appearance: none;
4379   padding: 20px;
4380
4381   border: 1px solid #FFFFFF;
4382   border-bottom-left-radius: 25px;
4383   border-bottom-right-radius: 25px;
4384   border-top-width: 0;
4385
4386   box-shadow: 0 3px 0.7px 1px #777777, 0 -7px rgba(0, 0, 0, 0.4) inset;
4387
4388   background-image: linear-gradient(to right, #111 11%, #333 56%);
4389 }
4390
4391 .devtools-responsiveui-home-button {
4392   -moz-user-focus: ignore;
4393   width: 40px;
4394   height: 30px;
4395   list-style-image: url("chrome://devtools/skin/images/responsiveui-home.png");
4396 }
4397
4398 .devtools-responsiveui-sleep-button {
4399   -moz-user-focus: ignore;
4400   -moz-appearance: none;
4401   /* compensate browserStack top padding */
4402   margin-top: -67px;
4403   margin-right: 10px;
4404
4405   min-width: 10px;
4406   width: 50px;
4407   height: 5px;
4408
4409   border: 1px solid #444;
4410   border-top-right-radius: 12px;
4411   border-top-left-radius: 12px;
4412   border-bottom-color: transparent;
4413
4414   background-image: linear-gradient(to top, #111 11%, #333 56%);
4415 }
4416
4417 .devtools-responsiveui-sleep-button:hover:active {
4418   background-image: linear-gradient(to top, #aaa 11%, #ddd 56%);
4419 }
4420
4421 .devtools-responsiveui-volume-buttons {
4422   margin-left: -29px;
4423 }
4424
4425 .devtools-responsiveui-volume-up-button,
4426 .devtools-responsiveui-volume-down-button {
4427   -moz-user-focus: ignore;
4428   -moz-appearance: none;
4429   border: 1px solid red;
4430   min-width: 8px;
4431   height: 40px;
4432
4433   border: 1px solid #444;
4434   border-right-color: transparent;
4435
4436   background-image: linear-gradient(to right, #111 11%, #333 56%);
4437 }
4438
4439 .devtools-responsiveui-volume-up-button:hover:active,
4440 .devtools-responsiveui-volume-down-button:hover:active {
4441   background-image: linear-gradient(to right, #aaa 11%, #ddd 56%);
4442 }
4443
4444 .devtools-responsiveui-volume-up-button {
4445   border-top-left-radius: 12px;
4446 }
4447
4448 .devtools-responsiveui-volume-down-button {
4449   border-bottom-left-radius: 12px;
4450 }
4451
4452 @media (min-resolution: 2dppx) {
4453   .devtools-responsiveui-resizebarV {
4454     background-image: url("chrome://devtools/skin/images/responsive-vertical-resizer@2x.png");
4455   }
4456
4457   .devtools-responsiveui-resizebarH {
4458     background-image: url("chrome://devtools/skin/images/responsive-horizontal-resizer@2x.png");
4459   }
4460
4461   .devtools-responsiveui-resizehandle {
4462     background-image: url("chrome://devtools/skin/images/responsive-se-resizer@2x.png");
4463   }
4464 }
4465
4466 /* === END responsivedesign.inc.css === */
4467
4468 /* === including indicator.css is done at the start of the file === */
4469
4470 /* Error counter */
4471
4472 #developer-toolbar-toolbox-button[error-count]:before {
4473   color: #000000;
4474   min-width: 16px;
4475   text-shadow: none;
4476   background-color: #FF0000;
4477   border-radius: 1px;
4478   margin-inline-end: 5px;
4479 }
4480
4481 /* social toolbar provider menu */
4482 .social-statusarea-popup {
4483   margin-top: 0;
4484   margin-left: -12px;
4485   margin-right: -12px;
4486 }
4487
4488 .social-statusarea-user {
4489   border-bottom: 1px solid #9C9CFF;
4490   background-color: #000000;
4491   color: #FF9F00;
4492   position: relative;
4493   cursor: pointer;
4494 }
4495
4496 .social-statusarea-user-portrait {
4497   width: 32px;
4498   height: 32px;
4499   border-radius: 2px;
4500   margin: 10px;
4501 }
4502
4503 .social-statusarea-loggedInStatus {
4504   background: transparent;
4505   border: none;
4506   color: #3333FF;
4507   min-width: 0;
4508   margin: 0 6px;
4509   list-style-image: none;
4510 }
4511
4512 #social-statusarea-user[_moz-menuactive] > vbox > .social-statusarea-loggedInStatus {
4513   text-decoration: underline;
4514 }
4515
4516 .social-panel > .panel-arrowcontainer > .panel-arrowcontent {
4517   padding: 0;
4518 }
4519
4520 .social-panel-frame {
4521   border-radius: inherit;
4522 }
4523
4524 /* === BEGIN chat.inc.css === */
4525
4526 #social-sidebar-header {
4527   padding: 3px;
4528 }
4529
4530 #manage-share-providers,
4531 #social-sidebar-button {
4532   list-style-image: url("chrome://browser/skin/ToolbarFx.png");
4533   -moz-image-region: rect(0, 468px, 18px, 450px);
4534 }
4535
4536 #social-sidebar-button {
4537   -moz-appearance: none;
4538   border: none;
4539   padding: 0;
4540   margin: 2px;
4541 }
4542 #manage-share-providers > .toolbarbutton-icon,
4543 #social-sidebar-button > .toolbarbutton-icon {
4544   min-height: 18px;
4545   min-width: 18px;
4546 }
4547 #manage-share-providers:hover,
4548 #manage-share-providers:hover:active,
4549 #social-sidebar-button:hover,
4550 #social-sidebar-button:hover:active {
4551   -moz-image-region: rect(18px, 468px, 36px, 450px);
4552 }
4553 #social-sidebar-button > .toolbarbutton-menu-dropmarker {
4554   display: none;
4555 }
4556
4557 #social-sidebar-button[loading="true"] {
4558   list-style-image: url("chrome://global/skin/icons/loading.png");
4559 }
4560
4561 #social-sidebar-favico {
4562   max-height: 16px;
4563   max-width: 16px;
4564   padding: 0;
4565   margin: 2px;
4566 }
4567
4568 .chat-status-icon {
4569   max-height: 16px;
4570   max-width: 16px;
4571   padding: 0;
4572 }
4573
4574 .chat-toolbarbutton {
4575   -moz-appearance: none;
4576   border: none;
4577   padding: 0 3px;
4578   margin: 0;
4579   background: none;
4580 }
4581
4582 .chat-toolbarbutton > .toolbarbutton-text {
4583   display: none;
4584 }
4585
4586 .chat-toolbarbutton > .toolbarbutton-icon {
4587   width: 16px;
4588   height: 16px;
4589 }
4590
4591 .chat-close-button {
4592   list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close");
4593 }
4594
4595 .chat-close-button:hover {
4596   list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-hover");
4597 }
4598
4599 .chat-close-button:hover:active {
4600   list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-active");
4601 }
4602
4603 .chat-minimize-button {
4604   list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize");
4605 }
4606
4607 .chat-minimize-button:hover {
4608   list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-hover");
4609 }
4610
4611 .chat-minimize-button:hover:active {
4612   list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-active");
4613 }
4614
4615 .chat-swap-button {
4616   list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand");
4617   transform: rotate(180deg);
4618 }
4619
4620 .chat-swap-button:hover {
4621   list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-hover");
4622 }
4623
4624 .chat-swap-button:hover:active {
4625   list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-active");
4626 }
4627
4628 chatbar > chatbox > .chat-titlebar > .chat-swap-button {
4629   transform: none;
4630 }
4631
4632 .chat-title {
4633   color: #000000;
4634   text-shadow: none;
4635   cursor: inherit;
4636 }
4637
4638 .chat-titlebar {
4639   background-color: #9C9CFF;
4640   color: #000000;
4641   height: 26px;
4642   min-height: 26px;
4643   width: 100%;
4644   margin: 0;
4645   padding: 5px 4px;
4646   border: 1px solid #008484;
4647   border-bottom: 0;
4648   border-top-left-radius: 4px;
4649   border-top-right-radius: 4px;
4650   cursor: pointer;
4651   background-color: #A09090;
4652 }
4653
4654 .chat-titlebar[selected] {
4655   background-color: #008484;
4656 }
4657
4658 .chat-titlebar > .notification-anchor-icon {
4659   margin-left: 2px;
4660   margin-right: 2px;
4661 }
4662
4663 .chat-titlebar[minimized="true"] {
4664   border-bottom: none;
4665 }
4666
4667 .chat-titlebar[selected] {
4668   background-color: #008484;
4669 }
4670
4671 .chat-titlebar[activity] {
4672   background-color: #E7ADE7;
4673 }
4674
4675 .chat-frame {
4676   padding: 0;
4677   margin: 0;
4678   overflow: hidden;
4679 }
4680
4681 .chatbar-button {
4682   list-style-image: url("chrome://browser/skin/social/services-16.png");
4683   background-color: #000000;
4684   border: none;
4685   margin: 0;
4686   padding: 2px;
4687   height: 21px;
4688   width: 21px;
4689   border-top: 1px solid #008484;
4690   border-inline-end: 1px solid #008484;
4691 }
4692
4693 @media (min-resolution: 2dppx) {
4694   .chatbar-button {
4695     list-style-image: url("chrome://browser/skin/social/services-16@2x.png");
4696   }
4697 }
4698
4699 .chatbar-button:hover {
4700   background-color: #FFCF00;
4701 }
4702 .chatbar-button[open="true"] {
4703   background-color: #FF9F00;
4704 }
4705
4706 .chatbar-button[activity]:not([open]) {
4707   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%);
4708 }
4709
4710 .chatbar-button > .toolbarbutton-icon {
4711   width: 16px;
4712 }
4713
4714 .chatbar-button > menupopup > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
4715   width: auto;
4716   height: auto;
4717   max-height: 16px;
4718   max-width: 16px;
4719 }
4720
4721 .chatbar-button > .toolbarbutton-icon {
4722   opacity: .6;
4723   margin-inline-end: 0;
4724 }
4725 .chatbar-button:hover > .toolbarbutton-icon,
4726 .chatbar-button[open="true"] > .toolbarbutton-icon {
4727   opacity: 1;
4728 }
4729
4730 .chatbar-button:hover,
4731 .chatbar-button[open="true"] {
4732 }
4733
4734 .chatbar-button > .toolbarbutton-text,
4735 .chatbar-button > .toolbarbutton-menu-dropmarker {
4736   display: none;
4737 }
4738
4739 .chatbar-button[activity]:not([open="true"]) {
4740   background-color: #E7ADE7;
4741 }
4742
4743 .chatbar-button > menupopup > menuitem[activity] {
4744   font-weight: bold;
4745 }
4746
4747 .chatbar-innerbox {
4748   background: transparent;
4749   overflow: hidden;
4750 }
4751
4752 chatbar {
4753   margin-inline-end: 20px;
4754 }
4755
4756 chatbox {
4757   margin-inline-start: 4px;
4758   background-color: transparent;
4759 }
4760
4761 chatbar > chatbox {
4762   /* Apply the same border-radius as the .chat-titlebar to make the box-shadow
4763      go round nicely. */
4764 /*  border-top-left-radius: 4px;
4765   border-top-right-radius: 4px;*/
4766   /* Offset the chatbox the same amount as the box-shadows' spread, to make it
4767      visible. */
4768 /*  margin-inline-end: 5px;*/
4769 }
4770
4771 chatbox[minimized="true"] {
4772   width: 160px;
4773   height: 20px;
4774 }
4775
4776 window > chatbox {
4777   margin-inline-start: 0px;
4778   margin: 0px;
4779   border: none;
4780   padding: 0px;
4781 }
4782
4783 /* === END chat.inc.css === */
4784
4785 /* === BEGIN plugin-doorhanger.inc.css === */
4786
4787 /**
4788  * Plugin Doorhanger Styles
4789  */
4790
4791 #notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent {
4792   padding: 6px 1px 2px;
4793 }
4794
4795 .click-to-play-plugins-notification-center-box {
4796 }
4797
4798 .plugin-popupnotification-centeritem:nth-child(odd) {
4799 /*  background-color: rgba(0,0,0,0.1);*/
4800 }
4801
4802 .center-item-label {
4803   margin-bottom: 0;
4804   text-overflow: ellipsis;
4805 }
4806
4807 .center-item-warning-icon {
4808   background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.png");
4809   background-repeat: no-repeat;
4810   width: 16px;
4811   height: 15px;
4812   margin-inline-start: 6px;
4813 }
4814
4815 .click-to-play-plugins-notification-button-container {
4816 }
4817
4818 .click-to-play-popup-button {
4819   width: 50%;
4820 }
4821
4822 .click-to-play-plugins-notification-description-box {
4823   margin-left: 5px;
4824   margin-right: 5px;
4825   margin-top: 0;
4826   padding-bottom: 3px;
4827 }
4828
4829 .click-to-play-plugins-outer-description {
4830   margin-top: 1px;
4831 }
4832
4833 .click-to-play-plugins-notification-link,
4834 .center-item-link {
4835   margin: 0;
4836 }
4837
4838 .messageImage[value="plugin-hidden"] {
4839   list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
4840   filter: url(chrome://browser/skin/filters.svg#fill);
4841   fill: #A09090;
4842 }
4843
4844 /* Keep any changes to this style in sync with pluginProblem.css */
4845 notification.pluginVulnerable {
4846 }
4847
4848 notification.pluginVulnerable .messageImage {
4849   list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
4850   filter: url(chrome://browser/skin/filters.svg#fill);
4851   fill: #FF0000;
4852 }
4853
4854 /* === END plugin-doorhanger.inc.css === */
4855
4856 /* === BEGIN login-doorhanger.inc.css === */
4857
4858 #notification-popup[popupid="login-fill"] > .panel-arrowcontainer > .panel-arrowcontent {
4859   /* Since we display a sliding subview that extends to the border, we cannot
4860    * keep the default padding of arrow panels. We use the same padding in the
4861    * individual content views instead. Since we removed the padding, we also
4862    * have to ensure the contents are clipped to the border box. */
4863   padding: 0;
4864   overflow: hidden;
4865 }
4866
4867 #login-fill-mainview,
4868 #login-fill-details {
4869   padding: var(--panel-arrowcontent-padding);
4870 }
4871
4872 #login-fill-doorhanger[inDetailView] > #login-fill-mainview {
4873   transform: translateX(-14px);
4874 }
4875
4876 #login-fill-mainview,
4877 #login-fill-details {
4878   transition: transform 150ms;
4879 }
4880
4881 #login-fill-doorhanger:not([inDetailView]) > #login-fill-details {
4882   transform: translateX(105%);
4883 }
4884
4885 #login-fill-doorhanger:not([inDetailView]) > #login-fill-details:-moz-locale-dir(rtl) {
4886   transform: translateX(-105%);
4887 }
4888
4889 #login-fill-doorhanger[inDetailView] > #login-fill-clickcapturer {
4890   background-color: hsla(240,39%,100%,.1);
4891 }
4892
4893 #login-fill-testing {
4894   color: #FF0000;
4895   font-weight: bold;
4896 }
4897
4898 #login-fill-list {
4899   border: 1px solid #9C9CFF;
4900   max-height: 20em;
4901 }
4902
4903 .login-fill-item[disabled] {
4904   color: #8050B0;
4905   background-color: #000000;
4906 }
4907
4908 .login-fill-item[disabled][selected] {
4909   background-color: #008484;
4910 }
4911
4912 .login-hostname {
4913   margin: 4px;
4914   font-weight: bold;
4915 }
4916
4917 .login-fill-item.different-hostname > .login-hostname {
4918   color: #A09090;
4919   font-style: italic;
4920 }
4921
4922 .login-username {
4923   margin: 4px;
4924   color: #A09090;
4925 }
4926
4927 #login-fill-details {
4928   padding: 4px;
4929   background: var(--panel-arrowcontent-background);
4930   color: var(--panel-arrowcontent-color);
4931   background-clip: padding-box;
4932   border-left: 1px solid #9C9CFF;
4933   margin-inline-start: 38px;
4934 }
4935
4936 /* === END login-doorhanger.inc.css === */
4937
4938 /* === BEGIN customizeMode.inc.css === */
4939
4940 /* Customization mode */
4941
4942 :root {
4943   --drag-drop-transition-duration: .3s;
4944 }
4945
4946 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox {
4947   margin-bottom: 1em;
4948 }
4949
4950 #main-window:-moz-any([customize-entering],[customize-entered]) #content-deck,
4951 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4952 #main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
4953   margin-left: 1em;
4954   margin-right: 1em;
4955 }
4956
4957 #main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck {
4958   pointer-events: none;
4959 }
4960
4961 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4962 #PanelUI-contents > .panel-customization-placeholder {
4963   -moz-outline-radius: 2.5px;
4964   outline: 1px dashed transparent;
4965 }
4966
4967 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before {
4968   /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */
4969   -moz-box-ordinal-group: 0;
4970   content: "";
4971   display: -moz-box;
4972   height: 100%;
4973   left: 0;
4974   outline-offset: -2px;
4975   pointer-events: none;
4976   position: absolute;
4977   top: 0;
4978   width: 100%;
4979 }
4980
4981 /* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the
4982    #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the
4983    offset from the bottom effectively the same as other targets (-2px). */
4984 #main-window[customize-entered] #TabsToolbar.customization-target::before {
4985 /*  top: -2px;*/
4986 }
4987
4988 /* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */
4989 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover,
4990 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)),
4991 #main-window[customize-entered] #nav-bar-customization-target.customization-target {
4992   position: relative;
4993 }
4994
4995 /* Most target outlines are shown on hover and drag over but the panel menu uses
4996    placeholders instead. */
4997 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before,
4998 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4999 /* nav-bar and panel outlines are always shown */
5000 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
5001   outline-color: #A09090;
5002 }
5003
5004 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
5005   transition: outline-color 250ms linear;
5006 }
5007
5008 #PanelUI-contents[showoutline=true] > .panel-customization-placeholder {
5009   transition: outline-color 250ms linear;
5010   outline-color: #9C9CFF;
5011 }
5012
5013 #PanelUI-contents > .panel-customization-placeholder {
5014   cursor: auto;
5015   outline-offset: -5px;
5016 }
5017
5018 #main-window[customizing] .customization-target:not(#PanelUI-contents) {
5019   min-width: 100px;
5020 /*  padding-left: 10px;
5021   padding-right: 10px;*/
5022 }
5023
5024 #main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck {
5025   padding: 0 2em 2em;
5026 }
5027
5028 #customization-container {
5029   background-color: #000000;
5030   color: #FF9F00;
5031 }
5032
5033 #customization-palette,
5034 #customization-empty {
5035   padding: 0 15px 15px;
5036 }
5037
5038 #customization-header {
5039   font-size: 1.75em;
5040   line-height: 1.75em;
5041   color: #9C9CFF;
5042   font-weight: 200;
5043   margin: 25px 25px 12px;
5044   padding-bottom: 12px;
5045   border-bottom: 1px solid #A09090;
5046 }
5047
5048 #customization-panel-container {
5049   padding: 10px 10px 0px;
5050 }
5051
5052 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
5053 #customization-footer {
5054   /*background-color: rgb(236,236,236);*/
5055 }
5056
5057 #customization-footer {
5058   border-top: 1px solid #9C9CFF;
5059   padding: 10px;
5060 }
5061
5062 .customizationmode-button {
5063   margin: 5px;
5064 }
5065
5066 .customizationmode-button:hover {
5067 }
5068
5069 #customization-titlebar-visibility-button[checked],
5070 #customization-devedition-theme-button[checked] {
5071   background-color: #008484;
5072 }
5073
5074 #customization-titlebar-visibility-button[checked]:hover,
5075 #customization-devedition-theme-button[checked]:hover {
5076   background-color: #FFCF00;
5077 }
5078
5079 #customization-titlebar-visibility-button[checked]:hover:active,
5080 #customization-devedition-theme-button[checked]:hover:active {
5081   background-color: #FF9F00;
5082 }
5083
5084 .customizationmode-button[disabled="true"] {
5085 }
5086
5087 .customizationmode-button > .box-inherit > .box-inherit > .button-icon,
5088 .customizationmode-button > .button-box > .button-icon {
5089 /*  height: 24px;*/
5090 }
5091
5092 #customization-titlebar-visibility-button {
5093   list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png");
5094   -moz-image-region: rect(0, 16px, 16px, 0);
5095 }
5096
5097 #customization-titlebar-visibility-button:hover {
5098   -moz-image-region: rect(16px, 16px, 32px, 0);
5099 }
5100
5101 #customization-lwtheme-button,
5102 #customization-titlebar-visibility-button  {
5103   padding: 0px 5px;
5104 }
5105
5106 #customization-titlebar-visibility-button > .button-box {
5107   padding-top: 0;
5108   padding-bottom: 1px;
5109 }
5110
5111 #customization-titlebar-visibility-button:hover:active > .button-box {
5112   padding-top: 1px;
5113   padding-bottom: 0;
5114 }
5115
5116 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-text,
5117 #customization-titlebar-visibility-button > .button-box > .button-text {
5118   /* Sadly, button.css thinks its margins are perfect for everyone. */
5119   margin-inline-start: 5px !important;
5120 }
5121
5122 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon {
5123   width: 20px;
5124   height: 20px;
5125   border-radius: 2px;
5126   background-size: contain;
5127 }
5128
5129 #customization-titlebar-visibility-button > .button-box > .button-icon {
5130   vertical-align: middle;
5131 }
5132
5133 #customization-titlebar-visibility-button[checked] {
5134   -moz-image-region: rect(0, 32px, 16px, 16px);
5135   background-color: #008484;
5136 }
5137
5138 #customization-titlebar-visibility-button[checked]:hover {
5139   -moz-image-region: rect(16px, 32px, 32px, 16px);
5140   background-color: #FFCF00;
5141 }
5142
5143 #customization-titlebar-visibility-button[checked]:hover:active {
5144   background-color: #FF9F00;
5145 }
5146
5147 @media (min-resolution: 1.1dppx) {
5148   #customization-titlebar-visibility-button {
5149     list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle@2x.png");
5150     -moz-image-region: rect(0, 48px, 48px, 0);
5151   }
5152
5153   #customization-titlebar-visibility-button:hover {
5154     -moz-image-region: rect(48px, 48px, 96px, 0);
5155   }
5156
5157   #customization-titlebar-visibility-button[checked] {
5158     -moz-image-region: rect(0, 96px, 48px, 48px);
5159   }
5160
5161   #customization-titlebar-visibility-button[checked]:hover {
5162     -moz-image-region: rect(48px, 96px, 96px, 48px);
5163   }
5164 }
5165
5166 #main-window[customize-entered] #customization-panel-container {
5167   background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5168   background-position: left top;
5169   background-repeat: repeat;
5170   background-size: auto;
5171   background-attachment: fixed;
5172 }
5173
5174 toolbarpaletteitem[place="toolbar"] {
5175   transition: border-width 250ms ease-in-out;
5176 }
5177
5178 toolbarpaletteitem[mousedown] {
5179   outline: 1px solid #008484;
5180   cursor: -moz-grabbing;
5181   opacity: 0.8;
5182 }
5183
5184 .panel-customization-placeholder,
5185 toolbarpaletteitem[place="palette"],
5186 toolbarpaletteitem[place="panel"] {
5187   transition: transform var(--drag-drop-transition-duration) ease-in-out;
5188 }
5189
5190 #customization-palette {
5191   transition: opacity .3s ease-in-out;
5192   opacity: 0;
5193 }
5194
5195 #customization-palette[showing="true"] {
5196   opacity: 1;
5197 }
5198
5199 toolbarpaletteitem toolbarbutton[disabled] {
5200 /*  color: inherit !important;*/
5201 }
5202
5203 toolbarpaletteitem[notransition].panel-customization-placeholder,
5204 toolbarpaletteitem[notransition][place="toolbar"],
5205 toolbarpaletteitem[notransition][place="palette"],
5206 toolbarpaletteitem[notransition][place="panel"] {
5207   transition: none;
5208 }
5209
5210 toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
5211 toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon,
5212 toolbarpaletteitem > toolbaritem.panel-wide-item,
5213 toolbarpaletteitem > toolbarbutton[type="menu-button"] {
5214   transition: transform  var(--drag-drop-transition-duration) cubic-bezier(.6, 2, .75, 1.5) !important;
5215 }
5216
5217 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon,
5218 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon {
5219   transform: scale(1.3);
5220 }
5221
5222 toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item,
5223 toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] {
5224   transform: scale(1.1);
5225 }
5226
5227 /* Override the toolkit styling for items being dragged over. */
5228 toolbarpaletteitem[place="toolbar"] {
5229   border-left-width: 0;
5230   border-right-width: 0;
5231   margin-right: 0;
5232   margin-left: 0;
5233 }
5234
5235 #customization-palette:not([hidden]) {
5236   margin-bottom: 25px;
5237 }
5238
5239 toolbarpaletteitem[place="palette"]:-moz-focusring,
5240 toolbarpaletteitem[place="panel"]:-moz-focusring,
5241 toolbarpaletteitem[place="toolbar"]:-moz-focusring {
5242   outline-width: 0;
5243 }
5244
5245 toolbarpaletteitem[place="palette"]:not([mousedown="true"]):-moz-focusring,
5246 toolbarpaletteitem[place="panel"]:not([mousedown="true"]):-moz-focusring,
5247 toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
5248   /* Delay adding the focusring back until after the transform transition completes. */
5249   transition: outline-width .01s linear var(--drag-drop-transition-duration);
5250   outline: 1px dotted #A09090;
5251   -moz-outline-radius: 2.5px;
5252 }
5253
5254 toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
5255   outline-offset: -5px;
5256 }
5257
5258 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
5259 #wrapper-edit-controls[place="palette"] > #edit-controls > separator,
5260 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
5261 #wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
5262   margin-top: 20px;
5263 }
5264
5265 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
5266 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
5267   margin-left: 0;
5268   margin-right: 0;
5269   max-width: 24px;
5270   min-width: 24px;
5271   max-height: 24px;
5272   min-height: 24px;
5273   padding: 4px;
5274 }
5275
5276 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
5277 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
5278   width: 16px;
5279 }
5280
5281 #wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
5282   opacity: 1; /* To ensure these buttons always look enabled in customize mode */
5283 }
5284
5285 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
5286 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
5287   display: none;
5288 }
5289
5290 #wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks {
5291   -moz-box-pack: center;
5292   min-height: 48px;
5293 }
5294
5295 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
5296   margin-inline-end: 5px;
5297 }
5298
5299 #customization-palette > toolbarpaletteitem > label {
5300   text-align: center;
5301   margin-left: 0;
5302   margin-right: 0;
5303 }
5304
5305 #customization-lwtheme-menu > .panel-arrowcontainer > .panel-arrowcontent {
5306   -moz-box-orient: vertical;
5307   /* Make the panel padding uniform across all platforms due to the
5308      styling of the section headers and footer. */
5309   padding: 10px;
5310 }
5311
5312 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
5313   width: 32px;
5314   height: 32px;
5315 }
5316
5317 .customization-lwtheme-menu-theme {
5318   -moz-appearance: none;
5319   margin: 0 -5px 5px;
5320   padding-top: 0;
5321   padding-inline-end: 5px;
5322   padding-bottom: 0;
5323   padding-inline-start: 0;
5324 }
5325
5326 .customization-lwtheme-menu-theme[defaulttheme] {
5327   list-style-image: url(chrome://browser/skin/Fxtheme-switcher-icon.png);
5328 }
5329
5330 .customization-lwtheme-menu-theme[active="true"] {
5331   background-color: #008484;
5332 }
5333
5334 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
5335   margin: 5px;
5336 }
5337
5338 .customization-lwtheme-menu-theme > .toolbarbutton-text {
5339   text-align: start;
5340 }
5341
5342 #customization-lwtheme-menu-header,
5343 #customization-lwtheme-menu-recommended {
5344   padding: 10px;
5345   margin-bottom: 5px;
5346 }
5347
5348 #customization-lwtheme-menu-header,
5349 #customization-lwtheme-menu-recommended,
5350 #customization-lwtheme-menu-footer {
5351   background-color: #A09090;
5352   color: #000000;
5353   margin-right: -10px;
5354   margin-left: -10px;
5355 }
5356
5357 #customization-lwtheme-menu-header {
5358   margin-top: -10px;
5359   border-top-right-radius: 3px;
5360   border-top-left-radius: 3px;
5361 }
5362
5363 #customization-lwtheme-menu-recommended {
5364 }
5365
5366 #customization-lwtheme-menu-footer {
5367   margin-bottom: -10px;
5368   border-bottom-right-radius: 3px;
5369   border-bottom-left-radius: 3px;
5370 }
5371
5372 .customization-lwtheme-menu-footeritem {
5373   -moz-appearance: none;
5374   -moz-box-flex: 1;
5375   background-color: #C09070;
5376   color: #000000;
5377   border: 1px solid transparent;
5378   padding: 10px;
5379   margin-left: 0;
5380   margin-right: 0;
5381 }
5382
5383 .customization-lwtheme-menu-footeritem:hover {
5384   background-color: #FFCF00;
5385 }
5386
5387 .customization-lwtheme-menu-footeritem:first-child {
5388 }
5389
5390 /* === END customizeMode.inc.css === */
5391
5392 /* === BEGIN customizeTip.inc.css === */
5393
5394 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent {
5395   padding: 0;
5396   margin: 0;
5397   min-width: 400px;
5398   max-width: 1000px;
5399   min-height: 200px;
5400   border-radius: 3px;
5401 /*  background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%);*/
5402   border: 1px solid #9C9CFF;
5403   color: #FF9F00;
5404 }
5405
5406 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) {
5407 /*  background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%);*/
5408 }
5409
5410 .customization-tipPanel-infoBox {
5411   margin: 20px 25px 25px;
5412   width: 25px;
5413   background-image: url("chrome://browser/skin/customizableui/info-icon-customizeTip.png");
5414   background-repeat: no-repeat;
5415 }
5416
5417 .customization-tipPanel-content {
5418   margin: 25px 0;
5419   font-size: 12px;
5420   line-height: 18px;
5421 }
5422
5423 .customization-tipPanel-em {
5424   margin: 0;
5425   font-weight: bold;
5426 }
5427
5428 .customization-tipPanel-contentImage {
5429   margin-top: 25px;
5430   list-style-image: url("chrome://browser/skin/customizableui/customize-illustration.png");
5431   min-width: 300px;
5432   max-width: 300px;
5433   min-height: 190px;
5434   max-height: 190px;
5435   display: -moz-box;
5436 }
5437
5438 .customization-tipPanel-contentImage:-moz-locale-dir(rtl) {
5439   list-style-image: url("chrome://browser/skin/customizableui/customize-illustration-rtl.png");
5440 }
5441
5442 .customization-tipPanel-link {
5443   -moz-appearance: none;
5444   background: transparent;
5445   border: none;
5446   box-shadow: none;
5447   color: #3333FF;
5448   margin: 0;
5449   cursor: pointer;
5450 }
5451
5452 .customization-tipPanel-link > .button-box > .button-text {
5453   margin: 0 !important;
5454 }
5455
5456 .customization-tipPanel-closeBox > .close-icon {
5457   -moz-appearance: none;
5458   border: 0;
5459   margin-inline-end: -25px;
5460 }
5461
5462 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"],
5463 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5464   list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png");
5465 }
5466
5467 /* === END customizeTip.inc.css === */
5468
5469 /**
5470  * This next rule is a hack to disable subpixel anti-aliasing on all
5471  * labels during the customize mode transition. Subpixel anti-aliasing
5472  * on Windows with Direct2D layers acceleration is particularly slow to
5473  * paint, so this hack is how we sidestep that performance bottleneck.
5474  */
5475 #main-window:-moz-any([customize-entering],[customize-exiting]) label {
5476   transform: perspective(0.01px);
5477 }
5478
5479 #main-window[customize-entered] > #tab-view-deck {
5480   background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5481   background-attachment: fixed;
5482 }
5483
5484 #main-window[customization-lwtheme] > #tab-view-deck:-moz-lwtheme {
5485   background-repeat: no-repeat;
5486   background-position: right top;
5487   background-attachment: fixed;
5488   /* The image will get set from CustomizeMode.jsm */
5489   background-image: none;
5490   background-color: transparent;
5491 }
5492
5493 #main-window[customization-lwtheme]:-moz-lwtheme {
5494   background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5495   background-repeat: repeat;
5496   background-attachment: fixed;
5497   background-position: left top;
5498 }
5499
5500 #main-window[customize-entered] #browser-bottombox,
5501 #main-window[customize-entered] #customization-container {
5502   border-left: 1px solid #9C9CFF;
5503   border-right: 1px solid #9C9CFF;
5504   background-clip: padding-box;
5505 }
5506
5507 #main-window[customize-entered] #browser-bottombox {
5508   border-bottom: 1px solid #9C9CFF;
5509 }
5510
5511 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"] {
5512   margin-right: -2px;
5513 }
5514
5515 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5516   margin-left: -2px;
5517 }
5518
5519 /* End customization mode */
5520
5521 /* Private browsing indicators */
5522
5523 /**
5524  * Currently, we have two places where we put private browsing indicators on
5525  * Windows. When tabsintitlebar is enabled, we draw the indicator in the titlebar.
5526  * When tabsintitlebar is disabled, we draw the indicator at the end of the
5527  * tabstrip. The titlebar indicator is the fiddliest of the bunch, since we
5528  * want the bottom border of the image to line up with the bottom of the window
5529  * caption buttons. That's why there's so much special-casing going on in here.
5530  */
5531 .private-browsing-indicator {
5532   display: none;
5533   pointer-events: none;
5534 }
5535
5536 #private-browsing-indicator-titlebar {
5537   display: block;
5538   position: absolute;
5539 }
5540
5541 #main-window[privatebrowsingmode=temporary][tabsintitlebar] #private-browsing-indicator-titlebar > .private-browsing-indicator {
5542   display: block;
5543 }
5544
5545 #main-window[privatebrowsingmode=temporary]:-moz-any([inFullscreen],:not([tabsintitlebar])) #TabsToolbar > .private-browsing-indicator {
5546   display: -moz-box;
5547 }
5548
5549 #TabsToolbar > .private-browsing-indicator {
5550   background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") no-repeat center -3px;
5551   margin-inline-start: 4px;
5552   width: 48px;
5553 }
5554
5555 /* Bug 1008183: We're intentionally using the titlebar asset here for fullscreen
5556  * mode, since the tabstrip "mimics" the titlebar in that case with its own
5557  * min/max/close window buttons.
5558  */
5559 #private-browsing-indicator-titlebar > .private-browsing-indicator,
5560 #main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
5561   background: url("chrome://browser/skin/privatebrowsing-mask-titlebar.png") no-repeat center 0px;
5562   margin-inline-end: 4px;
5563   width: 40px;
5564   height: 20px;
5565   position: relative;
5566 }
5567
5568 /* This one is for Linux */
5569 #main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
5570   background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") center no-repeat;
5571   width: 48px;
5572 }
5573
5574 /* End private browsing indicators */
5575
5576 /* === BEGIN UITour.inc.css === */
5577
5578 /* UI Tour */
5579
5580 #UITourHighlightContainer {
5581   -moz-appearance: none;
5582   border: none;
5583   background-color: transparent;
5584   /* This is a buffer to compensate for the movement in the "wobble" effect */
5585   padding: 4px;
5586 }
5587
5588 #UITourHighlight {
5589   background-image: radial-gradient(50% 100%, rgba(0,132,132,0.4) 50%, rgba(0,132,132,0.6) 100%);
5590   border-radius: 40px;
5591   border: 1px solid #9C9CFF;
5592   /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
5593      on Linux without an X compositor where opacity is either 0 or 1. */
5594   box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
5595   min-height: 32px;
5596   min-width: 32px;
5597 }
5598
5599 #UITourTooltipBody {
5600   -moz-box-align: start;
5601 }
5602
5603 #UITourTooltipTitleContainer {
5604   -moz-box-align: start;
5605   margin-bottom: 10px;
5606 }
5607
5608 #UITourTooltipIcon {
5609   width: 48px;
5610   height: 48px;
5611   margin-inline-end: 10px;
5612 }
5613
5614 #UITourTooltipTitle,
5615 #UITourTooltipDescription {
5616   max-width: 20rem;
5617 }
5618
5619 #UITourTooltipTitle {
5620   font-size: 1.45rem;
5621   font-weight: bold;
5622   margin: 0;
5623 }
5624
5625 #UITourTooltipDescription {
5626   margin-inline-start: 0;
5627   margin-inline-end: 0;
5628   font-size: 1.15rem;
5629   line-height: 1.8rem;
5630   margin-bottom: 0; /* Override global.css */
5631 }
5632
5633 #UITourTooltipClose {
5634   position: relative;
5635   -moz-appearance: none;
5636   border: none;
5637   background-color: transparent;
5638   min-width: 0;
5639   margin-inline-start: 4px;
5640   margin-top: -2px;
5641 }
5642
5643 #UITourTooltipClose > .toolbarbutton-text {
5644   display: none;
5645 }
5646
5647 #UITourTooltipButtons {
5648   -moz-box-pack: end;
5649   background-color: rgba(0,0,0,.2);
5650   border-top: 1px solid rgba(0,0,0,.4);
5651   margin: 10px -16px -16px;
5652   padding: 16px;
5653 }
5654
5655 #UITourTooltipButtons > label,
5656 #UITourTooltipButtons > button {
5657   margin: 0 15px;
5658 }
5659
5660 #UITourTooltipButtons > label:first-child,
5661 #UITourTooltipButtons > button:first-child {
5662   margin-inline-start: 0;
5663 }
5664
5665 #UITourTooltipButtons > label:last-child,
5666 #UITourTooltipButtons > button:last-child {
5667   margin-inline-end: 0;
5668 }
5669
5670 #UITourTooltipButtons > button[image] > .button-box > .button-icon {
5671   width: 16px;
5672   height: 16px;
5673   margin-inline-end: 5px;
5674 }
5675
5676 #UITourTooltipButtons > label,
5677 #UITourTooltipButtons > button .button-text {
5678   font-size: 1.15rem;
5679 }
5680
5681 #UITourTooltipButtons > button:not(.button-link) {
5682   -moz-appearance: none;
5683   background-color: #C09070;
5684   border-radius: 3000px;
5685   border: none;
5686   color: #000000;
5687   padding: 4px 30px;
5688   transition-property: background-color, color;
5689   transition-duration: 150ms;
5690 }
5691
5692 #UITourTooltipButtons > button:not(.button-link):not(:active):hover {
5693   background-color: #FFCF00;
5694   color: #000000;
5695 }
5696
5697 #UITourTooltipButtons > label,
5698 #UITourTooltipButtons > button.button-link {
5699   -moz-appearance: none;
5700   background: transparent;
5701   border: none;
5702   box-shadow: none;
5703   color: rgba(0,0,0,0.35);
5704   padding-left: 10px;
5705   padding-right: 10px;
5706 }
5707
5708 #UITourTooltipButtons > button.button-link:hover {
5709   color: black;
5710 }
5711
5712 /* The primary button gets the same color as the customize button. */
5713 #UITourTooltipButtons > button.button-primary {
5714   background-color: #A06060; /* LCARS default button background color */
5715   color: #000000;
5716   padding-left: 30px;
5717   padding-right: 30px;
5718 }
5719
5720 #UITourTooltipButtons > button.button-primary:not(:active):hover {
5721   background-color: #FFCF00;
5722   color: #000000;
5723 }
5724
5725 /* Notification overrides for Heartbeat UI */
5726
5727 notification.heartbeat {
5728   background-color: #A09090;
5729 /*  height: 40px;*/
5730 }
5731
5732 @keyframes pulse-onshow {
5733  0% {
5734    opacity: 0;
5735    transform: scale(1.0);
5736  }
5737  25% {
5738    opacity: 1;
5739    transform: scale(1.1);
5740  }
5741  50% {
5742    transform: scale(1.0);
5743  }
5744  75% {
5745    transform: scale(1.1);
5746  }
5747  100% {
5748    transform: scale(1.0);
5749  }
5750 }
5751
5752 @keyframes pulse-twice {
5753  0% {
5754    transform: scale(1.1);
5755  }
5756  50% {
5757    transform: scale(0.8);
5758  }
5759  100% {
5760    transform: scale(1);
5761  }
5762 }
5763
5764 .messageText.heartbeat {
5765   color: #000000;
5766 /*  text-shadow: none; */
5767   margin-inline-start: 0px;
5768 }
5769
5770 .messageImage.heartbeat {
5771   width: 24px;
5772   height: 24px;
5773   margin-inline-start: 8px;
5774   margin-inline-end: 8px;
5775 }
5776
5777 .messageImage.heartbeat.pulse-onshow {
5778   animation-name: pulse-onshow;
5779   animation-duration: 1.5s;
5780   animation-iteration-count: 1;
5781   animation-timing-function: cubic-bezier(.7,1.8,.9,1.1);
5782 }
5783
5784 .messageImage.heartbeat.pulse-twice {
5785   animation-name: pulse-twice;
5786   animation-duration: 1s;
5787   animation-iteration-count: 2;
5788   animation-timing-function: linear;
5789 }
5790
5791 /* Learn More link styles */
5792 .heartbeat > .text-link {
5793   color: #3333FF;
5794   margin-inline-start: 0px;
5795 }
5796
5797 .heartbeat > .text-link:hover {
5798   color: #9C9CFF;
5799   text-decoration: none;
5800 }
5801
5802 .heartbeat > .text-link:hover:active {
5803   color: #FF9F00;
5804 }
5805
5806 /* Heartbeat UI Rating Star Classes */
5807 .heartbeat > #star-rating-container {
5808   display: -moz-box;
5809 /*  margin-bottom: 4px;*/
5810 }
5811
5812 .heartbeat > #star-rating-container > #star5 {
5813   -moz-box-ordinal-group: 5;
5814 }
5815
5816 .heartbeat > #star-rating-container > #star4 {
5817   -moz-box-ordinal-group: 4;
5818 }
5819
5820 .heartbeat > #star-rating-container > #star3 {
5821   -moz-box-ordinal-group: 3;
5822 }
5823
5824 .heartbeat > #star-rating-container > #star2 {
5825   -moz-box-ordinal-group: 2;
5826 }
5827
5828 .heartbeat > #star-rating-container > .star-x  {
5829   background: url("chrome://browser/skin/heartbeat-star-off.svg");
5830   cursor: pointer;
5831   /* Overrides the margin-inline-end for all platforms defined in the .plain class */
5832   margin-inline-end: 4px !important;
5833   width: 16px;
5834   height: 16px;
5835 }
5836
5837 .heartbeat > #star-rating-container > .star-x:hover,
5838 .heartbeat > #star-rating-container > .star-x:hover ~ .star-x {
5839   background: url("chrome://browser/skin/heartbeat-star-lit.svg");
5840 }
5841
5842 /* === END UITour.inc.css === */
5843
5844 #UITourTooltipButtons {
5845   /**
5846    * Override the --panel-arrowcontent-padding so the background extends
5847    * to the sides and bottom of the panel.
5848    */
5849   margin-left: -10px;
5850   margin-right: -10px;
5851   margin-bottom: -10px;
5852 }
5853
5854 /* === BEGIN contextmenu.inc.css === */
5855
5856 menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left {
5857 }
5858
5859 #context-navigation > .menuitem-iconic {
5860   -moz-box-flex: 1;
5861   -moz-box-pack: center;
5862   -moz-box-align: center;
5863 }
5864
5865 #context-navigation > .menuitem-iconic[disabled="true"] {
5866   background-color: transparent;
5867 }
5868
5869 #context-navigation > .menuitem-iconic > .menu-iconic-left {
5870   -moz-appearance: none;
5871 }
5872
5873 #context-back > .menu-iconic-left {
5874   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back"); */
5875   list-style-image: url("chrome://browser/skin/ToolbarFx.png");
5876   -moz-image-region: rect(0, 54px, 18px, 36px);
5877 }
5878
5879 #context-back:not([disabled="true"]):hover > .menu-iconic-left {
5880   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back-active"); */
5881   -moz-image-region: rect(18px, 54px, 36px, 36px);
5882 }
5883
5884 #context-back[disabled="true"] > .menu-iconic-left {
5885   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back-disabled"); */
5886   -moz-image-region: rect(36px, 54px, 54px, 36px);
5887 }
5888
5889 #context-forward > .menu-iconic-left {
5890   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward"); */
5891   list-style-image: url("chrome://browser/skin/ToolbarFx.png");
5892   -moz-image-region: rect(0, 72px, 18px, 54px);
5893 }
5894
5895 #context-forward:not([disabled="true"]):hover > .menu-iconic-left {
5896   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward-active"); */
5897   -moz-image-region: rect(18px, 72px, 36px, 54px);
5898 }
5899
5900 #context-forward[disabled="true"] > .menu-iconic-left {
5901   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward-disabled"); */
5902   -moz-image-region: rect(36px, 72px, 54px, 54px);
5903 }
5904
5905 #context-reload > .menu-iconic-left {
5906   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload"); */
5907   list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
5908   -moz-image-region: rect(0, 14px, 14px, 0);
5909 }
5910
5911 #context-reload:not([disabled="true"]):hover > .menu-iconic-left {
5912   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload-active"); */
5913   -moz-image-region: rect(14px, 14px, 28px, 0);
5914 }
5915
5916 #context-reload[disabled="true"] > .menu-iconic-left {
5917   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload-disabled"); */
5918   -moz-image-region: rect(28px, 14px, 42px, 0);
5919 }
5920
5921 #context-stop > .menu-iconic-left {
5922   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop"); */
5923   list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
5924   -moz-image-region: rect(0, 28px, 14px, 14px);
5925 }
5926
5927 #context-stop:not([disabled="true"]):hover > .menu-iconic-left {
5928   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop-active"); */
5929   -moz-image-region: rect(14px, 28px, 28px, 14px);
5930 }
5931
5932 #context-stop[disabled="true"] > .menu-iconic-left {
5933   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop-disabled"); */
5934   -moz-image-region: rect(28px, 28px, 42px, 14px);
5935 }
5936
5937 #context-bookmarkpage > .menu-iconic-left {
5938   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark"); */
5939   list-style-image: url("chrome://browser/skin/ToolbarFx.png");
5940   -moz-image-region: rect(0, 144px, 18px, 126px);
5941 }
5942
5943 #context-bookmarkpage:not([disabled="true"]):hover > .menu-iconic-left {
5944   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-active"); */
5945   -moz-image-region: rect(18px, 144px, 36px, 126px);
5946 }
5947
5948 #context-bookmarkpage[disabled="true"] > .menu-iconic-left {
5949   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-disabled"); */
5950   -moz-image-region: rect(36px, 144px, 54px, 126px);
5951 }
5952
5953 #context-bookmarkpage[starred=true] {
5954   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked"); */
5955   -moz-image-region: rect(0px, 162px, 18px, 144px);
5956 }
5957
5958 #context-bookmarkpage[starred=true][_moz-menuactive=true] {
5959   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-active"); */
5960   -moz-image-region: rect(18px, 162px, 36px, 144px);
5961 }
5962
5963 #context-bookmarkpage[starred=true][disabled=true] {
5964   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-disabled"); */
5965   -moz-image-region: rect(36px, 162px, 54px, 144px);
5966 }
5967
5968 #context-back:-moz-locale-dir(rtl),
5969 #context-forward:-moz-locale-dir(rtl),
5970 #context-reload:-moz-locale-dir(rtl) {
5971   transform: scaleX(-1);
5972 }
5973
5974 #context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
5975   width: 18px; /*16px;*/
5976   height: 18px; /*16px;*/
5977   margin: 7px;
5978 }
5979
5980 #context-navigation > #context-reload > .menu-iconic-left > .menu-iconic-icon,
5981 #context-navigation > #context-stop > .menu-iconic-left > .menu-iconic-icon {
5982   width: 14px;
5983   height: 14px;
5984   margin: 9px;
5985 }
5986
5987 #context-media-eme-learnmore {
5988   list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
5989 }
5990
5991 #context-media-eme-learnmore {
5992   list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
5993 }
5994
5995 /* === END contextmenu.inc.css === */
5996
5997 #context-navigation {
5998 }
5999
6000 #context-sep-navigation {
6001 /*  margin-top: -4px; */
6002 }
6003
6004 .browser-extension-panel > .panel-arrowcontainer > .panel-arrowcontent {
6005   padding: 0;
6006   overflow: hidden;
6007 }