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