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