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