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);