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