LCARStrek/browser/browser.css

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