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