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 > deck[anonid="search-suggestions-notification"] {
1877   border-bottom: 1px solid var(--panel-separator-color);
1878   padding-inline-start: 0;
1879   padding-inline-end: 6px;
1880   min-height: 3em;
1881 }
1882
1883 /* Opt-in notification */
1884
1885 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] > hbox[anonid="search-suggestions-opt-in"] {
1886   padding: 6px 0;
1887   padding-inline-start: 44px;
1888   background-color: #000000;
1889   background-image: url("chrome://browser/skin/info.svg");
1890   background-clip: padding-box;
1891   background-position: 20px center;
1892   background-repeat: no-repeat;
1893   background-size: 16px 16px;
1894 }
1895
1896 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) {
1897   background-position: right 20px center;
1898 }
1899
1900 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] > hbox[anonid="search-suggestions-notification"] > description {
1901   margin: 0;
1902   padding: 0;
1903 }
1904
1905 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] > hbox[anonid="search-suggestions-notification"] > description > label.text-link {
1906   margin-inline-start: 0;
1907 }
1908
1909 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] button {
1910   -moz-appearance: none;
1911   min-width: 80px;
1912   border-radius: 3px;
1913   padding: 4px 16px;
1914   margin: 0;
1915   margin-inline-start: 10px;
1916 }
1917
1918 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] button[anonid="search-suggestions-notification-disable"] {
1919 }
1920
1921 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] button[anonid="search-suggestions-notification-disable"]:hover {
1922 }
1923
1924 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] button[anonid="search-suggestions-notification-enable"] {
1925 }
1926
1927 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] button[anonid="search-suggestions-notification-enable"]:hover {
1928 }
1929
1930 /* Opt-out hint */
1931
1932 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] > hbox[anonid="search-suggestions-opt-out"] {
1933   font: message-box;
1934 }
1935
1936 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] hbox[anonid="search-suggestions-hint-box"] > description {
1937   margin: auto;
1938   padding: 4px 8px;
1939   background-color: #000000;
1940   border: 1px solid #FFCF00;
1941   border-radius: 4px;
1942   color: #A09090;
1943 }
1944
1945 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] hbox[anonid="search-suggestions-hint-box"] > description > html|span {
1946   unicode-bidi: embed;
1947 }
1948
1949 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] hbox[anonid="search-suggestions-hint-box"] > description > html|span.prefix {
1950   font-weight: bold;
1951 }
1952
1953 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][animate] > hbox[anonid="search-suggestions-opt-out"] > .ac-site-icon {
1954   transform: scale(0);
1955   animation-name: search-suggestions-hint-grow;
1956   animation-duration: 500ms;
1957   animation-delay: 500ms;
1958   animation-iteration-count: 1;
1959   animation-timing-function: ease-in-out;
1960   animation-fill-mode: forwards;
1961 }
1962
1963 @keyframes search-suggestions-hint-grow {
1964   0%   { transform: scale(0); }
1965   40%  { transform: scale(1.5); }
1966   60%  { transform: scale(1); }
1967   80%  { transform: scale(1.25); }
1968   100% { transform: scale(1); }
1969 }
1970
1971 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][animate] hbox[anonid="search-suggestions-hint-typing"] > .ac-title-text {
1972   text-overflow: clip;
1973 }
1974
1975 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][animate] hbox[anonid="search-suggestions-hint-typing"] {
1976   overflow: hidden;
1977   max-width: 8ch;
1978   width: 0;
1979   animation-name: search-suggestions-hint-typing;
1980   animation-duration: 500ms;
1981   animation-delay: 750ms;
1982   animation-iteration-count: 1;
1983   animation-fill-mode: forwards;
1984 }
1985
1986 @keyframes search-suggestions-hint-typing {
1987   from { width: 0; }
1988   to   { width: 8ch; }
1989 }
1990
1991 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][animate] hbox[anonid="search-suggestions-hint-box"] {
1992   opacity: 0;
1993   animation-duration: 250ms;
1994   animation-delay: 1500ms;
1995   animation-iteration-count: 1;
1996   animation-fill-mode: forwards;
1997 }
1998
1999 /* Margin-inline-start can't be animated yet */
2000 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][animate] hbox[anonid="search-suggestions-hint-box"]:-moz-locale-dir(ltr) {
2001   margin-left: 160px;
2002   animation-name: search-suggestions-hint-buildin-ltr;
2003 }
2004
2005 @keyframes search-suggestions-hint-buildin-ltr {
2006   from  { margin-left: 160px; opacity: 0; }
2007   to    { margin-left: 0; opacity: 1; }
2008 }
2009
2010 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][animate] hbox[anonid="search-suggestions-hint-box"]:-moz-locale-dir(rtl) {
2011   /* Should be margin-inline-start but that can't be animated yet */
2012   margin-right: 160px;
2013   animation-name: search-suggestions-hint-buildin-rtl;
2014 }
2015
2016 @keyframes search-suggestions-hint-buildin-rtl {
2017   from  { margin-right: 160px; opacity: 0; }
2018   to    { margin-right: 0; opacity: 1; }
2019 }
2020
2021 #search-suggestions-change-settings {
2022   opacity: 0;
2023   animation-name: search-suggestions-hint-fadein;
2024   animation-duration: 500ms;
2025   animation-delay: 1800ms;
2026   animation-iteration-count: 1;
2027   animation-fill-mode: forwards;
2028 }
2029
2030 @keyframes search-suggestions-hint-fadein {
2031   from  { opacity: 0 }
2032   to    { opacity: 1 }
2033 }
2034
2035 /* === END urlbarSearchSuggestionsNotification.inc.css === */
2036
2037 #search-container {
2038   min-width: calc(54px + 11ch);
2039 }
2040
2041 /* identity box */
2042
2043 #identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) {
2044   background-color: var(--identity-box-verified-background-color);
2045 }
2046
2047 #identity-box:-moz-focusring {
2048   outline: 1px dotted;
2049   outline-offset: -1px;
2050 }
2051
2052 #identity-box.verifiedDomain:-moz-focusring,
2053 #identity-box.verifiedIdentity:-moz-focusring {
2054   outline-color: #000000;
2055 }
2056
2057 /* Location bar dropmarker */
2058
2059 .urlbar-history-dropmarker:not(:hover):not([open="true"]) {
2060   background-color: transparent;
2061 }
2062
2063 #urlbar-container[combined="true"] > #urlbar > .urlbar-history-dropmarker,
2064 #urlbar-wrapper > #urlbar > .urlbar-history-dropmarker,
2065 #urlbar-wrapper > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
2066   border: none;
2067   border-radius: 0px;
2068   transition: opacity 0.15s ease;
2069 }
2070
2071 #urlbar-wrapper[switchingtabs] > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
2072   transition: none;
2073 }
2074
2075 #navigator-toolbox:not(:hover) #nav-bar:not([customizing="true"]) #urlbar:not([focused]) > .urlbar-textbox-container > .urlbar-history-dropmarker {
2076   opacity: 0;
2077 }
2078
2079 .urlbar-history-dropmarker:hover {
2080 }
2081
2082 .urlbar-history-dropmarker:hover:active,
2083 .urlbar-history-dropmarker[open="true"] {
2084 }
2085
2086 /* page proxy icon */
2087 /* === BEGIN identity-block.inc.css === */
2088
2089 #identity-box {
2090   font-size: .9em;
2091   border-radius: 2px;
2092   padding: 3px 5px;
2093   overflow: hidden;
2094   /* The padding-left and padding-right transitions handle the delayed hiding of
2095      the forward button when hovered. */
2096   transition: background-color 150ms ease, padding-left, padding-right;
2097 }
2098
2099 #identity-box:-moz-locale-dir(ltr) {
2100   border-top-right-radius: 0;
2101   border-bottom-right-radius: 0;
2102 }
2103
2104 #identity-box:-moz-locale-dir(rtl) {
2105   border-top-left-radius: 0;
2106   border-bottom-left-radius: 0;
2107 }
2108
2109 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
2110   border-inline-end: 1px solid #008484;
2111 }
2112
2113 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #identity-icon-labels {
2114   color: #008484;
2115 }
2116
2117 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
2118   border-inline-end: 1px solid #9C9CFF;
2119 }
2120
2121 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon-labels {
2122   color: #9C9CFF;
2123 }
2124
2125
2126 #identity-icon-labels:-moz-locale-dir(ltr) {
2127   padding-left: 2px;
2128 }
2129
2130 #identity-icon-labels:-moz-locale-dir(rtl) {
2131   padding-right: 2px;
2132 }
2133
2134 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box {
2135 /*   border-radius: 0;
2136   padding-inline-start: 2px; */
2137   padding-inline-end: 2px;
2138   margin-inline-end: 1px;
2139 }
2140
2141 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > #identity-box {
2142   padding-inline-start: 2px;
2143 }
2144
2145 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar > #identity-box {
2146   /* Forward button hiding is delayed when hovered, so we should use the same
2147      delay for the identity box. We handle both horizontal paddings (for LTR and
2148      RTL), the latter two delays here are for padding-left and padding-right. */
2149   transition-delay: 0s, 100s, 100s;
2150 }
2151
2152 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar > #identity-box {
2153   /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
2154   padding-inline-start: 2.01px;
2155 }
2156
2157 #identity-icon,
2158 #tracking-protection-icon,
2159 #connection-icon,
2160 #extension-icon {
2161   width: 16px;
2162   height: 16px;
2163   -moz-context-properties: fill;
2164   fill: #A09090;
2165 }
2166
2167 #identity-icon:-moz-lwtheme,
2168 #tracking-protection-icon:-moz-lwtheme,
2169 #connection-icon:-moz-lwtheme,
2170 #extension-icon:-moz-lwtheme {
2171 /*  fill: rgba(0,0,0,.6);*/
2172 }
2173
2174 /* MAIN IDENTITY ICON */
2175
2176 #identity-icon {
2177   width: 16px;
2178   height: 16px;
2179   list-style-image: url(chrome://browser/skin/identity-icon.svg#normal);
2180 }
2181
2182 #identity-box:hover > #identity-icon:not(.no-hover),
2183 #identity-box[open=true] > #identity-icon {
2184   list-style-image: url(chrome://browser/skin/identity-icon.svg#hover);
2185 }
2186
2187 #identity-box.grantedPermissions > #identity-icon {
2188   list-style-image: url(chrome://browser/skin/identity-icon.svg#notice);
2189 }
2190
2191 #identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover),
2192 #identity-box.grantedPermissions[open=true] > #identity-icon {
2193   list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-hover);
2194 }
2195
2196 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon {
2197   list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
2198 }
2199
2200 #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon {
2201   opacity: .3;
2202 }
2203
2204 #urlbar[actiontype="searchengine"] > #identity-box > #identity-icon {
2205   list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg);
2206 }
2207
2208 #urlbar[actiontype="extension"] > #identity-box > #identity-icon {
2209   list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg);
2210 }
2211
2212 /* SHARING ICON */
2213
2214 #sharing-icon {
2215   width: 16px;
2216   height: 16px;
2217   margin-inline-start: -16px;
2218   position: relative;
2219   display: none;
2220 }
2221
2222 #identity-box[sharing="camera"] > #sharing-icon {
2223   list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing");
2224 }
2225
2226 #identity-box[sharing="microphone"] > #sharing-icon {
2227   list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing");
2228 }
2229
2230 #identity-box[sharing="screen"] > #sharing-icon {
2231   list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing");
2232
2233 }
2234
2235 #identity-box[sharing] > #sharing-icon {
2236   display: -moz-box;
2237   animation-delay: -1.5s;
2238 }
2239
2240 #identity-box[sharing] > #identity-icon,
2241 #sharing-icon {
2242   animation: 3s linear identity-box-sharing-icon-pulse infinite;
2243 }
2244
2245 @keyframes identity-box-sharing-icon-pulse {
2246 /* This should remain identical to tab-sharing-icon-pulse in tabs.inc.css */
2247   0%, 16.66%, 83.33%, 100% {
2248     opacity: 0;
2249   }
2250   33.33%, 66.66% {
2251     opacity: 1;
2252   }
2253 }
2254
2255 /* TRACKING PROTECTION ICON */
2256
2257 #tracking-protection-icon {
2258   list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#enabled);
2259   margin-inline-start: 2px;
2260   margin-inline-end: 0;
2261 }
2262
2263 #tracking-protection-icon[state="loaded-tracking-content"] {
2264   list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#disabled);
2265 }
2266
2267 #tracking-protection-icon[animate] {
2268   transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
2269 }
2270
2271 #tracking-protection-icon:not([state]) {
2272   margin-inline-end: -18px;
2273   pointer-events: none;
2274   opacity: 0;
2275   /* Only animate the shield in, when it disappears hide it immediately. */
2276   transition: none;
2277 }
2278
2279 #urlbar[pageproxystate="invalid"] > #identity-box > #extension-icon,
2280 #urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
2281   visibility: collapse;
2282 }
2283
2284 /* CONNECTION ICON, EXTENSION ICON */
2285
2286 #connection-icon,
2287 #extension-icon {
2288   width: 16px;
2289   height: 16px;
2290   margin-inline-start: 2px;
2291   visibility: collapse;
2292 }
2293
2294 #urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon,
2295 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon,
2296 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon {
2297   list-style-image: url(chrome://browser/skin/connection-secure.svg);
2298   visibility: visible;
2299 }
2300
2301 #urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon,
2302 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon,
2303 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon,
2304 #urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon {
2305   list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon);
2306   visibility: visible;
2307 }
2308
2309 #urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon,
2310 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon {
2311   list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon);
2312   visibility: visible;
2313 }
2314
2315 #identity-box.extensionPage > #extension-icon {
2316   list-style-image: url(chrome://browser/skin/controlcenter/extension.svg);
2317   visibility: visible;
2318 }
2319
2320 /* REMOTE CONTROL ICON */
2321
2322 #main-window[remotecontrol] #remote-control-icon {
2323   list-style-image: url(chrome://browser/content/robot.ico);
2324   visibility: visible;
2325   width: 16px;
2326   height: 16px;
2327   margin-inline-start: 2px;
2328 }
2329
2330 /* === END identity-block.inc.css === */
2331
2332 #page-proxy-favicon {
2333   -moz-image-region: rect(0, 16px, 16px, 0);
2334 }
2335
2336 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
2337 /*  margin-inline-end: 1px;*/
2338 }
2339
2340 #identity-box:hover > #page-proxy-favicon {
2341   -moz-image-region: rect(0, 32px, 16px, 16px);
2342 }
2343
2344 #identity-box:hover:active > #page-proxy-favicon,
2345 #identity-box[open=true] > #page-proxy-favicon {
2346   -moz-image-region: rect(0, 48px, 16px, 32px);
2347 }
2348
2349 #identity-box:hover {
2350   background-color: #FFCF00;
2351   color: #000000;
2352 }
2353
2354 #identity-box:hover:active,
2355 #identity-box[open=true] {
2356   background-color: #FF9F00;
2357   color: #000000;
2358 }
2359
2360 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover,
2361 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active,
2362 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] {
2363   background-color: #A09090;
2364   color: #000000;
2365 }
2366
2367 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover > #identity-icon-labels,
2368 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active > #identity-icon-labels,
2369 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] > #identity-icon-labels {
2370   color: #000000;
2371 }
2372
2373 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover,
2374 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active,
2375 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] {
2376   background-color: #008484;
2377   color: #000000;
2378 }
2379
2380 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover > #identity-icon-labels,
2381 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active > #identity-icon-labels,
2382 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] > #identity-icon-labels {
2383   color: #000000;
2384 }
2385
2386 #identity-box:hover > image,
2387 #identity-box:hover:active > image,
2388 #identity-box[open=true] > image {
2389   filter: url(chrome://global/skin/filters.svg#active-icon-state);
2390 }
2391
2392 /* autocomplete */
2393
2394 /* === BEGIN autocomplete.inc.css === */
2395
2396 #PopupAutoComplete > richlistbox > richlistitem {
2397   height: 20px;
2398   min-height: 20px;
2399   border: 0;
2400   border-radius: 0;
2401   padding: 0px 1px 0px 1px;
2402 }
2403
2404 #PopupAutoComplete > richlistbox > richlistitem > .ac-site-icon {
2405   margin-inline-start: 4px;
2406   margin-inline-end: 0;
2407 }
2408
2409 #PopupAutoComplete > richlistbox > richlistitem > .ac-title {
2410   font: icon;
2411   margin-inline-start: 4px;
2412 }
2413
2414 #PopupAutoComplete > richlistbox {
2415   padding: 0;
2416 }
2417
2418 /* Login form autocompletion */
2419 #PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon {
2420   display: initial;
2421   list-style-image: url(chrome://browser/skin/notification-icons.svg#login);
2422 }
2423
2424 #PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon[selected] {
2425   list-style-image: url(chrome://browser/skin/notification-icons.svg#login-highlighted);
2426 }
2427
2428 /* Insecure field warning */
2429 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] {
2430   background-color: var(--arrowpanel-dimmed);
2431   border-bottom: 1px solid var(--panel-separator-color);
2432   padding-bottom: 4px;
2433   padding-top: 4px;
2434 }
2435
2436 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"][selected] {
2437   background-color: var(--arrowpanel-dimmed-further);
2438   color: #FFCF00;
2439 }
2440
2441 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-title {
2442   color: #A09090;
2443   font-size: 1em;
2444 }
2445
2446 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"][selected] > .ac-title {
2447   color: inherit;
2448 }
2449
2450 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-site-icon {
2451   list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon);
2452 }
2453
2454 /* === END autocomplete.inc.css === */
2455
2456 #PopupAutoComplete > richlistbox > richlistitem[originaltype~="datalist-first"] {
2457   border-top: 1px solid #A09090;
2458 }
2459
2460 #treecolAutoCompleteImage {
2461   max-width: 36px;
2462 }
2463
2464 /*
2465 .autocomplete-richlistbox {
2466   padding: 4px;
2467 }
2468
2469 .autocomplete-richlistitem {
2470   height: 30px;
2471   min-height: 30px;
2472   font: message-box;
2473   border-radius: 2px;
2474   border: 1px solid transparent;
2475 }
2476 */
2477 .ac-title {
2478   font-size: 14px;
2479 }
2480
2481 .ac-tags {
2482   font-size: 12px;
2483 }
2484 /*
2485 html|span.ac-tag {
2486   border-radius: 2px;
2487   border: 1px solid transparent;
2488   padding: 0 1px;
2489 }
2490 */
2491
2492 .ac-separator,
2493 .ac-url,
2494 .ac-action {
2495   font-size: 12px;
2496 }
2497
2498 html|span.ac-emphasize-text-title,
2499 html|span.ac-emphasize-text-tag,
2500 html|span.ac-emphasize-text-url {
2501   font-weight: 600;
2502 }
2503
2504 .ac-type-icon[type=bookmark] {
2505   list-style-image: url("chrome://browser/skin/urlbar-star.svg#star");
2506 }
2507
2508 .ac-type-icon[type=bookmark][selected][current] {
2509 /*  list-style-image: url("chrome://browser/skin/urlbar-star.svg#star-inverted");*/
2510 }
2511
2512 .ac-result-type-bookmark {
2513   list-style-image: url("chrome://browser/skin/places/bookmark.png");
2514   -moz-image-region: rect(0px 16px 16px 0px);
2515   width: 16px;
2516   height: 16px;
2517 }
2518
2519 richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark {
2520 /*  -moz-image-region: rect(0px 48px 16px 32px);*/
2521 }
2522
2523 .ac-type-icon[type=keyword],
2524 .ac-site-icon[type=searchengine] {
2525   list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg");
2526   context-properties: fill;
2527   fill: #FFCF00;
2528 }
2529
2530 .ac-type-icon[type=keyword][selected],
2531 .ac-site-icon[type=searchengine][selected] {
2532   list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg");
2533   context-properties: fill;
2534   fill: #000000;
2535 }
2536
2537 .ac-result-type-tag {
2538   list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
2539   width: 16px;
2540   height: 16px;
2541 }
2542
2543 .ac-type-icon[type=switchtab],
2544 .ac-type-icon[type=remotetab] {
2545   list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab");
2546 }
2547
2548 .ac-type-icon[type=switchtab][selected],
2549 .ac-type-icon[type=remotetab][selected] {
2550   list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab-inverted");
2551 }
2552
2553 .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
2554 .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
2555 {
2556   color: #8050B0;
2557   font-size: smaller;
2558 }
2559
2560 .autocomplete-treebody::-moz-tree-cell(suggesthint) {
2561   border-top: 1px solid #9C9CFF;
2562 }
2563
2564 /* combined go/reload/stop button in location bar */
2565
2566 #urlbar-go-button,
2567 #reload-button,
2568 #stop-button {
2569   border-style: none;
2570   list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
2571 /*  margin: 0 9px; */
2572   margin-inline-start: 0px;
2573   border-inline-start: 1px solid var(--urlbar-separator-color);
2574   border-image: linear-gradient(transparent 15%,
2575                                 var(--urlbar-separator-color) 15%,
2576                                 var(--urlbar-separator-color) 85%,
2577                                 transparent 85%);
2578   border-image-slice: 1;
2579 }
2580
2581 /* XXX: temporary for Photon preview changes */
2582 #reload-button,
2583 #stop-button {
2584   list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
2585 }
2586
2587 #urlbar:-moz-locale-dir(ltr) > toolbarbutton {
2588   border-top-left-radius: 0px;
2589   border-bottom-left-radius: 0px;
2590 }
2591
2592 #urlbar:-moz-locale-dir(rtl) > toolbarbutton {
2593   border-top-right-radius: 0px;
2594   border-bottom-right-radius: 0px;
2595 }
2596
2597 #urlbar > toolbarbutton:not([disabled=true]):active:hover,
2598 #reload-button:not(:hover) {
2599   border-inline-start-style: none;
2600   padding-inline-start: 3px;
2601 }
2602
2603 #reload-button,
2604 #reload-button {
2605   -moz-image-region: rect(0px, 14px, 14px, 0px);
2606 }
2607
2608 #reload-button[disabled=true],
2609 #reload-button[disabled=true] {
2610   -moz-image-region: rect(28px, 14px, 42px, 0px);
2611 }
2612
2613 #reload-button:not([disabled=true]):hover,
2614 #reload-button:not([disabled=true]):hover {
2615   -moz-image-region: rect(14px, 14px, 28px, 0px);
2616 }
2617
2618 #reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
2619 #reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2620   transform: scaleX(-1);
2621 }
2622
2623 #urlbar-go-button {
2624   -moz-image-region: rect(0, 42px, 14px, 28px);
2625 }
2626
2627 #urlbar-go-button:hover {
2628   -moz-image-region: rect(14px, 42px, 28px, 28px);
2629 }
2630
2631 #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2632   transform: scaleX(-1);
2633 }
2634
2635 #stop-button,
2636 #stop-button {
2637   -moz-image-region: rect(0px, 28px, 14px, 14px);
2638 }
2639
2640 #stop-button:hover,
2641 #stop-button:hover {
2642   -moz-image-region: rect(14px, 28px, 28px, 14px);
2643 }
2644
2645 @media (min-resolution: 1.1dppx) {
2646   #reload-button,
2647   #stop-button,
2648   #urlbar-go-button,
2649   #reload-button,
2650   #stop-button {
2651     list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
2652   }
2653
2654   #reload-button > .toolbarbutton-icon,
2655   #stop-button > .toolbarbutton-icon,
2656   #urlbar-go-button > .toolbarbutton-icon,
2657   #reload-button > .toolbarbutton-icon,
2658   #stop-button > .toolbarbutton-icon {
2659     width: 14px;
2660   }
2661
2662   #urlbar-go-button {
2663     -moz-image-region: rect(0, 84px, 28px, 56px);
2664   }
2665
2666   #urlbar-go-button:hover {
2667     -moz-image-region: rect(28px, 84px, 56px, 56px);
2668   }
2669
2670   #urlbar-go-button:hover:active {
2671     -moz-image-region: rect(56px, 84px, 84px, 56px);
2672   }
2673
2674   #reload-button,
2675   #reload-button {
2676     -moz-image-region: rect(0, 28px, 28px, 0);
2677   }
2678
2679   #reload-button:not([disabled]):hover,
2680   #reload-button:not([disabled]):hover {
2681     -moz-image-region: rect(28px, 28px, 56px, 0);
2682   }
2683
2684   #reload-button:not([disabled]):hover:active,
2685   #reload-button:not([disabled]):hover:active {
2686     -moz-image-region: rect(56px, 28px, 84px, 0);
2687   }
2688
2689   #stop-button,
2690   #stop-button {
2691     -moz-image-region: rect(0, 56px, 28px, 28px);
2692   }
2693
2694   #stop-button:not([disabled]):hover,
2695   #stop-button:not([disabled]):hover {
2696     -moz-image-region: rect(28px, 56px, 56px, 28px);
2697   }
2698
2699   #stop-button:hover:active,
2700   #stop-button:hover:active {
2701     -moz-image-region: rect(56px, 56px, 84px, 28px);
2702   }
2703 }
2704
2705 /* popup blocker button */
2706
2707 #page-report-button {
2708   list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
2709   -moz-image-region: rect(0, 16px, 16px, 0);
2710 }
2711
2712 #page-report-button:hover ,
2713 #page-report-button:hover:active,
2714 #page-report-button[open="true"] {
2715   -moz-image-region: rect(0, 32px, 16px, 16px);
2716 }
2717
2718 /* Reader mode button */
2719
2720 #reader-mode-button {
2721   list-style-image: url("chrome://browser/skin/readerMode.svg");
2722   -moz-image-region: rect(0, 16px, 16px, 0);
2723 }
2724
2725 #reader-mode-button:hover,
2726 #reader-mode-button[readeractive]:hover {
2727   -moz-image-region: rect(0, 32px, 16px, 16px);
2728 }
2729
2730 #reader-mode-button:hover:active,
2731 #reader-mode-button[readeractive] {
2732   -moz-image-region: rect(0, 48px, 16px, 32px);
2733 }
2734
2735 /* social share panel */
2736
2737 /* === BEGIN social.inc.css === */
2738
2739 #manage-share-providers {
2740   list-style-image: url("chrome://browser/skin/ToolbarFx.png");
2741   -moz-image-region: rect(0, 468px, 18px, 450px);
2742 }
2743
2744 #manage-share-providers > .toolbarbutton-icon {
2745   min-height: 18px;
2746   min-width: 18px;
2747 }
2748
2749 .social-panel > .panel-arrowcontainer > .panel-arrowcontent {
2750   padding: 0;
2751 }
2752 /* fixup corners for share panel */
2753 .social-panel > .social-panel-frame {
2754   border-radius: inherit;
2755 }
2756
2757 /* === END social.inc.css === */
2758
2759 .social-panel-frame {
2760   border-radius: inherit;
2761 }
2762
2763 .social-share-frame {
2764   min-width: 756px;
2765   height: 150px;
2766 }
2767
2768 #share-container {
2769   min-width: 756px;
2770   background-color: white;
2771   background-repeat: no-repeat;
2772   background-position: center center;
2773 }
2774 #share-container[loading] {
2775   background-image: url(chrome://browser/skin/tabbrowser/pendingpaint.png);
2776 }
2777 #share-container > browser {
2778   transition: opacity 150ms ease-in-out;
2779   opacity: 1;
2780 }
2781 #share-container[loading] > browser {
2782   opacity: 0;
2783 }
2784
2785 .social-share-toolbar {
2786   border-bottom: 1px solid #9C9CFF;
2787   padding: 2px;
2788 }
2789
2790 #social-share-provider-buttons {
2791   padding: 0;
2792   margin: 0;
2793 }
2794
2795 .share-provider-button {
2796   padding: 5px;
2797   margin: 2px;
2798 }
2799
2800 .share-provider-button > .toolbarbutton-text {
2801   display: none;
2802 }
2803 .share-provider-button > .toolbarbutton-icon {
2804   width: 16px;
2805   min-height: 16px;
2806   max-height: 16px;
2807 }
2808
2809 #social-share-panel {
2810   min-height: 100px;
2811   min-width: 766px;
2812 }
2813
2814 #share-container,
2815 .social-share-frame {
2816   border-top-left-radius: 0;
2817   border-bottom-left-radius: inherit;
2818   border-top-right-radius: 0;
2819   border-bottom-right-radius: inherit;
2820 }
2821
2822 #social-share-panel > .social-share-toolbar {
2823   border-top-left-radius: inherit;
2824   border-top-right-radius: inherit;
2825 }
2826
2827 #social-share-provider-buttons {
2828   border-top-left-radius: inherit;
2829   border-top-right-radius: inherit;
2830 }
2831
2832 /* bookmarks menu-button */
2833
2834 #bookmarks-menu-button.bookmark-item {
2835   list-style-image: url("chrome://browser/skin/places/bookmark.png");
2836   -moz-image-region: rect(0px 16px 16px 0px);
2837 }
2838
2839 #bookmarks-menu-button.bookmark-item[starred] {
2840   -moz-image-region: rect(0px 32px 16px 16px);
2841 }
2842
2843 #nav-bar #bookmarks-menu-button[cui-areatype="toolbar"]:not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
2844   padding-top: 2px;
2845   padding-bottom: 2px;
2846 }
2847
2848 #BMB_bookmarksPopup[side="top"],
2849 #BMB_bookmarksPopup[side="bottom"] {
2850   margin-left: -20px;
2851   margin-right: -20px;
2852 }
2853
2854 #BMB_bookmarksPopup[side="left"],
2855 #BMB_bookmarksPopup[side="right"] {
2856   margin-top: -20px;
2857   margin-bottom: -20px;
2858 }
2859
2860 /* bookmarking panel */
2861
2862 #editBookmarkPanelStarIcon {
2863   list-style-image: url("chrome://browser/skin/places/starred48.png");
2864   width: 48px;
2865   height: 48px;
2866 }
2867
2868 #editBookmarkPanelStarIcon[unstarred] {
2869   list-style-image: url("chrome://browser/skin/places/unstarred48.png");
2870 }
2871
2872 #editBookmarkPanelTitle {
2873   font-size: 130%;
2874 }
2875
2876 #editBookmarkPanelHeader,
2877 #editBookmarkPanelContent {
2878   margin-bottom: .5em;
2879 }
2880
2881 /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
2882 #editBMPanel_folderTree {
2883   min-width: 27em;
2884 }
2885
2886 /* ::::: content area ::::: */
2887
2888 /* === BEGIN sidebar.inc.css === */
2889
2890 #sidebar-box {
2891   --icon-fill: #FFCF00;
2892   --header-background-color: #9C9CFF;
2893   --header-background-color-hover: #FFCF00;
2894   --title-font-size: 13px;
2895
2896   background-color: #9C9CFF;
2897   color: #000000;
2898 }
2899
2900 #sidebar-header {
2901   color: #000000;
2902   padding: 2px;
2903 }
2904
2905 #sidebar-splitter {
2906   margin-inline-start: 0;
2907 }
2908
2909 #sidebar-splitter:-moz-locale-dir(ltr),
2910 #sidebar:-moz-locale-dir(ltr) {
2911   border-radius: 0 5px 0 0;
2912 }
2913
2914 #sidebar-splitter:-moz-locale-dir(rtl),
2915 #sidebar:-moz-locale-dir(rtl) {
2916   border-radius: 5px 0 0 0;
2917 }
2918
2919 #sidebar-throbber[loading="true"] {
2920   list-style-image: url("chrome://global/skin/icons/loading.png");
2921 }
2922
2923 @media (min-resolution: 2dppx) {
2924   .sidebar-throbber[loading="true"],
2925   #sidebar-throbber[loading="true"] {
2926     list-style-image: url("chrome://global/skin/icons/loading@2x.png");
2927     width: 16px;
2928   }
2929 }
2930
2931 #sidebar-title {
2932   padding-inline-start: 0px;
2933 }
2934
2935 #sidebar-title {
2936   margin: 0;
2937   padding: 0;
2938   padding-inline-start: 8px;
2939   padding-inline-end: 4px;
2940 }
2941
2942 #sidebar-switcher-arrow,
2943 #sidebar-close > .toolbarbutton-icon {
2944   -moz-context-properties: fill;
2945   fill: currentColor;
2946   opacity: 0.8;
2947 }
2948
2949 #sidebar-switcher-arrow {
2950 /*  list-style-image: url(chrome://browser/skin/arrow-dropdown.svg);*/
2951   list-style-image: url(chrome://global/skin/arrow/arrow-down.gif);
2952   width: 12px;
2953   height: 12px;
2954 }
2955
2956 #sidebar-switcher-arrow:hover {
2957   list-style-image: url(chrome://global/skin/arrow/arrow-down-hover.gif);
2958 }
2959
2960 #sidebar-header > .close-icon {
2961 /*  padding: 4px 2px;
2962   margin: 0;
2963   border: none;*/
2964   list-style-image: url("chrome://global/skin/icons/close-button.gif");
2965 }
2966
2967 #sidebar-header > .close-icon:hover,
2968 #sidebar-header > .close-icon:hover:active {
2969   list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2970 }
2971
2972 #sidebar-close {
2973   -moz-appearance: none;
2974   list-style-image: url(chrome://browser/skin/sidebar/close.svg);
2975   margin: 0;
2976   padding: 4px;
2977   border-radius: 4px;
2978 }
2979 /*
2980 #sidebar-switcher-target {
2981   -moz-appearance: none;
2982   color: inherit;
2983   margin-inline-end: 4px;
2984   border-radius: 4px;
2985   border: 1px solid transparent;
2986   padding: 2px 4px;
2987 }
2988
2989 #sidebar-switcher-target:hover,
2990 #sidebar-close:hover {
2991   background: hsla(240, 5%, 5%, 0.05);
2992 }
2993
2994 #sidebar-switcher-target:hover {
2995   border-color: rgba(0, 0, 0, 0.2);
2996 }
2997
2998 #sidebar-close:hover:active,
2999 #sidebar-switcher-target:hover:active,
3000 #sidebar-switcher-target.active {
3001   background: hsla(240, 5%, 5%, 0.1);
3002 }
3003
3004 #sidebar-switcher-target:hover:active,
3005 #sidebar-switcher-target.active {
3006   border-color: rgba(0, 0, 0, 0.25);
3007 }
3008 */
3009 #sidebarMenu-popup .subviewbutton {
3010   min-width: 190px;
3011 }
3012
3013 #sidebar-extensions:empty + toolbarseparator {
3014   display: none;
3015 }
3016
3017 /* Allow room for the checkbox drawn as a background image at the start of the toolbarbutton */
3018 #sidebarMenu-popup .subviewbutton-iconic > .toolbarbutton-icon {
3019   padding-inline-start: 16px;
3020 }
3021 #sidebarMenu-popup .subviewbutton-iconic > .toolbarbutton-text {
3022   padding-inline-start: 0;
3023 }
3024
3025 #sidebar-box[sidebarcommand="viewWebPanelsSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
3026   list-style-image: url(chrome://mozapps/skin/places/defaultFavicon.svg);
3027 }
3028
3029 #sidebar-switcher-bookmarks > .toolbarbutton-icon,
3030 #sidebar-box[sidebarcommand="viewBookmarksSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
3031 /*  list-style-image: url(chrome://browser/skin/bookmark.svg);
3032   -moz-context-properties: fill;
3033   fill: currentColor;
3034   opacity: 0.8;*/
3035   list-style-image: url(chrome://browser/skin/places/bookmark.png);
3036   -moz-image-region: rect(0px 16px 16px 0px);
3037 }
3038
3039 #sidebar-switcher-history > .toolbarbutton-icon,
3040 #sidebar-box[sidebarcommand="viewHistorySidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
3041 /*  list-style-image: url(chrome://browser/skin/history.svg);
3042   -moz-context-properties: fill;
3043   fill: currentColor;
3044   opacity: 0.8;*/
3045   list-style-image: url(chrome://browser/skin/places/history.png);
3046 }
3047
3048 #sidebar-switcher-tabs > .toolbarbutton-icon,
3049 #sidebar-box[sidebarcommand="viewTabsSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
3050 /*  list-style-image: url(chrome://browser/skin/synced-tabs.svg);
3051   -moz-context-properties: fill;
3052   fill: currentColor;
3053   opacity: 0.8;*/
3054   list-style-image: url(chrome://browser/skin/urlbar-tab.svg#tab);
3055 }
3056
3057 /* === END sidebar.inc.css === */
3058
3059 #sidebar {
3060   background-color: #000000;
3061 }
3062
3063 .browserContainer > findbar {
3064 /*
3065   background-color: -moz-dialog;
3066   color: -moz-DialogText;
3067 */
3068 }
3069
3070 /* Tabstrip */
3071
3072 #TabsToolbar {
3073   min-height: 0;
3074   padding: 0;
3075   -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
3076 }
3077
3078 #TabsToolbar .toolbar-holder {
3079   background-color: #000000; /* correct effect of being an actual toolbar */
3080 }
3081
3082 #main-window[disablechrome] #TabsToolbar,
3083 #TabsToolbar[tabsontop="false"] {
3084   border-bottom: 1px solid #008484;
3085 }
3086
3087 /* === BEGIN tabs.inc.css === */
3088
3089 :root {
3090   /* --tab-toolbar-navbar-overlap: 1px; */
3091   /* --navbar-tab-toolbar-highlight-overlap: 1px; */
3092   /* --tab-min-height: 31px; */
3093 }
3094 #TabsToolbar {
3095   /* --tab-stroke-background-size: auto 100%; */
3096 }
3097
3098 .tabbrowser-tab,
3099 .tabs-newtab-button,
3100 #TabsToolbar > #new-tab-button {
3101   margin-top: 0px;
3102 }
3103
3104 .tabbrowser-tab {
3105   padding: 1px 4px 2px;
3106 }
3107
3108 .tabbrowser-tab:first-of-type {
3109   margin-inline-start: 2px;
3110 }
3111
3112 .tabs-newtab-button,
3113 #TabsToolbar > #new-tab-button,
3114 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
3115 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
3116   border-radius: 8px 8px 0px 0px;
3117   margin-inline-start: 0;
3118 }
3119
3120 .tabs-newtab-button:not(:hover),
3121 #TabsToolbar > #new-tab-button:not(:hover),
3122 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
3123 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
3124   background-color: #C09070;
3125 }
3126
3127 /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
3128 .tabbrowser-tab[visuallyselected=true] {
3129 /*  position: relative;
3130   z-index: 2;*/
3131 }
3132
3133 .tab-background-middle {
3134 }
3135
3136 .tab-content {
3137 }
3138
3139 .tab-content[pinned] {
3140 }
3141
3142 .tab-throbber,
3143 .tab-icon-image,
3144 .tab-sharing-icon-overlay,
3145 .tab-icon-sound,
3146 .tab-close-button {
3147 }
3148
3149 .tab-throbber,
3150 .tab-sharing-icon-overlay,
3151 .tab-icon-image {
3152   height: 16px;
3153   width: 16px;
3154   margin-inline-end: 3px;
3155 }
3156
3157 .tab-icon-image {
3158   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
3159 }
3160
3161 .tab-icon-image[sharing]:not([selected]),
3162 .tab-sharing-icon-overlay {
3163   animation: 3s linear tab-sharing-icon-pulse infinite;
3164 }
3165
3166 @keyframes tab-sharing-icon-pulse {
3167 /* This should remain identical to identity-box-sharing-icon-pulse in identity-block.inc.css */
3168   0%, 16.66%, 83.33%, 100% {
3169     opacity: 0;
3170   }
3171   33.33%, 66.66% {
3172     opacity: 1;
3173   }
3174 }
3175
3176 .tab-icon-image[sharing]:not([selected]) {
3177   animation-delay: -1.5s;
3178 }
3179
3180 .tab-sharing-icon-overlay {
3181   /* 16px of the icon + 6px of margin-inline-end of .tab-icon-image */
3182   margin-inline-start: -22px;
3183   position: relative;
3184 }
3185
3186 .tab-sharing-icon-overlay[sharing="camera"] {
3187   list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing");
3188 }
3189
3190 .tab-sharing-icon-overlay[sharing="microphone"] {
3191   list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing");
3192 }
3193
3194 .tab-sharing-icon-overlay[sharing="screen"] {
3195   list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing");
3196 }
3197
3198 .tab-icon-overlay {
3199   width: 16px;
3200   height: 16px;
3201   margin-top: -8px;
3202   margin-inline-start: -15px;
3203   margin-inline-end: -1px;
3204   position: relative;
3205 }
3206
3207 .tab-icon-overlay[crashed] {
3208   list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
3209 }
3210
3211 .tab-icon-overlay[soundplaying],
3212 .tab-icon-overlay[muted]:not([crashed]),
3213 .tab-icon-overlay[blocked]:not([crashed]) {
3214   border-radius: 10px;
3215 }
3216
3217 .tab-icon-overlay[soundplaying]:hover,
3218 .tab-icon-overlay[muted]:hover,
3219 .tab-icon-overlay[blocked]:not([crashed]):hover {
3220   background-color: #FFCF00;
3221 }
3222
3223 .tab-icon-overlay[soundplaying] {
3224   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio");
3225 }
3226
3227 .tab-icon-overlay[muted]:not([crashed]) {
3228   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
3229 }
3230
3231 .tab-icon-overlay[blocked]:not([crashed]) {
3232   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-blocked");
3233 }
3234
3235 #TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not([selected]):not(:hover),
3236 .tab-icon-overlay[soundplaying][selected]:-moz-lwtheme-brighttext:not(:hover) {
3237   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white");
3238 }
3239
3240 #TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not([selected]):not(:hover),
3241 .tab-icon-overlay[mouted][selected]:-moz-lwtheme-brighttext:not(:hover) {
3242   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted");
3243 }
3244
3245 #TabsToolbar[brighttext] .tab-icon-overlay[blocked]:not([crashed]):not([selected]):not(:hover),
3246 .tab-icon-overlay[blocked][selected]:-moz-lwtheme-brighttext:not(:hover) {
3247   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-blocked");
3248 }
3249
3250 .tab-throbber[busy] {
3251   list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png");
3252 }
3253
3254 .tab-throbber[progress] {
3255   list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.png");
3256 }
3257
3258 @media (min-resolution: 1.1dppx) {
3259   .tab-throbber[busy] {
3260     list-style-image: url("chrome://communicator/skin/brand/throbber-anim-connect.png");
3261   }
3262
3263   .tab-throbber[progress] {
3264     list-style-image: url("chrome://communicator/skin/brand/throbber-anim.png");
3265   }
3266 }
3267
3268 .tab-throbber[pinned],
3269 .tab-icon-image[pinned] {
3270   margin-inline-start: 2px;
3271   margin-inline-end: 2px;
3272 }
3273
3274 .tab-label {
3275   /* this needs to add up to the 16px of the icon image */
3276   height: 12px;
3277   margin-top: 2px !important;
3278   margin-bottom: 2px !important;
3279 }
3280
3281 .tab-icon-sound {
3282   margin-inline-start: 4px;
3283   width: 16px;
3284   height: 16px;
3285   padding: 0;
3286 }
3287
3288 .tab-icon-sound[soundplaying],
3289 .tab-icon-sound[muted],
3290 .tab-icon-sound[blocked] {
3291   list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio);
3292   filter: url(chrome://global/skin/filters.svg#fill);
3293   fill: currentColor;
3294 }
3295
3296 .tab-icon-sound[muted] {
3297   list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted);
3298 }
3299
3300 .tab-icon-sound[blocked] {
3301   list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-blocked);
3302 }
3303
3304 .tab-close-button {
3305   margin-top: 1px;
3306   padding: 0;
3307 }
3308
3309 .tab-icon-sound[soundplaying-scheduledremoval]:not([muted]):not(:hover),
3310 .tab-icon-overlay[soundplaying-scheduledremoval]:not([muted]):not(:hover) {
3311   transition: opacity .3s linear var(--soundplaying-removal-delay);
3312   opacity: 0;
3313 }
3314
3315 .tab-background,
3316 .tabs-newtab-button {
3317   /* overlap the tab curves */
3318 }
3319
3320 .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
3321 }
3322
3323 /* Tab Overflow */
3324 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
3325 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3326 }
3327
3328 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:-moz-locale-dir(rtl),
3329 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:-moz-locale-dir(ltr) {
3330 }
3331
3332 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]) {
3333 }
3334
3335 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3336 }
3337
3338 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator[collapsed],
3339 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator[collapsed] {
3340 }
3341
3342 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator,
3343 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator {
3344 }
3345
3346 .tab-background-start[selected=true]::after,
3347 .tab-background-start[selected=true]::before,
3348 .tab-background-start,
3349 .tab-background-end,
3350 .tab-background-end[selected=true]::after,
3351 .tab-background-end[selected=true]::before {
3352 }
3353
3354 .tabbrowser-tab:not([visuallyselected=true]),
3355 .tabbrowser-tab:-moz-lwtheme {
3356 }
3357
3358 /* tabbrowser-tab focus ring */
3359 .tabbrowser-tab:focus {
3360   outline: 1px dotted;
3361 }
3362
3363 /* Selected tab */
3364
3365 .tabbrowser-tab[visuallyselected="true"] {
3366 }
3367
3368 /* End selected tab */
3369
3370 /* Tab pointer-events */
3371 /*
3372 .tabbrowser-tab {
3373   pointer-events: none;
3374 }
3375
3376 .tab-background-middle,
3377 .tabs-newtab-button,
3378 .tab-icon-overlay[soundplaying],
3379 .tab-icon-overlay[muted]:not([crashed]),
3380 .tab-icon-overlay[blocked]:not([crashed]),
3381 .tab-icon-sound,
3382 .tab-close-button {
3383   pointer-events: auto;
3384 }
3385 */
3386 /* Pinned tabs */
3387
3388 /*
3389 .tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
3390 .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
3391 */
3392 .tabbrowser-tab:-moz-any([image], [pinned]):-moz-any([attention], [titlechanged]):not([visuallyselected="true"]) {
3393   background-color: #E7ADE7;
3394 }
3395
3396 .tab-label[attention]:not([selected="true"]) {
3397   font-weight: bold;
3398 }
3399
3400 .tabbrowser-tab[pinned][titlechanged]:not([visuallyselected="true"]):hover {
3401   background-color: #3333FF;
3402   color: #000000;
3403 }
3404
3405 /* Tab separators */
3406 /*
3407 .tabbrowser-tab::after,
3408 .tabbrowser-tab::before {
3409   width: 1px;
3410   margin-inline-start: -1px;
3411   background-image: linear-gradient(transparent 5px,
3412                                     currentColor 5px,
3413                                     currentColor calc(100% - 4px),
3414                                     transparent calc(100% - 4px));
3415   opacity: 0.2;
3416 }
3417
3418 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::before,
3419 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::after {
3420   opacity: 0.4;
3421 }
3422 */
3423 /* Also show separators beside the selected tab when dragging it. */
3424 /*
3425 #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
3426 .tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
3427 #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after {
3428   content: "";
3429   display: -moz-box;
3430 }
3431 */
3432 /* New tab button */
3433
3434 .tabs-newtab-button {
3435   width: 28px;
3436   /* width: calc(36px + var(--tab-curve-width)); */
3437 }
3438 @media (min-resolution: 1.1dppx) {
3439   /* image preloading hack from like lowdpi styles */
3440   #tabbrowser-tabs::before {
3441   }
3442
3443   .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]),
3444   .tabs-newtab-button:hover {
3445   }
3446
3447   .tab-background-middle[selected=true] {
3448   }
3449
3450   .tab-background-start[selected=true]:-moz-locale-dir(ltr)::after,
3451   .tab-background-end[selected=true]:-moz-locale-dir(rtl)::after {
3452   }
3453
3454   .tab-background-end[selected=true]:-moz-locale-dir(ltr)::after,
3455   .tab-background-start[selected=true]:-moz-locale-dir(rtl)::after {
3456   }
3457 }
3458
3459 /* All tabs menupopup */
3460
3461 .alltabs-item[tabIsVisible]:not([_moz-menuactive="true"]) {
3462   background-color: #402800;
3463 }
3464
3465 .alltabs-endimage[soundplaying],
3466 .alltabs-endimage[muted],
3467 .alltabs-endimage[blocked] {
3468   list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio);
3469   filter: url(chrome://global/skin/filters.svg#fill);
3470   fill: currentColor;
3471 }
3472
3473 .alltabs-endimage[muted] {
3474   list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted);
3475 }
3476
3477 .alltabs-endimage[blocked] {
3478   list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-blocked);
3479 }
3480
3481 /* === END tabs.inc.css === */
3482
3483 /* Tab DnD indicator */
3484 .tab-drop-indicator {
3485   list-style-image: url("chrome://browser/skin/tabbrowser/tabDragIndicator.png");
3486   margin-bottom: -11px;
3487 }
3488
3489 /* Tab close button */
3490 .tab-close-button {
3491   list-style-image: url("chrome://global/skin/icons/close-button.gif") !important;
3492   -moz-image-region: auto !important;
3493 }
3494
3495 .tab-close-button:hover,
3496 .tab-close-button:hover[selected="true"] {
3497   list-style-image: url("chrome://global/skin/icons/close-button-hover.gif") !important;
3498   -moz-image-region: auto !important;
3499 }
3500
3501 .tab-close-button:hover:active,
3502 .tab-close-button:hover:active[selected="true"] {
3503   list-style-image: url("chrome://global/skin/icons/close-button-hover.gif") !important;
3504   -moz-image-region: auto !important;
3505 }
3506
3507 .tab-close-button > .button-icon,
3508 .tab-close-button > .button-box > .button-icon,
3509 .tab-close-button > .toolbarbutton-icon {
3510   width: auto !important;
3511 }
3512
3513
3514 /* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
3515
3516 .tabbrowser-arrowscrollbox > .scrollbutton-up,
3517 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3518   margin: 0;
3519   padding-top: 0;
3520   padding-bottom: 0;
3521   background-origin: border-box;
3522 }
3523
3524 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3525 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3526 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext,
3527 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext {
3528  }
3529
3530 .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
3531 .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
3532  }
3533
3534 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
3535 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
3536 /*  transform: scaleX(-1);*/
3537 }
3538
3539 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3540   transition: 1s background-color ease-out;
3541 }
3542
3543 .tabbrowser-arrowscrollbox > .scrollbutton-down[highlight] {
3544   background-color: #008484;
3545 }
3546
3547 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]),
3548 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]) {
3549 /*  border-width: 0 2px 0 0;
3550   border-style: solid;
3551   border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;*/
3552 }
3553
3554 .tabs-newtab-button > .toolbarbutton-icon {
3555   margin-top: -1px;
3556   margin-bottom: -1px;
3557 }
3558
3559 .tabs-newtab-button,
3560 #TabsToolbar > #new-tab-button,
3561 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
3562 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
3563   list-style-image: url("chrome://browser/skin/tabbrowser/newtab.svg");
3564   -moz-image-region: auto;
3565 }
3566
3567 .tabs-newtab-button,
3568 .tabs-newtab-button:hover,
3569 #TabsToolbar > #new-tab-button,
3570 #TabsToolbar > #new-tab-button:hover {
3571 }
3572
3573 #main-window[tabsintitlebar]:not([inFullscreen]) .tabs-newtab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3574 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3575 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3576 .tabs-newtab-button:-moz-lwtheme-brighttext,
3577 #TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext,
3578 #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext {
3579 }
3580
3581 #TabsToolbar > #new-tab-button {
3582   width: 26px;
3583   -moz-box-orient: horizontal;
3584 }
3585
3586 #alltabs-button {
3587   list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
3588 }
3589
3590 #alltabs-button:hover,
3591 #alltabs-button:hover:active,
3592 #alltabs-button[open="true"] {
3593   list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
3594 }
3595
3596 #main-window[tabsintitlebar]:not([inFullscreen]) #alltabs-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3597 #alltabs-button:-moz-lwtheme-brighttext {
3598 }
3599
3600 #alltabs-button > .toolbarbutton-icon {
3601 /*  margin: 0 2px;*/
3602 }
3603
3604 #alltabs-button > .toolbarbutton-menu-dropmarker {
3605   display: none;
3606 }
3607
3608 /* All tabs menupopup */
3609 .alltabs-item > .menu-iconic-left > .menu-iconic-icon {
3610   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
3611   -moz-image-region: auto;
3612 }
3613
3614 .alltabs-item[selected="true"] {
3615   font-weight: bold;
3616 }
3617
3618 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3619   list-style-image: url("chrome://global/skin/icons/loading.png");
3620 }
3621
3622 @media (min-resolution: 1.1dppx) {
3623   .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3624     list-style-image: url("chrome://global/skin/icons/loading@2x.png");
3625   }
3626 }
3627
3628 toolbarbutton.chevron {
3629   list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
3630 }
3631
3632 toolbarbutton.chevron:hover {
3633   list-style-image: url("chrome://global/skin/toolbar/chevron-hover.gif") !important;
3634 }
3635 /*
3636 toolbar[brighttext] toolbarbutton.chevron {
3637   list-style-image: url("chrome://global/skin/toolbar/chevron-inverted.png") !important;
3638 }
3639 */
3640 toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
3641 toolbarbutton.chevron:-moz-locale-dir(rtl):hover > .toolbarbutton-icon {
3642   transform: scaleX(-1);
3643 }
3644
3645 toolbarbutton.chevron > .toolbarbutton-text,
3646 toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
3647   display: none;
3648 }
3649
3650 toolbarbutton.chevron > .toolbarbutton-icon {
3651   margin: 0;
3652 }
3653
3654 #sidebar-throbber[loading="true"] {
3655   list-style-image: url("chrome://global/skin/icons/loading.png");
3656   margin-inline-end: 4px;
3657 }
3658
3659 @media (min-resolution: 1.1dppx) {
3660   #sidebar-throbber[loading="true"] {
3661     list-style-image: url("chrome://global/skin/icons/loading@2x.png");
3662     width: 16px;
3663   }
3664 }
3665
3666 /* Bookmarks toolbar */
3667 #PlacesToolbarDropIndicator {
3668   list-style-image: url("chrome://communicator/skin/bookmarks/toolbarDropMarker.png");
3669 }
3670
3671 toolbarbutton.bookmark-item[dragover="true"][open="true"] {
3672   background-color: #008484 !important;
3673   color: #FFCF00 !important;
3674 }
3675
3676 /* rules for menupopup drop indicators */
3677 .menupopup-drop-indicator-bar {
3678   position: relative;
3679   /* these two margins must together compensate the indicator's height */
3680   margin-top: -1px;
3681   margin-bottom: -1px;
3682 }
3683
3684 .menupopup-drop-indicator {
3685   list-style-image: none;
3686   height: 2px;
3687   margin-inline-end: -4em;
3688   background-color: #008484;
3689 }
3690
3691 /* === BEGIN notification-icons.inc.css === */
3692
3693 #notification-popup-box {
3694   border-radius: 3px 0 0 3px;
3695   padding: 5px 0px;
3696   margin: -5px 0px;
3697   margin-inline-end: -5px;
3698   padding-inline-end: 5px;
3699 }
3700
3701 .notification-anchor-icon,
3702 #blocked-permissions-container > .blocked-permission-icon {
3703   width: 16px;
3704   height: 16px;
3705   margin-inline-start: 2px;
3706 }
3707
3708 /* This class can be used alone or in combination with the class defining the
3709    type of icon displayed. This rule must be defined before the others in order
3710    for its list-style-image to be overridden. */
3711 .notification-anchor-icon {
3712   list-style-image: url(chrome://browser/skin/notification-icons.svg#default-info);
3713 }
3714
3715 .notification-anchor-icon:-moz-focusring {
3716   outline: 1px dotted #008484;
3717 }
3718
3719 @media (min-resolution: 1.1dppx) {
3720   .notification-anchor-icon {
3721     list-style-image: url(chrome://global/skin/icons/info.svg);
3722   }
3723 }
3724
3725 .notification-anchor-icon:not(.plugin-blocked),
3726 #blocked-permissions-container > .blocked-permission-icon {
3727   filter: url(chrome://global/skin/filters.svg#fill);
3728   fill: currentColor;
3729 }
3730
3731 /* INDIVIDUAL NOTIFICATIONS */
3732
3733 .focus-tab-by-prompt-icon {
3734   list-style-image: url(chrome://browser/skin/notification-icons.svg#focus-tab-by-prompt);
3735 }
3736
3737 .popup-notification-icon[popupid="persistent-storage"],
3738 .persistent-storage-icon {
3739   list-style-image: url(chrome://browser/skin/notification-icons.svg#persistent-storage);
3740 }
3741
3742 .persistent-storage-icon.blocked-permission-icon {
3743   list-style-image: url(chrome://browser/skin/notification-icons.svg#persistent-storage-blocked);
3744 }
3745
3746 .popup-notification-icon[popupid="web-notifications"],
3747 .desktop-notification-icon {
3748   list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification);
3749 }
3750
3751 .desktop-notification-icon.blocked-permission-icon {
3752   list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification-blocked);
3753 }
3754
3755 .geo-icon {
3756   list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows);
3757 }
3758
3759 .geo-icon.blocked-permission-icon {
3760   list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-blocked);
3761 }
3762
3763 .popup-notification-icon[popupid="geolocation"] {
3764   list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-detailed);
3765 }
3766
3767 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
3768 .indexedDB-icon {
3769   list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB);
3770 }
3771
3772 .indexedDB-icon.blocked-permission-icon {
3773   list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB-blocked);
3774 }
3775
3776 .login-icon {
3777   list-style-image: url(chrome://browser/skin/notification-icons.svg#login);
3778 }
3779
3780 .popup-notification-icon[popupid="password"] {
3781   list-style-image: url(chrome://browser/skin/notification-icons.svg#login-detailed);
3782 }
3783
3784 .camera-icon {
3785   list-style-image: url(chrome://browser/skin/notification-icons.svg#camera);
3786 }
3787
3788 .camera-icon.in-use {
3789   list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-sharing);
3790 }
3791
3792 .camera-icon.blocked-permission-icon {
3793   list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-blocked);
3794 }
3795
3796 .microphone-icon {
3797   list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone);
3798 }
3799
3800 .microphone-icon.in-use {
3801   list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-sharing);
3802 }
3803
3804 .microphone-icon.blocked-permission-icon {
3805   list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-blocked);
3806 }
3807
3808 .popup-notification-icon.microphone-icon {
3809   list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-detailed);
3810 }
3811
3812 .screen-icon {
3813   list-style-image: url(chrome://browser/skin/notification-icons.svg#screen);
3814 }
3815
3816 .screen-icon.in-use {
3817   list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-sharing);
3818 }
3819
3820 .screen-icon.blocked-permission-icon {
3821   list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-blocked);
3822 }
3823
3824 #webRTC-preview:not([hidden]) {
3825   display: -moz-stack;
3826   border-radius: 4px;
3827   border: 1px solid #A09090;
3828   overflow: hidden;
3829   min-width: 300px;
3830   min-height: 10em;
3831 }
3832
3833 html|*#webRTC-previewVideo {
3834   width: 300px;
3835   /* If we don't set the min-width, width is ignored. */
3836   min-width: 300px;
3837   max-height: 200px;
3838 }
3839
3840 #webRTC-previewWarning {
3841   background: #FF0000 url("chrome://browser/skin/warning-white.svg") no-repeat .75em .75em;
3842   margin: 0;
3843   padding: .5em;
3844   padding-inline-start: calc(1.5em + 16px);
3845   border-top: 1px solid #A09090;
3846 }
3847
3848 #webRTC-previewWarning > .text-link {
3849   margin-inline-start: 0;
3850 }
3851
3852 /* This icon has a block sign in it, so we don't need a blocked version. */
3853 .popup-icon {
3854   list-style-image: url("chrome://browser/skin/notification-icons.svg#popup");
3855 }
3856
3857 /* EME */
3858
3859 .popup-notification-icon[popupid="drmContentPlaying"],
3860 .drm-icon {
3861   list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
3862 }
3863
3864 .drm-icon:hover:active {
3865   list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed");
3866 }
3867
3868 #eme-notification-icon[firstplay=true] {
3869   animation: emeTeachingMoment 0.2s linear 0s 5 normal;
3870 }
3871
3872 @keyframes emeTeachingMoment {
3873   0% {transform: translateX(0); }
3874   25% {transform: translateX(3px) }
3875   75% {transform: translateX(-3px) }
3876   100% { transform: translateX(0); }
3877 }
3878
3879 /* INSTALL ADDONS */
3880
3881 .install-icon {
3882   list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg);
3883 }
3884
3885 .popup-notification-icon[popupid="xpinstall-disabled"],
3886 .popup-notification-icon[popupid="addon-install-blocked"],
3887 .popup-notification-icon[popupid="addon-install-origin-blocked"] {
3888   list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg);
3889 }
3890
3891 .popup-notification-icon[popupid="addon-progress"] {
3892   list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg);
3893 }
3894
3895 .popup-notification-icon[popupid="addon-install-failed"] {
3896   list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg);
3897 }
3898
3899 .popup-notification-icon[popupid="addon-install-confirmation"] {
3900   list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg);
3901 }
3902
3903 #addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] {
3904   list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg);
3905 }
3906
3907 .popup-notification-icon[popupid="addon-install-complete"] {
3908   list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg);
3909 }
3910
3911 .popup-notification-icon[popupid="addon-install-restart"] {
3912   list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg);
3913 }
3914
3915 .popup-notification-icon[popupid="click-to-play-plugins"] {
3916   list-style-image: url(chrome://mozapps/skin/plugins/pluginBlocked-64.png);
3917 }
3918
3919 /* OFFLINE APPS */
3920
3921 .popup-notification-icon[popupid*="offline-app-requested"],
3922 .popup-notification-icon[popupid="offline-app-usage"] {
3923   list-style-image: url(chrome://global/skin/icons/question-64.png);
3924 }
3925
3926 /* PLUGINS */
3927
3928 .plugin-icon {
3929   list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
3930 }
3931
3932 .plugin-icon.plugin-blocked {
3933   list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
3934 }
3935
3936 #notification-popup-box[hidden] {
3937   /* Override display:none to make the pluginBlockedNotification animation work
3938      when showing the notification repeatedly. */
3939   display: -moz-box;
3940   visibility: collapse;
3941 }
3942
3943 #plugins-notification-icon.plugin-blocked[showing] {
3944   animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
3945 }
3946
3947 @keyframes pluginBlockedNotification {
3948   from {
3949     opacity: 0;
3950   }
3951   to {
3952     opacity: 1;
3953   }
3954 }
3955
3956 /* SOCIAL API */
3957
3958 .popup-notification-icon[popupid="servicesInstall"] {
3959   list-style-image: url(chrome://browser/skin/social/services-64.png);
3960 }
3961
3962 .service-icon {
3963   list-style-image: url(chrome://browser/skin/social/services-16.png);
3964 }
3965
3966 /* TRANSLATION */
3967
3968 .translation-icon {
3969   list-style-image: url(chrome://browser/skin/translation-16.png);
3970   -moz-image-region: rect(0px, 16px, 16px, 0px);
3971 }
3972
3973 .translation-icon.in-use {
3974   -moz-image-region: rect(0px, 32px, 16px, 16px);
3975 }
3976
3977 /* UPDATE */
3978
3979 .popup-notification-icon[popupid="update-available"],
3980 .popup-notification-icon[popupid="update-manual"],
3981 .popup-notification-icon[popupid="update-restart"] {
3982   background: #74BF43 url(chrome://browser/skin/notification-icons.svg#update) no-repeat center;
3983   border-radius: 50%;
3984 }
3985
3986 /* === END notification-icons.inc.css === */
3987
3988 .popup-notification-body[popupid="addon-progress"],
3989 .popup-notification-body[popupid="addon-install-confirmation"] {
3990   width: 28em;
3991   max-width: 28em;
3992 }
3993
3994 .addon-install-confirmation-name {
3995   font-weight: bold;
3996 }
3997
3998 html|*.addon-webext-perm-list {
3999   margin-block-end: 0;
4000   padding-inline-start: 10px;
4001 }
4002
4003 .addon-webext-perm-text {
4004   margin-inline-start: 0;
4005 }
4006
4007 .popup-notification-description[popupid="addon-webext-permissions"] {
4008   margin: 0;
4009   padding: 0;
4010 }
4011
4012 .addon-webext-name {
4013   display: inline;
4014   font-weight: bold;
4015   margin: 0;
4016 }
4017
4018 .addon-addon-icon {
4019   width: 14px;
4020   height: 14px;
4021   list-style-image: url("chrome://browser/skin/menuPanel.svg");
4022   -moz-image-region: rect(0px, 288px, 32px, 256px);
4023 }
4024
4025 .addon-toolbar-icon {
4026   width: 14px;
4027   height: 14px;
4028   list-style-image: url("chrome://browser/skin/ToolbarFx.png");
4029   -moz-image-region: rect(0, 486px, 18px, 468px);
4030 }
4031
4032 /* Notification icon box */
4033
4034 .notification-anchor-icon:-moz-focusring {
4035 /*  outline: 1px dotted -moz-DialogText;*/
4036 }
4037
4038 /* Translation infobar */
4039
4040 /* === BEGIN infobar.inc.css === */
4041
4042 notification[value="translation"] .messageImage {
4043   list-style-image: url("chrome://browser/skin/translation-16.png");
4044   -moz-image-region: rect(0, 32px, 16px, 16px);
4045 }
4046
4047 @media (min-resolution: 1.25dppx) {
4048   notification[value="translation"] .messageImage {
4049     list-style-image: url("chrome://browser/skin/translation-16@2x.png");
4050     -moz-image-region: rect(0, 64px, 32px, 32px);
4051   }
4052 }
4053
4054 notification[value="translation"][state="translating"] .messageImage {
4055   list-style-image: url("chrome://browser/skin/translating-16.png");
4056   -moz-image-region: auto;
4057 }
4058
4059 @media (min-resolution: 1.25dppx) {
4060   notification[value="translation"][state="translating"] .messageImage {
4061     list-style-image: url("chrome://browser/skin/translating-16@2x.png");
4062   }
4063 }
4064
4065 notification[value="translation"] hbox[anonid="details"] {
4066   overflow: hidden;
4067 }
4068
4069 notification[value="translation"] button,
4070 notification[value="translation"] menulist {
4071   min-width: 0;
4072 }
4073
4074 notification[value="translation"] menulist > .menulist-dropmarker {
4075 }
4076
4077 .translation-menupopup arrowscrollbox {
4078   padding-bottom: 0;
4079 }
4080
4081 .translation-attribution {
4082   cursor: pointer;
4083   -moz-box-align: end;
4084   font-size: small;
4085 }
4086
4087 .translation-attribution > label {
4088   margin-bottom: 0;
4089 }
4090
4091 .translation-attribution > image {
4092   width: 70px;
4093 }
4094
4095 .translation-welcome-panel {
4096   width: 305px;
4097 }
4098
4099 .translation-welcome-logo {
4100   height: 32px;
4101   width: 32px;
4102   list-style-image: url(chrome://browser/skin/translation-16@2x.png);
4103   -moz-image-region: rect(0, 64px, 32px, 32px);
4104 }
4105
4106 .translation-welcome-content {
4107   margin-inline-start: 16px;
4108 }
4109
4110 .translation-welcome-headline {
4111   font-size: larger;
4112   font-weight: bold;
4113 }
4114
4115 .translation-welcome-body {
4116   padding: 1em 0;
4117   margin: 0 0;
4118 }
4119
4120 /* === END infobar.inc.css === */
4121
4122 notification[value="translation"] {
4123   min-height: 40px;
4124 }
4125
4126 .translation-menupopup {
4127   -moz-appearance: none;
4128 }
4129
4130 /* Bookmarks roots menu-items */
4131 #subscribeToPageMenuitem:not([disabled]),
4132 #subscribeToPageMenupopup {
4133   list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
4134 }
4135
4136 #bookmarksToolbarFolderMenu,
4137 #BMB_bookmarksToolbar,
4138 #panelMenu_bookmarksToolbar {
4139   list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
4140   -moz-image-region: auto;
4141 }
4142
4143 #BMB_unsortedBookmarks,
4144 #panelMenu_unsortedBookmarks {
4145   list-style-image: url("chrome://communicator/skin/bookmarks/unsortedBookmarks.png");
4146   -moz-image-region: auto;
4147 }
4148
4149 /* Status panel */
4150
4151 .statuspanel-label {
4152   margin: 0;
4153   padding: 2px 4px;
4154   background: #404000;
4155   border: 1px none #9C9CFF;
4156   border-top-style: solid;
4157   color: #FF9F00;
4158   text-shadow: none;
4159 }
4160
4161 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
4162 .statuspanel-label:-moz-locale-dir(rtl)[mirror] {
4163   border-right-style: solid;
4164   border-top-right-radius: .3em;
4165   margin-right: 1em;
4166 }
4167
4168 .statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
4169 .statuspanel-label:-moz-locale-dir(ltr)[mirror] {
4170   border-left-style: solid;
4171   border-top-left-radius: .3em;
4172   margin-left: 1em;
4173 }
4174
4175 /* HACK to abolish devily color on main content */
4176
4177 #content {
4178   background-color: transparent !important;
4179 }
4180
4181 /* === BEGIN fullscreen/warning.inc.css === */
4182
4183 html|*.pointerlockfswarning {
4184   align-items: center;
4185   background: rgba(0, 0, 0, 0.9);
4186   border: 2px solid #A09090;
4187   box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
4188   border-radius: 8px;
4189   padding: 24px 16px;
4190   font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
4191 }
4192
4193 html|*.pointerlockfswarning::before {
4194   margin: 0;
4195   width: 24px; height: 24px;
4196 }
4197
4198 html|*.pointerlockfswarning[data-identity="verifiedIdentity"]::before,
4199 html|*.pointerlockfswarning[data-identity="verifiedDomain"]::before {
4200   content: url("chrome://browser/skin/fullscreen/secure.svg");
4201 }
4202
4203 html|*.pointerlockfswarning[data-identity="unknownIdentity"]::before {
4204   content: url("chrome://browser/skin/fullscreen/insecure.svg");
4205 }
4206 html|*.pointerlockfswarning-domain-text,
4207 html|*.pointerlockfswarning-generic-text {
4208   font-size: 21px;
4209   font-weight: lighter;
4210   color: #A09090;
4211   margin: 0 16px;
4212 }
4213
4214 html|*.pointerlockfswarning-domain {
4215   font-weight: bold;
4216   margin: 0;
4217 }
4218
4219 html|*#fullscreen-exit-button,
4220 html|*.pointerlockfswarning-exit-button {
4221   margin: 0;
4222
4223   border-radius: 300px;
4224   border: none;
4225   background-color: #C09070;
4226   color: #000000;
4227 }
4228
4229 /* === END fullscreen/warning.inc.css === */
4230
4231 /* === BEGIN ctrlTab.inc.css === */
4232
4233 /* Ctrl-Tab */
4234
4235 #ctrlTab-panel {
4236   -moz-appearance: none;
4237   background: rgba(0%,0%,0%,.7);
4238   color: #FF9F00;
4239   border-style: none;
4240   padding: 20px 10px 10px;
4241   font-weight: bold;
4242 }
4243
4244 .ctrlTab-favicon[src] {
4245   background-color: #000000;
4246   width: 20px;
4247   height: 20px;
4248   padding: 2px;
4249 }
4250
4251 .ctrlTab-preview-inner > .tabPreview-canvas {
4252 /*  box-shadow: 1px 1px 2px hsl(0,0%,12%);*/
4253 }
4254
4255 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
4256   margin-bottom: 2px;
4257 }
4258
4259 .ctrlTab-preview-inner {
4260   padding: 8px;
4261   border: 2px solid transparent;
4262   border-radius: .5em;
4263 }
4264
4265 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner {
4266   margin: -10px -10px 0;
4267 }
4268
4269 #ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
4270   background-color: #000000;
4271 }
4272
4273 .ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
4274   color: #A09090;
4275   background-color: #000000;
4276   text-shadow: none;
4277   border-color: #9C9CFF;
4278 }
4279
4280 #ctrlTab-showAll {
4281   margin-top: .5em;
4282 }
4283
4284 /* === END ctrlTab.inc.css === */
4285
4286 /* === including indicator.css is done at the start of the file === */
4287
4288 /* Error counter */
4289
4290 #developer-toolbar-toolbox-button[error-count]:before {
4291   color: #000000;
4292   min-width: 16px;
4293   text-shadow: none;
4294   background-color: #FF0000;
4295   border-radius: 1px;
4296   margin-inline-end: 5px;
4297 }
4298
4299 /* === BEGIN plugin-doorhanger.inc.css === */
4300
4301 /**
4302  * Plugin Doorhanger Styles
4303  */
4304
4305 #notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent {
4306   padding: 6px 1px 2px;
4307 }
4308
4309 .click-to-play-plugins-notification-center-box {
4310 }
4311
4312 .plugin-popupnotification-centeritem:nth-child(odd) {
4313 /*  background-color: rgba(0,0,0,0.1);*/
4314 }
4315
4316 .center-item-label {
4317   margin-bottom: 0;
4318   text-overflow: ellipsis;
4319 }
4320
4321 .center-item-warning-icon {
4322   background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.svg");
4323   background-repeat: no-repeat;
4324   width: 16px;
4325   height: 15px;
4326   margin-inline-start: 6px;
4327 }
4328
4329 .click-to-play-plugins-notification-button-container {
4330 }
4331
4332 .click-to-play-popup-button {
4333   width: 50%;
4334 }
4335
4336 .click-to-play-plugins-notification-description-box {
4337   margin-left: 5px;
4338   margin-right: 5px;
4339   margin-top: 0;
4340   padding-bottom: 3px;
4341 }
4342
4343 .click-to-play-plugins-outer-description {
4344   margin-top: 1px;
4345 }
4346
4347 .click-to-play-plugins-notification-link,
4348 .center-item-link {
4349   margin: 0;
4350 }
4351
4352 .messageImage[value="plugin-hidden"] {
4353   list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
4354 }
4355
4356 /* Keep any changes to this style in sync with pluginProblem.css */
4357 notification.pluginVulnerable {
4358 }
4359
4360 notification.pluginVulnerable .messageImage {
4361   list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
4362 }
4363
4364 /* === END plugin-doorhanger.inc.css === */
4365
4366 /* === BEGIN customizeMode.inc.css === */
4367
4368 /* Customization mode */
4369
4370 :root {
4371   --drag-drop-transition-duration: .3s;
4372 }
4373
4374 #main-window[customization-lwtheme] #tab-view-deck:-moz-lwtheme {
4375   background-repeat: no-repeat;
4376   background-position: right top;
4377   background-attachment: fixed;
4378   background-color: transparent;
4379   background-image: -moz-image-rect(var(--lwt-header-image), 0, 100%,
4380                       var(--toolbox-rect-height), 0),
4381                     linear-gradient(to bottom,
4382                       var(--lwt-accent-color) calc(var(--toolbox-rect-height-with-unit) - 1px),
4383                       rgba(0,0,0,0.25) calc(var(--toolbox-rect-height-with-unit) - 1px),
4384                       rgba(0,0,0,0.25) calc(var(--toolbox-rect-height-with-unit) + 1px),
4385                       rgba(255,255,255,0.5) calc(var(--toolbox-rect-height-with-unit) + 1px),
4386                       rgba(255,255,255,0.5) calc(var(--toolbox-rect-height-with-unit) + 2px),
4387                       transparent calc(var(--toolbox-rect-height-with-unit) + 2px));
4388 }
4389
4390 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox {
4391   margin-bottom: 1em;
4392 }
4393
4394 #main-window:-moz-any([customize-entering],[customize-entered]) #content-deck,
4395 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4396 #main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
4397   margin-left: 1em;
4398   margin-right: 1em;
4399 }
4400
4401 #main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck {
4402   pointer-events: none;
4403 }
4404
4405 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4406 #PanelUI-contents > .panel-customization-placeholder {
4407   -moz-outline-radius: 2.5px;
4408   outline: 1px dashed transparent;
4409 }
4410
4411 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before {
4412   /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */
4413   -moz-box-ordinal-group: 0;
4414   content: "";
4415   display: -moz-box;
4416   height: 100%;
4417   left: 0;
4418   outline-offset: -2px;
4419   pointer-events: none;
4420   position: absolute;
4421   top: 0;
4422   width: 100%;
4423 }
4424
4425 /* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the
4426    #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the
4427    offset from the bottom effectively the same as other targets (-2px). */
4428 #main-window[customize-entered] #TabsToolbar.customization-target::before {
4429 /*  top: -2px;*/
4430 }
4431
4432 /* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */
4433 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover,
4434 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)),
4435 #main-window[customize-entered] #nav-bar-customization-target.customization-target {
4436   position: relative;
4437 }
4438
4439 /* Most target outlines are shown on hover and drag over but the panel menu uses
4440    placeholders instead. */
4441 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before,
4442 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4443 /* nav-bar and panel outlines are always shown */
4444 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4445   outline-color: currentColor;
4446 }
4447
4448 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4449   transition: outline-color 250ms linear;
4450 }
4451
4452 #PanelUI-contents[showoutline=true] > .panel-customization-placeholder {
4453   transition: outline-color 250ms linear;
4454   outline-color: var(--panel-separator-color);
4455 }
4456
4457 #PanelUI-contents > .panel-customization-placeholder {
4458   cursor: auto;
4459   outline-offset: -5px;
4460 }
4461
4462 #main-window[customizing] .customization-target:not(#PanelUI-contents) {
4463   min-width: 100px;
4464 /*  padding-left: 10px;
4465   padding-right: 10px;*/
4466 }
4467
4468 #main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck {
4469   padding: 0 2em 2em;
4470 }
4471
4472 #customization-container {
4473   background-color: #000000;
4474   color: #FF9F00;
4475 }
4476
4477 #customization-palette,
4478 #customization-empty {
4479   padding: 0 15px 15px;
4480 }
4481
4482 #customization-header {
4483   font-size: 1.75em;
4484   line-height: 1.75em;
4485   color: #9C9CFF;
4486   font-weight: 200;
4487   margin: 25px 25px 12px;
4488   padding-bottom: 12px;
4489   border-bottom: 1px solid #A09090;
4490 }
4491
4492 #customization-panel-container {
4493   padding: 10px 10px 0px;
4494 }
4495
4496 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4497 #customization-footer {
4498   /*background-color: rgb(236,236,236);*/
4499 }
4500
4501 #customization-footer {
4502   border-top: 1px solid #9C9CFF;
4503   padding: 10px;
4504 }
4505
4506 .customizationmode-button {
4507   margin: 5px;
4508 }
4509
4510 .customizationmode-button:hover {
4511 }
4512
4513 .customizationmode-button > .box-inherit {
4514 }
4515
4516 .customizationmode-button > .button-icon {
4517 }
4518
4519 .customizationmode-button:not([type=menu]) > .button-text {
4520 }
4521
4522 .customizationmode-button > .button-menu-dropmarker {
4523 }
4524
4525
4526
4527 .customizationmode-button[checked] {
4528   background-color: #008484;
4529 }
4530
4531 .customizationmode-button[checked]:hover:not([disabled]),
4532 .customizationmode-button:hover:not([disabled]) {
4533   background-color: #FFCF00;
4534 }
4535
4536 .customizationmode-button[checked]:hover:active:not([disabled]),
4537 .customizationmode-button:hover:active:not([disabled]),
4538 .customizationmode-button[open] {
4539   background-color: #FF9F00;
4540 }
4541
4542 .customizationmode-button[disabled="true"] {
4543 }
4544
4545 .customizationmode-button > .box-inherit > .box-inherit > .button-icon,
4546 .customizationmode-button > .button-box > .button-icon {
4547 /*  height: 24px;*/
4548 }
4549
4550 #customization-titlebar-visibility-button {
4551   list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png");
4552   -moz-image-region: rect(0, 16px, 16px, 0);
4553 }
4554
4555 #customization-titlebar-visibility-button:hover {
4556   -moz-image-region: rect(16px, 16px, 32px, 0);
4557 }
4558
4559 #customization-titlebar-visibility-button > .button-box {
4560   padding-top: 0;
4561   padding-bottom: 1px;
4562 }
4563
4564 #customization-titlebar-visibility-button:hover:active > .button-box {
4565   padding-top: 1px;
4566   padding-bottom: 0;
4567 }
4568
4569 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-text,
4570 #customization-titlebar-visibility-button > .button-box > .button-text {
4571   /* Sadly, button.css thinks its margins are perfect for everyone. */
4572   margin-inline-start: 5px !important;
4573 }
4574
4575 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon {
4576   width: 20px;
4577   height: 20px;
4578   border-radius: 2px;
4579   background-image: url("chrome://browser/content/default-theme-icon.svg");
4580   background-size: contain;
4581 }
4582
4583 #customization-titlebar-visibility-button > .button-box > .button-icon {
4584   vertical-align: middle;
4585 }
4586
4587 #customization-titlebar-visibility-button[checked] {
4588   -moz-image-region: rect(0, 32px, 16px, 16px);
4589   background-color: #008484;
4590 }
4591
4592 #customization-titlebar-visibility-button[checked]:hover {
4593   -moz-image-region: rect(16px, 32px, 32px, 16px);
4594   background-color: #FFCF00;
4595 }
4596
4597 #customization-titlebar-visibility-button[checked]:hover:active {
4598   background-color: #FF9F00;
4599 }
4600
4601 @media (min-resolution: 1.1dppx) {
4602   #customization-titlebar-visibility-button {
4603     list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle@2x.png");
4604     -moz-image-region: rect(0, 48px, 48px, 0);
4605   }
4606
4607   #customization-titlebar-visibility-button:hover {
4608     -moz-image-region: rect(48px, 48px, 96px, 0);
4609   }
4610
4611   #customization-titlebar-visibility-button[checked] {
4612     -moz-image-region: rect(0, 96px, 48px, 48px);
4613   }
4614
4615   #customization-titlebar-visibility-button[checked]:hover {
4616     -moz-image-region: rect(48px, 96px, 96px, 48px);
4617   }
4618 }
4619
4620 #main-window[customize-entered] #customization-panel-container {
4621   background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
4622   background-position: left top;
4623   background-repeat: repeat;
4624   background-size: auto;
4625   background-attachment: fixed;
4626 }
4627
4628 #widget-overflow-fixed-list > toolbarpaletteitem[place="panel"],
4629 toolbarpaletteitem[place="toolbar"] {
4630   transition: border-width 250ms ease-in-out;
4631 }
4632
4633 toolbarpaletteitem[mousedown] {
4634   outline: 1px solid #008484;
4635   cursor: -moz-grabbing;
4636   opacity: 0.8;
4637 }
4638
4639 .panel-customization-placeholder,
4640 toolbarpaletteitem[place="palette"],
4641 toolbarpaletteitem[place="panel"] {
4642   transition: transform var(--drag-drop-transition-duration) ease-in-out;
4643 }
4644
4645 #customization-palette {
4646   transition: opacity .3s ease-in-out;
4647   opacity: 0;
4648 }
4649
4650 #customization-palette[showing="true"] {
4651   opacity: 1;
4652 }
4653
4654 toolbarpaletteitem toolbarbutton[disabled] {
4655 /*  color: inherit !important;*/
4656 }
4657
4658 #widget-overflow-fixed-list > toolbarpaletteitem[notransition][place="panel"],
4659 toolbarpaletteitem[notransition].panel-customization-placeholder,
4660 toolbarpaletteitem[notransition][place="toolbar"],
4661 toolbarpaletteitem[notransition][place="palette"],
4662 toolbarpaletteitem[notransition][place="panel"] {
4663   transition: none;
4664 }
4665
4666 toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
4667 toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon,
4668 toolbarpaletteitem > toolbaritem.panel-wide-item,
4669 toolbarpaletteitem > toolbarbutton[type="menu-button"] {
4670   transition: transform  var(--drag-drop-transition-duration) cubic-bezier(.6, 2, .75, 1.5) !important;
4671 }
4672
4673 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon,
4674 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon {
4675   transform: scale(1.3);
4676 }
4677
4678 toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item,
4679 toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] {
4680   transform: scale(1.1);
4681 }
4682
4683 /* Override the toolkit styling for items being dragged over. */
4684 toolbarpaletteitem[place="toolbar"] {
4685   border-left-width: 0;
4686   border-right-width: 0;
4687   margin-right: 0;
4688   margin-left: 0;
4689 }
4690
4691 #widget-overflow-fixed-list > toolbarpaletteitem[place="panel"] {
4692   border-top: 0px solid transparent;
4693   border-bottom: 0px solid transparent;
4694 }
4695
4696 #customization-palette:not([hidden]) {
4697   margin-bottom: 25px;
4698 }
4699
4700 toolbarpaletteitem[place="palette"]:-moz-focusring,
4701 toolbarpaletteitem[place="panel"]:-moz-focusring,
4702 toolbarpaletteitem[place="toolbar"]:-moz-focusring {
4703   outline-width: 0;
4704 }
4705
4706 toolbarpaletteitem[place="palette"]:not([mousedown="true"]):-moz-focusring,
4707 toolbarpaletteitem[place="panel"]:not([mousedown="true"]):-moz-focusring,
4708 toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
4709   /* Delay adding the focusring back until after the transform transition completes. */
4710   transition: outline-width .01s linear var(--drag-drop-transition-duration);
4711   outline: 1px dotted;
4712   -moz-outline-radius: 2.5px;
4713 }
4714
4715 toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
4716   outline-offset: -5px;
4717 }
4718
4719 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4720 #wrapper-edit-controls[place="palette"] > #edit-controls > separator,
4721 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
4722 #wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
4723   margin-top: 20px;
4724 }
4725
4726 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4727 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
4728   margin-left: 0;
4729   margin-right: 0;
4730   max-width: 24px;
4731   min-width: 24px;
4732   max-height: 24px;
4733   min-height: 24px;
4734   padding: 4px;
4735 }
4736
4737 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
4738 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
4739   width: 16px;
4740 }
4741
4742 #wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
4743   opacity: 1; /* To ensure these buttons always look enabled in customize mode */
4744 }
4745
4746 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
4747 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
4748   display: none;
4749 }
4750
4751 #wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks {
4752   -moz-box-pack: center;
4753   min-height: 48px;
4754 }
4755
4756 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
4757   margin-inline-end: 5px;
4758 }
4759
4760 #customization-palette > toolbarpaletteitem > label {
4761   text-align: center;
4762   margin-left: 0;
4763   margin-right: 0;
4764 }
4765
4766 #customization-lwtheme-menu > .panel-arrowcontainer > .panel-arrowcontent {
4767   -moz-box-orient: vertical;
4768   /* Make the panel padding uniform across all platforms due to the
4769      styling of the section headers and footer. */
4770   padding: 10px;
4771 }
4772
4773 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
4774   width: 32px;
4775   height: 32px;
4776 }
4777
4778 .customization-lwtheme-menu-theme {
4779   -moz-appearance: none;
4780   margin: 0 -5px 5px;
4781   padding-top: 0;
4782   padding-inline-end: 5px;
4783   padding-bottom: 0;
4784   padding-inline-start: 0;
4785 }
4786
4787 .customization-lwtheme-menu-theme[defaulttheme] {
4788   list-style-image: url(chrome://browser/content/default-theme-icon.svg);
4789 }
4790
4791 .customization-lwtheme-menu-theme[active="true"] {
4792   background-color: #008484;
4793 }
4794
4795 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
4796   margin: 5px;
4797 }
4798
4799 .customization-lwtheme-menu-theme > .toolbarbutton-text {
4800   text-align: start;
4801 }
4802
4803 #customization-lwtheme-menu-header,
4804 #customization-lwtheme-menu-recommended {
4805   padding: 10px;
4806   margin-bottom: 5px;
4807 }
4808
4809 #customization-lwtheme-menu-header,
4810 #customization-lwtheme-menu-recommended,
4811 #customization-lwtheme-menu-footer {
4812   background-color: #A09090;
4813   color: #000000;
4814   margin-right: -10px;
4815   margin-left: -10px;
4816 }
4817
4818 #customization-lwtheme-menu-header {
4819   margin-top: -10px;
4820   border-top-right-radius: 3px;
4821   border-top-left-radius: 3px;
4822 }
4823
4824 #customization-lwtheme-menu-recommended {
4825 }
4826
4827 #customization-lwtheme-menu-footer {
4828   margin-bottom: -10px;
4829   border-bottom-right-radius: 3px;
4830   border-bottom-left-radius: 3px;
4831 }
4832
4833 .customization-lwtheme-menu-footeritem {
4834   -moz-appearance: none;
4835   -moz-box-flex: 1;
4836   background-color: #C09070;
4837   color: #000000;
4838   border: 1px solid transparent;
4839   padding: 10px;
4840   margin-left: 0;
4841   margin-right: 0;
4842 }
4843
4844 .customization-lwtheme-menu-footeritem:hover {
4845   background-color: #FFCF00;
4846 }
4847
4848 .customization-lwtheme-menu-footeritem:first-child {
4849 }
4850
4851 /* === END customizeMode.inc.css === */
4852
4853 /* === BEGIN customizeTip.inc.css === */
4854
4855 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent {
4856   padding: 0;
4857   margin: 0;
4858   min-width: 400px;
4859   max-width: 1000px;
4860   min-height: 200px;
4861   border-radius: 3px;
4862 /*  background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%);*/
4863   border: 1px solid #9C9CFF;
4864   color: #FF9F00;
4865 }
4866
4867 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) {
4868 /*  background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%);*/
4869 }
4870
4871 .customization-tipPanel-infoBox {
4872   margin: 20px 25px 25px;
4873   width: 25px;
4874   background-image: url("chrome://browser/skin/customizableui/info-icon-customizeTip.png");
4875   background-repeat: no-repeat;
4876 }
4877
4878 .customization-tipPanel-content {
4879   margin: 25px 0;
4880   font-size: 12px;
4881   line-height: 18px;
4882 }
4883
4884 .customization-tipPanel-em {
4885   margin: 0;
4886   font-weight: bold;
4887 }
4888
4889 .customization-tipPanel-contentImage {
4890   margin-top: 25px;
4891   list-style-image: url("chrome://browser/skin/customizableui/customize-illustration.png");
4892   min-width: 300px;
4893   max-width: 300px;
4894   min-height: 190px;
4895   max-height: 190px;
4896   display: -moz-box;
4897 }
4898
4899 .customization-tipPanel-contentImage:-moz-locale-dir(rtl) {
4900   list-style-image: url("chrome://browser/skin/customizableui/customize-illustration-rtl.png");
4901 }
4902
4903 .customization-tipPanel-link {
4904   -moz-appearance: none;
4905   background: transparent;
4906   border: none;
4907   box-shadow: none;
4908   color: #3333FF;
4909   margin: 0;
4910   cursor: pointer;
4911 }
4912
4913 .customization-tipPanel-link > .button-box > .button-text {
4914   margin: 0 !important;
4915 }
4916
4917 .customization-tipPanel-closeBox > .close-icon {
4918   -moz-appearance: none;
4919   border: 0;
4920   margin-inline-end: -25px;
4921 }
4922
4923 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"],
4924 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
4925   list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png");
4926 }
4927
4928 /* === END customizeTip.inc.css === */
4929
4930 /**
4931  * This next rule is a hack to disable subpixel anti-aliasing on all
4932  * labels during the customize mode transition. Subpixel anti-aliasing
4933  * on Windows with Direct2D layers acceleration is particularly slow to
4934  * paint, so this hack is how we sidestep that performance bottleneck.
4935  */
4936 #main-window:-moz-any([customize-entering],[customize-exiting]) label {
4937   transform: perspective(0.01px);
4938 }
4939
4940 #main-window[customize-entered] > #tab-view-deck {
4941   background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
4942   background-attachment: fixed;
4943 }
4944
4945 #main-window[customization-lwtheme]:-moz-lwtheme {
4946   background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
4947   background-repeat: repeat;
4948   background-attachment: fixed;
4949   background-position: left top;
4950 }
4951
4952 #main-window[customize-entered] #browser-bottombox,
4953 #main-window[customize-entered] #customization-container {
4954   border-left: 1px solid #9C9CFF;
4955   border-right: 1px solid #9C9CFF;
4956   background-clip: padding-box;
4957 }
4958
4959 #main-window[customize-entered] #browser-bottombox {
4960   border-bottom: 1px solid #9C9CFF;
4961 }
4962
4963 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"] {
4964   margin-right: -2px;
4965 }
4966
4967 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
4968   margin-left: -2px;
4969 }
4970
4971 /* End customization mode */
4972
4973 /* Private browsing indicators */
4974
4975 /**
4976  * Currently, we have two places where we put private browsing indicators on
4977  * Windows. When tabsintitlebar is enabled, we draw the indicator in the titlebar.
4978  * When tabsintitlebar is disabled, we draw the indicator at the end of the
4979  * tabstrip. The titlebar indicator is the fiddliest of the bunch, since we
4980  * want the bottom border of the image to line up with the bottom of the window
4981  * caption buttons. That's why there's so much special-casing going on in here.
4982  */
4983 .private-browsing-indicator {
4984   display: none;
4985   pointer-events: none;
4986 }
4987
4988 #private-browsing-indicator-titlebar {
4989   display: block;
4990   position: absolute;
4991 }
4992
4993 #main-window[privatebrowsingmode=temporary][tabsintitlebar] #private-browsing-indicator-titlebar > .private-browsing-indicator {
4994   display: block;
4995 }
4996
4997 #main-window[privatebrowsingmode=temporary]:-moz-any([inFullscreen],:not([tabsintitlebar])) #TabsToolbar > .private-browsing-indicator {
4998   display: -moz-box;
4999 }
5000
5001 #TabsToolbar > .private-browsing-indicator {
5002   background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") no-repeat center -3px;
5003   margin-inline-start: 4px;
5004   width: 48px;
5005 }
5006
5007 /* Bug 1008183: We're intentionally using the titlebar asset here for fullscreen
5008  * mode, since the tabstrip "mimics" the titlebar in that case with its own
5009  * min/max/close window buttons.
5010  */
5011 #private-browsing-indicator-titlebar > .private-browsing-indicator,
5012 #main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
5013   background: url("chrome://browser/skin/privatebrowsing-mask-titlebar.png") no-repeat center 0px;
5014   margin-inline-end: 4px;
5015   width: 40px;
5016   height: 20px;
5017   position: relative;
5018 }
5019
5020 /* This one is for Linux */
5021 #main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
5022   background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") center no-repeat;
5023   width: 48px;
5024 }
5025
5026 /* End private browsing indicators */
5027
5028 /* === BEGIN UITour.inc.css === */
5029
5030 /* UI Tour */
5031
5032 #UITourHighlightContainer {
5033   -moz-appearance: none;
5034   border: none;
5035   background-color: transparent;
5036   /* This is a buffer to compensate for the movement in the "wobble" effect,
5037      and for the box-shadow of #UITourHighlight. */
5038   padding: 4px;
5039 }
5040
5041 #UITourHighlight {
5042   background-image: radial-gradient(50% 100%, rgba(0,132,132,0.4) 50%, rgba(0,132,132,0.6) 100%);
5043   border-radius: 40px;
5044   border: 1px solid #9C9CFF;
5045   /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
5046      on Linux without an X compositor where opacity is either 0 or 1. */
5047   box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
5048   min-height: 32px;
5049   min-width: 32px;
5050 }
5051
5052 #UITourTooltipBody {
5053   -moz-box-align: start;
5054 }
5055
5056 #UITourTooltipTitleContainer {
5057   -moz-box-align: start;
5058   margin-bottom: 10px;
5059 }
5060
5061 #UITourTooltipIcon {
5062   width: 48px;
5063   height: 48px;
5064   margin-inline-end: 10px;
5065 }
5066
5067 #UITourTooltipTitle,
5068 #UITourTooltipDescription {
5069   max-width: 20rem;
5070 }
5071
5072 #UITourTooltipTitle {
5073   font-size: 1.45rem;
5074   font-weight: bold;
5075   margin: 0;
5076 }
5077
5078 #UITourTooltipDescription {
5079   margin-inline-start: 0;
5080   margin-inline-end: 0;
5081   font-size: 1.15rem;
5082   line-height: 1.8rem;
5083   margin-bottom: 0; /* Override global.css */
5084 }
5085
5086 #UITourTooltipClose {
5087   position: relative;
5088   -moz-appearance: none;
5089   border: none;
5090   background-color: transparent;
5091   min-width: 0;
5092   margin-inline-start: 4px;
5093   margin-top: -2px;
5094 }
5095
5096 #UITourTooltipClose > .toolbarbutton-text {
5097   display: none;
5098 }
5099
5100 #UITourTooltipButtons {
5101   -moz-box-pack: end;
5102   background-color: rgba(0,0,0,.2);
5103   border-top: 1px solid rgba(0,0,0,.4);
5104   margin: 10px -16px -16px;
5105   padding: 16px;
5106 }
5107
5108 #UITourTooltipButtons > label,
5109 #UITourTooltipButtons > button {
5110   margin: 0 15px;
5111 }
5112
5113 #UITourTooltipButtons > label:first-child,
5114 #UITourTooltipButtons > button:first-child {
5115   margin-inline-start: 0;
5116 }
5117
5118 #UITourTooltipButtons > label:last-child,
5119 #UITourTooltipButtons > button:last-child {
5120   margin-inline-end: 0;
5121 }
5122
5123 #UITourTooltipButtons > button[image] > .button-box > .button-icon {
5124   width: 16px;
5125   height: 16px;
5126   margin-inline-end: 5px;
5127 }
5128
5129 #UITourTooltipButtons > label,
5130 #UITourTooltipButtons > button .button-text {
5131   font-size: 1.15rem;
5132 }
5133
5134 #UITourTooltipButtons > button:not(.button-link) {
5135   -moz-appearance: none;
5136   background-color: #C09070;
5137   border-radius: 3000px;
5138   border: none;
5139   color: #000000;
5140   padding: 4px 30px;
5141   transition-property: background-color, color;
5142   transition-duration: 150ms;
5143 }
5144
5145 #UITourTooltipButtons > button:not(.button-link):not(:active):hover {
5146   background-color: #FFCF00;
5147   color: #000000;
5148 }
5149
5150 #UITourTooltipButtons > label,
5151 #UITourTooltipButtons > button.button-link {
5152   -moz-appearance: none;
5153   background: transparent;
5154   border: none;
5155   box-shadow: none;
5156   color: rgba(0,0,0,0.35);
5157   padding-left: 10px;
5158   padding-right: 10px;
5159 }
5160
5161 #UITourTooltipButtons > button.button-link:hover {
5162   color: black;
5163 }
5164
5165 /* The primary button gets the same color as the customize button. */
5166 #UITourTooltipButtons > button.button-primary {
5167   background-color: #A06060; /* LCARS default button background color */
5168   color: #000000;
5169   padding-left: 30px;
5170   padding-right: 30px;
5171 }
5172
5173 #UITourTooltipButtons > button.button-primary:not(:active):hover {
5174   background-color: #FFCF00;
5175   color: #000000;
5176 }
5177
5178 /* Notification overrides for Heartbeat UI */
5179
5180 notification.heartbeat {
5181   background-color: #A09090;
5182 /*  height: 40px;*/
5183 }
5184
5185 @keyframes pulse-onshow {
5186  0% {
5187    opacity: 0;
5188    transform: scale(1.0);
5189  }
5190  25% {
5191    opacity: 1;
5192    transform: scale(1.1);
5193  }
5194  50% {
5195    transform: scale(1.0);
5196  }
5197  75% {
5198    transform: scale(1.1);
5199  }
5200  100% {
5201    transform: scale(1.0);
5202  }
5203 }
5204
5205 @keyframes pulse-twice {
5206  0% {
5207    transform: scale(1.1);
5208  }
5209  50% {
5210    transform: scale(0.8);
5211  }
5212  100% {
5213    transform: scale(1);
5214  }
5215 }
5216
5217 .messageText.heartbeat {
5218   color: #000000;
5219 /*  text-shadow: none; */
5220   margin-inline-start: 0px;
5221 }
5222
5223 .messageImage.heartbeat {
5224   width: 24px;
5225   height: 24px;
5226   margin-inline-start: 8px;
5227   margin-inline-end: 8px;
5228 }
5229
5230 .messageImage.heartbeat.pulse-onshow {
5231   animation-name: pulse-onshow;
5232   animation-duration: 1.5s;
5233   animation-iteration-count: 1;
5234   animation-timing-function: cubic-bezier(.7,1.8,.9,1.1);
5235 }
5236
5237 .messageImage.heartbeat.pulse-twice {
5238   animation-name: pulse-twice;
5239   animation-duration: 1s;
5240   animation-iteration-count: 2;
5241   animation-timing-function: linear;
5242 }
5243
5244 /* Learn More link styles */
5245 .heartbeat > .text-link {
5246   color: #3333FF;
5247   margin-inline-start: 0px;
5248 }
5249
5250 .heartbeat > .text-link:hover {
5251   color: #9C9CFF;
5252   text-decoration: none;
5253 }
5254
5255 .heartbeat > .text-link:hover:active {
5256   color: #FF9F00;
5257 }
5258
5259 /* Heartbeat UI Rating Star Classes */
5260 .heartbeat > #star-rating-container {
5261   display: -moz-box;
5262 /*  margin-bottom: 4px;*/
5263 }
5264
5265 .heartbeat > #star-rating-container > #star5 {
5266   -moz-box-ordinal-group: 5;
5267 }
5268
5269 .heartbeat > #star-rating-container > #star4 {
5270   -moz-box-ordinal-group: 4;
5271 }
5272
5273 .heartbeat > #star-rating-container > #star3 {
5274   -moz-box-ordinal-group: 3;
5275 }
5276
5277 .heartbeat > #star-rating-container > #star2 {
5278   -moz-box-ordinal-group: 2;
5279 }
5280
5281 .heartbeat > #star-rating-container > .star-x  {
5282   background: url("chrome://browser/skin/heartbeat-star-off.svg");
5283   cursor: pointer;
5284   /* Overrides the margin-inline-end for all platforms defined in the .plain class */
5285   margin-inline-end: 4px !important;
5286   width: 16px;
5287   height: 16px;
5288 }
5289
5290 .heartbeat > #star-rating-container > .star-x:hover,
5291 .heartbeat > #star-rating-container > .star-x:hover ~ .star-x {
5292   background: url("chrome://browser/skin/heartbeat-star-lit.svg");
5293 }
5294
5295 /* === END UITour.inc.css === */
5296
5297 #UITourTooltipButtons {
5298   /**
5299    * Override the --arrowpanel-padding so the background extends
5300    * to the sides and bottom of the panel.
5301    */
5302   margin-left: -10px;
5303   margin-right: -10px;
5304   margin-bottom: -10px;
5305 }
5306
5307 /* === BEGIN contextmenu.inc.css === */
5308
5309 menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left {
5310 }
5311
5312 #context-navigation > .menuitem-iconic {
5313   -moz-box-flex: 1;
5314   -moz-box-pack: center;
5315   -moz-box-align: center;
5316 }
5317
5318 #context-navigation > .menuitem-iconic[disabled="true"] {
5319   background-color: transparent;
5320 }
5321
5322 #context-navigation > .menuitem-iconic > .menu-iconic-left {
5323   -moz-appearance: none;
5324 }
5325
5326 #context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
5327   width: 16px;
5328   height: 16px;
5329   margin: 7px;
5330   filter: url(chrome://global/skin/filters.svg#fill);
5331   fill: currentColor;
5332 }
5333
5334 #context-back {
5335   list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back");
5336 }
5337
5338 #context-forward {
5339   list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward");
5340 }
5341
5342 #context-reload {
5343   list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload");
5344 }
5345
5346 #context-stop {
5347   list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop");
5348 }
5349
5350 #context-bookmarkpage {
5351   list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark");
5352 }
5353
5354 #context-bookmarkpage[starred=true] {
5355   list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked");
5356 }
5357
5358 #context-back:-moz-locale-dir(rtl),
5359 #context-forward:-moz-locale-dir(rtl),
5360 #context-reload:-moz-locale-dir(rtl) {
5361   transform: scaleX(-1);
5362 }
5363
5364 #context-navigation > #context-reload > .menu-iconic-left > .menu-iconic-icon,
5365 #context-navigation > #context-stop > .menu-iconic-left > .menu-iconic-icon {
5366   width: 14px;
5367   height: 14px;
5368   margin: 9px;
5369 }
5370
5371 #context-media-eme-learnmore {
5372   list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
5373 }
5374
5375 #context-media-eme-learnmore {
5376   list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
5377 }
5378
5379 /* === END contextmenu.inc.css === */
5380
5381 /* Make context menu items larger when opened through touch. */
5382 #contentAreaContextMenu[touchmode] menu,
5383 #contentAreaContextMenu[touchmode] menuitem {
5384   padding-top: 12px;
5385   padding-bottom: 12px;
5386 }
5387
5388 #contentAreaContextMenu[touchmode] > #context-navigation > menuitem {
5389   padding-top: 7px;
5390   padding-bottom: 7px;
5391 }
5392
5393 #context-navigation {
5394 }
5395
5396 #context-sep-navigation {
5397 /*  margin-top: -4px; */
5398 }
5399
5400 .browser-extension-panel > .panel-arrowcontainer > .panel-arrowcontent {
5401   padding: 0;
5402   overflow: hidden;
5403 }
5404
5405 .webextension-popup-browser {
5406   border-radius: inherit;
5407 }
5408
5409 .contentSelectDropdown-ingroup > .menu-iconic-text {
5410   padding-inline-start: 20px;
5411 }
5412
5413 #ContentSelectDropdown > menupopup {
5414   background-color: #000000;
5415   -moz-border-top-colors: #A09090;
5416   -moz-border-right-colors: #A09090;
5417   -moz-border-bottom-colors: #A09090;
5418   -moz-border-left-colors: #A09090;
5419 }
5420
5421 #ContentSelectDropdown > menupopup > menucaption,
5422 #ContentSelectDropdown > menupopup > menuitem {
5423   padding: 0 6px;
5424   border-width: 0;
5425 /*  font: -moz-list;*/
5426 }
5427
5428 #ContentSelectDropdown > menupopup > menucaption > .menu-iconic-text,
5429 #ContentSelectDropdown > menupopup > menuitem > .menu-iconic-text {
5430   /* Padding should follow the 4/12 ratio, where 12px is the default font-size
5431      with 4px being the preferred padding size. */
5432   padding-top: .3333em;
5433   padding-bottom: .3333em;
5434 }
5435
5436 #ContentSelectDropdown > menupopup > menucaption > .menu-iconic-text {
5437   font-weight: bold;
5438 }
5439
5440 #ContentSelectDropdown > menupopup > menuitem[_moz-menuactive="true"][disabled="true"] {
5441   color: #A09090;
5442   background-color: unset;
5443 }
5444
5445 #ContentSelectDropdown > menupopup > menucaption {
5446   background-color: buttonface;
5447 }
5448
5449 #ContentSelectDropdown > menupopup > menucaption[disabled="true"] {
5450   color: #A09090;
5451 }
5452
5453 #ContentSelectDropdown > .isOpenedViaTouch > menucaption > .menu-iconic-text,
5454 #ContentSelectDropdown > .isOpenedViaTouch > menuitem > .menu-iconic-text {
5455   /* Touch padding should follow the 11/12 ratio, where 12px is the default
5456      font-size with 11px being the preferred padding size. */
5457   padding-top: .9167em;
5458   padding-bottom: .9167em;
5459 }