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