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