LCARStrek/browser/browser.css

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