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