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