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