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