LCARStrek/browser/browser.css

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this
   3  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 @import url("chrome://global/skin/");
   6 @import url("downloads/indicator.css");
   7
   8 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
   9 @namespace html url("http://www.w3.org/1999/xhtml");
  10 @namespace svg url("http://www.w3.org/2000/svg");
  11
  12 toolbar {
  13   -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar");
  14 }
  15
  16 toolbar[customizable="true"] {
  17   -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-browsercustom");
  18 }
  19
  20 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme), (-moz-mac-yosemite-theme) {
  21   /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
  22   toolbar[customizable="true"]:not([nowindowdrag="true"]) {
  23     -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-drag-browsercustom");
  24   }
  25 }
  26
  27 toolbar[type="menubar"][autohide="true"] {
  28   -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-menubar-autohide");
  29 }
  30
  31 #toolbar-menubar[autohide="true"] {
  32   -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-menubar-autohide-browsercustom");
  33 }
  34
  35 menubar {
  36   -moz-binding: url("chrome://global/skin/globalBindings.xml#menubar");
  37 }
  38
  39 :root {
  40   /*--backbutton-urlbar-overlap: 5px;*/
  41
  42   /* icon width + border + horizontal padding (includes the overlap from backbutton-urlbar-overlap) */
  43   --forwardbutton-width: 27px;
  44   /* icon width + border + horizontal padding (without the overlap from backbutton-urlbar-overlap) /
  45   --forwardbutton-width: 25px;*/
  46
  47   --identity-box-verified-background-color: #000000;
  48
  49   --panel-separator-color: #A09090;
  50
  51   --urlbar-separator-color: #9C9CFF;
  52 }
  53
  54 #menubar-items {
  55   -moz-box-orient: vertical; /* for flex hack */
  56 }
  57
  58 #main-menubar {
  59   -moz-box-flex: 1; /* make menu items expand to fill toolbar height */
  60 }
  61
  62 /* ::::: primary toolbar ::::: */
  63
  64 .toolbar-primary > .toolbar-box > .toolbar-holder {
  65   background-color: #A09090;
  66 }
  67
  68 .toolbar-primary > .toolbar-box > .toolbar-startcap,
  69 .toolbar-primary > .toolbar-box > .toolbar-endcap {
  70   background-color: #9C9CFF;
  71 }
  72
  73 /* Hides the titlebar-placeholder underneath the window caption buttons when we
  74    are not autohiding the menubar. */
  75 #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-placeholder[type="caption-buttons"] {
  76   display: none;
  77 }
  78
  79 /* We want a 4px gap between the TabsToolbar and the toolbar-menubar when the
  80    toolbar-menu is displayed, and a 16px gap when it is not. 1px is taken care
  81    of by the (light) outer shadow of the tab, the remaining 3/15 are these margins. */
  82 #toolbar-menubar:not([autohide=true]) ~ #TabsToolbar:not([inFullscreen]),
  83 #toolbar-menubar[autohide=true]:not([inactive]) ~ #TabsToolbar:not([inFullscreen]) {
  84 /*  margin-top: 3px;*/
  85 }
  86
  87 #main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen])[chromehidden~="menubar"] #toolbar-menubar ~ #TabsToolbar,
  88 #main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen]) #toolbar-menubar[autohide="true"][inactive] ~ #TabsToolbar {
  89 /*  margin-top: var(--space-above-tabbar);*/
  90 }
  91
  92 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
  93   /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
  94   #main-window[tabsintitlebar]:not([inFullscreen="true"]) #TabsToolbar {
  95     padding-left: 60px;
  96   }
  97 }
  98
  99 #main-window[tabsintitlebar] #toolbar-menubar .toolbar-endcap {
 100   /* the titlebar buttons are shown right over the endcap but we have no power over the buttonbox position just for this case, so hide the endcap */
 101   display: none;
 102 }
 103
 104 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #toolbar-menubar[customizing-dragovertarget].customization-target::before,
 105 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #TabsToolbar[customizing-dragovertarget].customization-target::before,
 106 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #toolbar-menubar.customization-target:hover::before,
 107 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #TabsToolbar.customization-target:hover::before {
 108   outline-color: #A09090;
 109 }
 110
 111 #navigator-toolbox {
 112 }
 113
 114 #navigator-toolbox::after {
 115   content: "";
 116   display: -moz-box;
 117   -moz-box-ordinal-group: 101; /* tabs toolbar is 100 */
 118   height: 1px;
 119 }
 120
 121 #navigator-toolbox > toolbar {
 122 }
 123
 124 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(:-moz-lwtheme) {
 125 }
 126
 127 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar) {
 128   overflow: -moz-hidden-unscrollable;
 129   max-height: 4em;
 130   transition: min-height 170ms ease-out, max-height 170ms ease-out;
 131 }
 132
 133 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar)[collapsed=true] {
 134   min-height: 0.1px;
 135   max-height: 0;
 136   transition: min-height 170ms ease-out, max-height 170ms ease-out, visibility 170ms linear;
 137 }
 138
 139 @media (-moz-mac-graphite-theme: 0) and (-moz-mac-lion-theme: 0) {
 140   /* This is a hackish workaround to exclude most of Mac OS until bug 1060941 gets fixed. */
 141   /* Indent also due to non-applicable aero rule in original Windows theme. */
 142   #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme),
 143   #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme) {
 144     /* like menubar */
 145     background-color: #6000CF;
 146     color: #FF9F00;
 147   }
 148
 149   #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme):-moz-window-inactive,
 150   #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme):-moz-window-inactive {
 151     background-color: #8050B0;
 152     color: #FF9F00;
 153   }
 154
 155   #main-window[tabsintitlebar] #main-menubar > menu:not(:-moz-lwtheme) {
 156     /*color: inherit;*/
 157   }
 158
 159   #main-window[tabsintitlebar] #titlebar:-moz-lwtheme {
 160     visibility: hidden;
 161   }
 162
 163   #main-window[tabsintitlebar] #titlebar-content:-moz-lwtheme {
 164     -moz-binding: url("chrome://global/content/bindings/general.xml#windowdragbox");
 165     visibility: visible;
 166   }
 167 }
 168
 169 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
 170   /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
 171   #titlebar-buttonbox > .titlebar-button {
 172     display: none;
 173   }
 174 }
 175
 176 #nav-bar {
 177   /* Position the toolbar above the bottom of background tabs */
 178   position: relative;
 179   z-index: 1;
 180 }
 181
 182 #personal-bookmarks {
 183 /*  min-height: 24px; */
 184 }
 185
 186 #PersonalToolbar > #home-button {
 187   -moz-box-orient: horizontal;
 188 }
 189
 190 #PersonalToolbar > #home-button > .toolbarbutton-text {
 191   display: block;
 192 }
 193
 194 #print-preview-toolbar:not(:-moz-lwtheme) {
 195   /* -moz-appearance: toolbox; */
 196 }
 197
 198 #browser-bottombox:not(:-moz-lwtheme) {
 199 }
 200
 201 /* ::::: titlebar ::::: */
 202
 203 #titlebar {
 204   /* like menubar */
 205   background-color: #6000CF;
 206   color: #FF9F00;
 207 }
 208 #titlebar:-moz-window-inactive {
 209   background-color: #8050B0;
 210   color: #FF9F00;
 211 }
 212
 213 #main-window[sizemode="normal"] > #titlebar {
 214   margin-top: -3px;
 215   margin-bottom: 3px;
 216 }
 217
 218 #main-window[sizemode="maximized"] > #titlebar {
 219   margin-top: 4px;
 220 }
 221
 222 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
 223   /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
 224   #main-window[sizemode="normal"] > #titlebar,
 225   #main-window[sizemode="maximized"] > #titlebar {
 226     margin-top: 19px;
 227     /* There is a margin-bottom set to -23 by code. */
 228   }
 229 }
 230
 231 /* The button box must appear on top of the navigator-toolbox in order for
 232  * click and hover mouse events to work properly for the button in the restored
 233  * window state. Otherwise, elements in the navigator-toolbox, like the menubar,
 234  * can swallow those events. It will also place the buttons above the fog on
 235  * themes with Aero Glass.
 236  */
 237 #titlebar-buttonbox,
 238 #main-window[sizemode="maximized"] #titlebar-buttonbox {
 239   -moz-appearance: none;
 240   margin-top: 6px;
 241   margin-top: 4px;
 242   margin-inline-end: 3px;
 243   z-index: 1;
 244 }
 245
 246 .titlebar-placeholder[type="appmenu-button"] {
 247   margin-left: 4px;
 248 }
 249
 250 .titlebar-placeholder[type="caption-buttons"] {
 251   margin-left: 10px;
 252 }
 253
 254 /* titlebar command buttons */
 255 #titlebar-min {
 256   list-style-image: url("chrome://browser/skin/caption-buttons.svg#minimize");
 257 }
 258
 259 #titlebar-min:hover {
 260   list-style-image: url("chrome://browser/skin/caption-buttons.svg#minimize-hover");
 261 }
 262
 263 #titlebar-max {
 264   list-style-image: url("chrome://browser/skin/caption-buttons.svg#maximize");
 265 }
 266
 267 #titlebar-max:hover {
 268   list-style-image: url("chrome://browser/skin/caption-buttons.svg#maximize-hover");
 269 }
 270
 271 #main-window[sizemode="maximized"] #titlebar-max {
 272   list-style-image: url("chrome://browser/skin/caption-buttons.svg#restore");
 273 }
 274
 275 #main-window[sizemode="maximized"] #titlebar-max:hover {
 276   list-style-image: url("chrome://browser/skin/caption-buttons.svg#restore-hover");
 277 }
 278
 279 #titlebar-close {
 280   list-style-image: url("chrome://browser/skin/caption-buttons.svg#close");
 281 }
 282
 283 #titlebar-close:hover {
 284   list-style-image: url("chrome://browser/skin/caption-buttons.svg#close-hover");
 285 }
 286
 287 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
 288   /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
 289   #titlebar-fullscreen-button {
 290     -moz-appearance: none;
 291     list-style-image: url("chrome://browser/skin/icons/mac-fullscreen-icon.png");
 292     -moz-image-region: rect(0px, 16px, 16px, 0px);
 293   }
 294
 295   #titlebar-fullscreen-button:hover {
 296     -moz-image-region: rect(0px, 32px, 16px, 16px);
 297   }
 298
 299   @media (min-resolution: 2dppx) {
 300     #titlebar-fullscreen-button {
 301       list-style-image: url("chrome://browser/skin/icons/mac-fullscreen-icon@2x.png");
 302       -moz-image-region: rect(0px, 32px, 32px, 0px);
 303     }
 304
 305     #titlebar-fullscreen-button:hover {
 306       -moz-image-region: rect(0px, 64px, 32px, 32px);
 307     }
 308   }
 309 }
 310
 311
 312 /* ::::: bookmark buttons ::::: */
 313
 314 toolbarbutton.bookmark-item:not(.subviewbutton),
 315 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder {
 316 /*  margin: 0;
 317   padding: 2px 3px;
 318   -moz-appearance: none;
 319   border: 1px solid transparent;*/
 320 }
 321
 322 toolbarbutton.bookmark-item:not(.subviewbutton):hover:not([disabled="true"]):not([open]) {
 323 /*  border-color: var(--toolbarbutton-hover-bordercolor);
 324   background: var(--toolbarbutton-hover-background);*/
 325 }
 326
 327 toolbarbutton.bookmark-item:not(.subviewbutton):hover:active:not([disabled="true"]),toolbarbutton.bookmark-item[open="true"] {
 328 /*  border-color: var(--toolbarbutton-active-bordercolor);
 329   box-shadow: var(--toolbarbutton-active-boxshadow);
 330   background: var(--toolbarbutton-active-background);*/
 331 }
 332
 333 .bookmark-item > .toolbarbutton-icon,
 334 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
 335   width: 16px;
 336   height: 16px;
 337   margin-inline-start: 1px;
 338   margin-inline-end: 2px;
 339   margin-top: 1px;
 340   margin-bottom: 1px;
 341 }
 342
 343 /* Force the display of the label for bookmarks */
 344 .bookmark-item > .toolbarbutton-text,
 345 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-text {
 346   display: -moz-box !important;
 347 }
 348
 349 .bookmark-item > .toolbarbutton-menu-dropmarker {
 350   display: none;
 351 }
 352
 353 #bookmarks-toolbar-placeholder {
 354   list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png") !important;
 355   -moz-box-orient: horizontal;
 356 }
 357
 358 toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-placeholder,
 359 #personal-bookmarks[cui-areatype="menu-panel"] > #bookmarks-toolbar-placeholder {
 360   list-style-image: url("chrome://browser/skin/places/bookmarksToolbar-menuPanel.png") !important;
 361 }
 362
 363 /* ----- BOOKMARK STAR ANIMATION ----- */
 364
 365 @keyframes animation-bookmarkAdded {
 366   from { transform: rotate(0deg) translateX(-16px) rotate(0deg) scale(1); opacity: 0; }
 367   60%  { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(2.2); opacity: 1; }
 368   80%  { opacity: 1; }
 369   to   { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(1); opacity: 0; }
 370 }
 371
 372 @keyframes animation-bookmarkPulse {
 373   from { transform: scale(1); }
 374   50%  { transform: scale(1.3); }
 375   to   { transform: scale(1); }
 376 }
 377
 378 #bookmarked-notification-container {
 379   min-height: 1px;
 380   min-width: 1px;
 381   height: 1px;
 382   margin-bottom: -1px;
 383   z-index: 5;
 384   position: relative;
 385 }
 386
 387 #bookmarked-notification {
 388   background-size: 16px;
 389   background-position: center;
 390   background-repeat: no-repeat;
 391   width: 16px;
 392   height: 16px;
 393   opacity: 0;
 394 }
 395
 396 #bookmarked-notification-dropmarker-anchor {
 397   z-index: -1;
 398   position: relative;
 399 }
 400
 401 #bookmarked-notification-dropmarker-icon {
 402   width: 18px;
 403   height: 18px;
 404   visibility: hidden;
 405 }
 406
 407 #bookmarked-notification-anchor[notification="finish"] > #bookmarked-notification {
 408   background-image: url("chrome://browser/skin/places/bookmarks-notification-finish.png");
 409   animation: animation-bookmarkAdded 800ms;
 410   animation-timing-function: ease, ease, ease;
 411 }
 412
 413 #bookmarks-menu-button[notification="finish"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
 414   list-style-image: none !important;
 415 }
 416
 417 #bookmarked-notification-dropmarker-anchor[notification="finish"] > #bookmarked-notification-dropmarker-icon {
 418   visibility: visible;
 419   animation: animation-bookmarkPulse 300ms;
 420   animation-delay: 600ms;
 421   animation-timing-function: ease-out;
 422 }
 423
 424 /* ::::: bookmark menus ::::: */
 425
 426 menu.bookmark-item,
 427 menuitem.bookmark-item {
 428   min-width: 0;
 429   max-width: 32em;
 430 }
 431
 432 .bookmark-item:not(.subviewbutton) > .menu-iconic-left {
 433   margin-top: 0;
 434   margin-bottom: 0;
 435 }
 436
 437 .bookmark-item > .menu-iconic-left > .menu-iconic-icon {
 438   padding-inline-start: 0px;
 439 }
 440
 441 /* ::::: bookmark items ::::: */
 442
 443 .bookmark-item  {
 444   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
 445   -moz-image-region: auto;
 446 }
 447
 448 .bookmark-item[container] {
 449   list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
 450   -moz-image-region: auto;
 451 }
 452
 453 .bookmark-item[container][open] {
 454   list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
 455   -moz-image-region: auto;
 456 }
 457
 458 .bookmark-item[container][livemark] {
 459   list-style-image: url("chrome://communicator/skin/bookmarks/livemark-folder.png");
 460   -moz-image-region: auto;
 461 }
 462
 463 .bookmark-item[container][livemark] .bookmark-item {
 464   list-style-image: url("chrome://communicator/skin/bookmarks/livemark-item.png");
 465   -moz-image-region: rect(0px, 16px, 16px, 0px);
 466 }
 467
 468 .bookmark-item[container][livemark] .bookmark-item[visited] {
 469   -moz-image-region: rect(0px, 32px, 16px, 16px);
 470 }
 471
 472 .bookmark-item[container][query] {
 473   list-style-image: url("chrome://communicator/skin/bookmarks/query.png");
 474   -moz-image-region: auto;
 475 }
 476
 477 .bookmark-item[query][tagContainer] {
 478   list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
 479   -moz-image-region: auto;
 480 }
 481
 482 .bookmark-item[query][dayContainer] {
 483   list-style-image: url("chrome://communicator/skin/history/calendar.png");
 484   -moz-image-region: auto;
 485 }
 486
 487 .bookmark-item[query][hostContainer] {
 488   list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
 489   -moz-image-region: auto;
 490 }
 491
 492 .bookmark-item[query][hostContainer][open] {
 493   list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
 494   -moz-image-region: auto;
 495 }
 496
 497 .bookmark-item[cutting] > .toolbarbutton-icon,
 498 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-icon {
 499   opacity: 0.5;
 500 }
 501
 502 .bookmark-item[cutting] > .toolbarbutton-text,
 503 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-text {
 504   opacity: 0.7;
 505 }
 506
 507 /* ::::: primary toolbar buttons ::::: */
 508
 509 /* === BEGIN toolbarbuttons.inc.css === */
 510
 511 /* Whole section of this included file: */
 512 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
 513           #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
 514           #social-share-button, #open-file-button, #find-button, #developer-button,
 515           #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
 516           #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
 517           #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
 518           #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu),
 519 #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
 520   list-style-image: url("chrome://browser/skin/ToolbarFx.png");
 521 }
 522
 523 #back-button {
 524   -moz-image-region: rect(0, 36px, 18px, 18px);
 525 }
 526
 527 #back-button:hover:not([disabled="true"]) {
 528   -moz-image-region: rect(18px, 36px, 36px, 18px);
 529 }
 530
 531 #back-button[disabled="true"] {
 532   -moz-image-region: rect(36px, 36px, 54px, 18px);
 533 }
 534
 535 #forward-button {
 536   -moz-image-region: rect(0, 72px, 18px, 54px);
 537 }
 538
 539 #forward-button:hover:not([disabled="true"]) {
 540   -moz-image-region: rect(18px, 72px, 36px, 54px);
 541 }
 542
 543 #forward-button[disabled="true"] {
 544   -moz-image-region: rect(36px, 72px, 54px, 54px);
 545 }
 546
 547 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
 548 #forward-button:-moz-locale-dir(rtl) {
 549   transform: scaleX(-1);
 550 }
 551
 552 #home-button[cui-areatype="toolbar"] {
 553   -moz-image-region: rect(0, 126px, 18px, 108px);
 554 }
 555
 556 #home-button[cui-areatype="toolbar"]:hover {
 557   -moz-image-region: rect(18px, 126px, 36px, 108px);
 558 }
 559
 560 #bookmarks-menu-button[cui-areatype="toolbar"] {
 561   -moz-image-region: rect(0, 144px, 18px, 126px);
 562 }
 563
 564 #bookmarks-menu-button[cui-areatype="toolbar"]:hover,
 565 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] {
 566   -moz-image-region: rect(18px, 144px, 36px, 126px);
 567 }
 568
 569 /* When "new tab" page shows up, the menubutton-button (star button) is disabled */
 570 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button[disabled="true"] {
 571   -moz-image-region: rect(36px, 144px, 54px, 126px) !important;
 572   background-color: transparent !important;
 573 }
 574
 575 #bookmarks-menu-button[cui-areatype="toolbar"][starred] {
 576   -moz-image-region: rect(0, 162px, 18px, 144px);
 577 }
 578
 579 #bookmarks-menu-button[cui-areatype="toolbar"][starred]:hover,
 580 #bookmarks-menu-button[cui-areatype="toolbar"][starred][open="true"],
 581 #bookmarks-menu-button[cui-areatype="toolbar"][starred] > .toolbarbutton-menubutton-button[open="true"] {
 582   /* When starred and clicked (for edit/delete dialog),
 583    * then only the menubutton-button itself is open, but not the whole menubutton. */
 584   -moz-image-region: rect(18px, 162px, 36px, 144px);
 585 }
 586
 587 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
 588   -moz-image-region: rect(0, 630px, 18px, 612px);
 589 }
 590
 591 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker {
 592   padding: 1px;
 593   -moz-box-align: center;
 594 }
 595
 596 #bookmarks-menu-button[cui-areatype="toolbar"]:hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
 597 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
 598   -moz-image-region: rect(18px, 630px, 36px, 612px);
 599 }
 600
 601 #bookmarks-menu-button[cui-areatype="toolbar"]:hover:active > .toolbarbutton-menubutton-dropmarker,
 602 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker {
 603   padding-top: 2px;
 604   padding-bottom: 0px;
 605   padding-inline-start: 2px;
 606   padding-inline-end: 0px;
 607 }
 608
 609 #history-panelmenu[cui-areatype="toolbar"] {
 610   -moz-image-region: rect(0, 180px, 18px, 162px);
 611 }
 612
 613 #history-panelmenu[cui-areatype="toolbar"]:hover,
 614 #history-panelmenu[cui-areatype="toolbar"][open="true"] {
 615   -moz-image-region: rect(18px, 180px, 36px, 162px);
 616 }
 617
 618 #downloads-button[cui-areatype="toolbar"] {
 619   -moz-image-region: rect(0, 198px, 18px, 180px);
 620 }
 621
 622 #downloads-button[cui-areatype="toolbar"]:hover,
 623 #downloads-button[cui-areatype="toolbar"][open="true"] {
 624   -moz-image-region: rect(18px, 198px, 36px, 180px);
 625 }
 626
 627 #add-ons-button[cui-areatype="toolbar"] {
 628   -moz-image-region: rect(0, 216px, 18px, 198px);
 629 }
 630
 631 #add-ons-button[cui-areatype="toolbar"]:hover {
 632   -moz-image-region: rect(18px, 216px, 36px, 198px);
 633 }
 634
 635 #open-file-button[cui-areatype="toolbar"] {
 636   -moz-image-region: rect(0, 234px, 18px, 216px);
 637 }
 638
 639 #open-file-button[cui-areatype="toolbar"]:hover {
 640   -moz-image-region: rect(18px, 234px, 36px, 216px);
 641 }
 642
 643 #save-page-button[cui-areatype="toolbar"] {
 644   -moz-image-region: rect(0, 252px, 18px, 234px);
 645 }
 646
 647 #save-page-button[cui-areatype="toolbar"]:hover {
 648   -moz-image-region: rect(18px, 252px, 36px, 234px);
 649 }
 650
 651 #sync-button[cui-areatype="toolbar"] {
 652   -moz-image-region: rect(0, 792px, 18px, 774px);
 653 }
 654
 655 #sync-button[cui-areatype="toolbar"]:hover {
 656   -moz-image-region: rect(18px, 792px, 36px, 774px);
 657 }
 658
 659 #containers-panelmenu[cui-areatype="toolbar"] {
 660   -moz-image-region: rect(0, 810px, 18px, 792px);
 661 }
 662
 663 #containers-panelmenu[cui-areatype="toolbar"]:hover {
 664   -moz-image-region: rect(18px, 810px, 36px, 792px);
 665 }
 666
 667 #feed-button[cui-areatype="toolbar"] {
 668   -moz-image-region: rect(0, 288px, 18px, 270px);
 669 }
 670
 671 #feed-button[cui-areatype="menu-panel"][panel-multiview-anchor=true],
 672 #feed-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
 673   -moz-image-region: rect(18px, 288px, 36px, 270px);
 674 }
 675
 676 #feed-button[cui-areatype="toolbar"][disabled="true"] {
 677   -moz-image-region: rect(36px, 288px, 54px, 270px);
 678 }
 679
 680 #social-share-button[cui-areatype="toolbar"] {
 681   -moz-image-region: rect(0px, 306px, 18px, 288px);
 682 }
 683
 684 #social-share-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
 685 #social-share-button[cui-areatype="toolbar"][open="true"] {
 686   -moz-image-region: rect(18px, 306px, 36px, 288px);
 687 }
 688
 689 #social-share-button[cui-areatype="toolbar"][disabled="true"] {
 690   -moz-image-region: rect(36px, 306px, 54px, 288px);
 691 }
 692
 693 #characterencoding-button[cui-areatype="toolbar"] {
 694   -moz-image-region: rect(0, 324px, 18px, 306px);
 695 }
 696
 697 #characterencoding-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
 698 #characterencoding-button[cui-areatype="toolbar"][open="true"] {
 699   -moz-image-region: rect(18px, 324px, 36px, 306px);
 700 }
 701
 702 #characterencoding-button[cui-areatype="toolbar"][disabled="true"] {
 703   -moz-image-region: rect(36px, 324px, 54px, 306px);
 704 }
 705
 706 #new-window-button[cui-areatype="toolbar"] {
 707   -moz-image-region: rect(0, 342px, 18px, 324px);
 708 }
 709
 710 #new-window-button[cui-areatype="toolbar"]:hover {
 711   -moz-image-region: rect(18px, 342px, 36px, 324px);
 712 }
 713
 714 #e10s-button[cui-areatype="toolbar"] {
 715   -moz-image-region: rect(0, 342px, 18px, 324px);
 716 }
 717
 718 #e10s-button[cui-areatype="toolbar"]:hover {
 719   -moz-image-region: rect(18px, 342px, 36px, 324px);
 720 }
 721
 722 #e10s-button > .toolbarbutton-icon {
 723   transform: scaleY(-1);
 724 }
 725
 726 #new-tab-button[cui-areatype="toolbar"] {
 727   -moz-image-region: rect(0, 360px, 18px, 342px);
 728 }
 729
 730 #new-tab-button[cui-areatype="toolbar"]:hover {
 731   -moz-image-region: rect(18px, 360px, 36px, 342px);
 732 }
 733
 734 #privatebrowsing-button[cui-areatype="toolbar"] {
 735   -moz-image-region: rect(0, 378px, 18px, 360px);
 736 }
 737
 738 #privatebrowsing-button[cui-areatype="toolbar"]:hover {
 739   -moz-image-region: rect(18px, 378px, 36px, 360px);
 740 }
 741
 742 #find-button[cui-areatype="toolbar"] {
 743   -moz-image-region: rect(0, 396px, 18px, 378px);
 744 }
 745
 746 #find-button[cui-areatype="toolbar"]:hover {
 747   -moz-image-region: rect(18px, 396px, 36px, 378px);
 748 }
 749
 750 #print-button[cui-areatype="toolbar"] {
 751   -moz-image-region: rect(0, 414px, 18px, 396px);
 752 }
 753
 754 #print-button[cui-areatype="toolbar"]:hover {
 755   -moz-image-region: rect(18px, 414px, 36px, 396px);
 756 }
 757
 758 #fullscreen-button[cui-areatype="toolbar"] {
 759   -moz-image-region: rect(0, 432px, 18px, 414px);
 760 }
 761
 762 #fullscreen-button[cui-areatype="toolbar"]:hover {
 763   -moz-image-region: rect(18px, 432px, 36px, 414px);
 764 }
 765
 766 #developer-button[cui-areatype="toolbar"] {
 767   -moz-image-region: rect(0, 450px, 18px, 432px);
 768 }
 769
 770 #developer-button[cui-areatype="toolbar"]:hover,
 771 #developer-button[cui-areatype="toolbar"][open="true"] {
 772   -moz-image-region: rect(18px, 450px, 36px, 432px);
 773 }
 774
 775 #preferences-button[cui-areatype="toolbar"] {
 776   -moz-image-region: rect(0, 468px, 18px, 450px);
 777 }
 778
 779 #preferences-button[cui-areatype="toolbar"]:hover {
 780   -moz-image-region: rect(18px, 468px, 36px, 450px);
 781 }
 782
 783 #PanelUI-menu-button {
 784   -moz-image-region: rect(0, 486px, 18px, 468px);
 785 }
 786
 787 #PanelUI-menu-button:hover,
 788 #PanelUI-menu-button[open="true"] {
 789   -moz-image-region: rect(18px, 486px, 36px, 468px);
 790 }
 791
 792 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button {
 793   -moz-image-region: rect(0, 504px, 18px, 486px);
 794 }
 795
 796 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button:hover:not([disabled="true"]) {
 797   -moz-image-region: rect(18px, 504px, 36px, 486px);
 798 }
 799
 800 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button[disabled="true"] {
 801   -moz-image-region: rect(36px, 504px, 54px, 486px);
 802 }
 803
 804 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button {
 805   -moz-image-region: rect(0, 522px, 18px, 504px);
 806 }
 807
 808 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button:hover:not([disabled="true"]) {
 809   -moz-image-region: rect(18px, 522px, 36px, 504px);
 810 }
 811
 812 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button[disabled="true"] {
 813   -moz-image-region: rect(36px, 522px, 54px, 504px);
 814 }
 815
 816 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button {
 817   -moz-image-region: rect(0, 540px, 18px, 522px);
 818 }
 819
 820 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button:hover:not([disabled="true"]) {
 821   -moz-image-region: rect(18px, 540px, 36px, 522px);
 822 }
 823
 824 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button[disabled="true"] {
 825   -moz-image-region: rect(36px, 540px, 54px, 522px);
 826 }
 827
 828 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button {
 829   -moz-image-region: rect(0, 558px, 18px, 540px);
 830 }
 831
 832 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button:hover:not([disabled="true"]) {
 833   -moz-image-region: rect(18px, 558px, 36px, 540px);
 834 }
 835
 836 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button[disabled="true"] {
 837   -moz-image-region: rect(36px, 558px, 54px, 540px);
 838 }
 839
 840 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button {
 841   -moz-image-region: rect(0, 576px, 18px, 558px);
 842 }
 843
 844 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button:hover:not([disabled="true"]) {
 845   -moz-image-region: rect(18px, 576px, 36px, 558px);
 846 }
 847
 848 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button[disabled="true"] {
 849   -moz-image-region: rect(36px, 576px, 54px, 558px);
 850 }
 851
 852 #nav-bar-overflow-button {
 853   -moz-image-region: rect(0, 612px, 18px, 594px);
 854 }
 855
 856 #nav-bar-overflow-button:hover,
 857 #nav-bar-overflow-button[open="true"] {
 858   -moz-image-region: rect(18px, 612px, 36px, 594px);
 859 }
 860
 861 #nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
 862   transform: scaleX(-1);
 863 }
 864
 865 #tabview-button {
 866   -moz-image-region: rect(0, 648px, 18px, 630px);
 867 }
 868
 869 #tabview-button:hover {
 870   -moz-image-region: rect(18px, 648px, 36px, 630px);
 871 }
 872
 873 #email-link-button[cui-areatype="toolbar"] {
 874   -moz-image-region: rect(0, 666px, 18px, 648px);
 875 }
 876
 877 #email-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
 878   -moz-image-region: rect(18px, 666px, 36px, 648px);
 879 }
 880
 881 #email-button[cui-areatype="toolbar"][disabled="true"] {
 882   -moz-image-region: rect(36px, 666px, 54px, 648px);
 883 }
 884
 885 #sidebar-button[cui-areatype="toolbar"] {
 886   -moz-image-region: rect(0, 684px, 18px, 666px);
 887 }
 888
 889 #sidebar-button[cui-areatype="toolbar"]:hover {
 890   -moz-image-region: rect(18px, 684px, 36px, 666px);
 891 }
 892
 893 #panic-button[cui-areatype="toolbar"] {
 894   -moz-image-region: rect(0, 702px, 18px, 684px);
 895 }
 896
 897 #panic-button[cui-areatype="toolbar"]:hover,
 898 #panic-button[cui-areatype="toolbar"][open] {
 899   -moz-image-region: rect(18px, 702px, 36px, 684px);
 900 }
 901
 902 #panic-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
 903   transform: scaleX(-1);
 904 }
 905
 906 #webide-button[cui-areatype="toolbar"] {
 907   -moz-image-region: rect(0, 738px, 18px, 720px);
 908 }
 909
 910 #webide-button[cui-areatype="toolbar"]:hover {
 911   -moz-image-region: rect(18px, 738px, 36px, 720px);
 912 }
 913
 914 /* === END toolbarbuttons.inc.css === */
 915
 916 /* === BEGIN menupanel.inc.css === */
 917
 918 /* Menu panel and palette styles */
 919
 920 :root {
 921    /* avoid aero overrides with changed filenames */
 922   --menupanel-list-style-image: url(chrome://browser/skin/menuPanelFx.png);
 923   --menupanel-small-list-style-image: url(chrome://browser/skin/menuPanelFx-small.png);
 924 }
 925
 926 toolbaritem[sdkstylewidget="true"] > toolbarbutton,
 927 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
 928           #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
 929           #social-share-button, #open-file-button, #find-button, #developer-button,
 930           #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
 931           #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
 932           #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
 933           #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"],
 934 toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
 935           #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
 936           #social-share-button, #open-file-button, #find-button, #developer-button,
 937           #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
 938           #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
 939           #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
 940           #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu) {
 941   list-style-image: var(--menupanel-list-style-image);
 942 }
 943
 944 #home-button[cui-areatype="menu-panel"],
 945 toolbarpaletteitem[place="palette"] > #home-button {
 946   -moz-image-region: rect(0px, 128px, 32px, 96px);
 947 }
 948
 949 #home-button[cui-areatype="menu-panel"]:hover,
 950 toolbarpaletteitem[place="palette"] > #home-button:hover {
 951   -moz-image-region: rect(32px, 128px, 64px, 96px);
 952 }
 953
 954 #bookmarks-menu-button[cui-areatype="menu-panel"],
 955 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button {
 956   -moz-image-region: rect(0px, 192px, 32px, 160px);
 957 }
 958
 959 #bookmarks-menu-button[cui-areatype="menu-panel"]:hover,
 960 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button:hover {
 961   -moz-image-region: rect(32px, 192px, 64px, 160px);
 962 }
 963
 964 #bookmarks-menu-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
 965   -moz-image-region: rect(32px, 192px, 64px, 160px);
 966 }
 967
 968 #history-panelmenu[cui-areatype="menu-panel"],
 969 toolbarpaletteitem[place="palette"] > #history-panelmenu {
 970   -moz-image-region: rect(0px, 224px, 32px, 192px);
 971 }
 972
 973 #history-panelmenu[cui-areatype="menu-panel"]:hover,
 974 toolbarpaletteitem[place="palette"] > #history-panelmenu:hover {
 975   -moz-image-region: rect(32px, 224px, 64px, 192px);
 976 }
 977
 978 #history-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
 979   -moz-image-region: rect(32px, 224px, 64px, 192px);
 980 }
 981
 982 #downloads-button[cui-areatype="menu-panel"],
 983 toolbarpaletteitem[place="palette"] > #downloads-button {
 984   -moz-image-region: rect(0px, 256px, 32px, 224px);
 985 }
 986
 987 #downloads-button[cui-areatype="menu-panel"]:hover,
 988 toolbarpaletteitem[place="palette"] > #downloads-button:hover {
 989   -moz-image-region: rect(32px, 256px, 64px, 224px);
 990 }
 991
 992 #add-ons-button[cui-areatype="menu-panel"],
 993 toolbarpaletteitem[place="palette"] > #add-ons-button {
 994   -moz-image-region: rect(0px, 288px, 32px, 256px);
 995 }
 996
 997 #add-ons-button[cui-areatype="menu-panel"]:hover,
 998 toolbarpaletteitem[place="palette"] > #add-ons-button:hover {
 999   -moz-image-region: rect(32px, 288px, 64px, 256px);
