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