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