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.plugin-blocked {
3968   list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
3969   fill: #FF0000 !important;
3970 }
3971
3972 #notification-popup-box[hidden] {
3973   /* Override display:none to make the pluginBlockedNotification animation work
3974      when showing the notification repeatedly. */
3975   display: -moz-box;
3976   visibility: collapse;
3977 }
3978
3979 #plugins-notification-icon.plugin-blocked[showing] {
3980   animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
3981 }
3982
3983 @keyframes pluginBlockedNotification {
3984   from {
3985     opacity: 0;
3986   }
3987   to {
3988     opacity: 1;
3989   }
3990 }
3991
3992 /* SOCIAL API */
3993
3994 .popup-notification-icon[popupid="servicesInstall"] {
3995   list-style-image: url(chrome://browser/skin/social/services-64.png);
3996 }
3997
3998 .service-icon {
3999   list-style-image: url(chrome://browser/skin/social/services-16.png);
4000 }
4001
4002 /* TRANSLATION */
4003
4004 .translation-icon {
4005   list-style-image: url(chrome://browser/skin/translation-16.png);
4006   -moz-image-region: rect(0px, 16px, 16px, 0px);
4007 }
4008
4009 .translation-icon.in-use {
4010   -moz-image-region: rect(0px, 32px, 16px, 16px);
4011 }
4012
4013 /* UPDATE */
4014
4015 .popup-notification-icon[popupid="update-available"],
4016 .popup-notification-icon[popupid="update-manual"],
4017 .popup-notification-icon[popupid="update-restart"] {
4018   background: #74BF43 url(chrome://browser/skin/notification-icons.svg#update) no-repeat center;
4019   border-radius: 50%;
4020 }
4021
4022 /* === END notification-icons.inc.css === */
4023
4024 .popup-notification-body[popupid="addon-progress"],
4025 .popup-notification-body[popupid="addon-install-confirmation"] {
4026   width: 28em;
4027   max-width: 28em;
4028 }
4029
4030 .addon-install-confirmation-name {
4031   font-weight: bold;
4032 }
4033
4034 html|*.addon-webext-perm-list {
4035   margin-block-end: 0;
4036   padding-inline-start: 10px;
4037 }
4038
4039 .addon-webext-perm-text {
4040   margin-inline-start: 0;
4041 }
4042
4043 .popup-notification-description[popupid="addon-webext-permissions"],
4044 .popup-notification-description[popupid="addon-installed"] {
4045   display: none;
4046 }
4047
4048 .addon-webext-perm-notification-content,
4049 .addon-installed-notification-content {
4050   margin-top: 0;
4051 }
4052
4053 #addon-webext-perm-header {
4054   /* Align the text more closely with the icon by clearing some top line height. */
4055   margin-top: -1px;
4056   margin-inline-start: 0;
4057 }
4058
4059 #addon-installed-notification-header {
4060   /* Align the text more closely with the icon by clearing some top line height. */
4061   margin-top: -1px;
4062 }
4063
4064 .addon-webext-name {
4065   display: inline;
4066   font-weight: bold;
4067   margin: 0;
4068 }
4069
4070 .addon-addon-icon,
4071 .addon-toolbar-icon {
4072   width: 14px;
4073   height: 14px;
4074   vertical-align: bottom;
4075   margin-bottom: 1px;
4076 }
4077
4078 .addon-addon-icon {
4079   list-style-image: url("chrome://browser/skin/menuPanel.svg");
4080   -moz-image-region: rect(0px, 288px, 32px, 256px);
4081 }
4082
4083 .addon-toolbar-icon {
4084   list-style-image: url("chrome://browser/skin/ToolbarFx.png");
4085   -moz-image-region: rect(0, 486px, 18px, 468px);
4086 }
4087
4088 /* Notification icon box */
4089
4090 .notification-anchor-icon:-moz-focusring {
4091 /*  outline: 1px dotted -moz-DialogText;*/
4092 }
4093
4094 /* Translation infobar */
4095
4096 /* === BEGIN infobar.inc.css === */
4097
4098 notification[value="translation"] .messageImage {
4099   list-style-image: url("chrome://browser/skin/translation-16.png");
4100   -moz-image-region: rect(0, 32px, 16px, 16px);
4101 }
4102
4103 @media (min-resolution: 1.25dppx) {
4104   notification[value="translation"] .messageImage {
4105     list-style-image: url("chrome://browser/skin/translation-16@2x.png");
4106     -moz-image-region: rect(0, 64px, 32px, 32px);
4107   }
4108 }
4109
4110 notification[value="translation"][state="translating"] .messageImage {
4111   list-style-image: url("chrome://browser/skin/translating-16.png");
4112   -moz-image-region: auto;
4113 }
4114
4115 @media (min-resolution: 1.25dppx) {
4116   notification[value="translation"][state="translating"] .messageImage {
4117     list-style-image: url("chrome://browser/skin/translating-16@2x.png");
4118   }
4119 }
4120
4121 notification[value="translation"] hbox[anonid="details"] {
4122   overflow: hidden;
4123 }
4124
4125 notification[value="translation"] button,
4126 notification[value="translation"] menulist {
4127   min-width: 0;
4128 }
4129
4130 notification[value="translation"] menulist > .menulist-dropmarker {
4131 }
4132
4133 .translation-menupopup arrowscrollbox {
4134   padding-bottom: 0;
4135 }
4136
4137 .translation-attribution {
4138   cursor: pointer;
4139   -moz-box-align: end;
4140   font-size: small;
4141 }
4142
4143 .translation-attribution > label {
4144   margin-bottom: 0;
4145 }
4146
4147 .translation-attribution > image {
4148   width: 70px;
4149 }
4150
4151 .translation-welcome-panel {
4152   width: 305px;
4153 }
4154
4155 .translation-welcome-logo {
4156   height: 32px;
4157   width: 32px;
4158   list-style-image: url(chrome://browser/skin/translation-16@2x.png);
4159   -moz-image-region: rect(0, 64px, 32px, 32px);
4160 }
4161
4162 .translation-welcome-content {
4163   margin-inline-start: 16px;
4164 }
4165
4166 .translation-welcome-headline {
4167   font-size: larger;
4168   font-weight: bold;
4169 }
4170
4171 .translation-welcome-body {
4172   padding: 1em 0;
4173   margin: 0 0;
4174 }
4175
4176 /* === END infobar.inc.css === */
4177
4178 notification[value="translation"] {
4179   min-height: 40px;
4180 }
4181
4182 .translation-menupopup {
4183   -moz-appearance: none;
4184 }
4185
4186 /* Bookmarks roots menu-items */
4187 #subscribeToPageMenuitem:not([disabled]),
4188 #subscribeToPageMenupopup {
4189   list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
4190 }
4191
4192 #bookmarksToolbarFolderMenu,
4193 #BMB_bookmarksToolbar,
4194 #panelMenu_bookmarksToolbar {
4195   list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
4196   -moz-image-region: auto;
4197 }
4198
4199 #BMB_unsortedBookmarks,
4200 #panelMenu_unsortedBookmarks {
4201   list-style-image: url("chrome://communicator/skin/bookmarks/unsortedBookmarks.png");
4202   -moz-image-region: auto;
4203 }
4204
4205 /* Status panel */
4206
4207 .statuspanel-label {
4208   margin: 0;
4209   padding: 2px 4px;
4210   background: #404000;
4211   border: 1px none #9C9CFF;
4212   border-top-style: solid;
4213   color: #FF9F00;
4214   text-shadow: none;
4215 }
4216
4217 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
4218 .statuspanel-label:-moz-locale-dir(rtl)[mirror] {
4219   border-right-style: solid;
4220   border-top-right-radius: .3em;
4221   margin-right: 1em;
4222 }
4223
4224 .statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
4225 .statuspanel-label:-moz-locale-dir(ltr)[mirror] {
4226   border-left-style: solid;
4227   border-top-left-radius: .3em;
4228   margin-left: 1em;
4229 }
4230
4231 /* HACK to abolish devily color on main content */
4232
4233 #content {
4234   background-color: transparent !important;
4235 }
4236
4237 /* === BEGIN fullscreen/warning.inc.css === */
4238
4239 html|*.pointerlockfswarning {
4240   align-items: center;
4241   background: rgba(0, 0, 0, 0.9);
4242   border: 2px solid #A09090;
4243   box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
4244   border-radius: 8px;
4245   padding: 24px 16px;
4246   font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
4247 }
4248
4249 html|*.pointerlockfswarning::before {
4250   margin: 0;
4251   width: 24px; height: 24px;
4252 }
4253
4254 html|*.pointerlockfswarning[data-identity="verifiedIdentity"]::before,
4255 html|*.pointerlockfswarning[data-identity="verifiedDomain"]::before {
4256   content: url("chrome://browser/skin/fullscreen/secure.svg");
4257 }
4258
4259 html|*.pointerlockfswarning[data-identity="unknownIdentity"]::before {
4260   content: url("chrome://browser/skin/fullscreen/insecure.svg");
4261 }
4262 html|*.pointerlockfswarning-domain-text,
4263 html|*.pointerlockfswarning-generic-text {
4264   font-size: 21px;
4265   font-weight: lighter;
4266   color: #A09090;
4267   margin: 0 16px;
4268 }
4269
4270 html|*.pointerlockfswarning-domain {
4271   font-weight: bold;
4272   margin: 0;
4273 }
4274
4275 html|*#fullscreen-exit-button,
4276 html|*.pointerlockfswarning-exit-button {
4277   margin: 0;
4278
4279   border-radius: 300px;
4280   border: none;
4281   background-color: #C09070;
4282   color: #000000;
4283 }
4284
4285 /* === END fullscreen/warning.inc.css === */
4286
4287 /* === BEGIN ctrlTab.inc.css === */
4288
4289 /* Ctrl-Tab */
4290
4291 #ctrlTab-panel {
4292   -moz-appearance: none;
4293   background: rgba(0%,0%,0%,.7);
4294   color: #FF9F00;
4295   border-style: none;
4296   padding: 20px 10px 10px;
4297   font-weight: bold;
4298 }
4299
4300 .ctrlTab-favicon[src] {
4301   background-color: #000000;
4302   width: 20px;
4303   height: 20px;
4304   padding: 2px;
4305 }
4306
4307 .ctrlTab-preview-inner > .tabPreview-canvas {
4308 /*  box-shadow: 1px 1px 2px hsl(0,0%,12%);*/
4309 }
4310
4311 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
4312   margin-bottom: 2px;
4313 }
4314
4315 .ctrlTab-preview-inner {
4316   padding: 8px;
4317   border: 2px solid transparent;
4318   border-radius: .5em;
4319 }
4320
4321 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner {
4322   margin: -10px -10px 0;
4323 }
4324
4325 #ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
4326   background-color: #000000;
4327 }
4328
4329 .ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
4330   color: #A09090;
4331   background-color: #000000;
4332   text-shadow: none;
4333   border-color: #9C9CFF;
4334 }
4335
4336 #ctrlTab-showAll {
4337   margin-top: .5em;
4338 }
4339
4340 /* === END ctrlTab.inc.css === */
4341
4342 /* === including indicator.css is done at the start of the file === */
4343
4344 /* Error counter */
4345
4346 #developer-toolbar-toolbox-button[error-count]:before {
4347   color: #000000;
4348   min-width: 16px;
4349   text-shadow: none;
4350   background-color: #FF0000;
4351   border-radius: 1px;
4352   margin-inline-end: 5px;
4353 }
4354
4355 /* === BEGIN plugin-doorhanger.inc.css === */
4356
4357 /**
4358  * Plugin Doorhanger Styles
4359  */
4360
4361 #notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent {
4362   padding: 6px 1px 2px;
4363 }
4364
4365 .click-to-play-plugins-notification-center-box {
4366 }
4367
4368 .plugin-popupnotification-centeritem:nth-child(odd) {
4369 /*  background-color: rgba(0,0,0,0.1);*/
4370 }
4371
4372 .center-item-label {
4373   margin-bottom: 0;
4374   text-overflow: ellipsis;
4375 }
4376
4377 .center-item-warning-icon {
4378   background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.svg");
4379   background-repeat: no-repeat;
4380   width: 16px;
4381   height: 15px;
4382   margin-inline-start: 6px;
4383 }
4384
4385 .click-to-play-plugins-notification-button-container {
4386 }
4387
4388 .click-to-play-popup-button {
4389   width: 50%;
4390 }
4391
4392 .click-to-play-plugins-notification-description-box {
4393   margin-left: 5px;
4394   margin-right: 5px;
4395   margin-top: 0;
4396   padding-bottom: 3px;
4397 }
4398
4399 .click-to-play-plugins-outer-description {
4400   margin-top: 1px;
4401 }
4402
4403 .click-to-play-plugins-notification-link,
4404 .center-item-link {
4405   margin: 0;
4406 }
4407
4408 .messageImage[value="plugin-hidden"] {
4409   list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
4410 }
4411
4412 /* Keep any changes to this style in sync with pluginProblem.css */
4413 notification.pluginVulnerable {
4414 }
4415
4416 notification.pluginVulnerable .messageImage {
4417   list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
4418 }
4419
4420 /* === END plugin-doorhanger.inc.css === */
4421
4422 /* === BEGIN customizeMode.inc.css === */
4423
4424 /* Customization mode */
4425
4426 :root {
4427   --drag-drop-transition-duration: .3s;
4428 }
4429
4430 #main-window[customization-lwtheme] #tab-view-deck:-moz-lwtheme {
4431   background-repeat: no-repeat;
4432   background-position: right top;
4433   background-attachment: fixed;
4434   background-color: transparent;
4435   background-image: -moz-image-rect(var(--lwt-header-image), 0, 100%,
4436                       var(--toolbox-rect-height), 0),
4437                     linear-gradient(to bottom,
4438                       var(--lwt-accent-color) calc(var(--toolbox-rect-height-with-unit) - 1px),
4439                       rgba(0,0,0,0.25) calc(var(--toolbox-rect-height-with-unit) - 1px),
4440                       rgba(0,0,0,0.25) calc(var(--toolbox-rect-height-with-unit) + 1px),
4441                       rgba(255,255,255,0.5) calc(var(--toolbox-rect-height-with-unit) + 1px),
4442                       rgba(255,255,255,0.5) calc(var(--toolbox-rect-height-with-unit) + 2px),
4443                       transparent calc(var(--toolbox-rect-height-with-unit) + 2px));
4444 }
4445
4446 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox {
4447   margin-bottom: 1em;
4448 }
4449
4450 #main-window:-moz-any([customize-entering],[customize-entered]) #content-deck,
4451 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4452 #main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
4453   margin-left: 1em;
4454   margin-right: 1em;
4455 }
4456
4457 #main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck {
4458   pointer-events: none;
4459 }
4460
4461 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4462 #PanelUI-contents > .panel-customization-placeholder {
4463   -moz-outline-radius: 2.5px;
4464   outline: 1px dashed transparent;
4465 }
4466
4467 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before {
4468   /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */
4469   -moz-box-ordinal-group: 0;
4470   content: "";
4471   display: -moz-box;
4472   height: 100%;
4473   left: 0;
4474   outline-offset: -2px;
4475   pointer-events: none;
4476   position: absolute;
4477   top: 0;
4478   width: 100%;
4479 }
4480
4481 /* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the
4482    #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the
4483    offset from the bottom effectively the same as other targets (-2px). */
4484 #main-window[customize-entered] #TabsToolbar.customization-target::before {
4485 /*  top: -2px;*/
4486 }
4487
4488 /* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */
4489 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover,
4490 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)),
4491 #main-window[customize-entered] #nav-bar-customization-target.customization-target {
4492   position: relative;
4493 }
4494
4495 /* Most target outlines are shown on hover and drag over but the panel menu uses
4496    placeholders instead. */
4497 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before,
4498 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4499 /* nav-bar and panel outlines are always shown */
4500 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4501   outline-color: currentColor;
4502 }
4503
4504 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4505   transition: outline-color 250ms linear;
4506 }
4507
4508 #PanelUI-contents[showoutline=true] > .panel-customization-placeholder {
4509   transition: outline-color 250ms linear;
4510   outline-color: var(--panel-separator-color);
4511 }
4512
4513 #PanelUI-contents > .panel-customization-placeholder {
4514   cursor: auto;
4515   outline-offset: -5px;
4516 }
4517
4518 #main-window[customizing] .customization-target:not(#PanelUI-contents) {
4519   min-width: 100px;
4520 /*  padding-left: 10px;
4521   padding-right: 10px;*/
4522 }
4523
4524 #main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck {
4525   padding: 0 2em 2em;
4526 }
4527
4528 #customization-container {
4529   background-color: #000000;
4530   color: #FF9F00;
4531 }
4532
4533 #customization-palette,
4534 #customization-empty {
4535   padding: 0 15px 15px;
4536 }
4537
4538 #customization-header {
4539   font-size: 1.75em;
4540   line-height: 1.75em;
4541   color: #9C9CFF;
4542   font-weight: 200;
4543   margin: 25px 25px 12px;
4544   padding-bottom: 12px;
4545   border-bottom: 1px solid #A09090;
4546 }
4547
4548 #customization-panel-container {
4549   padding: 10px 10px 0px;
4550 }
4551
4552 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4553 #customization-footer {
4554   /*background-color: rgb(236,236,236);*/
4555 }
4556
4557 #customization-footer {
4558   border-top: 1px solid #9C9CFF;
4559   padding: 10px;
4560 }
4561
4562 .customizationmode-button {
4563   margin: 5px;
4564 }
4565
4566 .customizationmode-checkbox {
4567 }
4568
4569 #customization-reset-button,
4570 #customization-undo-reset-button,
4571 #customization-done-button {
4572 }
4573
4574 #customization-done-button {
4575 }
4576
4577 .customizationmode-button > .box-inherit {
4578 }
4579
4580 /* We use a smaller padding to ensure images don't have padding.
4581  * We can't detect whether a button has an image. This button doesn't
4582  * so it needs more padding, so we unfortunately hardcode the extra
4583  * padding in here:
4584  */
4585 #customization-toolbar-visibility-button {
4586 }
4587
4588 .customizationmode-button[type=menu] > .box-inherit > .box-inherit > .button-text {
4589 }
4590
4591 .customizationmode-button > .button-icon {
4592 }
4593
4594 .customizationmode-button:not([type=menu]) > .button-text {
4595 }
4596
4597 .customizationmode-button > .box-inherit > .button-menu-dropmarker {
4598 }
4599
4600 .customizationmode-button[checked] {
4601   background-color: #008484;
4602 }
4603
4604 .customizationmode-button[checked]:hover:not([disabled]),
4605 .customizationmode-button:hover:not([disabled]) {
4606   background-color: #FFCF00;
4607 }
4608
4609 .customizationmode-button[checked]:hover:active:not([disabled]),
4610 .customizationmode-button:hover:active:not([disabled]),
4611 .customizationmode-button[open] {
4612   background-color: #FF9F00;
4613 }
4614
4615 .customizationmode-button[disabled="true"] {
4616 }
4617
4618 .customizationmode-button > .box-inherit > .box-inherit > .button-icon,
4619 .customizationmode-button > .button-box > .button-icon {
4620 /*  height: 16px;*/
4621 }
4622
4623 #customization-titlebar-visibility-button {
4624   list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png");
4625   -moz-image-region: rect(0, 16px, 16px, 0);
4626 }
4627
4628 #customization-titlebar-visibility-button:hover {
4629   -moz-image-region: rect(16px, 16px, 32px, 0);
4630 }
4631
4632 #customization-titlebar-visibility-button > .button-box {
4633   padding-top: 0;
4634   padding-bottom: 1px;
4635 }
4636
4637 #customization-titlebar-visibility-button:hover:active > .button-box {
4638   padding-top: 1px;
4639   padding-bottom: 0;
4640 }
4641
4642 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-text,
4643 #customization-titlebar-visibility-button > .button-box > .button-text {
4644   /* Sadly, button.css thinks its margins are perfect for everyone. */
4645   margin-inline-start: 5px !important;
4646 }
4647
4648 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon {
4649   width: 16px;
4650   height: 16px;
4651   border-radius: 2px;
4652   background-image: url("chrome://browser/content/default-theme-icon.svg");
4653   background-size: contain;
4654 }
4655
4656 #customization-titlebar-visibility-button > .button-box > .button-icon {
4657   vertical-align: middle;
4658 }
4659
4660 #customization-titlebar-visibility-button[checked] {
4661   -moz-image-region: rect(0, 32px, 16px, 16px);
4662   background-color: #008484;
4663 }
4664
4665 #customization-titlebar-visibility-button[checked]:hover {
4666   -moz-image-region: rect(16px, 32px, 32px, 16px);
4667   background-color: #FFCF00;
4668 }
4669
4670 #customization-titlebar-visibility-button[checked]:hover:active {
4671   background-color: #FF9F00;
4672 }
4673
4674 @media (min-resolution: 1.1dppx) {
4675   #customization-titlebar-visibility-button {
4676     list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle@2x.png");
4677     -moz-image-region: rect(0, 48px, 48px, 0);
4678   }
4679
4680   #customization-titlebar-visibility-button:hover {
4681     -moz-image-region: rect(48px, 48px, 96px, 0);
4682   }
4683
4684   #customization-titlebar-visibility-button[checked] {
4685     -moz-image-region: rect(0, 96px, 48px, 48px);
4686   }
4687
4688   #customization-titlebar-visibility-button[checked]:hover {
4689     -moz-image-region: rect(48px, 96px, 96px, 48px);
4690   }
4691 }
4692
4693 #main-window[customize-entered] #customization-panel-container {
4694   background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
4695   background-position: left top;
4696   background-repeat: repeat;
4697   background-size: auto;
4698   background-attachment: fixed;
4699 }
4700
4701 #widget-overflow-fixed-list > toolbarpaletteitem[place="panel"],
4702 toolbarpaletteitem[place="toolbar"] {
4703   transition: border-width 250ms ease-in-out;
4704 }
4705
4706 toolbarpaletteitem[mousedown] {
4707   outline: 1px solid #008484;
4708   cursor: -moz-grabbing;
4709   opacity: 0.8;
4710 }
4711
4712 .panel-customization-placeholder,
4713 toolbarpaletteitem[place="palette"],
4714 toolbarpaletteitem[place="panel"] {
4715   transition: transform var(--drag-drop-transition-duration) ease-in-out;
4716 }
4717
4718 #customization-palette {
4719   transition: opacity .3s ease-in-out;
4720   opacity: 0;
4721 }
4722
4723 #customization-palette[showing="true"] {
4724   opacity: 1;
4725 }
4726
4727 toolbarpaletteitem toolbarbutton[disabled] {
4728 /*  color: inherit !important;*/
4729 }
4730
4731 #widget-overflow-fixed-list > toolbarpaletteitem[notransition][place="panel"],
4732 toolbarpaletteitem[notransition].panel-customization-placeholder,
4733 toolbarpaletteitem[notransition][place="toolbar"],
4734 toolbarpaletteitem[notransition][place="palette"],
4735 toolbarpaletteitem[notransition][place="panel"] {
4736   transition: none;
4737 }
4738
4739 toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
4740 toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon,
4741 toolbarpaletteitem > toolbaritem.panel-wide-item,
4742 toolbarpaletteitem > toolbarbutton[type="menu-button"] {
4743   transition: transform  var(--drag-drop-transition-duration) cubic-bezier(.6, 2, .75, 1.5) !important;
4744 }
4745
4746 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon,
4747 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon {
4748   transform: scale(1.3);
4749 }
4750
4751 toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item,
4752 toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] {
4753   transform: scale(1.1);
4754 }
4755
4756 /* Override the toolkit styling for items being dragged over. */
4757 toolbarpaletteitem[place="toolbar"] {
4758   border-left-width: 0;
4759   border-right-width: 0;
4760   margin-right: 0;
4761   margin-left: 0;
4762 }
4763
4764 #widget-overflow-fixed-list > toolbarpaletteitem[place="panel"] {
4765   border-top: 0px solid transparent;
4766   border-bottom: 0px solid transparent;
4767 }
4768
4769 #customization-palette:not([hidden]) {
4770   margin-bottom: 25px;
4771 }
4772
4773 toolbarpaletteitem[place="palette"]:-moz-focusring,
4774 toolbarpaletteitem[place="panel"]:-moz-focusring,
4775 toolbarpaletteitem[place="toolbar"]:-moz-focusring {
4776   outline-width: 0;
4777 }
4778
4779 toolbarpaletteitem[place="palette"]:not([mousedown="true"]):-moz-focusring,
4780 toolbarpaletteitem[place="panel"]:not([mousedown="true"]):-moz-focusring,
4781 toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
4782   /* Delay adding the focusring back until after the transform transition completes. */
4783   transition: outline-width .01s linear var(--drag-drop-transition-duration);
4784   outline: 1px dotted;
4785   -moz-outline-radius: 2.5px;
4786 }
4787
4788 toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
4789   outline-offset: -5px;
4790 }
4791
4792 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4793 #wrapper-edit-controls[place="palette"] > #edit-controls > separator,
4794 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
4795 #wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
4796   margin-top: 20px;
4797 }
4798
4799 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4800 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
4801   margin-left: 0;
4802   margin-right: 0;
4803   max-width: 24px;
4804   min-width: 24px;
4805   max-height: 24px;
4806   min-height: 24px;
4807   padding: 4px;
4808 }
4809
4810 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
4811 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
4812   width: 16px;
4813 }
4814
4815 #wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
4816   opacity: 1; /* To ensure these buttons always look enabled in customize mode */
4817 }
4818
4819 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
4820 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
4821   display: none;
4822 }
4823
4824 #wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks {
4825   -moz-box-pack: center;
4826   min-height: 48px;
4827 }
4828
4829 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
4830   margin-inline-end: 5px;
4831 }
4832
4833 #customization-palette > toolbarpaletteitem > label {
4834   text-align: center;
4835   margin-left: 0;
4836   margin-right: 0;
4837 }
4838
4839 #customization-lwtheme-menu > .panel-arrowcontainer > .panel-arrowcontent {
4840   -moz-box-orient: vertical;
4841   /* Make the panel padding uniform across all platforms due to the
4842      styling of the section headers and footer. */
4843   padding: 10px;
4844 }
4845
4846 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
4847   width: 32px;
4848   height: 32px;
4849 }
4850
4851 .customization-lwtheme-menu-theme {
4852   -moz-appearance: none;
4853   margin: 0 -5px 5px;
4854   padding-top: 0;
4855   padding-inline-end: 5px;
4856   padding-bottom: 0;
4857   padding-inline-start: 0;
4858 }
4859
4860 .customization-lwtheme-menu-theme[defaulttheme] {
4861   list-style-image: url(chrome://browser/content/default-theme-icon.svg);
4862 }
4863
4864 .customization-lwtheme-menu-theme[active="true"] {
4865   background-color: #008484;
4866 }
4867
4868 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
4869   margin: 5px;
4870 }
4871
4872 .customization-lwtheme-menu-theme > .toolbarbutton-text {
4873   text-align: start;
4874 }
4875
4876 #customization-lwtheme-menu-header,
4877 #customization-lwtheme-menu-recommended {
4878   padding: 10px;
4879   margin-bottom: 5px;
4880 }
4881
4882 #customization-lwtheme-menu-header,
4883 #customization-lwtheme-menu-recommended,
4884 #customization-lwtheme-menu-footer {
4885   background-color: #A09090;
4886   color: #000000;
4887   margin-right: -10px;
4888   margin-left: -10px;
4889 }
4890
4891 #customization-lwtheme-menu-header {
4892   margin-top: -10px;
4893   border-top-right-radius: 3px;
4894   border-top-left-radius: 3px;
4895 }
4896
4897 #customization-lwtheme-menu-recommended {
4898 }
4899
4900 #customization-lwtheme-menu-footer {
4901   margin-bottom: -10px;
4902   border-bottom-right-radius: 3px;
4903   border-bottom-left-radius: 3px;
4904 }
4905
4906 .customization-lwtheme-menu-footeritem {
4907   -moz-appearance: none;
4908   -moz-box-flex: 1;
4909   background-color: #C09070;
4910   color: #000000;
4911   border: 1px solid transparent;
4912   padding: 10px;
4913   margin-left: 0;
4914   margin-right: 0;
4915 }
4916
4917 .customization-lwtheme-menu-footeritem:hover {
4918   background-color: #FFCF00;
4919 }
4920
4921 .customization-lwtheme-menu-footeritem:first-child {
4922 }
4923
4924 /* === END customizeMode.inc.css === */
4925
4926 /* === BEGIN customizeTip.inc.css === */
4927
4928 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent {
4929   padding: 0;
4930   margin: 0;
4931   min-width: 400px;
4932   max-width: 1000px;
4933   min-height: 200px;
4934   border-radius: 3px;
4935 /*  background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%);*/
4936   border: 1px solid #9C9CFF;
4937   color: #FF9F00;
4938 }
4939
4940 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) {
4941 /*  background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%);*/
4942 }
4943
4944 .customization-tipPanel-infoBox {
4945   margin: 20px 25px 25px;
4946   width: 25px;
4947   background-image: url("chrome://browser/skin/customizableui/info-icon-customizeTip.png");
4948   background-repeat: no-repeat;
4949 }
4950
4951 .customization-tipPanel-content {
4952   margin: 25px 0;
4953   font-size: 12px;
4954   line-height: 18px;
4955 }
4956
4957 .customization-tipPanel-em {
4958   margin: 0;
4959   font-weight: bold;
4960 }
4961
4962 .customization-tipPanel-contentImage {
4963   margin-top: 25px;
4964   list-style-image: url("chrome://browser/skin/customizableui/customize-illustration.png");
4965   min-width: 300px;
4966   max-width: 300px;
4967   min-height: 190px;
4968   max-height: 190px;
4969   display: -moz-box;
4970 }
4971
4972 .customization-tipPanel-contentImage:-moz-locale-dir(rtl) {
4973   list-style-image: url("chrome://browser/skin/customizableui/customize-illustration-rtl.png");
4974 }
4975
4976 .customization-tipPanel-link {
4977   -moz-appearance: none;
4978   background: transparent;
4979   border: none;
4980   box-shadow: none;
4981   color: #3333FF;
4982   margin: 0;
4983   cursor: pointer;
4984 }
4985
4986 .customization-tipPanel-link > .button-box > .button-text {
4987   margin: 0 !important;
4988 }
4989
4990 .customization-tipPanel-closeBox > .close-icon {
4991   -moz-appearance: none;
4992   border: 0;
4993   margin-inline-end: -25px;
4994 }
4995
4996 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"],
4997 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
4998   list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png");
4999 }
5000
5001 /* === END customizeTip.inc.css === */
5002
5003 /**
5004  * This next rule is a hack to disable subpixel anti-aliasing on all
5005  * labels during the customize mode transition. Subpixel anti-aliasing
5006  * on Windows with Direct2D layers acceleration is particularly slow to
5007  * paint, so this hack is how we sidestep that performance bottleneck.
5008  */
5009 #main-window:-moz-any([customize-entering],[customize-exiting]) label {
5010   transform: perspective(0.01px);
5011 }
5012
5013 #main-window[customize-entered] > #tab-view-deck {
5014   background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5015   background-attachment: fixed;
5016 }
5017
5018 #main-window[customization-lwtheme]:-moz-lwtheme {
5019   background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5020   background-repeat: repeat;
5021   background-attachment: fixed;
5022   background-position: left top;
5023 }
5024
5025 #main-window[customize-entered] #browser-bottombox,
5026 #main-window[customize-entered] #customization-container {
5027   border-left: 1px solid #9C9CFF;
5028   border-right: 1px solid #9C9CFF;
5029   background-clip: padding-box;
5030 }
5031
5032 #main-window[customize-entered] #browser-bottombox {
5033   border-bottom: 1px solid #9C9CFF;
5034 }
5035
5036 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"] {
5037   margin-right: -2px;
5038 }
5039
5040 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5041   margin-left: -2px;
5042 }
5043
5044 /* End customization mode */
5045
5046 /* Private browsing indicators */
5047
5048 /**
5049  * Currently, we have two places where we put private browsing indicators on
5050  * Windows. When tabsintitlebar is enabled, we draw the indicator in the titlebar.
5051  * When tabsintitlebar is disabled, we draw the indicator at the end of the
5052  * tabstrip. The titlebar indicator is the fiddliest of the bunch, since we
5053  * want the bottom border of the image to line up with the bottom of the window
5054  * caption buttons. That's why there's so much special-casing going on in here.
5055  */
5056 .private-browsing-indicator {
5057   display: none;
5058   pointer-events: none;
5059 }
5060
5061 #private-browsing-indicator-titlebar {
5062   display: block;
5063   position: absolute;
5064 }
5065
5066 #main-window[privatebrowsingmode=temporary][tabsintitlebar] #private-browsing-indicator-titlebar > .private-browsing-indicator {
5067   display: block;
5068 }
5069
5070 #main-window[privatebrowsingmode=temporary]:-moz-any([inFullscreen],:not([tabsintitlebar])) #TabsToolbar > .private-browsing-indicator {
5071   display: -moz-box;
5072 }
5073
5074 #TabsToolbar > .private-browsing-indicator {
5075   background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") no-repeat center -3px;
5076   margin-inline-start: 4px;
5077   width: 48px;
5078 }
5079
5080 /* Bug 1008183: We're intentionally using the titlebar asset here for fullscreen
5081  * mode, since the tabstrip "mimics" the titlebar in that case with its own
5082  * min/max/close window buttons.
5083  */
5084 #private-browsing-indicator-titlebar > .private-browsing-indicator,
5085 #main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
5086   background: url("chrome://browser/skin/privatebrowsing-mask-titlebar.png") no-repeat center 0px;
5087   margin-inline-end: 4px;
5088   width: 40px;
5089   height: 20px;
5090   position: relative;
5091 }
5092
5093 /* This one is for Linux */
5094 #main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
5095   background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") center no-repeat;
5096   width: 48px;
5097 }
5098
5099 /* End private browsing indicators */
5100
5101 /* === BEGIN UITour.inc.css === */
5102
5103 /* UI Tour */
5104
5105 #UITourHighlightContainer {
5106   -moz-appearance: none;
5107   border: none;
5108   background-color: transparent;
5109   /* This is a buffer to compensate for the movement in the "wobble" effect,
5110      and for the box-shadow of #UITourHighlight. */
5111   padding: 4px;
5112 }
5113
5114 #UITourHighlight {
5115   background-image: radial-gradient(50% 100%, rgba(0,132,132,0.4) 50%, rgba(0,132,132,0.6) 100%);
5116   border-radius: 40px;
5117   border: 1px solid #9C9CFF;
5118   /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
5119      on Linux without an X compositor where opacity is either 0 or 1. */
5120   box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
5121   min-height: 32px;
5122   min-width: 32px;
5123 }
5124
5125 #UITourTooltipBody {
5126   -moz-box-align: start;
5127 }
5128
5129 #UITourTooltipTitleContainer {
5130   -moz-box-align: start;
5131   margin-bottom: 10px;
5132 }
5133
5134 #UITourTooltipIcon {
5135   width: 48px;
5136   height: 48px;
5137   margin-inline-end: 10px;
5138 }
5139
5140 #UITourTooltipTitle,
5141 #UITourTooltipDescription {
5142   max-width: 20rem;
5143 }
5144
5145 #UITourTooltipTitle {
5146   font-size: 1.45rem;
5147   font-weight: bold;
5148   margin: 0;
5149 }
5150
5151 #UITourTooltipDescription {
5152   margin-inline-start: 0;
5153   margin-inline-end: 0;
5154   font-size: 1.15rem;
5155   line-height: 1.8rem;
5156   margin-bottom: 0; /* Override global.css */
5157 }
5158
5159 #UITourTooltipClose {
5160   position: relative;
5161   -moz-appearance: none;
5162   border: none;
5163   background-color: transparent;
5164   min-width: 0;
5165   margin-inline-start: 4px;
5166   margin-top: -2px;
5167 }
5168
5169 #UITourTooltipClose > .toolbarbutton-text {
5170   display: none;
5171 }
5172
5173 #UITourTooltipButtons {
5174   -moz-box-pack: end;
5175   background-color: rgba(0,0,0,.2);
5176   border-top: 1px solid rgba(0,0,0,.4);
5177   margin: 10px -16px -16px;
5178   padding: 16px;
5179 }
5180
5181 #UITourTooltipButtons > label,
5182 #UITourTooltipButtons > button {
5183   margin: 0 15px;
5184 }
5185
5186 #UITourTooltipButtons > label:first-child,
5187 #UITourTooltipButtons > button:first-child {
5188   margin-inline-start: 0;
5189 }
5190
5191 #UITourTooltipButtons > label:last-child,
5192 #UITourTooltipButtons > button:last-child {
5193   margin-inline-end: 0;
5194 }
5195
5196 #UITourTooltipButtons > button[image] > .button-box > .button-icon {
5197   width: 16px;
5198   height: 16px;
5199   margin-inline-end: 5px;
5200 }
5201
5202 #UITourTooltipButtons > label,
5203 #UITourTooltipButtons > button .button-text {
5204   font-size: 1.15rem;
5205 }
5206
5207 #UITourTooltipButtons > button:not(.button-link) {
5208   -moz-appearance: none;
5209   background-color: #C09070;
5210   border-radius: 3000px;
5211   border: none;
5212   color: #000000;
5213   padding: 4px 30px;
5214   transition-property: background-color, color;
5215   transition-duration: 150ms;
5216 }
5217
5218 #UITourTooltipButtons > button:not(.button-link):not(:active):hover {
5219   background-color: #FFCF00;
5220   color: #000000;
5221 }
5222
5223 #UITourTooltipButtons > label,
5224 #UITourTooltipButtons > button.button-link {
5225   -moz-appearance: none;
5226   background: transparent;
5227   border: none;
5228   box-shadow: none;
5229   color: rgba(0,0,0,0.35);
5230   padding-left: 10px;
5231   padding-right: 10px;
5232 }
5233
5234 #UITourTooltipButtons > button.button-link:hover {
5235   color: black;
5236 }
5237
5238 /* The primary button gets the same color as the customize button. */
5239 #UITourTooltipButtons > button.button-primary {
5240   background-color: #A06060; /* LCARS default button background color */
5241   color: #000000;
5242   padding-left: 30px;
5243   padding-right: 30px;
5244 }
5245
5246 #UITourTooltipButtons > button.button-primary:not(:active):hover {
5247   background-color: #FFCF00;
5248   color: #000000;
5249 }
5250
5251 /* === END UITour.inc.css === */
5252
5253 #UITourTooltipButtons {
5254   /**
5255    * Override the --arrowpanel-padding so the background extends
5256    * to the sides and bottom of the panel.
5257    */
5258   margin-left: -10px;
5259   margin-right: -10px;
5260   margin-bottom: -10px;
5261 }
5262
5263 /* === BEGIN contextmenu.inc.css === */
5264
5265 menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left {
5266 }
5267
5268 #context-navigation > .menuitem-iconic {
5269   -moz-box-flex: 1;
5270   -moz-box-pack: center;
5271   -moz-box-align: center;
5272 }
5273
5274 #context-navigation > .menuitem-iconic[disabled="true"] {
5275   background-color: transparent;
5276 }
5277
5278 #context-navigation > .menuitem-iconic > .menu-iconic-left {
5279   -moz-appearance: none;
5280 }
5281
5282 #context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
5283   width: 16px;
5284   height: 16px;
5285   margin: 7px;
5286   filter: url(chrome://global/skin/filters.svg#fill);
5287   fill: currentColor;
5288 }
5289
5290 #context-back {
5291   list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back");
5292 }
5293
5294 #context-forward {
5295   list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward");
5296 }
5297
5298 #context-reload {
5299   list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload");
5300 }
5301
5302 #context-stop {
5303   list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop");
5304 }
5305
5306 #context-bookmarkpage {
5307   list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark");
5308 }
5309
5310 #context-bookmarkpage[starred=true] {
5311   list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked");
5312 }
5313
5314 #context-back:-moz-locale-dir(rtl),
5315 #context-forward:-moz-locale-dir(rtl),
5316 #context-reload:-moz-locale-dir(rtl) {
5317   transform: scaleX(-1);
5318 }
5319
5320 #context-navigation > #context-reload > .menu-iconic-left > .menu-iconic-icon,
5321 #context-navigation > #context-stop > .menu-iconic-left > .menu-iconic-icon {
5322   width: 14px;
5323   height: 14px;
5324   margin: 9px;
5325 }
5326
5327 #context-media-eme-learnmore {
5328   list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
5329 }
5330
5331 #context-media-eme-learnmore {
5332   list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
5333 }
5334
5335 /* === END contextmenu.inc.css === */
5336
5337 /* Make context menu items larger when opened through touch. */
5338 #contentAreaContextMenu[touchmode] menu,
5339 #contentAreaContextMenu[touchmode] menuitem {
5340   padding-top: 12px;
5341   padding-bottom: 12px;
5342 }
5343
5344 #contentAreaContextMenu[touchmode] > #context-navigation > menuitem {
5345   padding-top: 7px;
5346   padding-bottom: 7px;
5347 }
5348
5349 #context-navigation {
5350 }
5351
5352 #context-sep-navigation {
5353 /*  margin-top: -4px; */
5354 }
5355
5356 .browser-extension-panel > .panel-arrowcontainer > .panel-arrowcontent {
5357   padding: 0;
5358   overflow: hidden;
5359 }
5360
5361 .webextension-popup-browser {
5362   border-radius: inherit;
5363 }
5364
5365 .contentSelectDropdown-ingroup > .menu-iconic-text {
5366   padding-inline-start: 20px;
5367 }
5368
5369 #ContentSelectDropdown > menupopup {
5370   background-color: #000000;
5371   -moz-border-top-colors: #A09090;
5372   -moz-border-right-colors: #A09090;
5373   -moz-border-bottom-colors: #A09090;
5374   -moz-border-left-colors: #A09090;
5375 }
5376
5377 #ContentSelectDropdown > menupopup > menucaption,
5378 #ContentSelectDropdown > menupopup > menuitem {
5379   padding: 0 6px;
5380   border-width: 0;
5381 /*  font: -moz-list;*/
5382 }
5383
5384 #ContentSelectDropdown > menupopup > menucaption > .menu-iconic-text,
5385 #ContentSelectDropdown > menupopup > menuitem > .menu-iconic-text {
5386   /* Padding should follow the 4/12 ratio, where 12px is the default font-size
5387      with 4px being the preferred padding size. */
5388   padding-top: .3333em;
5389   padding-bottom: .3333em;
5390 }
5391
5392 #ContentSelectDropdown > menupopup > menucaption > .menu-iconic-text {
5393   font-weight: bold;
5394 }
5395
5396 #ContentSelectDropdown > menupopup > menuitem[_moz-menuactive="true"][disabled="true"] {
5397   color: #A09090;
5398   background-color: unset;
5399 }
5400
5401 #ContentSelectDropdown > menupopup > menucaption {
5402   background-color: buttonface;
5403 }
5404
5405 #ContentSelectDropdown > menupopup > menucaption[disabled="true"] {
5406   color: #A09090;
5407 }
5408
5409 #ContentSelectDropdown > .isOpenedViaTouch > menucaption > .menu-iconic-text,
5410 #ContentSelectDropdown > .isOpenedViaTouch > menuitem > .menu-iconic-text {
5411   /* Touch padding should follow the 11/12 ratio, where 12px is the default
5412      font-size with 11px being the preferred padding size. */
5413   padding-top: .9167em;
5414   padding-bottom: .9167em;
5415 }