1000 }
1001
1002 #open-file-button[cui-areatype="menu-panel"],
1003 toolbarpaletteitem[place="palette"] > #open-file-button {
1004   -moz-image-region: rect(0px, 320px, 32px, 288px);
1005 }
1006
1007 #open-file-button[cui-areatype="menu-panel"]:hover,
1008 toolbarpaletteitem[place="palette"] > #open-file-button:hover {
1009   -moz-image-region: rect(32px, 320px, 64px, 288px);
1010 }
1011
1012 #save-page-button[cui-areatype="menu-panel"],
1013 toolbarpaletteitem[place="palette"] > #save-page-button {
1014   -moz-image-region: rect(0px, 352px, 32px, 320px);
1015 }
1016
1017 #save-page-button[cui-areatype="menu-panel"]:hover,
1018 toolbarpaletteitem[place="palette"] > #save-page-button:hover {
1019   -moz-image-region: rect(32px, 352px, 64px, 320px);
1020 }
1021
1022 #sync-button[cui-areatype="menu-panel"],
1023 toolbarpaletteitem[place="palette"] > #sync-button {
1024   -moz-image-region: rect(0px, 1024px, 32px, 992px);
1025 }
1026
1027 #sync-button[cui-areatype="menu-panel"]:hover,
1028 toolbarpaletteitem[place="palette"] > #sync-button:hover {
1029   -moz-image-region: rect(32px, 1024px, 64px, 992px);
1030 }
1031
1032 #containers-panelmenu[cui-areatype="menu-panel"],
1033 toolbarpaletteitem[place="palette"] > #containers-panelmenu {
1034   -moz-image-region: rect(0px, 1056px, 32px, 1024px);
1035 }
1036
1037 #containers-panelmenu[cui-areatype="menu-panel"]:hover,
1038 toolbarpaletteitem[place="palette"] > #containers-panelmenu:hover,
1039 #containers-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1040   -moz-image-region: rect(32px, 1056px, 64px, 1024px);
1041 }
1042
1043 #feed-button[cui-areatype="menu-panel"],
1044 toolbarpaletteitem[place="palette"] > #feed-button {
1045   -moz-image-region: rect(0px, 416px, 32px, 384px);
1046 }
1047
1048 #feed-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1049 toolbarpaletteitem[place="palette"] > #feed-button:hover:not([disabled="true"]) {
1050   -moz-image-region: rect(32px, 416px, 64px, 384px);
1051 }
1052
1053 #feed-button[cui-areatype="menu-panel"][disabled="true"],
1054 toolbarpaletteitem[place="palette"] > #feed-button[disabled="true"] {
1055   -moz-image-region: rect(64px, 416px, 96px, 384px);
1056 }
1057
1058 #social-share-button[cui-areatype="menu-panel"],
1059 toolbarpaletteitem[place="palette"] > #social-share-button {
1060   -moz-image-region: rect(0px, 448px, 32px, 416px);
1061 }
1062
1063 #social-share-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1064 toolbarpaletteitem[place="palette"] > #social-share-button:hover:not([disabled="true"]) {
1065   -moz-image-region: rect(32px, 448px, 64px, 416px);
1066 }
1067
1068 #social-share-button[cui-areatype="menu-panel"][disabled="true"],
1069 toolbarpaletteitem[place="palette"] > #social-share-button[disabled="true"] {
1070   -moz-image-region: rect(64px, 448px, 96px, 416px);
1071 }
1072
1073 #characterencoding-button[cui-areatype="menu-panel"],
1074 toolbarpaletteitem[place="palette"] > #characterencoding-button {
1075   -moz-image-region: rect(0px, 480px, 32px, 448px);
1076 }
1077
1078 #characterencoding-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1079 toolbarpaletteitem[place="palette"] > #characterencoding-button:hover:not([disabled="true"]) {
1080   -moz-image-region: rect(32px, 480px, 64px, 448px);
1081 }
1082
1083 #characterencoding-button[cui-areatype="menu-panel"][disabled="true"],
1084 toolbarpaletteitem[place="palette"] > #characterencoding-button[disabled="true"] {
1085   -moz-image-region: rect(64px, 480px, 96px, 448px);
1086 }
1087
1088 #characterencoding-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1089   -moz-image-region: rect(32px, 480px, 64px, 448px);
1090 }
1091
1092 #new-window-button[cui-areatype="menu-panel"],
1093 toolbarpaletteitem[place="palette"] > #new-window-button {
1094   -moz-image-region: rect(0px, 512px, 32px, 480px);
1095 }
1096
1097 #new-window-button[cui-areatype="menu-panel"]:hover,
1098 toolbarpaletteitem[place="palette"] > #new-window-button:hover {
1099   -moz-image-region: rect(32px, 512px, 64px, 480px);
1100 }
1101
1102 #e10s-button[cui-areatype="menu-panel"],
1103 toolbarpaletteitem[place="palette"] > #e10s-button {
1104   -moz-image-region: rect(0px, 512px, 32px, 480px);
1105 }
1106
1107 #e10s-button[cui-areatype="menu-panel"]:hover,
1108 toolbarpaletteitem[place="palette"] > #e10s-button:hover {
1109   -moz-image-region: rect(32px, 512px, 64px, 480px);
1110 }
1111
1112 #new-tab-button[cui-areatype="menu-panel"],
1113 toolbarpaletteitem[place="palette"] > #new-tab-button {
1114   -moz-image-region: rect(0px, 544px, 32px, 512px);
1115 }
1116
1117 #new-tab-button[cui-areatype="menu-panel"]:hover,
1118 toolbarpaletteitem[place="palette"] > #new-tab-button:hover {
1119   -moz-image-region: rect(32px, 544px, 64px, 512px);
1120 }
1121
1122 #privatebrowsing-button[cui-areatype="menu-panel"],
1123 toolbarpaletteitem[place="palette"] > #privatebrowsing-button {
1124   -moz-image-region: rect(0px, 576px, 32px, 544px);
1125 }
1126
1127 #privatebrowsing-button[cui-areatype="menu-panel"]:hover,
1128 toolbarpaletteitem[place="palette"] > #privatebrowsing-button:hover {
1129   -moz-image-region: rect(32px, 576px, 64px, 544px);
1130 }
1131
1132 #tabview-button[cui-areatype="menu-panel"],
1133 toolbarpaletteitem[place="palette"] > #tabview-button {
1134   -moz-image-region: rect(0px, 608px, 32px, 576px);
1135 }
1136
1137 #tabview-button[cui-areatype="menu-panel"]:hover,
1138 toolbarpaletteitem[place="palette"] > #tabview-button:hover {
1139   -moz-image-region: rect(32px, 608px, 64px, 576px);
1140 }
1141
1142 #find-button[cui-areatype="menu-panel"],
1143 toolbarpaletteitem[place="palette"] > #find-button {
1144   -moz-image-region: rect(0px, 640px, 32px, 608px);
1145 }
1146
1147 #find-button[cui-areatype="menu-panel"]:hover,
1148 toolbarpaletteitem[place="palette"] > #find-button:hover {
1149   -moz-image-region: rect(32px, 640px, 64px, 608px);
1150 }
1151
1152 #print-button[cui-areatype="menu-panel"],
1153 toolbarpaletteitem[place="palette"] > #print-button {
1154   -moz-image-region: rect(0px, 672px, 32px, 640px);
1155 }
1156
1157 #print-button[cui-areatype="menu-panel"]:hover,
1158 toolbarpaletteitem[place="palette"] > #print-button:hover {
1159   -moz-image-region: rect(32px, 672px, 64px, 640px);
1160 }
1161
1162 #fullscreen-button[cui-areatype="menu-panel"],
1163 toolbarpaletteitem[place="palette"] > #fullscreen-button {
1164   -moz-image-region: rect(0px, 704px, 32px, 672px);
1165 }
1166
1167 #fullscreen-button[cui-areatype="menu-panel"]:hover,
1168 toolbarpaletteitem[place="palette"] > #fullscreen-button:hover {
1169   -moz-image-region: rect(32px, 704px, 64px, 672px);
1170 }
1171
1172 #developer-button[cui-areatype="menu-panel"],
1173 toolbarpaletteitem[place="palette"] > #developer-button {
1174   -moz-image-region: rect(0px, 736px, 32px, 704px);
1175 }
1176
1177 #developer-button[cui-areatype="menu-panel"]:hover,
1178 toolbarpaletteitem[place="palette"] > #developer-button:hover {
1179   -moz-image-region: rect(32px, 736px, 64px, 704px);
1180 }
1181
1182 #developer-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1183   -moz-image-region: rect(32px, 736px, 64px, 704px);
1184 }
1185
1186 #preferences-button[cui-areatype="menu-panel"],
1187 toolbarpaletteitem[place="palette"] > #preferences-button {
1188   -moz-image-region: rect(0px, 768px, 32px, 736px);
1189 }
1190
1191 #preferences-button[cui-areatype="menu-panel"]:hover,
1192 toolbarpaletteitem[place="palette"] > #preferences-button:hover {
1193   -moz-image-region: rect(32px, 768px, 64px, 736px);
1194 }
1195
1196 #email-link-button[cui-areatype="menu-panel"],
1197 toolbarpaletteitem[place="palette"] > #email-link-button {
1198   -moz-image-region: rect(0, 800px, 32px, 768px);
1199 }
1200
1201 #email-link-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1202 toolbarpaletteitem[place="palette"] > #email-link-button:hover:not([disabled="true"]) {
1203   -moz-image-region: rect(32px, 800px, 64px, 768px);
1204 }
1205
1206 #email-link-button[cui-areatype="menu-panel"][disabled="true"],
1207 toolbarpaletteitem[place="palette"] > #email-link-button[disabled="true"] {
1208   -moz-image-region: rect(64px, 800px, 96px, 768px);
1209 }
1210
1211 #sidebar-button[cui-areatype="menu-panel"],
1212 toolbarpaletteitem[place="palette"] > #sidebar-button {
1213   -moz-image-region: rect(0, 864px, 32px, 832px);
1214 }
1215
1216 #sidebar-button[cui-areatype="menu-panel"]:hover,
1217 toolbarpaletteitem[place="palette"] > #sidebar-button:hover,
1218 #sidebar-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1219   -moz-image-region: rect(32px, 864px, 64px, 832px);
1220 }
1221
1222 #panic-button[cui-areatype="menu-panel"],
1223 toolbarpaletteitem[place="palette"] > #panic-button {
1224   -moz-image-region: rect(0, 896px, 32px, 864px);
1225 }
1226
1227 #panic-button[cui-areatype="menu-panel"]:hover,
1228 toolbarpaletteitem[place="palette"] > #panic-button:hover,
1229 #panic-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1230   -moz-image-region: rect(32px, 896px, 64px, 864px);
1231 }
1232
1233 #webide-button[cui-areatype="menu-panel"],
1234 toolbarpaletteitem[place="palette"] > #webide-button {
1235   -moz-image-region: rect(0px, 960px, 32px, 928px);
1236 }
1237
1238 #webide-button[cui-areatype="menu-panel"]:hover,
1239 toolbarpaletteitem[place="palette"] > #webide-button:hover {
1240   -moz-image-region: rect(32px, 960px, 64px, 928px);
1241 }
1242
1243 toolbaritem[sdkstylewidget="true"] > toolbarbutton {
1244   -moz-image-region: rect(0, 832px, 32px, 800px);
1245 }
1246
1247 /* Wide panel control icons */
1248
1249 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1250 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1251 toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton,
1252 toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton {
1253   list-style-image: var(--menupanel-small-list-style-image);
1254 }
1255
1256 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button,
1257 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button {
1258   -moz-image-region: rect(0px, 32px, 16px, 16px);
1259 }
1260
1261 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:hover:not([disabled="true"]),
1262 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button:hover:not([disabled="true"]) {
1263   -moz-image-region: rect(16px, 32px, 32px, 16px);
1264 }
1265
1266 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button[disabled="true"],
1267 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button[disabled="true"] {
1268   -moz-image-region: rect(32px, 32px, 48px, 16px);
1269 }
1270
1271 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
1272 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button {
1273   -moz-image-region: rect(0px, 48px, 16px, 32px);
1274 }
1275
1276 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button:hover:not([disabled="true"]),
1277 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button:hover:not([disabled="true"]) {
1278   -moz-image-region: rect(16px, 48px, 32px, 32px);
1279 }
1280
1281 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button[disabled="true"],
1282 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button[disabled="true"] {
1283   -moz-image-region: rect(32px, 48px, 48px, 32px);
1284 }
1285
1286 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button,
1287 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button {
1288   -moz-image-region: rect(0px, 64px, 16px, 48px);
1289 }
1290
1291 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:hover:not([disabled="true"]),
1292 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button:hover:not([disabled="true"]) {
1293   -moz-image-region: rect(16px, 64px, 32px, 48px);
1294 }
1295
1296 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button[disabled="true"],
1297 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button[disabled="true"] {
1298   -moz-image-region: rect(32px, 64px, 48px, 48px);
1299 }
1300
1301 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button,
1302 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button {
1303   -moz-image-region: rect(0px, 80px, 16px, 64px);
1304 }
1305
1306 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:hover:not([disabled="true"]),
1307 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button:hover:not([disabled="true"]) {
1308   -moz-image-region: rect(16px, 80px, 32px, 64px);
1309 }
1310
1311 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button[disabled="true"],
1312 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button[disabled="true"] {
1313   -moz-image-region: rect(32px, 80px, 48px, 64px);
1314 }
1315
1316 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button,
1317 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button {
1318   -moz-image-region: rect(0px, 96px, 16px, 80px);
1319 }
1320
1321 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:hover:not([disabled="true"]),
1322 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button:hover:not([disabled="true"]) {
1323   -moz-image-region: rect(16px, 96px, 32px, 80px);
1324 }
1325
1326 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button[disabled="true"],
1327 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button[disabled="true"] {
1328   -moz-image-region: rect(32px, 96px, 48px, 80px);
1329 }
1330
1331 #add-share-provider {
1332   list-style-image: var(--menupanel-small-list-style-image);
1333   -moz-image-region: rect(0px, 96px, 16px, 80px);
1334 }
1335
1336 /* === END menupanel.inc.css === */
1337
1338 .toolbarbutton-1:not([type="menu-button"]) {
1339   -moz-box-orient: vertical;
1340 }
1341
1342 .toolbarbutton-1,
1343 .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1344 /*  min-width: 36px;
1345   min-height: 36px;*/
1346 }
1347
1348 .toolbarbutton-1,
1349 .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1350 .toolbarbutton-1[disabled="true"]:hover:active,
1351 .toolbarbutton-1[disabled="true"]:hover:active > .toolbarbutton-menubutton-button {
1352   padding: 1px 2px;
1353 }
1354
1355 .toolbarbutton-1:hover:active,
1356 .toolbarbutton-1[open="true"],
1357 .toolbarbutton-1:hover:active > .toolbarbutton-menubutton-button {
1358   padding-top: 2px;
1359   padding-bottom: 0px;
1360   padding-inline-start: 3px;
1361   padding-inline-end: 1px;
1362 }
1363
1364 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon,
1365 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker,
1366 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker,
1367 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1368 #main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled=true] > .toolbarbutton-icon {
1369 }
1370
1371 .toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
1372 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1373 }
1374
1375 toolbar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker:-moz-lwtheme-brighttext,
1376 toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-lwtheme-brighttext {
1377 }
1378
1379 .toolbarbutton-1 > .toolbarbutton-icon,
1380 .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1381 }
1382
1383 .findbar-button,
1384 #nav-bar .toolbarbutton-1,
1385 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1386 }
1387
1388 #nav-bar .toolbarbutton-1:not([type=menu-button]),
1389 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1390 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1391 }
1392
1393 #nav-bar #PanelUI-menu-button {
1394 /*  padding-inline-start: 7px;
1395   padding-inline-end: 5px;*/
1396 }
1397
1398 #nav-bar .toolbarbutton-1[type=panel],
1399 #nav-bar .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#PanelUI-menu-button) {
1400 /*  padding-left: 5px;
1401   padding-right: 5px;*/
1402 }
1403
1404 #nav-bar .toolbarbutton-1 > menupopup {
1405 /*  margin-top: -3px;*/
1406 }
1407
1408 #nav-bar .toolbarbutton-1 > menupopup.cui-widget-panel {
1409   margin-top: -4px;
1410 }
1411
1412 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1413 /*  padding-inline-end: 0;*/
1414 }
1415
1416 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1417 /*  padding-inline-start: 0;
1418   -moz-box-align: center;*/
1419 }
1420
1421 .findbar-button > .toolbarbutton-text,
1422 #nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
1423 #nav-bar .toolbarbutton-1 > .toolbarbutton-text,
1424 #nav-bar .toolbarbutton-1 > .toolbarbutton-badge-stack,
1425 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1426 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1427 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1428 /*  padding: 2px 6px;
1429   border: 1px solid;
1430   border-color: transparent;
1431   transition-property: background-color, border-color;
1432   transition-duration: 150ms;*/
1433 }
1434 /*
1435 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-icon,
1436 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-badge-stack,
1437 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1438    padding: calc(var(--toolbarbutton-vertical-inner-padding) + 1px) 7px;
1439 }
1440 */
1441
1442 /* Help SDK icons fit: */
1443 toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon,
1444 toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
1445   width: 16px;
1446 }
1447
1448 #nav-bar toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
1449   /* XXXgijs box models strike again: this is 16px + 2 * 7px padding + 2 * 1px border (from the rules above) */
1450   width: 32px;
1451 }
1452
1453 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
1454 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-badge-stack,
1455 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button) > .toolbarbutton-icon,
1456 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button) > .toolbarbutton-badge-stack,
1457 #nav-bar .toolbarbutton-1[type=menu] > .toolbarbutton-text /* hack for add-ons that forcefully display the label */ {
1458 /*  padding-inline-end: 17px;*/
1459 }
1460
1461 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
1462 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button) > .toolbarbutton-icon {
1463   /* horizontal padding + border + icon width */
1464 /*  max-width: 43px;*/
1465 }
1466
1467 #nav-bar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
1468 }
1469
1470 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1471 }
1472
1473 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1474 }
1475
1476 #nav-bar .toolbaritem-combined-buttons {
1477 /*  margin-left: 2px;
1478   margin-right: 2px;*/
1479 }
1480
1481 #nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1 {
1482 /*  padding-left: 0;
1483   padding-right: 0;*/
1484 }
1485
1486 #nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before,
1487 #nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1:-moz-any(:not(:hover):not([open]),[disabled=true]) + .toolbarbutton-1:-moz-any(:not(:hover):not([open]),[disabled=true])::before {
1488 /*
1489   content: "";
1490   display: -moz-box;
1491   width: 1px;
1492   height: 16px;
1493   margin-inline-end: -1px;
1494 */
1495 }
1496
1497 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1498 }
1499
1500 .findbar-button:not(:-moz-any([checked="true"],[disabled="true"])):hover > .toolbarbutton-text,
1501 #nav-bar .toolbarbutton-1:not([disabled=true]) > .toolbarbutton-menubutton-button[open] + .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1502 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1503 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1504 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
1505 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
1506 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-stack,
1507 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button:not([open]):not(:active):not([disabled=true]):hover > .toolbarbutton-icon,
1508 #nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon {
1509 }
1510
1511 .findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active) > .toolbarbutton-text,
1512 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open]) > .toolbarbutton-icon,
1513 #nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon,
1514 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
1515 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
1516 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-stack {
1517 }
1518
1519 #TabsToolbar .toolbarbutton-1,
1520 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1521 .tabbrowser-arrowscrollbox > .scrollbutton-up,
1522 .tabbrowser-arrowscrollbox > .scrollbutton-down {
1523 }
1524
1525 #TabsToolbar .toolbarbutton-1:not([disabled=true]):hover,
1526 #TabsToolbar .toolbarbutton-1[open],
1527 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover,
1528 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled=true]):hover,
1529 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled=true]):hover {
1530 }
1531
1532 /* unified back/forward button */
1533
1534 #forward-button {
1535   -moz-box-align: stretch; /* let the button shape grow vertically with the location bar */
1536 }
1537
1538 #forward-button > menupopup {
1539   margin-top: 1px !important;
1540 }
1541
1542 #forward-button > .toolbarbutton-icon {
1543   background-clip: padding-box !important;
1544   /*mask: url(keyhole-forward-mask.svg#mask); XXX: this regresses twinopen */
1545   /*clip-path: url(chrome://browser/content/browser.xul#keyhole-forward-clip-path) !important;*/
1546 }
1547
1548 #forward-button {
1549   margin-inline-start: -4px !important;
1550   padding-left: 5px;
1551   padding-right: 5px;
1552   margin-top: 3px;
1553   margin-bottom: 3px;
1554   border-radius: 0 10000px 10000px 0;
1555 /*  max-width: calc(var(--forwardbutton-width) + var(--backbutton-urlbar-overlap)) !important; */
1556 }
1557
1558 #forward-button:-moz-locale-dir(rtl) {
1559   border-radius: 10000px 0 0 10000px;
1560 }
1561
1562 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not([switchingtabs]) > #forward-button {
1563   transition: margin-left 150ms ease-out;
1564 }
1565
1566 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] {
1567   margin-left: calc(0px - var(--forwardbutton-width)/* - var(--backbutton-urlbar-overlap)*/);
1568 }
1569
1570 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] {
1571   /* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */
1572   transition-delay: 100s;
1573 }
1574
1575 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] {
1576   /* when not hovered anymore, trigger a new transition to hide the forward button immediately */
1577   margin-left: calc(-0.01px - var(--forwardbutton-width)/* - var(--backbutton-urlbar-overlap)*/);
1578 }
1579
1580 #back-button {
1581 /*  padding-top: 3px !important;
1582   padding-bottom: 3px !important;
1583   padding-inline-start: 5px !important;
1584   padding-inline-end: 0 !important;*/
1585   position: relative;
1586   z-index: 1;
1587   border-radius: 10000px;
1588   width: 30px;
1589   height: 30px;
1590   margin-top: -2px;
1591   margin-bottom: -2px;
1592 }
1593
1594 #back-button:-moz-locale-dir(rtl) {
1595 }
1596
1597 #back-button > menupopup {
1598   margin-top: -1px !important;
1599 }
1600
1601 #back-button > .toolbarbutton-icon {
1602   border-radius: 10000px !important;
1603   background-clip: padding-box !important;
1604 /*  background-color: hsla(210,25%,98%,.08) !important;
1605   padding: 6px !important;
1606   border-style: none !important;
1607   box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1608               0 0 0 1px hsla(210,4%,10%,.25);*/
1609   transition-property: background-color, box-shadow !important;
1610   transition-duration: 250ms !important;
1611 }
1612
1613 #back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon {
1614 /*  background-color: hsla(210,4%,10%,.08) !important;*/
1615 }
1616
1617 #back-button:not([disabled="true"]):hover:active > .toolbarbutton-icon,
1618 #back-button[open="true"] > .toolbarbutton-icon {
1619 /*  background-color: hsla(210,4%,10%,.12) !important;
1620   box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1621               0 0 0 1px hsla(210,4%,10%,.25),
1622               0 1px 0 0 hsla(210,80%,20%,.1) inset !important;*/
1623 }
1624
1625 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
1626   transform: scaleX(-1);
1627 }
1628 /*
1629 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
1630 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
1631   list-style-image: url("chrome://browser/skin/menu-back.png") !important;
1632 }
1633
1634 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr),
1635 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) {
1636   list-style-image: url("chrome://browser/skin/menu-forward.png") !important;
1637 }
1638
1639 #home-button.bookmark-item {
1640   list-style-image: url("chrome://browser/skin/Toolbar.png");
1641 }
1642
1643 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1644 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1645 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1646 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1647 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1648 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1649 #home-button.bookmark-item:-moz-lwtheme-brighttext {
1650   position: relative;
1651   z-index: 1;
1652   list-style-image: url("chrome://browser/skin/Toolbar-inverted.png");
1653 }
1654
1655 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1656 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme) {
1657   list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png");
1658 }
1659 */
1660
1661 #downloads-button > .toolbarbutton-icon {
1662   margin: 0;
1663 }
1664
1665 /* tabview menu item */
1666
1667 #menu_tabview {
1668   list-style-image: url("chrome://browser/skin/tabview/tabviewFx.png");
1669   -moz-image-region: rect(1px, 89px, 17px, 73px);
1670 }
1671
1672 #menu_tabview[groups="0"] {
1673   -moz-image-region: rect(1px, 17px, 17px, 1px);
1674 }
1675
1676 #menu_tabview[groups="1"] {
1677   -moz-image-region: rect(1px, 35px, 17px, 19px);
1678 }
1679
1680 #menu_tabview[groups="2"] {
1681   -moz-image-region: rect(1px, 53px, 17px, 37px);
1682 }
1683
1684 #menu_tabview[groups="3"] {
1685   -moz-image-region: rect(1px, 71px, 17px, 55px);
1686 }
1687
1688 /* undo close tab menu item */
1689 #alltabs_undoCloseTab {
1690   list-style-image: url(chrome://browser/skin/undoCloseTab.png);
1691 }
1692
1693 @media (min-resolution: 1.1dppx) {
1694   #alltabs_undoCloseTab {
1695     list-style-image: url(chrome://browser/skin/undoCloseTab@2x.png);
1696   }
1697   #alltabs_undoCloseTab > .toolbarbutton-icon {
1698     width: 16px;
1699   }
1700 }
1701
1702 /* zoom control text (reset) button special case: */
1703
1704 #nav-bar #zoom-reset-button > .toolbarbutton-text {
1705   /* To make this line up with the icons, it needs the same height (18px) +
1706    * padding (2 * 2px) + border (2 * 1px), but as a minimum because otherwise
1707    * increase in text sizes would break things...
1708    */
1709   min-height: 20px;
1710 }
1711
1712 /* ::::: fullscreen window controls ::::: */
1713
1714 #minimize-button,
1715 #restore-button,
1716 #close-button {
1717   -moz-appearance: none;
1718   border: none;
1719 /*  margin: 0 !important;
1720   padding: 6px 12px;*/
1721 }
1722
1723 #minimize-button {
1724   list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize);
1725 }
1726
1727 #minimize-button:hover {
1728   list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-hover);
1729 }
1730
1731 #restore-button {
1732   list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore);
1733 }
1734
1735 #restore-button:hover {
1736   list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-hover);
1737 }
1738
1739 #minimize-button:hover,
1740 #restore-button:hover {
1741 /*  background-color: hsla(0, 0%, 0%, .12);*/
1742 }
1743
1744 #minimize-button:hover:active,
1745 #restore-button:hover:active {
1746 /*  background-color: hsla(0, 0%, 0%, .22);*/
1747 }
1748
1749 #close-button {
1750   list-style-image: url(chrome://browser/skin/caption-buttons.svg#close);
1751 }
1752
1753 #close-button:hover {
1754 /*  background-color: hsl(355, 86%, 49%);*/
1755   list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-hover);
1756 }
1757
1758 #close-button:hover:active {
1759 /*  background-color: hsl(355, 82%, 69%);*/
1760 }
1761
1762 /* ::::: Location Bar ::::: */
1763
1764 #urlbar,
1765 .searchbar-textbox {
1766   border-radius: 5px;
1767   margin: 2px 0;
1768   margin-inline-start: 3px;
1769 }
1770
1771 #urlbar {
1772   /* make color as light as possible to deal with dark non-domain parts */
1773   color: #FFBFFF;
1774 }
1775
1776 #urlbar:-moz-lwtheme,
1777 .searchbar-textbox:-moz-lwtheme {
1778   /* background-color: rgba(255,255,255,.8);
1779   @navbarTextboxCustomBorder@
1780   color: black; */
1781 }
1782
1783 #urlbar:-moz-lwtheme:hover:not([focused]):not([readonly]),
1784 .searchbar-textbox:-moz-lwtheme:hover:not([focused]) {
1785 /*  background-color: rgba(255,255,255,.9);*/
1786 }
1787
1788 #urlbar:-moz-lwtheme[focused]:not([readonly]),
1789 .searchbar-textbox:-moz-lwtheme[focused] {
1790 /*  background-color: white;*/
1791 }
1792
1793 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar {
1794 /*  border-inline-start: none;
1795   margin-left: 0;*/
1796 }
1797
1798 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(ltr) {
1799 /*  border-top-left-radius: 0;
1800   border-bottom-left-radius: 0; */
1801 }
1802
1803 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1804 /*  border-top-right-radius: 0;
1805   border-bottom-right-radius: 0; */
1806 }
1807
1808 window:not([chromehidden~="toolbar"]) #urlbar-wrapper {
1809 /*  clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path");*/
1810 /*  margin-inline-start: calc(-1 * var(--backbutton-urlbar-overlap)); */
1811 }
1812
1813 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl),
1814 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1815   /* let urlbar-back-button-clip-path clip the urlbar's right side for RTL */
1816   transform: scaleX(-1);
1817 }
1818
1819 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl) {
1820   -moz-box-direction: reverse;
1821 }
1822
1823 html|*.urlbar-input:-moz-lwtheme::placeholder,
1824 .searchbar-textbox:-moz-lwtheme > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::placeholder {
1825   color: #E7ADE7;
1826 }
1827
1828 #urlbar-container {
1829   -moz-box-orient: horizontal;
1830   -moz-box-align: stretch;
1831 }
1832
1833 .urlbar-textbox-container {
1834   -moz-box-align: stretch;
1835 }
1836
1837 .urlbar-input-box {
1838   margin-inline-start: 0;
1839 }
1840
1841 .urlbar-input-box,
1842 #urlbar-display-box {
1843   padding-inline-start: 4px;
1844 /*  border-inline-start: 1px solid var(--urlbar-separator-color);
1845   border-inline-end: 1px solid var(--urlbar-separator-color);
1846   border-image: linear-gradient(transparent 15%, var(--urlbar-separator-color) 15%, var(--urlbar-separator-color) 85%, transparent 85%);
1847   border-image-slice: 1; */
1848 }
1849
1850 #urlbar-icons {
1851   -moz-box-align: center;
1852 }
1853
1854 .urlbar-icon {
1855   padding: 0 2px;
1856   /* 16x16 icon with border-box sizing */
1857   width: 20px;
1858   height: 16px;
1859 }
1860
1861 .search-go-container {
1862   padding: 2px;
1863 }
1864
1865 .search-go-container > .search-go-button {
1866   padding: 0;
1867 }
1868
1869 #urlbar-search-footer {
1870   border-top: 1px solid #A09090;
1871 }
1872
1873 #urlbar-search-settings {
1874 }
1875
1876 #urlbar-search-settings:hover {
1877 }
1878
1879 #urlbar-search-settings:hover:active {
1880 }
1881
1882 #urlbar-search-splitter {
1883   min-width: 6px;
1884   margin-inline-start: -3px;
1885   border: none;
1886   background: transparent;
1887 }
1888
1889 #urlbar-search-splitter + #urlbar-container > #urlbar,
1890 #urlbar-search-splitter + #search-container > #searchbar > .searchbar-textbox {
1891   margin-inline-start: 0;
1892 }
1893
1894 .urlbar-display {
1895   border-inline-end: 1px solid #9C9CFF;
1896   margin-inline-end: 3px;
1897   margin-top: 0;
1898   margin-bottom: 0;
1899   margin-inline-start: 0;
1900   color: #8050B0;
1901 }
1902
1903 /* === BEGIN urlbarSearchSuggestionsNotification.inc.css === */
1904
1905 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] {
1906   border-bottom: 1px solid #A09090;
1907   background-color: #000000;
1908   padding: 6px 0;
1909   padding-inline-start: 44px;
1910   padding-inline-end: 6px;
1911   background-image: url("chrome://browser/skin/info.svg");
1912   background-clip: padding-box;
1913   background-position: 20px center;
1914   background-repeat: no-repeat;
1915   background-size: 16px 16px;
1916 }
1917
1918 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) {
1919   background-position: right 20px center;
1920 }
1921
1922 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description {
1923   margin: 0;
1924   padding: 0;
1925 }
1926
1927 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description > label.text-link {
1928   margin-inline-start: 0;
1929 }
1930
1931 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
1932   -moz-appearance: none;
1933   min-width: 80px;
1934   border-radius: 3px;
1935   padding: 4px 16px;
1936   margin: 0;
1937   margin-inline-start: 10px;
1938 }
1939
1940 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"] {
1941 }
1942
1943 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"]:hover {
1944 }
1945
1946 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"] {
1947 }
1948
1949 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"]:hover {
1950 }
1951
1952 /* === END urlbarSearchSuggestionsNotification.inc.css === */
1953
1954 #search-container {
1955   min-width: calc(54px + 11ch);
1956 }
1957
1958 /* identity box */
1959
1960 #identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) {
1961   background-color: var(--identity-box-verified-background-color);
1962 }
1963
1964 #identity-box:-moz-focusring {
1965   outline: 1px dotted #008484;
1966   outline-offset: -1px;
1967 }
1968
1969 #identity-box.verifiedDomain:-moz-focusring,
1970 #identity-box.verifiedIdentity:-moz-focusring {
1971   outline-color: #000000;
1972 }
1973
1974 /* Location bar dropmarker */
1975
1976 .urlbar-history-dropmarker:not(:hover):not([open="true"]) {
1977   background-color: transparent;
1978 }
1979
1980 #urlbar-container[combined="true"] > #urlbar > .urlbar-history-dropmarker,
1981 #urlbar-wrapper > #urlbar > .urlbar-history-dropmarker,
1982 #urlbar-wrapper > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
1983   border: none;
1984   border-radius: 0px;
1985   transition: opacity 0.15s ease;
1986 }
1987
1988 #urlbar-wrapper[switchingtabs] > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
1989   transition: none;
1990 }
1991
1992 #navigator-toolbox:not(:hover) #nav-bar:not([customizing="true"]) #urlbar:not([focused]) > .urlbar-textbox-container > .urlbar-history-dropmarker {
1993   opacity: 0;
1994 }
1995
1996 .urlbar-history-dropmarker:hover {
1997 }
1998
1999 .urlbar-history-dropmarker:hover:active,
2000 .urlbar-history-dropmarker[open="true"] {
2001 }
2002
2003 /* page proxy icon */
2004
2005 /* === BEGIN identity-block.inc.css === */
2006
2007 #identity-box {
2008   --identity-box-verified-color: #008484;
2009   /* Default theme does different color per channel, we can't as they do it build-time. */
2010   --identity-box-chrome-color: #9C9CFF;
2011
2012   font-size: .9em;
2013   border-radius: 2px;
2014   padding: 3px 5px;
2015   overflow: hidden;
2016   /* The latter two properties have a transition to handle the delayed hiding of
2017      the forward button when hovered. */
2018   transition: background-color 150ms ease, padding-left, padding-right;
2019 }
2020
2021 #identity-box:-moz-locale-dir(ltr) {
2022   border-top-right-radius: 0;
2023   border-bottom-right-radius: 0;
2024 }
2025
2026 #identity-box:-moz-locale-dir(rtl) {
2027   border-top-left-radius: 0;
2028   border-bottom-left-radius: 0;
2029 }
2030
2031 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
2032   color: var(--identity-box-chrome-color);
2033   border-inline-end: 1px solid var(--identity-box-chrome-color);
2034 }
2035
2036 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
2037   color: var(--identity-box-verified-color);
2038   border-inline-end: 1px solid var(--identity-box-verified-color);
2039 }
2040
2041 #identity-icon-labels:-moz-locale-dir(ltr) {
2042   padding-left: 2px;
2043 }
2044
2045 #identity-icon-labels:-moz-locale-dir(rtl) {
2046   padding-right: 2px;
2047 }
2048
2049 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box {
2050 /*   border-radius: 0;
2051   padding-inline-start: 2px; */
2052   padding-inline-end: 2px;
2053   margin-inline-end: 1px;
2054 }
2055
2056 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > #identity-box {
2057   padding-inline-start: 2px;
2058 }
2059
2060 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar > #identity-box {
2061   /* Forward button hiding is delayed when hovered, so we should use the same
2062      delay for the identity box. We handle both horizontal paddings (for LTR and
2063      RTL), the latter two delays here are for padding-left and padding-right. */
2064   transition-delay: 0s, 100s, 100s;
2065 }
2066
2067 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar > #identity-box {
2068   /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
2069   padding-inline-start: 2.01px;
2070 }
2071
2072 /* MAIN IDENTITY ICON */
2073
2074 #identity-icon {
2075   width: 16px;
2076   height: 16px;
2077   list-style-image: url(chrome://browser/skin/identity-icon.svg#normal);
2078 }
2079
2080 #identity-box:hover > #identity-icon:not(.no-hover),
2081 #identity-box[open=true] > #identity-icon {
2082   list-style-image: url(chrome://browser/skin/identity-icon.svg#hover);
2083 }
2084
2085 #identity-box.grantedPermissions > #identity-icon {
2086   list-style-image: url(chrome://browser/skin/identity-icon.svg#notice);
2087 }
2088
2089 #identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover),
2090 #identity-box.grantedPermissions[open=true] > #identity-icon {
2091   list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-hover);
2092 }
2093
2094 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon {
2095   list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
2096 }
2097
2098 #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon {
2099   opacity: 0.3;
2100 }
2101
2102 #urlbar[actiontype="searchengine"] > #identity-box > #identity-icon {
2103   -moz-image-region: inherit;
2104   list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon);
2105   width: 16px;
2106   height: 16px;
2107   opacity: 1;
2108 }
2109
2110 /* TRACKING PROTECTION ICON */
2111
2112 #tracking-protection-icon {
2113   width: 16px;
2114   height: 16px;
2115   margin-inline-start: 2px;
2116   margin-inline-end: 0;
2117   list-style-image: url(chrome://browser/skin/tracking-protection-16.svg);
2118   opacity: 1;
2119 }
2120
2121 #tracking-protection-icon[state="loaded-tracking-content"] {
2122   list-style-image: url(chrome://browser/skin/tracking-protection-disabled-16.svg);
2123 }
2124
2125 #tracking-protection-icon[animate] {
2126   transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
2127 }
2128
2129 #tracking-protection-icon:not([state]) {
2130   margin-inline-end: -18px;
2131   pointer-events: none;
2132   opacity: 0;
2133   /* Only animate the shield in, when it disappears hide it immediately. */
2134   transition: none;
2135 }
2136
2137 #urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
2138   visibility: collapse;
2139 }
2140
2141 /* CONNECTION ICON */
2142
2143 #connection-icon {
2144   width: 16px;
2145   height: 16px;
2146   margin-inline-start: 2px;
2147   visibility: collapse;
2148 }
2149
2150 #urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon,
2151 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon,
2152 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon {
2153   list-style-image: url(chrome://browser/skin/identity-secure.svg);
2154   visibility: visible;
2155 }
2156
2157 #urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon {
2158   list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg);
2159   visibility: visible;
2160 }
2161
2162 #urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon,
2163 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon {
2164   list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg);
2165   visibility: visible;
2166 }
2167
2168 #urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon,
2169 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon,
2170 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon {
2171   list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg);
2172   visibility: visible;
2173 }
2174
2175 /* === END identity-block.inc.css === */
2176
2177 #page-proxy-favicon {
2178   -moz-image-region: rect(0, 16px, 16px, 0);
2179 }
2180
2181 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
2182 /*  margin-inline-end: 1px;*/
2183 }
2184
2185 #identity-box:hover > #page-proxy-favicon {
2186   -moz-image-region: rect(0, 32px, 16px, 16px);
2187 }
2188
2189 #identity-box:hover:active > #page-proxy-favicon,
2190 #identity-box[open=true] > #page-proxy-favicon {
2191   -moz-image-region: rect(0, 48px, 16px, 32px);
2192 }
2193
2194 #identity-box:hover {
2195   background-color: #FFCF00;
2196   color: #000000;
2197 }
2198
2199 #identity-box:hover:active,
2200 #identity-box[open=true] {
2201   background-color: #A09090;
2202   color: #000000;
2203 }
2204
2205 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover,
2206 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active,
2207 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] {
2208   background-color: #9C9CFF;
2209   color: #000000;
2210 }
2211
2212 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover,
2213 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active,
2214 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] {
2215   background-color: #008484;
2216   color: #000000;
2217 }
2218
2219 #identity-box:hover > image,
2220 #identity-box:hover:active > image,
2221 #identity-box[open=true] > image {
2222   filter: url(chrome://global/skin/filters.svg#active-icon-state);
2223 }
2224
2225 /* autocomplete */
2226
2227 #treecolAutoCompleteImage {
2228   max-width: 36px;
2229 }
2230
2231 /*
2232 .autocomplete-richlistbox {
2233   padding: 4px;
2234 }
2235
2236 .autocomplete-richlistitem {
2237   height: 30px;
2238   min-height: 30px;
2239   font: message-box;
2240   border-radius: 2px;
2241   border: 1px solid transparent;
2242 }
2243
2244 .autocomplete-richlistitem[selected=true] {
2245   background-color: hsl(210, 80%, 52%);
2246 }
2247 */
2248 .ac-title {
2249   font-size: 14px;
2250 /*  color: hsl(0, 0%, 0%);*/
2251 }
2252
2253 .ac-tags {
2254   font-size: 12px;
2255 }
2256 /*
2257 html|span.ac-tag {
2258   background-color: hsl(216, 0%, 88%);
2259   color: hsl(0, 0%, 0%);
2260   border-radius: 2px;
2261   border: 1px solid transparent;
2262   padding: 0 1px;
2263 }
2264 */
2265
2266 .ac-separator,
2267 .ac-url,
2268 .ac-action {
2269   font-size: 12px;
2270 }
2271
2272 .ac-separator {
2273 /*  color: hsl(0, 0%, 50%);*/
2274 }
2275
2276 .ac-url {
2277   color: #9C9CFF;
2278 }
2279
2280 .ac-action {
2281   color: #9C9CFF;
2282 }
2283
2284 .ac-title[selected=true],
2285 .ac-separator[selected],
2286 .ac-url[selected=true],
2287 .ac-action[selected=true] {
2288   color: #000000;
2289 }
2290
2291 .ac-tags-text[selected] > html|span.ac-tag {
2292   background-color: #A09090;
2293   color: #000000;
2294 }
2295
2296 html|span.ac-emphasize-text-title,
2297 html|span.ac-emphasize-text-tag,
2298 html|span.ac-emphasize-text-url {
2299   font-weight: 600;
2300 }
2301
2302 .ac-type-icon[type=bookmark] {
2303   list-style-image: url("chrome://browser/skin/urlbar-star.svg#star");
2304 }
2305
2306 .ac-type-icon[type=bookmark][selected][current] {
2307 /*  list-style-image: url("chrome://browser/skin/urlbar-star.svg#star-inverted");*/
2308 }
2309
2310 .ac-result-type-bookmark,
2311 .autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) {
2312   list-style-image: url("chrome://browser/skin/places/bookmark.png");
2313   -moz-image-region: rect(0px 16px 16px 0px);
2314   width: 16px;
2315   height: 16px;
2316 }
2317
2318 richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark,
2319 .autocomplete-treebody::-moz-tree-image(selected, current, bookmark, treecolAutoCompleteImage) {
2320 /*  -moz-image-region: rect(0px 48px 16px 32px);*/
2321 }
2322
2323 .ac-type-icon[type=keyword],
2324 .ac-site-icon[type=searchengine],
2325 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage) {
2326   list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon");
2327 }
2328
2329 .ac-type-icon[type=keyword][selected],
2330 .ac-site-icon[type=searchengine][selected],
2331 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage, selected) {
2332   list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon-inverted");
2333 }
2334
2335 .ac-result-type-tag,
2336 .autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) {
2337   list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
2338   width: 16px;
2339   height: 16px;
2340 }
2341
2342 .ac-type-icon[type=switchtab],
2343 .ac-type-icon[type=remotetab] {
2344   list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab");
2345 }
2346
2347 .ac-type-icon[type=switchtab][selected],
2348 .ac-type-icon[type=remotetab][selected] {
2349   list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab-inverted");
2350 }
2351
2352 .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
2353 .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
2354 {
2355   color: #8050B0;
2356   font-size: smaller;
2357 }
2358
2359 .autocomplete-treebody::-moz-tree-cell(suggesthint) {
2360   border-top: 1px solid #9C9CFF;
2361 }
2362
2363 /* combined go/reload/stop button in location bar */
2364
2365 #urlbar-go-button,
2366 #urlbar-reload-button,
2367 #urlbar-stop-button {
2368   border-style: none;
2369   list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
2370 /*  margin: 0 9px; */
2371   margin-inline-start: 0px;
2372   border-inline-start: 1px solid var(--urlbar-separator-color);
2373   border-image: linear-gradient(transparent 15%,
2374                                 var(--urlbar-separator-color) 15%,
2375                                 var(--urlbar-separator-color) 85%,
2376                                 transparent 85%);
2377   border-image-slice: 1;
2378 }
2379
2380 #urlbar:-moz-locale-dir(ltr) > toolbarbutton {
2381   border-top-left-radius: 0px;
2382   border-bottom-left-radius: 0px;
2383 }
2384
2385 #urlbar:-moz-locale-dir(rtl) > toolbarbutton {
2386   border-top-right-radius: 0px;
2387   border-bottom-right-radius: 0px;
2388 }
2389
2390 #urlbar > toolbarbutton:not([disabled=true]):active:hover,
2391 #urlbar-reload-button:not(:hover) {
2392   border-inline-start-style: none;
2393   padding-inline-start: 3px;
2394 }
2395
2396 #urlbar-reload-button {
2397   -moz-image-region: rect(0px, 14px, 14px, 0px);
2398 }
2399
2400 #urlbar-reload-button[disabled=true] {
2401   -moz-image-region: rect(28px, 14px, 42px, 0px);
2402 }
2403
2404 #urlbar-reload-button:not([disabled=true]):hover {
2405   -moz-image-region: rect(14px, 14px, 28px, 0px);
2406 }
2407
2408 #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2409   transform: scaleX(-1);
2410 }
2411
2412 #urlbar-go-button {
2413   -moz-image-region: rect(0, 42px, 14px, 28px);
2414 }
2415
2416 #urlbar-go-button:hover {
2417   -moz-image-region: rect(14px, 42px, 28px, 28px);
2418 }
2419
2420 #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2421   transform: scaleX(-1);
2422 }
2423
2424 #urlbar-stop-button {
2425   -moz-image-region: rect(0px, 28px, 14px, 14px);
2426 }
2427
2428 #urlbar-stop-button:hover {
2429   -moz-image-region: rect(14px, 28px, 28px, 14px);
2430 }
2431
2432 @media (min-resolution: 1.1dppx) {
2433   #urlbar-go-button,
2434   #urlbar-reload-button,
2435   #urlbar-stop-button {
2436     list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
2437   }
2438
2439   #urlbar-go-button > .toolbarbutton-icon,
2440   #urlbar-reload-button > .toolbarbutton-icon,
2441   #urlbar-stop-button > .toolbarbutton-icon {
2442     width: 14px;
2443   }
2444
2445   #urlbar-go-button {
2446     -moz-image-region: rect(0, 84px, 28px, 56px);
2447   }
2448
2449   #urlbar-go-button:hover {
2450     -moz-image-region: rect(28px, 84px, 56px, 56px);
2451   }
2452
2453   #urlbar-go-button:hover:active {
2454     -moz-image-region: rect(56px, 84px, 84px, 56px);
2455   }
2456
2457   #urlbar-reload-button {
2458     -moz-image-region: rect(0, 28px, 28px, 0);
2459   }
2460
2461   #urlbar-reload-button:not([disabled]):hover {
2462     -moz-image-region: rect(28px, 28px, 56px, 0);
2463   }
2464
2465   #urlbar-reload-button:not([disabled]):hover:active {
2466     -moz-image-region: rect(56px, 28px, 84px, 0);
2467   }
2468
2469   #urlbar-stop-button {
2470     -moz-image-region: rect(0, 56px, 28px, 28px);
2471   }
2472
2473   #urlbar-stop-button:not([disabled]):hover {
2474     -moz-image-region: rect(28px, 56px, 56px, 28px);
2475   }
2476
2477   #urlbar-stop-button:hover:active {
2478     -moz-image-region: rect(56px, 56px, 84px, 28px);
2479   }
2480 }
2481
2482 /* popup blocker button */
2483
2484 #page-report-button {
2485   list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
2486   -moz-image-region: rect(0, 16px, 16px, 0);
2487 }
2488
2489 #page-report-button:hover ,
2490 #page-report-button:hover:active,
2491 #page-report-button[open="true"] {
2492   -moz-image-region: rect(0, 32px, 16px, 16px);
2493 }
2494
2495 /* Reader mode button */
2496
2497 #reader-mode-button {
2498   list-style-image: url("chrome://browser/skin/readerMode.svg");
2499   -moz-image-region: rect(0, 16px, 16px, 0);
2500 }
2501
2502 #reader-mode-button:hover,
2503 #reader-mode-button[readeractive]:hover {
2504   -moz-image-region: rect(0, 32px, 16px, 16px);
2505 }
2506
2507 #reader-mode-button:hover:active,
2508 #reader-mode-button[readeractive] {
2509   -moz-image-region: rect(0, 48px, 16px, 32px);
2510 }
2511
2512 /* social share panel */
2513
2514 .social-share-frame {
2515   min-width: 756px;
2516   height: 150px;
2517 }
2518
2519 #share-container {
2520   min-width: 756px;
2521   background-color: white;
2522   background-repeat: no-repeat;
2523   background-position: center center;
2524 }
2525 #share-container[loading] {
2526   background-image: url(chrome://browser/skin/tabbrowser/pendingpaint.png);
2527 }
2528 #share-container > browser {
2529   transition: opacity 150ms ease-in-out;
2530   opacity: 1;
2531 }
2532 #share-container[loading] > browser {
2533   opacity: 0;
2534 }
2535
2536 .social-share-toolbar {
2537   border-bottom: 1px solid #9C9CFF;
2538   padding: 2px;
2539 }
2540
2541 #social-share-provider-buttons {
2542   padding: 0;
2543   margin: 0;
2544 }
2545
2546 .share-provider-button {
2547   padding: 5px;
2548   margin: 2px;
2549 }
2550
2551 .share-provider-button > .toolbarbutton-text {
2552   display: none;
2553 }
2554 .share-provider-button > .toolbarbutton-icon {
2555   width: 16px;
2556   min-height: 16px;
2557   max-height: 16px;
2558 }
2559
2560 /* fixup corners for share panel */
2561 .social-panel > .social-panel-frame {
2562   border-radius: inherit;
2563 }
2564
2565 #social-share-panel {
2566   min-height: 100px;
2567   min-width: 766px;
2568 }
2569
2570 #share-container,
2571 .social-share-frame {
2572   border-top-left-radius: 0;
2573   border-bottom-left-radius: inherit;
2574   border-top-right-radius: 0;
2575   border-bottom-right-radius: inherit;
2576 }
2577
2578 #social-share-panel > .social-share-toolbar {
2579   border-top-left-radius: inherit;
2580   border-top-right-radius: inherit;
2581 }
2582
2583 #social-share-provider-buttons {
2584   border-top-left-radius: inherit;
2585   border-top-right-radius: inherit;
2586 }
2587
2588 /* social recommending panel */
2589
2590 #social-mark-button {
2591   -moz-image-region: rect(0, 16px, 16px, 0);
2592 }
2593
2594 /* bookmarks menu-button */
2595
2596 #bookmarks-menu-button.bookmark-item {
2597   list-style-image: url("chrome://browser/skin/places/bookmark.png");
2598   -moz-image-region: rect(0px 16px 16px 0px);
2599 }
2600
2601 #bookmarks-menu-button.bookmark-item[starred] {
2602   -moz-image-region: rect(0px 32px 16px 16px);
2603 }
2604
2605 #nav-bar #bookmarks-menu-button[cui-areatype="toolbar"]:not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
2606   padding-top: 2px;
2607   padding-bottom: 2px;
2608 }
2609
2610 #BMB_bookmarksPopup[side="top"],
2611 #BMB_bookmarksPopup[side="bottom"] {
2612   margin-left: -20px;
2613   margin-right: -20px;
2614 }
2615
2616 #BMB_bookmarksPopup[side="left"],
2617 #BMB_bookmarksPopup[side="right"] {
2618   margin-top: -20px;
2619   margin-bottom: -20px;
2620 }
2621
2622 /* bookmarking panel */
2623
2624 #editBookmarkPanelStarIcon {
2625   list-style-image: url("chrome://browser/skin/places/starred48.png");
2626   width: 48px;
2627   height: 48px;
2628 }
2629
2630 #editBookmarkPanelStarIcon[unstarred] {
2631   list-style-image: url("chrome://browser/skin/places/unstarred48.png");
2632 }
2633
2634 #editBookmarkPanelTitle {
2635   font-size: 130%;
2636 }
2637
2638 #editBookmarkPanelHeader,
2639 #editBookmarkPanelContent {
2640   margin-bottom: .5em;
2641 }
2642
2643 /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
2644 #editBMPanel_folderTree {
2645   min-width: 27em;
2646 }
2647
2648 /* ::::: content area ::::: */
2649
2650 #sidebar-box {
2651   background-color: #9C9CFF;
2652   color: #000000;
2653 }
2654
2655 #sidebar {
2656   background-color: #000000;
2657 }
2658
2659 #sidebar-splitter {
2660   margin-inline-start: 0;
2661 }
2662
2663 #sidebar-header {
2664   color: #000000;
2665   padding: 2px;
2666 }
2667
2668 #sidebar-title {
2669   padding-inline-start: 0px;
2670 }
2671
2672 #sidebar-header > .close-icon {
2673 /*  padding: 4px 2px;
2674   margin: 0;
2675   border: none;*/
2676   list-style-image: url("chrome://global/skin/icons/close-button.gif");
2677 }
2678
2679 #sidebar-header > .close-icon:hover,
2680 #sidebar-header > .close-icon:hover:active {
2681   list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2682 }
2683
2684 #sidebar-splitter:-moz-locale-dir(ltr),
2685 #sidebar:-moz-locale-dir(ltr) {
2686   border-radius: 0 5px 0 0;
2687 }
2688
2689 #sidebar-splitter:-moz-locale-dir(rtl),
2690 #sidebar:-moz-locale-dir(rtl) {
2691   border-radius: 5px 0 0 0;
2692 }
2693
2694 .browserContainer > findbar {
2695 /*
2696   background-color: -moz-dialog;
2697   color: -moz-DialogText;
2698 */
2699 }
2700
2701 /* Tabstrip */
2702
2703 #TabsToolbar {
2704   min-height: 0;
2705   padding: 0;
2706   -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
2707 }
2708
2709 #TabsToolbar .toolbar-holder {
2710   background-color: #000000; /* correct effect of being an actual toolbar */
2711 }
2712
2713 #main-window[disablechrome] #TabsToolbar,
2714 #TabsToolbar[tabsontop="false"] {
2715   border-bottom: 1px solid #008484;
2716 }
2717
2718 /* === BEGIN tabs.inc.css === */
2719
2720 :root {
2721   /* --tab-toolbar-navbar-overlap: 1px; */
2722   /* --navbar-tab-toolbar-highlight-overlap: 1px; */
2723   /* --tab-min-height: 31px; */
2724 }
2725 #TabsToolbar {
2726   /* --tab-stroke-background-size: auto 100%; */
2727 }
2728
2729 .tabbrowser-tab,
2730 .tabs-newtab-button,
2731 #TabsToolbar > #new-tab-button {
2732   margin-top: 0px;
2733 }
2734
2735 .tabbrowser-tab {
2736   padding: 1px 4px 2px;
2737 }
2738
2739 .tabbrowser-tab:first-of-type {
2740   margin-inline-start: 2px;
2741 }
2742
2743 .tabs-newtab-button,
2744 #TabsToolbar > #new-tab-button,
2745 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
2746 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
2747   border-radius: 8px 8px 0px 0px;
2748   margin-inline-start: 0;
2749 }
2750
2751 .tabs-newtab-button:not(:hover),
2752 #TabsToolbar > #new-tab-button:not(:hover),
2753 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
2754 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
2755   background-color: #C09070;
2756 }
2757
2758 /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
2759 .tabbrowser-tab[visuallyselected=true] {
2760 /*  position: relative;
2761   z-index: 2;*/
2762 }
2763
2764 .tab-background-middle {
2765 }
2766
2767 .tab-content {
2768 }
2769
2770 .tab-content[pinned] {
2771 }
2772
2773 .tab-throbber,
2774 .tab-icon-image,
2775 .tab-sharing-icon-overlay,
2776 .tab-icon-sound,
2777 .tab-close-button {
2778 }
2779
2780 .tab-throbber,
2781 .tab-sharing-icon-overlay,
2782 .tab-icon-image {
2783   height: 16px;
2784   width: 16px;
2785   margin-inline-end: 3px;
2786 }
2787
2788 .tab-icon-image {
2789   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
2790 }
2791
2792 .tab-icon-image[sharing]:not([selected]),
2793 .tab-sharing-icon-overlay {
2794   animation: 3s linear pulse infinite;
2795 }
2796
2797 @keyframes pulse {
2798   0%, 16.66%, 83.33%, 100% {
2799     opacity: 0;
2800   }
2801   33.33%, 66.66% {
2802     opacity: 1;
2803   }
2804 }
2805
2806 .tab-icon-image[sharing]:not([selected]) {
2807   animation-delay: -1.5s;
2808 }
2809
2810 .tab-sharing-icon-overlay {
2811   /* 16px of the icon + 6px of margin-inline-end of .tab-icon-image */
2812   margin-inline-start: -22px;
2813   position: relative;
2814 }
2815
2816 .tab-sharing-icon-overlay[sharing="camera"] {
2817   list-style-image: url("chrome://browser/skin/notification-icons.svg#camera");
2818 }
2819
2820 .tab-sharing-icon-overlay[sharing="microphone"] {
2821   list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone");
2822 }
2823
2824 .tab-sharing-icon-overlay[sharing="screen"] {
2825   list-style-image: url("chrome://browser/skin/notification-icons.svg#screen");
2826 }
2827
2828 .tab-sharing-icon-overlay[sharing] {
2829   filter: url("chrome://global/skin/filters.svg#fill");
2830   fill: #FFCF00;
2831 }
2832
2833 .tab-icon-overlay {
2834   width: 16px;
2835   height: 16px;
2836   margin-top: -8px;
2837   margin-inline-start: -15px;
2838   margin-inline-end: -1px;
2839   position: relative;
2840 }
2841
2842 .tab-icon-overlay[crashed] {
2843   list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
2844 }
2845
2846 .tab-icon-overlay[soundplaying],
2847 .tab-icon-overlay[muted]:not([crashed]) {
2848   border-radius: 10px;
2849 }
2850
2851 .tab-icon-overlay[soundplaying]:hover,
2852 .tab-icon-overlay[muted]:hover {
2853   background-color: #FFCF00;
2854 }
2855
2856 .tab-icon-overlay[soundplaying] {
2857   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio");
2858 }
2859
2860 .tab-icon-overlay[muted]:not([crashed]) {
2861   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
2862 }
2863
2864 #TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not(:hover) {
2865   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white");
2866 }
2867
2868
2869 #TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not(:hover) {
2870   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted");
2871 }
2872
2873 .tab-throbber[busy] {
2874   list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png");
2875 }
2876
2877 .tab-throbber[progress] {
2878   list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.png");
2879 }
2880
2881 @media (min-resolution: 1.1dppx) {
2882   .tab-throbber[busy] {
2883     list-style-image: url("chrome://communicator/skin/brand/throbber-anim-connect.png");
2884   }
2885
2886   .tab-throbber[progress] {
2887     list-style-image: url("chrome://communicator/skin/brand/throbber-anim.png");
2888   }
2889 }
2890
2891 .tab-throbber[pinned],
2892 .tab-icon-image[pinned] {
2893   margin-inline-start: 2px;
2894   margin-inline-end: 2px;
2895 }
2896
2897 .tab-label {
2898   /* this needs to add up to the 16px of the icon image */
2899   height: 12px;
2900   margin-top: 2px !important;
2901   margin-bottom: 2px !important;
2902 }
2903
2904 .tab-icon-sound {
2905   margin-inline-start: 4px;
2906   width: 16px;
2907   height: 16px;
2908   padding: 0;
2909 }
2910
2911 .tab-icon-sound[muted] {
2912   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
2913 }
2914
2915 .tab-icon-sound[muted]:hover {
2916   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover");
2917 }
2918
2919 .tab-icon-sound[muted]:hover:active {
2920   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed");
2921 }
2922
2923 .tab-icon-sound[soundplaying] {
2924   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab");
2925 }
2926
2927 .tab-icon-sound[soundplaying]:hover {
2928   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-hover");
2929 }
2930
2931 .tab-icon-sound[soundplaying]:hover:active {
2932   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-pressed");
2933 }
2934
2935 .tab-icon-sound[muted] {
2936   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted");
2937 }
2938
2939 .tab-icon-sound[muted]:hover {
2940   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-hover");
2941 }
2942
2943 .tab-icon-sound[muted]:hover:active {
2944   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-pressed");
2945 }
2946
2947 .tab-icon-sound[visuallyselected=true][soundplaying] {
2948   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio");
2949 }
2950
2951 .tab-icon-sound[visuallyselected=true][soundplaying]:hover {
2952   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-hover");
2953 }
2954
2955 .tab-icon-sound[visuallyselected=true][soundplaying]:hover:active {
2956   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-pressed");
2957 }
2958
2959 .tab-icon-sound[visuallyselected=true][muted] {
2960   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
2961 }
2962
2963 .tab-icon-sound[visuallyselected=true][muted]:hover {
2964   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover");
2965 }
2966
2967 .tab-icon-sound[visuallyselected=true][muted]:hover:active {
2968   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed");
2969 }
2970
2971 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying] {
2972   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white");
2973 }
2974
2975 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover {
2976   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-hover");
2977 }
2978
2979 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover:active {
2980   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-pressed");
2981 }
2982
2983 #TabsToolbar[brighttext] .tab-icon-sound[muted] {
2984   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white");
2985 }
2986
2987 #TabsToolbar[brighttext] .tab-icon-sound[muted]:hover {
2988   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-hover");
2989 }
2990
2991 #TabsToolbar[brighttext] .tab-icon-sound[muted]:hover:active {
2992   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-pressed");
2993 }
2994
2995 .tab-close-button {
2996   margin-top: 1px;
2997   padding: 0;
2998 }
2999
3000 .tab-background,
3001 .tabs-newtab-button {
3002   /* overlap the tab curves */
3003 }
3004
3005 .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
3006 }
3007
3008 /* Tab Overflow */
3009 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
3010 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3011 }
3012
3013 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:-moz-locale-dir(rtl),
3014 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:-moz-locale-dir(ltr) {
3015 }
3016
3017 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]) {
3018 }
3019
3020 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3021 }
3022
3023 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator[collapsed],
3024 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator[collapsed] {
3025 }
3026
3027 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator,
3028 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator {
3029 }
3030
3031 .tab-background-start[visuallyselected=true]::after,
3032 .tab-background-start[visuallyselected=true]::before,
3033 .tab-background-start,
3034 .tab-background-end,
3035 .tab-background-end[visuallyselected=true]::after,
3036 .tab-background-end[visuallyselected=true]::before {
3037 }
3038
3039 .tabbrowser-tab:not([visuallyselected=true]),
3040 .tabbrowser-tab:-moz-lwtheme {
3041 }
3042
3043 /* tabbrowser-tab focus ring */
3044 .tabbrowser-tab:focus {
3045   outline: 1px dotted;
3046 }
3047
3048 /* Selected tab */
3049
3050 .tabbrowser-tab[visuallyselected="true"] {
3051 }
3052
3053 /* End selected tab */
3054
3055 /* Tab pointer-events */
3056 /*
3057 .tabbrowser-tab {
3058   pointer-events: none;
3059 }
3060
3061 .tab-background-middle,
3062 .tabs-newtab-button,
3063 .tab-icon-overlay[soundplaying],
3064 .tab-icon-overlay[muted]:not([crashed]),
3065 .tab-icon-sound,
3066 .tab-close-button {
3067   pointer-events: auto;
3068 }
3069 */
3070 /* Pinned tabs */
3071
3072 /*
3073 .tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([visuallyselected="true"]),
3074 .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([visuallyselected="true"]) {
3075 */
3076 .tabbrowser-tab:-moz-any([image], [pinned]):-moz-any([attention], [titlechanged]):not([visuallyselected="true"]) {
3077   background-color: #E7ADE7;
3078 }
3079
3080 .tab-label[attention]:not([visuallyselected="true"]) {
3081   font-weight: bold;
3082 }
3083
3084 .tabbrowser-tab[pinned][titlechanged]:not([visuallyselected="true"]):hover {
3085   background-color: #3333FF;
3086   color: #000000;
3087 }
3088
3089 /* Tab separators */
3090 /*
3091 .tabbrowser-tab::after,
3092 .tabbrowser-tab::before {
3093   width: 1px;
3094   margin-inline-start: -1px;
3095   background-image: linear-gradient(transparent 5px,
3096                                     currentColor 5px,
3097                                     currentColor calc(100% - 4px),
3098                                     transparent calc(100% - 4px));
3099   opacity: 0.2;
3100 }
3101
3102 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::before,
3103 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::after {
3104   opacity: 0.4;
3105 }
3106 */
3107 /* Also show separators beside the selected tab when dragging it. */
3108 /*
3109 #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
3110 .tabbrowser-tab:not([visuallyselected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
3111 #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([visuallyselected]):not([beforehovered]):not(:hover)::after {
3112   content: "";
3113   display: -moz-box;
3114 }
3115 */
3116 /* New tab button */
3117
3118 .tabs-newtab-button {
3119   width: 28px;
3120   /* width: calc(36px + var(--tab-curve-width)); */
3121 }
3122 @media (min-resolution: 1.1dppx) {
3123   /* image preloading hack from like lowdpi styles */
3124   #tabbrowser-tabs::before {
3125   }
3126
3127   .tabbrowser-tab:hover > .tab-stack > .tab-background:not([visuallyselected=true]),
3128   .tabs-newtab-button:hover {
3129   }
3130
3131   .tab-background-middle[visuallyselected=true] {
3132   }
3133
3134   .tab-background-start[visuallyselected=true]:-moz-locale-dir(ltr)::after,
3135   .tab-background-end[visuallyselected=true]:-moz-locale-dir(rtl)::after {
3136   }
3137
3138   .tab-background-end[visuallyselected=true]:-moz-locale-dir(ltr)::after,
3139   .tab-background-start[visuallyselected=true]:-moz-locale-dir(rtl)::after {
3140   }
3141
3142   .tab-icon-image {
3143     list-style-image: url("chrome://mozapps/skin/places/defaultFavicon@2x.png");
3144   }
3145 }
3146
3147 /* === END tabs.inc.css === */
3148
3149 /* Tab DnD indicator */
3150 .tab-drop-indicator {
3151   list-style-image: url("chrome://browser/skin/tabbrowser/tabDragIndicator.png");
3152   margin-bottom: -11px;
3153 }
3154
3155 /* Tab close button */
3156 .tab-close-button {
3157   list-style-image: url("chrome://global/skin/icons/close-button.gif");
3158 }
3159
3160 .tab-close-button:hover,
3161 .tab-close-button:hover[selected="true"] {
3162   list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
3163 }
3164
3165 .tab-close-button:hover:active,
3166 .tab-close-button:hover:active[selected="true"] {
3167   list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
3168 }
3169
3170 /* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
3171
3172 .tabbrowser-arrowscrollbox > .scrollbutton-up,
3173 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3174   margin: 0;
3175   padding-top: 0;
3176   padding-bottom: 0;
3177   background-origin: border-box;
3178 }
3179
3180 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3181 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3182 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext,
3183 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext {
3184  }
3185
3186 .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
3187 .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
3188  }
3189
3190 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
3191 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
3192 /*  transform: scaleX(-1);*/
3193 }
3194
3195 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3196   transition: 1s background-color ease-out;
3197 }
3198
3199 .tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] {
3200   background-color: #008484;
3201 }
3202
3203 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]),
3204 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]) {
3205 /*  border-width: 0 2px 0 0;
3206   border-style: solid;
3207   border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;*/
3208 }
3209
3210 .tabs-newtab-button > .toolbarbutton-icon {
3211   margin-top: -1px;
3212   margin-bottom: -1px;
3213 }
3214
3215 .tabs-newtab-button,
3216 #TabsToolbar > #new-tab-button,
3217 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
3218 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
3219   list-style-image: url("chrome://browser/skin/tabbrowser/newtab.svg");
3220   -moz-image-region: auto;
3221 }
3222
3223 .tabs-newtab-button,
3224 .tabs-newtab-button:hover,
3225 #TabsToolbar > #new-tab-button,
3226 #TabsToolbar > #new-tab-button:hover {
3227 }
3228
3229 #main-window[tabsintitlebar]:not([inFullscreen]) .tabs-newtab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3230 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3231 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3232 .tabs-newtab-button:-moz-lwtheme-brighttext,
3233 #TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext,
3234 #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext {
3235 }
3236
3237 #TabsToolbar > #new-tab-button {
3238   width: 26px;
3239 }
3240
3241 #alltabs-button {
3242   list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
3243 }
3244
3245 #alltabs-button:hover,
3246 #alltabs-button:hover:active,
3247 #alltabs-button[open="true"] {
3248   list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
3249 }
3250
3251 #main-window[tabsintitlebar]:not([inFullscreen]) #alltabs-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3252 #alltabs-button:-moz-lwtheme-brighttext {
3253 }
3254
3255 #alltabs-button > .toolbarbutton-icon {
3256 /*  margin: 0 2px;*/
3257 }
3258
3259 #alltabs-button > .toolbarbutton-menu-dropmarker {
3260   display: none;
3261 }
3262
3263 /* All tabs menupopup */
3264 .alltabs-item > .menu-iconic-left > .menu-iconic-icon {
3265   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
3266   -moz-image-region: auto;
3267 }
3268
3269 .alltabs-item[selected="true"] {
3270   font-weight: bold;
3271 }
3272
3273 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3274   list-style-image: url("chrome://global/skin/icons/loading.png");
3275 }
3276
3277 @media (min-resolution: 1.1dppx) {
3278   .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3279     list-style-image: url("chrome://global/skin/icons/loading@2x.png");
3280   }
3281 }
3282
3283 .alltabs-item[tabIsVisible]:not([_moz-menuactive="true"]) {
3284   background-color: #402800;
3285 }
3286
3287 .alltabs-endimage[muted] {
3288   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
3289 }
3290
3291 .alltabs-endimage[soundplaying] {
3292   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio");
3293 }
3294
3295 toolbarbutton.chevron {
3296   list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
3297 }
3298
3299 toolbarbutton.chevron:hover {
3300   list-style-image: url("chrome://global/skin/toolbar/chevron-hover.gif") !important;
3301 }
3302 /*
3303 toolbar[brighttext] toolbarbutton.chevron {
3304   list-style-image: url("chrome://global/skin/toolbar/chevron-inverted.png") !important;
3305 }
3306 */
3307 toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
3308 toolbarbutton.chevron:-moz-locale-dir(rtl):hover > .toolbarbutton-icon {
3309   transform: scaleX(-1);
3310 }
3311
3312 toolbarbutton.chevron > .toolbarbutton-text,
3313 toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
3314   display: none;
3315 }
3316
3317 toolbarbutton.chevron > .toolbarbutton-icon {
3318   margin: 0;
3319 }
3320
3321 #sidebar-throbber[loading="true"] {
3322   list-style-image: url("chrome://global/skin/icons/loading.png");
3323   margin-inline-end: 4px;
3324 }
3325
3326 @media (min-resolution: 1.1dppx) {
3327   #sidebar-throbber[loading="true"] {
3328     list-style-image: url("chrome://global/skin/icons/loading@2x.png");
3329     width: 16px;
3330   }
3331 }
3332
3333 /* Bookmarks toolbar */
3334 #PlacesToolbarDropIndicator {
3335   list-style-image: url("chrome://communicator/skin/bookmarks/toolbarDropMarker.png");
3336 }
3337
3338 toolbarbutton.bookmark-item[dragover="true"][open="true"] {
3339   background-color: #008484 !important;
3340   color: #FFCF00 !important;
3341 }
3342
3343 /* rules for menupopup drop indicators */
3344 .menupopup-drop-indicator-bar {
3345   position: relative;
3346   /* these two margins must together compensate the indicator's height */
3347   margin-top: -1px;
3348   margin-bottom: -1px;
3349 }
3350
3351 .menupopup-drop-indicator {
3352   list-style-image: none;
3353   height: 2px;
3354   margin-inline-end: -4em;
3355   background-color: #008484;
3356 }
3357
3358 /* === BEGIN notification-icons.inc.css === */
3359
3360 #notification-popup-box {
3361   border-radius: 3px 0 0 3px;
3362   padding: 5px 0px;
3363   margin: -5px 0px;
3364   margin-inline-end: -5px;
3365   padding-inline-end: 5px;
3366 }
3367
3368 /* This class can be used alone or in combination with the class defining the
3369    type of icon displayed. This rule must be defined before the others in order
3370    for its list-style-image to be overridden. */
3371 .notification-anchor-icon {
3372   width: 16px;
3373   height: 16px;
3374   margin-inline-start: 2px;
3375   list-style-image: url("chrome://global/skin/icons/information-16.png");
3376 }
3377
3378 .notification-anchor-icon:-moz-focusring {
3379   outline: 1px dotted #008484;
3380 }
3381
3382 @media (min-resolution: 1.1dppx) {
3383   .notification-anchor-icon {
3384     list-style-image: url(chrome://global/skin/icons/information-32.png);
3385   }
3386 }
3387
3388 .popup-notification-icon {
3389   width: 64px;
3390   height: 64px;
3391   margin-inline-end: 10px;
3392 }
3393
3394 #notification-popup-box > .notification-anchor-icon:not(.in-use):hover {
3395   fill: #000000;
3396 }
3397
3398 /* INDIVIDUAL NOTIFICATIONS */
3399
3400 /* For the moment we apply the color filter only on the icons listed here.
3401    The first two selectors are used by socialchat.xml (bug 1275558). */
3402 .webRTC-sharingDevices-notification-icon,
3403 .webRTC-sharingMicrophone-notification-icon,
3404 .camera-icon,
3405 .geo-icon,
3406 .indexedDB-icon,
3407 .install-icon,
3408 .login-icon,
3409 .microphone-icon,
3410 .plugin-icon,
3411 .pointerLock-icon,
3412 .popup-icon,
3413 .screen-icon,
3414 .desktop-notification-icon,
3415 .popup-notification-icon[popupid="geolocation"],
3416 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
3417 .popup-notification-icon[popupid="password"],
3418 .popup-notification-icon[popupid="pointerLock"],
3419 .popup-notification-icon[popupid="webRTC-shareDevices"],
3420 .popup-notification-icon[popupid="webRTC-shareMicrophone"],
3421 .popup-notification-icon[popupid="webRTC-shareScreen"],
3422 .popup-notification-icon[popupid="webRTC-sharingDevices"],
3423 .popup-notification-icon[popupid="webRTC-sharingMicrophone"],
3424 .popup-notification-icon[popupid="webRTC-sharingScreen"],
3425 .popup-notification-icon[popupid="web-notifications"] {
3426   filter: url(chrome://global/skin/filters.svg#fill);
3427   fill: #A09090;
3428 }
3429
3430 /* The first two selectors are used by socialchat.xml (bug 1275558). The
3431    notifications in the chat window are only shown when they are in use. */
3432 .webRTC-sharingDevices-notification-icon,
3433 .webRTC-sharingMicrophone-notification-icon,
3434 .in-use {
3435   fill: #008484;
3436 }
3437
3438 .popup-notification-icon[popupid="web-notifications"],
3439 .desktop-notification-icon {
3440   list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification);
3441 }
3442
3443 .desktop-notification-icon.blocked {
3444   list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification-blocked);
3445 }
3446
3447 .geo-icon {
3448   list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows);
3449 }
3450
3451 .geo-icon.blocked {
3452   list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-blocked);
3453 }
3454
3455 .popup-notification-icon[popupid="geolocation"] {
3456   list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-detailed);
3457 }
3458
3459 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
3460 .indexedDB-icon {
3461   list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB);
3462 }
3463
3464 .indexedDB-icon.blocked {
3465   list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB-blocked);
3466 }
3467
3468 .login-icon {
3469   list-style-image: url(chrome://browser/skin/notification-icons.svg#login);
3470 }
3471
3472 .popup-notification-icon[popupid="password"] {
3473   list-style-image: url(chrome://browser/skin/notification-icons.svg#login-detailed);
3474 }
3475
3476 #login-fill-notification-icon {
3477   /* Temporary solution until the capture and fill doorhangers are unified. */
3478   transform: scaleX(-1);
3479 }
3480
3481 /* The first selector is used by socialchat.xml (bug 1275558). */
3482 .webRTC-sharingDevices-notification-icon,
3483 .camera-icon,
3484 .popup-notification-icon[popupid="webRTC-shareDevices"],
3485 .popup-notification-icon[popupid="webRTC-sharingDevices"] {
3486   list-style-image: url(chrome://browser/skin/notification-icons.svg#camera);
3487 }
3488
3489 .camera-icon.blocked {
3490   list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-blocked);
3491 }
3492
3493 /* The first selector is used by socialchat.xml (bug 1275558). */
3494 .webRTC-sharingMicrophone-notification-icon,
3495 .microphone-icon {
3496   list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone);
3497 }
3498
3499 .microphone-icon.blocked {
3500   list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-blocked);
3501 }
3502
3503 .popup-notification-icon[popupid="webRTC-shareMicrophone"],
3504 .popup-notification-icon[popupid="webRTC-sharingMicrophone"] {
3505   list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-detailed);
3506 }
3507
3508 .popup-notification-icon[popupid="webRTC-shareScreen"],
3509 .popup-notification-icon[popupid="webRTC-sharingScreen"],
3510 .screen-icon {
3511   list-style-image: url(chrome://browser/skin/notification-icons.svg#screen);
3512 }
3513
3514 .screen-icon.blocked {
3515   list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-blocked);
3516 }
3517
3518 .popup-notification-icon[popupid="pointerLock"],
3519 .pointerLock-icon {
3520   list-style-image: url(chrome://browser/skin/notification-icons.svg#pointerLock);
3521 }
3522
3523 .pointerLock-icon.blocked {
3524   list-style-image: url(chrome://browser/skin/notification-icons.svg#pointerLock-blocked);
3525 }
3526
3527 /* This icon has a block sign in it, so we don't need a blocked version. */
3528 .popup-icon {
3529   list-style-image: url("chrome://browser/skin/notification-icons.svg#popup");
3530 }
3531
3532 /* EME */
3533
3534 .popup-notification-icon[popupid="drmContentPlaying"],
3535 .drm-icon {
3536   list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
3537 }
3538
3539 .drm-icon:hover:active {
3540   list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed");
3541 }
3542
3543 #eme-notification-icon[firstplay=true] {
3544   animation: emeTeachingMoment 0.2s linear 0s 5 normal;
3545 }
3546
3547 @keyframes emeTeachingMoment {
3548   0% {transform: translateX(0); }
3549   25% {transform: translateX(3px) }
3550   75% {transform: translateX(-3px) }
3551   100% { transform: translateX(0); }
3552 }
3553
3554 /* INSTALL ADDONS */
3555
3556 .install-icon {
3557   list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#default);
3558 }
3559
3560 .popup-notification-icon[popupid="xpinstall-disabled"],
3561 .popup-notification-icon[popupid="addon-install-blocked"],
3562 .popup-notification-icon[popupid="addon-install-origin-blocked"] {
3563   list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg);
3564 }
3565
3566 .popup-notification-icon[popupid="addon-progress"] {
3567   list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg);
3568 }
3569
3570 .popup-notification-icon[popupid="addon-install-failed"] {
3571   list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg);
3572 }
3573
3574 .popup-notification-icon[popupid="addon-install-confirmation"] {
3575   list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg);
3576 }
3577
3578 #addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] {
3579   list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg);
3580 }
3581
3582 .popup-notification-icon[popupid="addon-install-complete"] {
3583   list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg);
3584 }
3585
3586 .popup-notification-icon[popupid="addon-install-restart"] {
3587   list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg);
3588 }
3589
3590 .popup-notification-icon[popupid="click-to-play-plugins"] {
3591   list-style-image: url(chrome://mozapps/skin/plugins/pluginBlocked-64.png);
3592 }
3593
3594 /* OFFLINE APPS */
3595
3596 .popup-notification-icon[popupid*="offline-app-requested"],
3597 .popup-notification-icon[popupid="offline-app-usage"] {
3598   list-style-image: url(chrome://global/skin/icons/question-64.png);
3599 }
3600
3601 /* PLUGINS */
3602
3603 .plugin-icon {
3604   list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
3605 }
3606
3607 .plugin-icon.plugin-blocked {
3608   list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
3609   fill: #FF0000 !important; /* important! to override the default hover color */
3610 }
3611
3612 #notification-popup-box[hidden] {
3613   /* Override display:none to make the pluginBlockedNotification animation work
3614      when showing the notification repeatedly. */
3615   display: -moz-box;
3616   visibility: collapse;
3617 }
3618
3619 #plugins-notification-icon.plugin-blocked[showing] {
3620   animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
3621 }
3622
3623 @keyframes pluginBlockedNotification {
3624   from {
3625     opacity: 0;
3626   }
3627   to {
3628     opacity: 1;
3629   }
3630 }
3631
3632 /* SOCIAL API */
3633
3634 .popup-notification-icon[popupid="servicesInstall"] {
3635   list-style-image: url(chrome://browser/skin/social/services-64.png);
3636 }
3637
3638 .service-icon {
3639   list-style-image: url(chrome://browser/skin/social/services-16.png);
3640 }
3641
3642 /* TRANSLATION */
3643
3644 .translation-icon {
3645   list-style-image: url(chrome://browser/skin/translation-16.png);
3646   -moz-image-region: rect(0px, 16px, 16px, 0px);
3647 }
3648
3649 .translation-icon.in-use {
3650   -moz-image-region: rect(0px, 32px, 16px, 16px);
3651 }
3652
3653 /* === END notification-icons.inc.css === */
3654
3655 .popup-notification-body[popupid="addon-progress"],
3656 .popup-notification-body[popupid="addon-install-confirmation"] {
3657   width: 28em;
3658   max-width: 28em;
3659 }
3660
3661 /* Translation infobar */
3662
3663 /* === BEGIN infobar.inc.css === */
3664
3665 notification[value="translation"] .messageImage {
3666   list-style-image: url("chrome://browser/skin/translation-16.png");
3667   -moz-image-region: rect(0, 32px, 16px, 16px);
3668 }
3669
3670 @media (min-resolution: 1.25dppx) {
3671   notification[value="translation"] .messageImage {
3672     list-style-image: url("chrome://browser/skin/translation-16@2x.png");
3673     -moz-image-region: rect(0, 64px, 32px, 32px);
3674   }
3675 }
3676
3677 notification[value="translation"][state="translating"] .messageImage {
3678   list-style-image: url("chrome://browser/skin/translating-16.png");
3679   -moz-image-region: auto;
3680 }
3681
3682 @media (min-resolution: 1.25dppx) {
3683   notification[value="translation"][state="translating"] .messageImage {
3684     list-style-image: url("chrome://browser/skin/translating-16@2x.png");
3685   }
3686 }
3687
3688 notification[value="translation"] hbox[anonid="details"] {
3689   overflow: hidden;
3690 }
3691
3692 notification[value="translation"] button,
3693 notification[value="translation"] menulist {
3694   min-width: 0;
3695 }
3696
3697 notification[value="translation"] menulist > .menulist-dropmarker {
3698 }
3699
3700 .translation-menupopup arrowscrollbox {
3701   padding-bottom: 0;
3702 }
3703
3704 .translation-attribution {
3705   cursor: pointer;
3706   -moz-box-align: end;
3707   font-size: small;
3708 }
3709
3710 .translation-attribution > label {
3711   margin-bottom: 0;
3712 }
3713
3714 .translation-attribution > image {
3715   width: 70px;
3716 }
3717
3718 .translation-welcome-panel {
3719   width: 305px;
3720 }
3721
3722 .translation-welcome-logo {
3723   height: 32px;
3724   width: 32px;
3725   list-style-image: url(chrome://browser/skin/translation-16@2x.png);
3726   -moz-image-region: rect(0, 64px, 32px, 32px);
3727 }
3728
3729 .translation-welcome-content {
3730   margin-inline-start: 16px;
3731 }
3732
3733 .translation-welcome-headline {
3734   font-size: larger;
3735   font-weight: bold;
3736 }
3737
3738 .translation-welcome-body {
3739   padding: 1em 0;
3740   margin: 0 0;
3741 }
3742
3743 /* === END infobar.inc.css === */
3744
3745 notification[value="translation"] {
3746   min-height: 40px;
3747 }
3748
3749 .translation-menupopup {
3750   -moz-appearance: none;
3751 }
3752
3753 /* Bookmarks roots menu-items */
3754 #subscribeToPageMenuitem:not([disabled]),
3755 #subscribeToPageMenupopup {
3756   list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
3757 }
3758
3759 #bookmarksToolbarFolderMenu,
3760 #BMB_bookmarksToolbar,
3761 #panelMenu_bookmarksToolbar {
3762   list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
3763   -moz-image-region: auto;
3764 }
3765
3766 #BMB_unsortedBookmarks,
3767 #panelMenu_unsortedBookmarks {
3768   list-style-image: url("chrome://communicator/skin/bookmarks/unsortedBookmarks.png");
3769   -moz-image-region: auto;
3770 }
3771
3772 /* Ctrl-Tab */
3773
3774 #ctrlTab-panel {
3775   -moz-appearance: none;
3776   background: rgba(0%,0%,0%,.7);
3777   color: #FF9F00;
3778   border-style: none;
3779   padding: 20px 10px 10px;
3780   font-weight: bold;
3781 }
3782
3783 .ctrlTab-favicon[src] {
3784   background-color: #000000;
3785   width: 20px;
3786   height: 20px;
3787   padding: 2px;
3788 }
3789
3790 .ctrlTab-preview-inner > .tabPreview-canvas {
3791 /*  box-shadow: 1px 1px 2px hsl(0,0%,12%);*/
3792 }
3793
3794 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
3795   margin-bottom: 2px;
3796 }
3797
3798 .ctrlTab-preview-inner {
3799   padding-bottom: 10px;
3800 }
3801
3802 #ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
3803   padding: 10px;
3804   background-color: #000000;
3805   border-radius: .5em;
3806 }
3807
3808 .ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
3809   color: white;
3810   background-color: #000000;
3811   text-shadow: none;
3812   padding: 8px;
3813   border: 2px solid #9C9CFF;
3814   border-radius: .5em;
3815 }
3816
3817 .ctrlTab-preview:not(#ctrlTab-showAll):focus > * > .ctrlTab-preview-inner {
3818   margin: -10px -10px 0;
3819 }
3820
3821 #ctrlTab-showAll {
3822   margin-top: .5em;
3823 }
3824
3825 /* Status panel */
3826
3827 .statuspanel-label {
3828   margin: 0;
3829   padding: 2px 4px;
3830   background: #404000;
3831   border: 1px none #9C9CFF;
3832   border-top-style: solid;
3833   color: #FF9F00;
3834   text-shadow: none;
3835 }
3836
3837 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
3838 .statuspanel-label:-moz-locale-dir(rtl)[mirror] {
3839   border-right-style: solid;
3840   border-top-right-radius: .3em;
3841   margin-right: 1em;
3842 }
3843
3844 .statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
3845 .statuspanel-label:-moz-locale-dir(ltr)[mirror] {
3846   border-left-style: solid;
3847   border-top-left-radius: .3em;
3848   margin-left: 1em;
3849 }
3850
3851 /* HACK to abolish devily color on main content */
3852
3853 #content {
3854   background-color: transparent !important;
3855 }
3856
3857 /* === BEGIN fullscreen/warning.inc.css === */
3858
3859 html|*.pointerlockfswarning {
3860   align-items: center;
3861   background: rgba(0, 0, 0, 0.9);
3862   border: 2px solid #A09090;
3863   box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
3864   border-radius: 8px;
3865   padding: 24px 16px;
3866   font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3867 }
3868
3869 html|*.pointerlockfswarning::before {
3870   margin: 0;
3871   width: 24px; height: 24px;
3872 }
3873
3874 html|*.pointerlockfswarning[data-identity="verifiedIdentity"]::before,
3875 html|*.pointerlockfswarning[data-identity="verifiedDomain"]::before {
3876   content: url("chrome://browser/skin/fullscreen/secure.svg");
3877 }
3878
3879 html|*.pointerlockfswarning[data-identity="unknownIdentity"]::before {
3880   content: url("chrome://browser/skin/fullscreen/insecure.svg");
3881 }
3882
3883 html|*.pointerlockfswarning-domain-text,
3884 html|*.pointerlockfswarning-generic-text {
3885   font-size: 21px;
3886   font-weight: lighter;
3887   color: #A09090;
3888   margin: 0 16px;
3889 }
3890
3891 html|*.pointerlockfswarning-domain {
3892   font-weight: bold;
3893   margin: 0;
3894 }
3895
3896 html|*.pointerlockfswarning-exit-button {
3897   padding: 5px 30px;
3898   font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3899   font-size: 14px;
3900   font-weight: lighter;
3901   margin: 0;
3902   box-sizing: content-box;
3903
3904   border-radius: 300px;
3905   border: none;
3906   background-color: #C09070;
3907   color: #000000;
3908 }
3909
3910 /* === END fullscreen/warning.inc.css === */
3911
3912 /* === BEGIN commandline.inc.css === */
3913
3914 /* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS.
3915    We are copy/pasting variables from light-theme and dark-theme,
3916    since they aren't loaded in this context (within browser.css). */
3917 :root #developer-toolbar {
3918   --gcli-background-color: #000000; /* --theme-toolbar-background */
3919   --gcli-input-background: rgba(0, 0, 0, .75); /* --theme-tab-toolbar-background */
3920   --gcli-input-focused-background: #000000; /* --theme-sidebar-background */
3921   --gcli-input-color: #FF9F00; /* --theme-body-color-alt */
3922   --gcli-border-color: #9C9CFF; /* --theme-splitter-color */
3923   --selection-background: #008484; /* --theme-selection-background */
3924   --selection-color: #000000; /* --theme-selection-color */
3925   --command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme); /* --theme-command-line-image */
3926   --command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme-focus); /* --theme-command-line-image-focus */
3927 }
3928
3929 /* Developer toolbar */
3930
3931 #developer-toolbar {
3932   border-top: 3px solid var(--gcli-background-color);
3933   border-bottom: none;
3934 }
3935
3936 #developer-toolbar .toolbar-holder {
3937   background-color: #8050B0;
3938   color: #FFCF00;
3939 }
3940
3941 #developer-toolbar .toolbar-holder {
3942   background-color: #8050B0;
3943   color: #FFCF00;
3944 }
3945
3946 #developer-toolbar .toolbar-startcap,
3947 #developer-toolbar .toolbar-endcap{
3948   background-color: #6000CF;
3949 }
3950
3951 #developer-toolbar {
3952 /*  padding: 0;
3953   min-height: 32px; */
3954 }
3955
3956 #developer-toolbar > toolbarbutton {
3957 /*  border: none;
3958   background-color: transparent;
3959   margin: 0;
3960   padding: 0 10px;
3961   width: 32px; */
3962 }
3963
3964 .developer-toolbar-button > image {
3965 /*  margin: auto 10px; */
3966 }
3967
3968 #developer-toolbar-toolbox-button > label {
3969   display: none;
3970 }
3971
3972 .developer-toolbar-button > .toolbarbutton-icon {
3973   width: 16px;
3974   height: 16px;
3975 }
3976
3977 #developer-toolbar-toolbox-button {
3978   list-style-image: url("chrome://devtools/skin/images/toggle-tools.png");
3979   -moz-image-region: rect(0px, 16px, 16px, 0px);
3980 }
3981
3982 #developer-toolbar-toolbox-button > label {
3983   display: none;
3984 }
3985
3986 #developer-toolbar-toolbox-button:hover,
3987 #developer-toolbar-toolbox-button:hover:active,
3988 #developer-toolbar-toolbox-button[checked=true] {
3989   -moz-image-region: rect(0px, 32px, 16px, 16px);
3990 }
3991
3992 @media (min-resolution: 2dppx) {
3993   #developer-toolbar-toolbox-button {
3994     list-style-image: url("chrome://devtools/skin/images/toggle-tools@2x.png");
3995     -moz-image-region: rect(0px, 32px, 32px, 0px);
3996   }
3997
3998   #developer-toolbar-toolbox-button:hover,
3999   #developer-toolbar-toolbox-button:hover:active,
4000   #developer-toolbar-toolbox-button[checked=true] {
4001     -moz-image-region: rect(0px, 64px, 32px, 32px);
4002   }
4003 }
4004
4005 /* GCLI */
4006
4007 html|*#gcli-tooltip-frame,
4008 html|*#gcli-output-frame {
4009   padding: 0;
4010   border-width: 0;
4011   background-color: transparent;
4012 }
4013
4014 #gcli-output,
4015 #gcli-tooltip {
4016   border-width: 0;
4017   background-color: transparent;
4018 }
4019
4020 .gclitoolbar-input-node,
4021 .gclitoolbar-complete-node {
4022   margin: 1px 3px;
4023   -moz-box-align: center;
4024   padding-top: 0;
4025   padding-bottom: 0;
4026   padding-right: 8px;
4027   background-color: transparent;
4028 }
4029
4030 .gclitoolbar-input-node {
4031 /*  line-height: 32px;
4032   outline-style: none; */
4033   background-repeat: no-repeat;
4034   background-color: var(--gcli-input-background);
4035 }
4036
4037 .gclitoolbar-input-node[focused="true"] {
4038   background-color: var(--gcli-input-focused-background);
4039 }
4040
4041 .gclitoolbar-input-node::before {
4042   content: "";
4043   display: inline-block;
4044   -moz-box-ordinal-group: 0;
4045   width: 16px;
4046   height: 16px;
4047   margin: 0 2px;
4048   background-image: var(--command-line-image);
4049 }
4050
4051 .gclitoolbar-input-node[focused="true"]::before {
4052   background-image: var(--command-line-image-focus);
4053 }
4054
4055 .gclitoolbar-input-node:not([focused="true"]) {
4056   border-color: transparent;
4057 }