LCARStrek/browser/browser.css

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