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 :root {
  40   /*--backbutton-urlbar-overlap: 5px;*/
  41
  42   --identity-box-verified-background-color: #000000;
  43
  44   --panel-separator-color: #A09090;
  45
  46   --urlbar-separator-color: #9C9CFF;
  47 }
  48
  49 #menubar-items {
  50   -moz-box-orient: vertical; /* for flex hack */
  51 }
  52
  53 #main-menubar {
  54   -moz-box-flex: 1; /* make menu items expand to fill toolbar height */
  55 }
  56
  57 /* ::::: primary toolbar ::::: */
  58
  59 .toolbar-primary > .toolbar-box > .toolbar-holder {
  60   background-color: #A09090;
  61 }
  62
  63 .toolbar-primary > .toolbar-box > .toolbar-startcap,
  64 .toolbar-primary > .toolbar-box > .toolbar-endcap {
  65   background-color: #9C9CFF;
  66 }
  67
  68 /* Hides the titlebar-placeholder underneath the window caption buttons when we
  69    are not autohiding the menubar. */
  70 #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-placeholder[type="caption-buttons"] {
  71   display: none;
  72 }
  73
  74 /* We want a 4px gap between the TabsToolbar and the toolbar-menubar when the
  75    toolbar-menu is displayed, and a 16px gap when it is not. 1px is taken care
  76    of by the (light) outer shadow of the tab, the remaining 3/15 are these margins. */
  77 #toolbar-menubar:not([moz-collapsed=true]):not([autohide=true]) ~ #TabsToolbar,
  78 #toolbar-menubar:not([moz-collapsed=true])[autohide=true]:not([inactive]) ~ #TabsToolbar {
  79 /*  margin-top: 3px;*/
  80 }
  81
  82 #main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen])[chromehidden~="menubar"] #toolbar-menubar ~ #TabsToolbar,
  83 #main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen]) #toolbar-menubar[autohide="true"][inactive] ~ #TabsToolbar {
  84 /*  margin-top: var(--space-above-tabbar);*/
  85 }
  86
  87 @media (-moz-mac-graphite-theme: 0) and (-moz-mac-lion-theme: 0) {
  88   /* This is a hackish workaround to exclude most of Mac OS until bug 1060941 gets fixed. */
  89   #toolbar-menubar:not([autohide="true"]) {
  90     -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-drag-browsercustom");
  91   }
  92 }
  93
  94 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
  95   /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
  96   #main-window[tabsintitlebar]:not([inFullscreen="true"]) #TabsToolbar {
  97     padding-left: 60px;
  98   }
  99 }
 100
 101 #main-window[tabsintitlebar] #toolbar-menubar .toolbar-endcap {
 102   /* 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 */
 103   display: none;
 104 }
 105
 106 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #toolbar-menubar[customizing-dragovertarget].customization-target::before,
 107 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #TabsToolbar[customizing-dragovertarget].customization-target::before,
 108 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #toolbar-menubar.customization-target:hover::before,
 109 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #TabsToolbar.customization-target:hover::before {
 110   outline-color: #A09090;
 111 }
 112
 113 #navigator-toolbox {
 114 }
 115
 116 #navigator-toolbox::after {
 117   content: "";
 118   display: -moz-box;
 119   -moz-box-ordinal-group: 101; /* tabs toolbar is 100 */
 120   height: 1px;
 121 }
 122
 123 #navigator-toolbox > toolbar {
 124 }
 125
 126 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(:-moz-lwtheme) {
 127 }
 128
 129 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar) {
 130   overflow: -moz-hidden-unscrollable;
 131   max-height: 4em;
 132   transition: min-height 170ms ease-out, max-height 170ms ease-out;
 133 }
 134
 135 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar)[collapsed=true] {
 136   min-height: 0.1px;
 137   max-height: 0;
 138   transition: min-height 170ms ease-out, max-height 170ms ease-out, visibility 170ms linear;
 139 }
 140
 141 @media (-moz-mac-graphite-theme: 0) and (-moz-mac-lion-theme: 0) {
 142   /* This is a hackish workaround to exclude most of Mac OS until bug 1060941 gets fixed. */
 143   /* Indent also due to non-applicable aero rule in original Windows theme. */
 144   #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme),
 145   #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme) {
 146     /* like menubar */
 147     background-color: #6000CF;
 148     color: #FF9F00;
 149   }
 150
 151   #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme):-moz-window-inactive,
 152   #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme):-moz-window-inactive {
 153     background-color: #8050B0;
 154     color: #FF9F00;
 155   }
 156
 157   #main-window[tabsintitlebar] #main-menubar > menu:not(:-moz-lwtheme) {
 158     /*color: inherit;*/
 159   }
 160
 161   #main-window[tabsintitlebar] #titlebar:-moz-lwtheme {
 162     visibility: hidden;
 163   }
 164
 165   #main-window[tabsintitlebar] #titlebar-content:-moz-lwtheme {
 166     -moz-binding: url("chrome://global/content/bindings/general.xml#windowdragbox");
 167     visibility: visible;
 168   }
 169 }
 170
 171 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
 172   /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
 173   #titlebar-buttonbox > .titlebar-button {
 174     display: none;
 175   }
 176 }
 177
 178 #nav-bar {
 179   /* Position the toolbar above the bottom of background tabs */
 180   position: relative;
 181   z-index: 1;
 182 }
 183
 184 #personal-bookmarks {
 185 /*  min-height: 24px; */
 186 }
 187
 188 #PersonalToolbar > #home-button {
 189   -moz-box-orient: horizontal;
 190 }
 191
 192 #PersonalToolbar > #home-button > .toolbarbutton-text {
 193   display: block;
 194 }
 195
 196 #print-preview-toolbar:not(:-moz-lwtheme) {
 197   /* -moz-appearance: toolbox; */
 198 }
 199
 200 #browser-bottombox:not(:-moz-lwtheme) {
 201 }
 202
 203 /* ::::: titlebar ::::: */
 204
 205 #titlebar {
 206   /* like menubar */
 207   background-color: #6000CF;
 208   color: #FF9F00;
 209 }
 210 #titlebar:-moz-window-inactive {
 211   background-color: #8050B0;
 212   color: #FF9F00;
 213 }
 214
 215 #main-window[sizemode="normal"] > #titlebar {
 216   margin-top: -3px;
 217   margin-bottom: 3px;
 218 }
 219
 220 #main-window[sizemode="maximized"] > #titlebar {
 221   margin-top: 4px;
 222 }
 223
 224 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
 225   /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
 226   #main-window[sizemode="normal"] > #titlebar,
 227   #main-window[sizemode="maximized"] > #titlebar {
 228     margin-top: 19px;
 229     /* There is a margin-bottom set to -23 by code. */
 230   }
 231 }
 232
 233 /* The button box must appear on top of the navigator-toolbox in order for
 234  * click and hover mouse events to work properly for the button in the restored
 235  * window state. Otherwise, elements in the navigator-toolbox, like the menubar,
 236  * can swallow those events. It will also place the buttons above the fog on
 237  * themes with Aero Glass.
 238  */
 239 #titlebar-buttonbox,
 240 #main-window[sizemode="maximized"] #titlebar-buttonbox {
 241   -moz-appearance: none;
 242   margin-top: 6px;
 243   margin-top: 4px;
 244   -moz-margin-end: 3px;
 245   z-index: 1;
 246 }
 247
 248 .titlebar-placeholder[type="appmenu-button"] {
 249   margin-left: 4px;
 250 }
 251
 252 .titlebar-placeholder[type="caption-buttons"] {
 253   margin-left: 10px;
 254 }
 255
 256 /* titlebar command buttons */
 257 #titlebar-min {
 258   list-style-image: url("chrome://browser/skin/caption-buttons.svg#minimize");
 259 }
 260
 261 #titlebar-min:hover {
 262   list-style-image: url("chrome://browser/skin/caption-buttons.svg#minimize-hover");
 263 }
 264
 265 #titlebar-max {
 266   list-style-image: url("chrome://browser/skin/caption-buttons.svg#maximize");
 267 }
 268
 269 #titlebar-max:hover {
 270   list-style-image: url("chrome://browser/skin/caption-buttons.svg#maximize-hover");
 271 }
 272
 273 #main-window[sizemode="maximized"] #titlebar-max {
 274   list-style-image: url("chrome://browser/skin/caption-buttons.svg#restore");
 275 }
 276
 277 #main-window[sizemode="maximized"] #titlebar-max:hover {
 278   list-style-image: url("chrome://browser/skin/caption-buttons.svg#restore-hover");
 279 }
 280
 281 #titlebar-close {
 282   list-style-image: url("chrome://browser/skin/caption-buttons.svg#close");
 283 }
 284
 285 #titlebar-close:hover {
 286   list-style-image: url("chrome://browser/skin/caption-buttons.svg#close-hover");
 287 }
 288
 289 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
 290   /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
 291   #titlebar-fullscreen-button {
 292     -moz-appearance: none;
 293     list-style-image: url("chrome://browser/skin/icons/mac-fullscreen-icon.png");
 294     -moz-image-region: rect(0px, 16px, 16px, 0px);
 295   }
 296
 297   #titlebar-fullscreen-button:hover {
 298     -moz-image-region: rect(0px, 32px, 16px, 16px);
 299   }
 300
 301   @media (min-resolution: 2dppx) {
 302     #titlebar-fullscreen-button {
 303       list-style-image: url("chrome://browser/skin/icons/mac-fullscreen-icon@2x.png");
 304       -moz-image-region: rect(0px, 32px, 32px, 0px);
 305     }
 306
 307     #titlebar-fullscreen-button:hover {
 308       -moz-image-region: rect(0px, 64px, 32px, 32px);
 309     }
 310   }
 311 }
 312
 313
 314 /* ::::: bookmark buttons ::::: */
 315
 316 toolbarbutton.bookmark-item:not(.subviewbutton),
 317 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder {
 318 /*  margin: 0;
 319   padding: 2px 3px;*/
 320 }
 321
 322 toolbarbutton.bookmark-item:not([disabled="true"]):not(.subviewbutton):hover:active,
 323 toolbarbutton.bookmark-item[open="true"] {
 324 /*  padding-top: 3px;
 325   padding-bottom: 1px;
 326   -moz-padding-start: 4px;
 327   -moz-padding-end: 2px;*/
 328 }
 329
 330 .bookmark-item > .toolbarbutton-icon,
 331 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
 332   width: 16px;
 333   height: 16px;
 334   -moz-margin-start: 1px;
 335   -moz-margin-end: 2px;
 336   margin-top: 1px;
 337   margin-bottom: 1px;
 338 }
 339
 340 /* Force the display of the label for bookmarks */
 341 .bookmark-item > .toolbarbutton-text,
 342 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-text {
 343   display: -moz-box !important;
 344 }
 345
 346 .bookmark-item > .toolbarbutton-menu-dropmarker {
 347   display: none;
 348 }
 349
 350 #bookmarks-toolbar-placeholder {
 351   list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png") !important;
 352   -moz-box-orient: horizontal;
 353 }
 354
 355 toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-placeholder,
 356 #personal-bookmarks[cui-areatype="menu-panel"] > #bookmarks-toolbar-placeholder {
 357   list-style-image: url("chrome://browser/skin/places/bookmarksToolbar-menuPanel.png") !important;
 358 }
 359
 360 /* ----- BOOKMARK STAR ANIMATION ----- */
 361
 362 @keyframes animation-bookmarkAdded {
 363   from { transform: rotate(0deg) translateX(-16px) rotate(0deg) scale(1); opacity: 0; }
 364   60%  { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(2.2); opacity: 1; }
 365   80%  { opacity: 1; }
 366   to   { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(1); opacity: 0; }
 367 }
 368
 369 @keyframes animation-bookmarkPulse {
 370   from { transform: scale(1); }
 371   50%  { transform: scale(1.3); }
 372   to   { transform: scale(1); }
 373 }
 374
 375 #bookmarked-notification-container {
 376   min-height: 1px;
 377   min-width: 1px;
 378   height: 1px;
 379   margin-bottom: -1px;
 380   z-index: 5;
 381   position: relative;
 382 }
 383
 384 #bookmarked-notification {
 385   background-size: 16px;
 386   background-position: center;
 387   background-repeat: no-repeat;
 388   width: 16px;
 389   height: 16px;
 390   opacity: 0;
 391 }
 392
 393 #bookmarked-notification-dropmarker-anchor {
 394   z-index: -1;
 395   position: relative;
 396 }
 397
 398 #bookmarked-notification-dropmarker-icon {
 399   width: 18px;
 400   height: 18px;
 401   visibility: hidden;
 402 }
 403
 404 #bookmarked-notification-anchor[notification="finish"] > #bookmarked-notification {
 405   background-image: url("chrome://browser/skin/places/bookmarks-notification-finish.png");
 406   animation: animation-bookmarkAdded 800ms;
 407   animation-timing-function: ease, ease, ease;
 408 }
 409
 410 #bookmarks-menu-button[notification="finish"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
 411   list-style-image: none !important;
 412 }
 413
 414 #bookmarked-notification-dropmarker-anchor[notification="finish"] > #bookmarked-notification-dropmarker-icon {
 415   visibility: visible;
 416   animation: animation-bookmarkPulse 300ms;
 417   animation-delay: 600ms;
 418   animation-timing-function: ease-out;
 419 }
 420
 421 /* ::::: bookmark menus ::::: */
 422
 423 menu.bookmark-item,
 424 menuitem.bookmark-item {
 425   min-width: 0;
 426   max-width: 32em;
 427 }
 428
 429 .bookmark-item:not(.subviewbutton) > .menu-iconic-left {
 430   margin-top: 0;
 431   margin-bottom: 0;
 432 }
 433
 434 .bookmark-item > .menu-iconic-left > .menu-iconic-icon {
 435   -moz-padding-start: 0px;
 436 }
 437
 438 /* ::::: bookmark items ::::: */
 439
 440 .bookmark-item  {
 441   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
 442   -moz-image-region: auto;
 443 }
 444
 445 .bookmark-item[container] {
 446   list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
 447   -moz-image-region: auto;
 448 }
 449
 450 .bookmark-item[container][open] {
 451   list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
 452   -moz-image-region: auto;
 453 }
 454
 455 .bookmark-item[container][livemark] {
 456   list-style-image: url("chrome://communicator/skin/bookmarks/livemark-folder.png");
 457   -moz-image-region: auto;
 458 }
 459
 460 .bookmark-item[container][livemark] .bookmark-item {
 461   list-style-image: url("chrome://communicator/skin/bookmarks/livemark-item.png");
 462   -moz-image-region: rect(0px, 16px, 16px, 0px);
 463 }
 464
 465 .bookmark-item[container][livemark] .bookmark-item[visited] {
 466   -moz-image-region: rect(0px, 32px, 16px, 16px);
 467 }
 468
 469 .bookmark-item[container][query] {
 470   list-style-image: url("chrome://communicator/skin/bookmarks/query.png");
 471   -moz-image-region: auto;
 472 }
 473
 474 .bookmark-item[query][tagContainer] {
 475   list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
 476   -moz-image-region: auto;
 477 }
 478
 479 .bookmark-item[query][dayContainer] {
 480   list-style-image: url("chrome://communicator/skin/history/calendar.png");
 481   -moz-image-region: auto;
 482 }
 483
 484 .bookmark-item[query][hostContainer] {
 485   list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
 486   -moz-image-region: auto;
 487 }
 488
 489 .bookmark-item[query][hostContainer][open] {
 490   list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
 491   -moz-image-region: auto;
 492 }
 493
 494 .bookmark-item[cutting] > .toolbarbutton-icon,
 495 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-icon {
 496   opacity: 0.5;
 497 }
 498
 499 .bookmark-item[cutting] > .toolbarbutton-text,
 500 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-text {
 501   opacity: 0.7;
 502 }
 503
 504 /* ::::: primary toolbar buttons ::::: */
 505
 506 /* === BEGIN toolbarbuttons.inc.css === */
 507
 508 /* Whole section of this included file: */
 509 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
 510           #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
 511           #social-share-button, #open-file-button, #find-button, #developer-button,
 512           #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
 513           #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
 514           #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
 515           #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #loop-button,
 516           #pocket-button),
 517 #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
 518   list-style-image: url("chrome://browser/skin/ToolbarFx.png");
 519 }
 520 toolbar[brighttext] #pocket-button,
 521 #pocket-button {
 522   list-style-image: url("chrome://browser/skin/ToolbarFx.png") !important; /* override pocket.css */
 523 }
 524
 525 #back-button {
 526   -moz-image-region: rect(0, 36px, 18px, 18px);
 527 }
 528
 529 #back-button:hover:not([disabled="true"]) {
 530   -moz-image-region: rect(18px, 36px, 36px, 18px);
 531 }
 532
 533 #back-button[disabled="true"] {
 534   -moz-image-region: rect(36px, 36px, 54px, 18px);
 535 }
 536
 537 #forward-button {
 538   -moz-image-region: rect(0, 72px, 18px, 54px);
 539 }
 540
 541 #forward-button:hover:not([disabled="true"]) {
 542   -moz-image-region: rect(18px, 72px, 36px, 54px);
 543 }
 544
 545 #forward-button[disabled="true"] {
 546   -moz-image-region: rect(36px, 72px, 54px, 54px);
 547 }
 548
 549 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
 550 #forward-button:-moz-locale-dir(rtl) {
 551   transform: scaleX(-1);
 552 }
 553
 554 #home-button[cui-areatype="toolbar"] {
 555   -moz-image-region: rect(0, 126px, 18px, 108px);
 556 }
 557
 558 #home-button[cui-areatype="toolbar"]:hover {
 559   -moz-image-region: rect(18px, 126px, 36px, 108px);
 560 }
 561
 562 #bookmarks-menu-button[cui-areatype="toolbar"] {
 563   -moz-image-region: rect(0, 144px, 18px, 126px);
 564 }
 565
 566 #bookmarks-menu-button[cui-areatype="toolbar"]:hover,
 567 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] {
 568   -moz-image-region: rect(18px, 144px, 36px, 126px);
 569 }
 570
 571 /* When "new tab" page shows up, the menubutton-button (star button) is disabled */
 572 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button[disabled="true"] {
 573   -moz-image-region: rect(36px, 144px, 54px, 126px) !important;
 574   background-color: transparent !important;
 575 }
 576
 577 #bookmarks-menu-button[cui-areatype="toolbar"][starred] {
 578   -moz-image-region: rect(0, 162px, 18px, 144px);
 579 }
 580
 581 #bookmarks-menu-button[cui-areatype="toolbar"][starred]:hover,
 582 #bookmarks-menu-button[cui-areatype="toolbar"][starred][open="true"],
 583 #bookmarks-menu-button[cui-areatype="toolbar"][starred] > .toolbarbutton-menubutton-button[open="true"] {
 584   /* When starred and clicked (for edit/delete dialog),
 585    * then only the menubutton-button itself is open, but not the whole menubutton. */
 586   -moz-image-region: rect(18px, 162px, 36px, 144px);
 587 }
 588
 589 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
 590   -moz-image-region: rect(0, 630px, 18px, 612px);
 591 }
 592
 593 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker {
 594   padding: 1px;
 595   -moz-box-align: center;
 596 }
 597
 598 #bookmarks-menu-button[cui-areatype="toolbar"]:hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
 599 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
 600   -moz-image-region: rect(18px, 630px, 36px, 612px);
 601 }
 602
 603 #bookmarks-menu-button[cui-areatype="toolbar"]:hover:active > .toolbarbutton-menubutton-dropmarker,
 604 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker {
 605   padding-top: 2px;
 606   padding-bottom: 0px;
 607   -moz-padding-start: 2px;
 608   -moz-padding-end: 0px;
 609 }
 610
 611 #history-panelmenu[cui-areatype="toolbar"] {
 612   -moz-image-region: rect(0, 180px, 18px, 162px);
 613 }
 614
 615 #history-panelmenu[cui-areatype="toolbar"]:hover,
 616 #history-panelmenu[cui-areatype="toolbar"][open="true"] {
 617   -moz-image-region: rect(18px, 180px, 36px, 162px);
 618 }
 619
 620 #downloads-button[cui-areatype="toolbar"] {
 621   -moz-image-region: rect(0, 198px, 18px, 180px);
 622 }
 623
 624 #downloads-button[cui-areatype="toolbar"]:hover,
 625 #downloads-button[cui-areatype="toolbar"][open="true"] {
 626   -moz-image-region: rect(18px, 198px, 36px, 180px);
 627 }
 628
 629 #add-ons-button[cui-areatype="toolbar"] {
 630   -moz-image-region: rect(0, 216px, 18px, 198px);
 631 }
 632
 633 #add-ons-button[cui-areatype="toolbar"]:hover {
 634   -moz-image-region: rect(18px, 216px, 36px, 198px);
 635 }
 636
 637 #open-file-button[cui-areatype="toolbar"] {
 638   -moz-image-region: rect(0, 234px, 18px, 216px);
 639 }
 640
 641 #open-file-button[cui-areatype="toolbar"]:hover {
 642   -moz-image-region: rect(18px, 234px, 36px, 216px);
 643 }
 644
 645 #save-page-button[cui-areatype="toolbar"] {
 646   -moz-image-region: rect(0, 252px, 18px, 234px);
 647 }
 648
 649 #save-page-button[cui-areatype="toolbar"]:hover {
 650   -moz-image-region: rect(18px, 252px, 36px, 234px);
 651 }
 652
 653 #sync-button[cui-areatype="toolbar"] {
 654   -moz-image-region: rect(0, 270px, 18px, 252px);
 655 }
 656
 657 #sync-button[cui-areatype="toolbar"]:hover {
 658   -moz-image-region: rect(18px, 270px, 36px, 252px);
 659 }
 660
 661 #sync-button[cui-areatype="toolbar"][status="active"],
 662 #sync-button[cui-areatype="toolbar"][status="active"]:hover:active:not([disabled="true"]) {
 663   list-style-image: url("chrome://browser/skin/syncProgress-toolbar.png");
 664   -moz-image-region: rect(0, 18px, 18px, 0px);
 665 }
 666
 667 /*
 668 #sync-button[cui-areatype="toolbar"][status="active"]:-moz-lwtheme-brighttext,
 669 #sync-button[cui-areatype="toolbar"][status="active"]:-moz-lwtheme-brighttext:hover:active:not([disabled="true"]) {
 670   list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png");
 671 }
 672 */
 673
 674 #feed-button[cui-areatype="toolbar"] {
 675   -moz-image-region: rect(0, 288px, 18px, 270px);
 676 }
 677
 678 #feed-button[cui-areatype="menu-panel"][panel-multiview-anchor=true],
 679 #feed-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
 680   -moz-image-region: rect(18px, 288px, 36px, 270px);
 681 }
 682
 683 #feed-button[cui-areatype="toolbar"][disabled="true"] {
 684   -moz-image-region: rect(36px, 288px, 54px, 270px);
 685 }
 686
 687 #social-share-button[cui-areatype="toolbar"] {
 688   -moz-image-region: rect(0px, 306px, 18px, 288px);
 689 }
 690
 691 #social-share-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
 692 #social-share-button[cui-areatype="toolbar"][open="true"] {
 693   -moz-image-region: rect(18px, 306px, 36px, 288px);
 694 }
 695
 696 #social-share-button[cui-areatype="toolbar"][disabled="true"] {
 697   -moz-image-region: rect(36px, 306px, 54px, 288px);
 698 }
 699
 700 #characterencoding-button[cui-areatype="toolbar"] {
 701   -moz-image-region: rect(0, 324px, 18px, 306px);
 702 }
 703
 704 #characterencoding-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
 705 #characterencoding-button[cui-areatype="toolbar"][open="true"] {
 706   -moz-image-region: rect(18px, 324px, 36px, 306px);
 707 }
 708
 709 #characterencoding-button[cui-areatype="toolbar"][disabled="true"] {
 710   -moz-image-region: rect(36px, 324px, 54px, 306px);
 711 }
 712
 713 #new-window-button[cui-areatype="toolbar"] {
 714   -moz-image-region: rect(0, 342px, 18px, 324px);
 715 }
 716
 717 #new-window-button[cui-areatype="toolbar"]:hover {
 718   -moz-image-region: rect(18px, 342px, 36px, 324px);
 719 }
 720
 721 #e10s-button[cui-areatype="toolbar"] {
 722   -moz-image-region: rect(0, 342px, 18px, 324px);
 723 }
 724
 725 #e10s-button[cui-areatype="toolbar"]:hover {
 726   -moz-image-region: rect(18px, 342px, 36px, 324px);
 727 }
 728
 729 #e10s-button > .toolbarbutton-icon {
 730   transform: scaleY(-1);
 731 }
 732
 733 #new-tab-button[cui-areatype="toolbar"] {
 734   -moz-image-region: rect(0, 360px, 18px, 342px);
 735 }
 736
 737 #new-tab-button[cui-areatype="toolbar"]:hover {
 738   -moz-image-region: rect(18px, 360px, 36px, 342px);
 739 }
 740
 741 #privatebrowsing-button[cui-areatype="toolbar"] {
 742   -moz-image-region: rect(0, 378px, 18px, 360px);
 743 }
 744
 745 #privatebrowsing-button[cui-areatype="toolbar"]:hover {
 746   -moz-image-region: rect(18px, 378px, 36px, 360px);
 747 }
 748
 749 #find-button[cui-areatype="toolbar"] {
 750   -moz-image-region: rect(0, 396px, 18px, 378px);
 751 }
 752
 753 #find-button[cui-areatype="toolbar"]:hover {
 754   -moz-image-region: rect(18px, 396px, 36px, 378px);
 755 }
 756
 757 #print-button[cui-areatype="toolbar"] {
 758   -moz-image-region: rect(0, 414px, 18px, 396px);
 759 }
 760
 761 #print-button[cui-areatype="toolbar"]:hover {
 762   -moz-image-region: rect(18px, 414px, 36px, 396px);
 763 }
 764
 765 #fullscreen-button[cui-areatype="toolbar"] {
 766   -moz-image-region: rect(0, 432px, 18px, 414px);
 767 }
 768
 769 #fullscreen-button[cui-areatype="toolbar"]:hover {
 770   -moz-image-region: rect(18px, 432px, 36px, 414px);
 771 }
 772
 773 #developer-button[cui-areatype="toolbar"] {
 774   -moz-image-region: rect(0, 450px, 18px, 432px);
 775 }
 776
 777 #developer-button[cui-areatype="toolbar"]:hover,
 778 #developer-button[cui-areatype="toolbar"][open="true"] {
 779   -moz-image-region: rect(18px, 450px, 36px, 432px);
 780 }
 781
 782 #preferences-button[cui-areatype="toolbar"] {
 783   -moz-image-region: rect(0, 468px, 18px, 450px);
 784 }
 785
 786 #preferences-button[cui-areatype="toolbar"]:hover {
 787   -moz-image-region: rect(18px, 468px, 36px, 450px);
 788 }
 789
 790 #PanelUI-menu-button {
 791   -moz-image-region: rect(0, 486px, 18px, 468px);
 792 }
 793
 794 #PanelUI-menu-button:hover,
 795 #PanelUI-menu-button[open="true"] {
 796   -moz-image-region: rect(18px, 486px, 36px, 468px);
 797 }
 798
 799 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button {
 800   -moz-image-region: rect(0, 504px, 18px, 486px);
 801 }
 802
 803 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button:hover:not([disabled="true"]) {
 804   -moz-image-region: rect(18px, 504px, 36px, 486px);
 805 }
 806
 807 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button[disabled="true"] {
 808   -moz-image-region: rect(36px, 504px, 54px, 486px);
 809 }
 810
 811 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button {
 812   -moz-image-region: rect(0, 522px, 18px, 504px);
 813 }
 814
 815 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button:hover:not([disabled="true"]) {
 816   -moz-image-region: rect(18px, 522px, 36px, 504px);
 817 }
 818
 819 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button[disabled="true"] {
 820   -moz-image-region: rect(36px, 522px, 54px, 504px);
 821 }
 822
 823 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button {
 824   -moz-image-region: rect(0, 540px, 18px, 522px);
 825 }
 826
 827 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button:hover:not([disabled="true"]) {
 828   -moz-image-region: rect(18px, 540px, 36px, 522px);
 829 }
 830
 831 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button[disabled="true"] {
 832   -moz-image-region: rect(36px, 540px, 54px, 522px);
 833 }
 834
 835 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button {
 836   -moz-image-region: rect(0, 558px, 18px, 540px);
 837 }
 838
 839 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button:hover:not([disabled="true"]) {
 840   -moz-image-region: rect(18px, 558px, 36px, 540px);
 841 }
 842
 843 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button[disabled="true"] {
 844   -moz-image-region: rect(36px, 558px, 54px, 540px);
 845 }
 846
 847 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button {
 848   -moz-image-region: rect(0, 576px, 18px, 558px);
 849 }
 850
 851 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button:hover:not([disabled="true"]) {
 852   -moz-image-region: rect(18px, 576px, 36px, 558px);
 853 }
 854
 855 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button[disabled="true"] {
 856   -moz-image-region: rect(36px, 576px, 54px, 558px);
 857 }
 858
 859 #nav-bar-overflow-button {
 860   -moz-image-region: rect(0, 612px, 18px, 594px);
 861 }
 862
 863 #nav-bar-overflow-button:hover,
 864 #nav-bar-overflow-button[open="true"] {
 865   -moz-image-region: rect(18px, 612px, 36px, 594px);
 866 }
 867
 868 #nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
 869   transform: scaleX(-1);
 870 }
 871
 872 #tabview-button {
 873   -moz-image-region: rect(0, 648px, 18px, 630px);
 874 }
 875
 876 #tabview-button:hover {
 877   -moz-image-region: rect(18px, 648px, 36px, 630px);
 878 }
 879
 880 #email-link-button[cui-areatype="toolbar"] {
 881   -moz-image-region: rect(0, 666px, 18px, 648px);
 882 }
 883
 884 #email-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
 885   -moz-image-region: rect(18px, 666px, 36px, 648px);
 886 }
 887
 888 #email-button[cui-areatype="toolbar"][disabled="true"] {
 889   -moz-image-region: rect(36px, 666px, 54px, 648px);
 890 }
 891
 892 #sidebar-button[cui-areatype="toolbar"] {
 893   -moz-image-region: rect(0, 684px, 18px, 666px);
 894 }
 895
 896 #sidebar-button[cui-areatype="toolbar"]:hover {
 897   -moz-image-region: rect(18px, 684px, 36px, 666px);
 898 }
 899
 900 #panic-button[cui-areatype="toolbar"] {
 901   -moz-image-region: rect(0, 702px, 18px, 684px);
 902 }
 903
 904 #panic-button[cui-areatype="toolbar"]:hover,
 905 #panic-button[cui-areatype="toolbar"][open] {
 906   -moz-image-region: rect(18px, 702px, 36px, 684px);
 907 }
 908
 909 #panic-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
 910   transform: scaleX(-1);
 911 }
 912
 913 #loop-button,
 914 #loop-button > .toolbarbutton-badge-stack {
 915   list-style-image: url("chrome://browser/skin/loop/toolbarfx.png");
 916   -moz-image-region: rect(0, 18px, 18px, 0);
 917 }
 918
 919 #loop-button:not([disabled="true"]):-moz-any(:hover,:hover:active,[open]),
 920 #loop-button:not([disabled="true"]):-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-stack {
 921   -moz-image-region: rect(0, 90px, 18px, 72px);
 922 }
 923
 924 #loop-button[state="disabled"],
 925 #loop-button[disabled="true"],
 926 #loop-button[state="disabled"] > .toolbarbutton-badge-stack,
 927 #loop-button[disabled="true"] > .toolbarbutton-badge-stack {
 928   -moz-image-region: rect(0, 36px, 18px, 18px);
 929 }
 930
 931 #loop-button[disabled="true"]:-moz-any(:hover,:hover:active,[open]),
 932 #loop-button[disabled="true"]:-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-stack {
 933   -moz-image-region: rect(0, 126px, 18px, 108px);
 934 }
 935
 936 #loop-button:not([disabled="true"])[state="error"],
 937 #loop-button:not([disabled="true"])[state="error"] > .toolbarbutton-badge-stack {
 938   -moz-image-region: rect(0, 54px, 18px, 36px);
 939 }
 940
 941 #loop-button:not([disabled="true"])[state="action"],
 942 #loop-button:not([disabled="true"])[state="action"] > .toolbarbutton-badge-stack {
 943   -moz-image-region: rect(0, 72px, 18px, 54px);
 944 }
 945
 946 #loop-button:not([disabled="true"])[state="active"],
 947 #loop-button:not([disabled="true"])[state="active"] > .toolbarbutton-badge-stack {
 948   -moz-image-region: rect(0, 108px, 18px, 90px);
 949 }
 950
 951 #webide-button[cui-areatype="toolbar"] {
 952   -moz-image-region: rect(0, 738px, 18px, 720px);
 953 }
 954
 955 #webide-button[cui-areatype="toolbar"]:hover {
 956   -moz-image-region: rect(18px, 738px, 36px, 720px);
 957 }
 958
 959 #pocket-button[cui-areatype="toolbar"] {
 960   -moz-image-region: rect(0, 774px, 18px, 756px);
 961 }
 962
 963 #pocket-button[cui-areatype="toolbar"]:hover,
 964 #pocket-button[cui-areatype="toolbar"][open] {
 965   -moz-image-region: rect(18px, 774px, 36px, 756px);
 966 }
 967
 968 /* === END toolbarbuttons.inc.css === */
 969
 970 /* === BEGIN menupanel.inc.css === */
 971
 972 /* Menu panel and palette styles */
 973
 974 :root {
 975    /* avoid aero overrides with changed filenames */
 976   --menupanel-list-style-image: url(chrome://browser/skin/menuPanelFx.png);
 977   --menupanel-small-list-style-image: url(chrome://browser/skin/menuPanelFx-small.png);
 978 }
 979
 980 toolbaritem[sdkstylewidget="true"] > toolbarbutton,
 981 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
 982           #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
 983           #social-share-button, #open-file-button, #find-button, #developer-button,
 984           #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
 985           #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
 986           #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
 987           #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #loop-button,
 988           #pocket-button)[cui-areatype="menu-panel"],
 989 toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
 990           #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
 991           #social-share-button, #open-file-button, #find-button, #developer-button,
 992           #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
 993           #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
 994           #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
 995           #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #loop-button,
 996                                                 #pocket-button) {
 997   list-style-image: var(--menupanel-list-style-image);
 998 }
 999
1000 #home-button[cui-areatype="menu-panel"],
1001 toolbarpaletteitem[place="palette"] > #home-button {
1002   -moz-image-region: rect(0px, 128px, 32px, 96px);
1003 }
1004
1005 #home-button[cui-areatype="menu-panel"]:hover,
1006 toolbarpaletteitem[place="palette"] > #home-button:hover {
1007   -moz-image-region: rect(32px, 128px, 64px, 96px);
1008 }
1009
1010 #bookmarks-menu-button[cui-areatype="menu-panel"],
1011 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button {
1012   -moz-image-region: rect(0px, 192px, 32px, 160px);
1013 }
1014
1015 #bookmarks-menu-button[cui-areatype="menu-panel"]:hover,
1016 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button:hover {
1017   -moz-image-region: rect(32px, 192px, 64px, 160px);
1018 }
1019
1020 #bookmarks-menu-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1021   -moz-image-region: rect(32px, 192px, 64px, 160px);
1022 }
1023
1024 #history-panelmenu[cui-areatype="menu-panel"],
1025 toolbarpaletteitem[place="palette"] > #history-panelmenu {
1026   -moz-image-region: rect(0px, 224px, 32px, 192px);
1027 }
1028
1029 #history-panelmenu[cui-areatype="menu-panel"]:hover,
1030 toolbarpaletteitem[place="palette"] > #history-panelmenu:hover {
1031   -moz-image-region: rect(32px, 224px, 64px, 192px);
1032 }
1033
1034 #history-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1035   -moz-image-region: rect(32px, 224px, 64px, 192px);
1036 }
1037
1038 #downloads-button[cui-areatype="menu-panel"],
1039 toolbarpaletteitem[place="palette"] > #downloads-button {
1040   -moz-image-region: rect(0px, 256px, 32px, 224px);
1041 }
1042
1043 #downloads-button[cui-areatype="menu-panel"]:hover,
1044 toolbarpaletteitem[place="palette"] > #downloads-button:hover {
1045   -moz-image-region: rect(32px, 256px, 64px, 224px);
1046 }
1047
1048 #add-ons-button[cui-areatype="menu-panel"],
1049 toolbarpaletteitem[place="palette"] > #add-ons-button {
1050   -moz-image-region: rect(0px, 288px, 32px, 256px);
1051 }
1052
1053 #add-ons-button[cui-areatype="menu-panel"]:hover,
1054 toolbarpaletteitem[place="palette"] > #add-ons-button:hover {
1055   -moz-image-region: rect(32px, 288px, 64px, 256px);
1056 }
1057
1058 #open-file-button[cui-areatype="menu-panel"],
1059 toolbarpaletteitem[place="palette"] > #open-file-button {
1060   -moz-image-region: rect(0px, 320px, 32px, 288px);
1061 }
1062
1063 #open-file-button[cui-areatype="menu-panel"]:hover,
1064 toolbarpaletteitem[place="palette"] > #open-file-button:hover {
1065   -moz-image-region: rect(32px, 320px, 64px, 288px);
1066 }
1067
1068 #save-page-button[cui-areatype="menu-panel"],
1069 toolbarpaletteitem[place="palette"] > #save-page-button {
1070   -moz-image-region: rect(0px, 352px, 32px, 320px);
1071 }
1072
1073 #save-page-button[cui-areatype="menu-panel"]:hover,
1074 toolbarpaletteitem[place="palette"] > #save-page-button:hover {
1075   -moz-image-region: rect(32px, 352px, 64px, 320px);
1076 }
1077
1078 #sync-button[cui-areatype="menu-panel"],
1079 toolbarpaletteitem[place="palette"] > #sync-button {
1080   -moz-image-region: rect(0px, 384px, 32px, 352px);
1081 }
1082
1083 #sync-button[cui-areatype="menu-panel"]:hover,
1084 toolbarpaletteitem[place="palette"] > #sync-button:hover {
1085   -moz-image-region: rect(32px, 384px, 64px, 352px);
1086 }
1087
1088 #sync-button[cui-areatype="menu-panel"][status="active"] {
1089   list-style-image: url("chrome://browser/skin/syncProgress-menuPanel.png");
1090   -moz-image-region: rect(0px, 32px, 32px, 0px);
1091 }
1092
1093 #feed-button[cui-areatype="menu-panel"],
1094 toolbarpaletteitem[place="palette"] > #feed-button {
1095   -moz-image-region: rect(0px, 416px, 32px, 384px);
1096 }
1097
1098 #feed-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1099 toolbarpaletteitem[place="palette"] > #feed-button:hover:not([disabled="true"]) {
1100   -moz-image-region: rect(32px, 416px, 64px, 384px);
1101 }
1102
1103 #feed-button[cui-areatype="menu-panel"][disabled="true"],
1104 toolbarpaletteitem[place="palette"] > #feed-button[disabled="true"] {
1105   -moz-image-region: rect(64px, 416px, 96px, 384px);
1106 }
1107
1108 #social-share-button[cui-areatype="menu-panel"],
1109 toolbarpaletteitem[place="palette"] > #social-share-button {
1110   -moz-image-region: rect(0px, 448px, 32px, 416px);
1111 }
1112
1113 #social-share-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1114 toolbarpaletteitem[place="palette"] > #social-share-button:hover:not([disabled="true"]) {
1115   -moz-image-region: rect(32px, 448px, 64px, 416px);
1116 }
1117
1118 #social-share-button[cui-areatype="menu-panel"][disabled="true"],
1119 toolbarpaletteitem[place="palette"] > #social-share-button[disabled="true"] {
1120   -moz-image-region: rect(64px, 448px, 96px, 416px);
1121 }
1122
1123 #characterencoding-button[cui-areatype="menu-panel"],
1124 toolbarpaletteitem[place="palette"] > #characterencoding-button {
1125   -moz-image-region: rect(0px, 480px, 32px, 448px);
1126 }
1127
1128 #characterencoding-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1129 toolbarpaletteitem[place="palette"] > #characterencoding-button:hover:not([disabled="true"]) {
1130   -moz-image-region: rect(32px, 480px, 64px, 448px);
1131 }
1132
1133 #characterencoding-button[cui-areatype="menu-panel"][disabled="true"],
1134 toolbarpaletteitem[place="palette"] > #characterencoding-button[disabled="true"] {
1135   -moz-image-region: rect(64px, 480px, 96px, 448px);
1136 }
1137
1138 #characterencoding-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1139   -moz-image-region: rect(32px, 480px, 64px, 448px);
1140 }
1141
1142 #new-window-button[cui-areatype="menu-panel"],
1143 toolbarpaletteitem[place="palette"] > #new-window-button {
1144   -moz-image-region: rect(0px, 512px, 32px, 480px);
1145 }
1146
1147 #new-window-button[cui-areatype="menu-panel"]:hover,
1148 toolbarpaletteitem[place="palette"] > #new-window-button:hover {
1149   -moz-image-region: rect(32px, 512px, 64px, 480px);
1150 }
1151
1152 #e10s-button[cui-areatype="menu-panel"],
1153 toolbarpaletteitem[place="palette"] > #e10s-button {
1154   -moz-image-region: rect(0px, 512px, 32px, 480px);
1155 }
1156
1157 #e10s-button[cui-areatype="menu-panel"]:hover,
1158 toolbarpaletteitem[place="palette"] > #e10s-button:hover {
1159   -moz-image-region: rect(32px, 512px, 64px, 480px);
1160 }
1161
1162 #new-tab-button[cui-areatype="menu-panel"],
1163 toolbarpaletteitem[place="palette"] > #new-tab-button {
1164   -moz-image-region: rect(0px, 544px, 32px, 512px);
1165 }
1166
1167 #new-tab-button[cui-areatype="menu-panel"]:hover,
1168 toolbarpaletteitem[place="palette"] > #new-tab-button:hover {
1169   -moz-image-region: rect(32px, 544px, 64px, 512px);
1170 }
1171
1172 #privatebrowsing-button[cui-areatype="menu-panel"],
1173 toolbarpaletteitem[place="palette"] > #privatebrowsing-button {
1174   -moz-image-region: rect(0px, 576px, 32px, 544px);
1175 }
1176
1177 #privatebrowsing-button[cui-areatype="menu-panel"]:hover,
1178 toolbarpaletteitem[place="palette"] > #privatebrowsing-button:hover {
1179   -moz-image-region: rect(32px, 576px, 64px, 544px);
1180 }
1181
1182 #tabview-button[cui-areatype="menu-panel"],
1183 toolbarpaletteitem[place="palette"] > #tabview-button {
1184   -moz-image-region: rect(0px, 608px, 32px, 576px);
1185 }
1186
1187 #tabview-button[cui-areatype="menu-panel"]:hover,
1188 toolbarpaletteitem[place="palette"] > #tabview-button:hover {
1189   -moz-image-region: rect(32px, 608px, 64px, 576px);
1190 }
1191
1192 #find-button[cui-areatype="menu-panel"],
1193 toolbarpaletteitem[place="palette"] > #find-button {
1194   -moz-image-region: rect(0px, 640px, 32px, 608px);
1195 }
1196
1197 #find-button[cui-areatype="menu-panel"]:hover,
1198 toolbarpaletteitem[place="palette"] > #find-button:hover {
1199   -moz-image-region: rect(32px, 640px, 64px, 608px);
1200 }
1201
1202 #print-button[cui-areatype="menu-panel"],
1203 toolbarpaletteitem[place="palette"] > #print-button {
1204   -moz-image-region: rect(0px, 672px, 32px, 640px);
1205 }
1206
1207 #print-button[cui-areatype="menu-panel"]:hover,
1208 toolbarpaletteitem[place="palette"] > #print-button:hover {
1209   -moz-image-region: rect(32px, 672px, 64px, 640px);
1210 }
1211
1212 #fullscreen-button[cui-areatype="menu-panel"],
1213 toolbarpaletteitem[place="palette"] > #fullscreen-button {
1214   -moz-image-region: rect(0px, 704px, 32px, 672px);
1215 }
1216
1217 #fullscreen-button[cui-areatype="menu-panel"]:hover,
1218 toolbarpaletteitem[place="palette"] > #fullscreen-button:hover {
1219   -moz-image-region: rect(32px, 704px, 64px, 672px);
1220 }
1221
1222 #developer-button[cui-areatype="menu-panel"],
1223 toolbarpaletteitem[place="palette"] > #developer-button {
1224   -moz-image-region: rect(0px, 736px, 32px, 704px);
1225 }
1226
1227 #developer-button[cui-areatype="menu-panel"]:hover,
1228 toolbarpaletteitem[place="palette"] > #developer-button:hover {
1229   -moz-image-region: rect(32px, 736px, 64px, 704px);
1230 }
1231
1232 #developer-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1233   -moz-image-region: rect(32px, 736px, 64px, 704px);
1234 }
1235
1236 #preferences-button[cui-areatype="menu-panel"],
1237 toolbarpaletteitem[place="palette"] > #preferences-button {
1238   -moz-image-region: rect(0px, 768px, 32px, 736px);
1239 }
1240
1241 #preferences-button[cui-areatype="menu-panel"]:hover,
1242 toolbarpaletteitem[place="palette"] > #preferences-button:hover {
1243   -moz-image-region: rect(32px, 768px, 64px, 736px);
1244 }
1245
1246 #email-link-button[cui-areatype="menu-panel"],
1247 toolbarpaletteitem[place="palette"] > #email-link-button {
1248   -moz-image-region: rect(0, 800px, 32px, 768px);
1249 }
1250
1251 #email-link-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1252 toolbarpaletteitem[place="palette"] > #email-link-button:hover:not([disabled="true"]) {
1253   -moz-image-region: rect(32px, 800px, 64px, 768px);
1254 }
1255
1256 #email-link-button[cui-areatype="menu-panel"][disabled="true"],
1257 toolbarpaletteitem[place="palette"] > #email-link-button[disabled="true"] {
1258   -moz-image-region: rect(64px, 800px, 96px, 768px);
1259 }
1260
1261 #sidebar-button[cui-areatype="menu-panel"],
1262 toolbarpaletteitem[place="palette"] > #sidebar-button {
1263   -moz-image-region: rect(0, 864px, 32px, 832px);
1264 }
1265
1266 #sidebar-button[cui-areatype="menu-panel"]:hover,
1267 toolbarpaletteitem[place="palette"] > #sidebar-button:hover,
1268 #sidebar-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1269   -moz-image-region: rect(32px, 864px, 64px, 832px);
1270 }
1271
1272 #panic-button[cui-areatype="menu-panel"],
1273 toolbarpaletteitem[place="palette"] > #panic-button {
1274   -moz-image-region: rect(0, 896px, 32px, 864px);
1275 }
1276
1277 #panic-button[cui-areatype="menu-panel"]:hover,
1278 toolbarpaletteitem[place="palette"] > #panic-button:hover,
1279 #panic-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1280   -moz-image-region: rect(32px, 896px, 64px, 864px);
1281 }
1282
1283 #webide-button[cui-areatype="menu-panel"],
1284 toolbarpaletteitem[place="palette"] > #webide-button {
1285   -moz-image-region: rect(0px, 960px, 32px, 928px);
1286 }
1287
1288 #webide-button[cui-areatype="menu-panel"]:hover,
1289 toolbarpaletteitem[place="palette"] > #webide-button:hover {
1290   -moz-image-region: rect(32px, 960px, 64px, 928px);
1291 }
1292
1293 #pocket-button[cui-areatype="menu-panel"],
1294 toolbarpaletteitem[place="palette"] > #pocket-button {
1295   -moz-image-region: rect(0px, 992px, 32px, 960px);
1296 }
1297
1298 #pocket-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1299   -moz-image-region: rect(32px, 992px, 64px, 960px);
1300 }
1301
1302 toolbaritem[sdkstylewidget="true"] > toolbarbutton {
1303   -moz-image-region: rect(0, 832px, 32px, 800px);
1304 }
1305
1306 #loop-button[cui-areatype="menu-panel"],
1307 toolbarpaletteitem[place="palette"] > #loop-button {
1308   list-style-image: url("chrome://browser/skin/loop/menuPanel.png");
1309   -moz-image-region: rect(0, 32px, 32px, 0);
1310 }
1311
1312 /* Make sure that the state icons are not shown in the customization palette. */
1313 toolbarpaletteitem[place="palette"] > #loop-button {
1314   -moz-image-region: rect(0, 32px, 32px, 0) !important;
1315 }
1316
1317 #loop-button[cui-areatype="menu-panel"]:not([disabled="true"]):-moz-any(:hover,:hover:active,[open]) {
1318   -moz-image-region: rect(0, 160px, 32px, 128px);
1319 }
1320
1321 #loop-button[cui-areatype="menu-panel"][state="disabled"],
1322 #loop-button[cui-areatype="menu-panel"][disabled="true"] {
1323   -moz-image-region: rect(0, 64px, 32px, 32px);
1324 }
1325
1326 #loop-button[cui-areatype="menu-panel"][disabled="true"]:-moz-any(:hover,:hover:active,[open]) {
1327   -moz-image-region: rect(0, 224px, 32px, 192px);
1328 }
1329
1330 #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] {
1331   -moz-image-region: rect(0, 96px, 32px, 64px);
1332 }
1333
1334 #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] {
1335   -moz-image-region: rect(0, 128px, 32px, 96px);
1336 }
1337
1338 #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] {
1339   -moz-image-region: rect(0, 192px, 32px, 160px);
1340 }
1341
1342 /* Wide panel control icons */
1343
1344 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1345 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1346 toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton,
1347 toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton {
1348   list-style-image: var(--menupanel-small-list-style-image);
1349 }
1350
1351 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button,
1352 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button {
1353   -moz-image-region: rect(0px, 32px, 16px, 16px);
1354 }
1355
1356 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:hover:not([disabled="true"]),
1357 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button:hover:not([disabled="true"]) {
1358   -moz-image-region: rect(16px, 32px, 32px, 16px);
1359 }
1360
1361 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button[disabled="true"],
1362 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button[disabled="true"] {
1363   -moz-image-region: rect(32px, 32px, 48px, 16px);
1364 }
1365
1366 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
1367 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button {
1368   -moz-image-region: rect(0px, 48px, 16px, 32px);
1369 }
1370
1371 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button:hover:not([disabled="true"]),
1372 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button:hover:not([disabled="true"]) {
1373   -moz-image-region: rect(16px, 48px, 32px, 32px);
1374 }
1375
1376 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button[disabled="true"],
1377 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button[disabled="true"] {
1378   -moz-image-region: rect(32px, 48px, 48px, 32px);
1379 }
1380
1381 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button,
1382 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button {
1383   -moz-image-region: rect(0px, 64px, 16px, 48px);
1384 }
1385
1386 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:hover:not([disabled="true"]),
1387 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button:hover:not([disabled="true"]) {
1388   -moz-image-region: rect(16px, 64px, 32px, 48px);
1389 }
1390
1391 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button[disabled="true"],
1392 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button[disabled="true"] {
1393   -moz-image-region: rect(32px, 64px, 48px, 48px);
1394 }
1395
1396 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button,
1397 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button {
1398   -moz-image-region: rect(0px, 80px, 16px, 64px);
1399 }
1400
1401 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:hover:not([disabled="true"]),
1402 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button:hover:not([disabled="true"]) {
1403   -moz-image-region: rect(16px, 80px, 32px, 64px);
1404 }
1405
1406 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button[disabled="true"],
1407 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button[disabled="true"] {
1408   -moz-image-region: rect(32px, 80px, 48px, 64px);
1409 }
1410
1411 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button,
1412 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button {
1413   -moz-image-region: rect(0px, 96px, 16px, 80px);
1414 }
1415
1416 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:hover:not([disabled="true"]),
1417 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button:hover:not([disabled="true"]) {
1418   -moz-image-region: rect(16px, 96px, 32px, 80px);
1419 }
1420
1421 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button[disabled="true"],
1422 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button[disabled="true"] {
1423   -moz-image-region: rect(32px, 96px, 48px, 80px);
1424 }
1425
1426 #add-share-provider {
1427   list-style-image: var(--menupanel-small-list-style-image);
1428   -moz-image-region: rect(0px, 96px, 16px, 80px);
1429 }
1430
1431 /* === END menupanel.inc.css === */
1432
1433 .toolbarbutton-1:not([type="menu-button"]) {
1434   -moz-box-orient: vertical;
1435 }
1436
1437 .toolbarbutton-1,
1438 .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1439 /*  min-width: 36px;
1440   min-height: 36px;*/
1441 }
1442
1443 .toolbarbutton-1,
1444 .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1445 .toolbarbutton-1[disabled="true"]:hover:active,
1446 .toolbarbutton-1[disabled="true"]:hover:active > .toolbarbutton-menubutton-button {
1447   padding: 1px 2px;
1448 }
1449
1450 .toolbarbutton-1:hover:active,
1451 .toolbarbutton-1[open="true"],
1452 .toolbarbutton-1:hover:active > .toolbarbutton-menubutton-button {
1453   padding-top: 2px;
1454   padding-bottom: 0px;
1455   -moz-padding-start: 3px;
1456   -moz-padding-end: 1px;
1457 }
1458
1459 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon,
1460 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker,
1461 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker,
1462 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1463 #main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled=true] > .toolbarbutton-icon {
1464 }
1465
1466 .toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
1467 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1468 }
1469
1470 toolbar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker:-moz-lwtheme-brighttext,
1471 toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-lwtheme-brighttext {
1472 }
1473
1474 .toolbarbutton-1 > .toolbarbutton-icon,
1475 .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1476 }
1477
1478 .findbar-button,
1479 #nav-bar .toolbarbutton-1,
1480 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1481 }
1482
1483 #nav-bar .toolbarbutton-1:not([type=menu-button]),
1484 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1485 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1486 }
1487
1488 #nav-bar #PanelUI-menu-button {
1489 /*  -moz-padding-start: 7px;
1490   -moz-padding-end: 5px;*/
1491 }
1492
1493 #nav-bar .toolbarbutton-1[type=panel],
1494 #nav-bar .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#PanelUI-menu-button) {
1495 /*  padding-left: 5px;
1496   padding-right: 5px;*/
1497 }
1498
1499 #nav-bar .toolbarbutton-1 > menupopup {
1500 /*  margin-top: -3px;*/
1501 }
1502
1503 #nav-bar .toolbarbutton-1 > menupopup.cui-widget-panel {
1504   margin-top: -4px;
1505 }
1506
1507 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1508 /*  -moz-padding-end: 0;*/
1509 }
1510
1511 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1512 /*  -moz-padding-start: 0;
1513   -moz-box-align: center;*/
1514 }
1515
1516 .findbar-button > .toolbarbutton-text,
1517 #nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
1518 #nav-bar .toolbarbutton-1 > .toolbarbutton-text,
1519 #nav-bar .toolbarbutton-1 > .toolbarbutton-badge-stack,
1520 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1521 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1522 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1523 /*  padding: 2px 6px;
1524   border: 1px solid;
1525   border-color: transparent;
1526   transition-property: background-color, border-color;
1527   transition-duration: 150ms;*/
1528 }
1529 /*
1530 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-icon,
1531 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-badge-stack,
1532 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1533   padding: 3px 7px;
1534 }
1535 */
1536
1537 /* Help SDK icons fit: */
1538 toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon,
1539 toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
1540   width: 16px;
1541 }
1542
1543 #nav-bar toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
1544   /* XXXgijs box models strike again: this is 16px + 2 * 7px padding + 2 * 1px border (from the rules above) */
1545   width: 32px;
1546 }
1547
1548 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
1549 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-badge-stack,
1550 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button) > .toolbarbutton-icon,
1551 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button) > .toolbarbutton-badge-stack,
1552 #nav-bar .toolbarbutton-1[type=menu] > .toolbarbutton-text /* hack for add-ons that forcefully display the label */ {
1553 /*  -moz-padding-end: 17px;*/
1554 }
1555
1556 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
1557 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button) > .toolbarbutton-icon {
1558   /* horizontal padding + border + icon width */
1559 /*  max-width: 43px;*/
1560 }
1561
1562 #nav-bar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
1563 }
1564
1565 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1566 }
1567
1568 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1569 }
1570
1571 #nav-bar .toolbaritem-combined-buttons {
1572 /*  margin-left: 2px;
1573   margin-right: 2px;*/
1574 }
1575
1576 #nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1 {
1577 /*  padding-left: 0;
1578   padding-right: 0;*/
1579 }
1580
1581 #nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before,
1582 #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 {
1583 /*
1584   content: "";
1585   display: -moz-box;
1586   width: 1px;
1587   height: 16px;
1588   -moz-margin-end: -1px;
1589 */
1590 }
1591
1592 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1593 }
1594
1595 .findbar-button:not(:-moz-any([checked="true"],[disabled="true"])):hover > .toolbarbutton-text,
1596 #nav-bar .toolbarbutton-1:not([disabled=true]) > .toolbarbutton-menubutton-button[open] + .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1597 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1598 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1599 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
1600 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
1601 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-stack,
1602 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button:not([open]):not(:active):not([disabled=true]):hover > .toolbarbutton-icon,
1603 #nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon {
1604 }
1605
1606 .findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active) > .toolbarbutton-text,
1607 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open]) > .toolbarbutton-icon,
1608 #nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon,
1609 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
1610 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
1611 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-stack {
1612 }
1613
1614 #TabsToolbar .toolbarbutton-1,
1615 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1616 .tabbrowser-arrowscrollbox > .scrollbutton-up,
1617 .tabbrowser-arrowscrollbox > .scrollbutton-down {
1618 }
1619
1620 #TabsToolbar .toolbarbutton-1:not([disabled=true]):hover,
1621 #TabsToolbar .toolbarbutton-1[open],
1622 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover,
1623 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled=true]):hover,
1624 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled=true]):hover {
1625 }
1626
1627 /* unified back/forward button */
1628
1629 #forward-button {
1630   -moz-box-align: stretch; /* let the button shape grow vertically with the location bar */
1631 }
1632
1633 #forward-button > menupopup {
1634   margin-top: 1px !important;
1635 }
1636
1637 #forward-button > .toolbarbutton-icon {
1638   background-clip: padding-box !important;
1639   /*mask: url(keyhole-forward-mask.svg#mask); XXX: this regresses twinopen */
1640   /*clip-path: url(chrome://browser/content/browser.xul#keyhole-forward-clip-path) !important;*/
1641 }
1642
1643 #forward-button {
1644   -moz-margin-start: -4px !important;
1645   padding-left: 5px;
1646   padding-right: 5px;
1647   margin-top: 3px;
1648   margin-bottom: 3px;
1649   border-radius: 0 10000px 10000px 0;
1650 }
1651
1652 #forward-button:-moz-locale-dir(rtl) {
1653   border-radius: 10000px 0 0 10000px;
1654 }
1655
1656 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not([switchingtabs]) > #forward-button {
1657   transition: margin-left 150ms ease-out;
1658 }
1659
1660 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] {
1661   margin-left: -27px !important;
1662 }
1663
1664 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] {
1665   /* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */
1666   transition-delay: 100s;
1667 }
1668
1669 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] {
1670   /* when not hovered anymore, trigger a new transition to hide the forward button immediately */
1671   margin-left: -27.01px !important;
1672 }
1673
1674 #back-button {
1675 /*  padding-top: 3px !important;
1676   padding-bottom: 3px !important;
1677   -moz-padding-start: 5px !important;
1678   -moz-padding-end: 0 !important;*/
1679   position: relative;
1680   z-index: 1;
1681   border-radius: 10000px;
1682   width: 30px;
1683   height: 30px;
1684   margin-top: -2px;
1685   margin-bottom: -2px;
1686 }
1687
1688 #back-button:-moz-locale-dir(rtl) {
1689 }
1690
1691 #back-button > menupopup {
1692   margin-top: -1px !important;
1693 }
1694
1695 #back-button > .toolbarbutton-icon {
1696   border-radius: 10000px !important;
1697   background-clip: padding-box !important;
1698 /*  background-color: hsla(210,25%,98%,.08) !important;
1699   padding: 6px !important;
1700   border-style: none !important;
1701   box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1702               0 0 0 1px hsla(210,4%,10%,.25);*/
1703   transition-property: background-color, box-shadow !important;
1704   transition-duration: 250ms !important;
1705 }
1706
1707 #back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon {
1708 /*  background-color: hsla(210,4%,10%,.08) !important;*/
1709 }
1710
1711 #back-button:not([disabled="true"]):hover:active > .toolbarbutton-icon,
1712 #back-button[open="true"] > .toolbarbutton-icon {
1713 /*  background-color: hsla(210,4%,10%,.12) !important;
1714   box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1715               0 0 0 1px hsla(210,4%,10%,.25),
1716               0 1px 0 0 hsla(210,80%,20%,.1) inset !important;*/
1717 }
1718
1719 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
1720   transform: scaleX(-1);
1721 }
1722 /*
1723 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
1724 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
1725   list-style-image: url("chrome://browser/skin/menu-back.png") !important;
1726 }
1727
1728 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr),
1729 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) {
1730   list-style-image: url("chrome://browser/skin/menu-forward.png") !important;
1731 }
1732
1733 #home-button.bookmark-item {
1734   list-style-image: url("chrome://browser/skin/Toolbar.png");
1735 }
1736
1737 #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),
1738 #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),
1739 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1740 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1741 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1742 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1743 #home-button.bookmark-item:-moz-lwtheme-brighttext {
1744   position: relative;
1745   z-index: 1;
1746   list-style-image: url("chrome://browser/skin/Toolbar-inverted.png");
1747 }
1748
1749 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1750 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme) {
1751   list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png");
1752 }
1753 */
1754
1755 #downloads-button > .toolbarbutton-icon {
1756   margin: 0;
1757 }
1758
1759 /* tabview menu item */
1760
1761 #menu_tabview {
1762   list-style-image: url("chrome://browser/skin/tabview/tabviewFx.png");
1763   -moz-image-region: rect(1px, 89px, 17px, 73px);
1764 }
1765
1766 #menu_tabview[groups="0"] {
1767   -moz-image-region: rect(1px, 17px, 17px, 1px);
1768 }
1769
1770 #menu_tabview[groups="1"] {
1771   -moz-image-region: rect(1px, 35px, 17px, 19px);
1772 }
1773
1774 #menu_tabview[groups="2"] {
1775   -moz-image-region: rect(1px, 53px, 17px, 37px);
1776 }
1777
1778 #menu_tabview[groups="3"] {
1779   -moz-image-region: rect(1px, 71px, 17px, 55px);
1780 }
1781
1782 /* undo close tab menu item */
1783 #alltabs_undoCloseTab {
1784   list-style-image: url(chrome://browser/skin/undoCloseTab.png);
1785 }
1786
1787 @media (min-resolution: 1.1dppx) {
1788   #alltabs_undoCloseTab {
1789     list-style-image: url(chrome://browser/skin/undoCloseTab@2x.png);
1790   }
1791   #alltabs_undoCloseTab > .toolbarbutton-icon {
1792     width: 16px;
1793   }
1794 }
1795
1796 /* zoom control text (reset) button special case: */
1797
1798 #nav-bar #zoom-reset-button > .toolbarbutton-text {
1799   /* To make this line up with the icons, it needs the same height (18px) +
1800    * padding (2 * 2px) + border (2 * 1px), but as a minimum because otherwise
1801    * increase in text sizes would break things...
1802    */
1803   min-height: 20px;
1804 }
1805
1806 /* ::::: fullscreen window controls ::::: */
1807
1808 #window-controls {
1809   -moz-margin-start: 4px;
1810 }
1811
1812 #minimize-button,
1813 #restore-button,
1814 #close-button {
1815 /*  list-style-image: url("chrome://global/skin/icons/windowControls.png");
1816   padding: 0; */
1817 }
1818
1819 #minimize-button {
1820   list-style-image: url("chrome://navigator/skin/icons/win-minimize.gif");
1821 }
1822
1823 #minimize-button:hover {
1824   list-style-image: url("chrome://navigator/skin/icons/win-minimize-hover.gif");
1825 }
1826
1827 #restore-button {
1828   list-style-image: url("chrome://navigator/skin/icons/win-restore.gif");
1829 }
1830
1831 #restore-button:hover {
1832   list-style-image: url("chrome://navigator/skin/icons/win-restore-hover.gif");
1833 }
1834
1835 #close-button {
1836   list-style-image: url("chrome://navigator/skin/icons/win-close.gif");
1837 }
1838
1839 #close-button:hover {
1840   list-style-image: url("chrome://navigator/skin/icons/win-close-hover.gif");
1841 }
1842
1843 /* ::::: Location Bar ::::: */
1844
1845 #urlbar,
1846 .searchbar-textbox {
1847   border-radius: 5px;
1848   margin: 2px 0;
1849   -moz-margin-start: 3px;
1850 }
1851
1852 #urlbar {
1853   /* make color as light as possible to deal with dark non-domain parts */
1854   color: #FFBFFF;
1855 }
1856
1857 /* overlap the urlbar's border */
1858 #PopupAutoCompleteRichResult {
1859   margin-top: -1px;
1860 }
1861
1862 #urlbar:-moz-lwtheme,
1863 .searchbar-textbox:-moz-lwtheme {
1864   /* background-color: rgba(255,255,255,.8);
1865   @navbarTextboxCustomBorder@
1866   color: black; */
1867 }
1868
1869 #urlbar:-moz-lwtheme:hover:not([focused]):not([readonly]),
1870 .searchbar-textbox:-moz-lwtheme:hover:not([focused]) {
1871 /*  background-color: rgba(255,255,255,.9);*/
1872 }
1873
1874 #urlbar:-moz-lwtheme[focused]:not([readonly]),
1875 .searchbar-textbox:-moz-lwtheme[focused] {
1876 /*  background-color: white;*/
1877 }
1878
1879 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar {
1880 /*  -moz-border-start: none;
1881   margin-left: 0;*/
1882 }
1883
1884 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(ltr) {
1885 /*  border-top-left-radius: 0;
1886   border-bottom-left-radius: 0; */
1887 }
1888
1889 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1890 /*  border-top-right-radius: 0;
1891   border-bottom-right-radius: 0; */
1892 }
1893
1894 window:not([chromehidden~="toolbar"]) #urlbar-wrapper {
1895 /*  clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path");*/
1896 /*  margin-inline-start: calc(-1 * var(--backbutton-urlbar-overlap)); */
1897 }
1898
1899 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl),
1900 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1901   /* let urlbar-back-button-clip-path clip the urlbar's right side for RTL */
1902   transform: scaleX(-1);
1903 }
1904
1905 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl) {
1906   -moz-box-direction: reverse;
1907 }
1908
1909 html|*.urlbar-input:-moz-lwtheme::-moz-placeholder,
1910 .searchbar-textbox:-moz-lwtheme > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::-moz-placeholder {
1911   color: #E7ADE7;
1912 }
1913
1914 #urlbar-container {
1915   -moz-box-orient: horizontal;
1916   -moz-box-align: stretch;
1917 }
1918
1919 .urlbar-textbox-container {
1920   -moz-box-align: stretch;
1921 }
1922
1923 .urlbar-input-box {
1924   -moz-margin-start: 0;
1925 }
1926
1927 #urlbar-icons {
1928   -moz-box-align: center;
1929 }
1930
1931 .urlbar-icon {
1932   padding: 0 2px;
1933   /* 16x16 icon with border-box sizing */
1934   width: 20px;
1935   height: 16px;
1936 }
1937
1938 .search-go-container {
1939   padding: 2px;
1940 }
1941
1942 .search-go-container > .search-go-button {
1943   padding: 0;
1944 }
1945
1946 #urlbar-search-footer {
1947   border-top: 1px solid #A09090;
1948 }
1949
1950 #urlbar-search-settings {
1951 }
1952
1953 #urlbar-search-settings:hover {
1954 }
1955
1956 #urlbar-search-settings:hover:active {
1957 }
1958
1959 #urlbar-search-splitter {
1960   min-width: 6px;
1961   -moz-margin-start: -3px;
1962   border: none;
1963   background: transparent;
1964 }
1965
1966 #urlbar-search-splitter + #urlbar-container > #urlbar,
1967 #urlbar-search-splitter + #search-container > #searchbar > .searchbar-textbox {
1968   -moz-margin-start: 0;
1969 }
1970
1971 #urlbar-display-box {
1972 }
1973
1974 .urlbar-display {
1975   -moz-border-end: 1px solid #9C9CFF;
1976   -moz-margin-end: 3px;
1977   margin-top: 0;
1978   margin-bottom: 0;
1979   -moz-margin-start: 0;
1980   color: #8050B0;
1981 }
1982
1983 /* === BEGIN urlbarSearchSuggestionsNotification.inc.css === */
1984
1985 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] {
1986   border-bottom: 1px solid #A09090;
1987   background-color: #000000;
1988   padding: 6px 0;
1989   -moz-padding-start: 44px;
1990   -moz-padding-end: 6px;
1991   background-image: url("chrome://browser/skin/info.svg");
1992   background-clip: padding-box;
1993   background-position: 20px center;
1994   background-repeat: no-repeat;
1995   background-size: 16px 16px;
1996 }
1997
1998 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) {
1999   background-position: right 20px center;
2000 }
2001
2002 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description {
2003   margin: 0;
2004   padding: 0;
2005 }
2006
2007 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description > label.text-link {
2008   -moz-margin-start: 0;
2009 }
2010
2011 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
2012   -moz-appearance: none;
2013   min-width: 80px;
2014   border-radius: 3px;
2015   padding: 4px 16px;
2016   margin: 0;
2017   -moz-margin-start: 10px;
2018 }
2019
2020 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"] {
2021 }
2022
2023 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"]:hover {
2024 }
2025
2026 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"] {
2027 }
2028
2029 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"]:hover {
2030 }
2031
2032 /* === END urlbarSearchSuggestionsNotification.inc.css === */
2033
2034 #search-container {
2035   min-width: calc(54px + 11ch);
2036 }
2037
2038 /* identity box */
2039
2040 #identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) {
2041   var(--identity-box-verified-background-color);
2042 }
2043
2044 #identity-box:-moz-focusring {
2045   outline: 1px dotted #008484;
2046   outline-offset: -1px;
2047 }
2048
2049 #identity-box.verifiedDomain:-moz-focusring,
2050 #identity-box.verifiedIdentity:-moz-focusring {
2051   outline-color: #000000;
2052 }
2053
2054 /* Location bar dropmarker */
2055
2056 .urlbar-history-dropmarker:not(:hover):not([open="true"]) {
2057   background-color: transparent;
2058 }
2059
2060 #urlbar-container[combined="true"] > #urlbar > .urlbar-history-dropmarker,
2061 #urlbar-wrapper > #urlbar > .urlbar-history-dropmarker,
2062 #urlbar-wrapper > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
2063   border: none;
2064   border-radius: 0px;
2065   transition: opacity 0.15s ease;
2066 }
2067
2068 #navigator-toolbox:not(:hover) .urlbar-history-dropmarker {
2069   opacity: 0;
2070 }
2071
2072 .urlbar-history-dropmarker:hover {
2073 }
2074
2075 .urlbar-history-dropmarker:hover:active,
2076 .urlbar-history-dropmarker[open="true"] {
2077 }
2078
2079 /* page proxy icon */
2080
2081 /* === BEGIN identity-block.inc.css === */
2082
2083 #identity-box {
2084   --identity-box-verified-color: #008484;
2085   /* Default theme does different color per channel, we can't as they do it build-time. */
2086   --identity-box-chrome-color: #9C9CFF;
2087
2088   border-inline-end: 1px solid --urlbar-separator-color);
2089   font-size: .9em;
2090   border-radius: 2px;
2091   padding: 3px 5px;
2092   margin-inline-end: 4px;
2093   overflow: hidden;
2094   /* The latter two properties have a transition to handle the delayed hiding of
2095      the forward button when hovered. */
2096   transition: background-color 150ms ease, padding-left, padding-right;
2097 }
2098
2099 #identity-box:-moz-locale-dir(ltr) {
2100   border-top-right-radius: 0;
2101   border-bottom-right-radius: 0;
2102 }
2103
2104 #identity-box:-moz-locale-dir(rtl) {
2105   border-top-left-radius: 0;
2106   border-bottom-left-radius: 0;
2107 }
2108
2109 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
2110   color: var(--identity-box-chrome-color);
2111   -moz-border-end: 1px solid var(--identity-box-chrome-color);
2112 }
2113
2114 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
2115   color: var(--identity-box-verified-color);
2116   -moz-border-end: 1px solid var(--identity-box-verified-color);
2117 }
2118
2119 #notification-popup-box:not([hidden]) + #identity-box {
2120   padding-inline-start: 10px;
2121   border-radius: 0;
2122 }
2123
2124 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box {
2125 /*   border-radius: 0; */
2126   -moz-padding-start: 2px;
2127   -moz-padding-end: 2px;
2128   -moz-margin-end: 1px;
2129 }
2130
2131 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar >
2132     #notification-popup-box[hidden] + #identity-box {
2133   padding-inline-start: 2px;
2134 }
2135
2136 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar >
2137     #notification-popup-box[hidden] + #identity-box {
2138   /* Forward button hiding is delayed when hovered, so we should use the same
2139      delay for the identity box. We handle both horizontal paddings (for LTR and
2140      RTL), the latter two delays here are for padding-left and padding-right. */
2141   transition-delay: 0s, 100s, 100s;
2142 }
2143
2144 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar >
2145     #notification-popup-box[hidden] + #identity-box {
2146   /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
2147   padding-inline-start: 2.01px;
2148 }
2149
2150 /* MAIN IDENTITY ICON */
2151
2152 #identity-icon {
2153   width: 16px;
2154   height: 16px;
2155   list-style-image: url(chrome://browser/skin/identity-icon.svg#normal);
2156 }
2157
2158 #identity-box:hover > #identity-icon,
2159 #identity-box[open=true] > #identity-icon {
2160   list-style-image: url(chrome://browser/skin/identity-icon.svg#hover);
2161 }
2162
2163 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon {
2164   list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
2165 }
2166
2167 #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon {
2168   opacity: 0.3;
2169 }
2170
2171 #urlbar[actiontype="searchengine"] > #identity-box > #identity-icon {
2172   -moz-image-region: inherit;
2173   list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon);
2174   width: 16px;
2175   height: 16px;
2176   opacity: 1;
2177 }
2178
2179 /* TRACKING PROTECTION ICON */
2180
2181 #tracking-protection-icon {
2182   width: 16px;
2183   height: 16px;
2184   margin-inline-start: 2px;
2185   margin-inline-end: 0;
2186   list-style-image: url(chrome://browser/skin/tracking-protection-16.svg);
2187   opacity: 1;
2188 }
2189
2190 #tracking-protection-icon[state="loaded-tracking-content"] {
2191   list-style-image: url(chrome://browser/skin/tracking-protection-disabled-16.svg);
2192 }
2193
2194 #tracking-protection-icon[animate] {
2195   transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
2196 }
2197
2198 #tracking-protection-icon:not([state]) {
2199   margin-inline-end: -18px;
2200   pointer-events: none;
2201   opacity: 0;
2202   /* Only animate the shield in, when it disappears hide it immediately. */
2203   transition: none;
2204 }
2205
2206 #urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
2207   visibility: collapse;
2208 }
2209
2210 /* CONNECTION ICON */
2211
2212 #connection-icon {
2213   width: 16px;
2214   height: 16px;
2215   margin-inline-start: 2px;
2216   visibility: collapse;
2217 }
2218
2219 #urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon,
2220 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon {
2221   list-style-image: url(chrome://browser/skin/identity-secure.svg);
2222   visibility: visible;
2223 }
2224
2225 #urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon,
2226 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon {
2227   list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg);
2228   visibility: visible;
2229 }
2230
2231 #urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon,
2232 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon,
2233 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon {
2234   list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg);
2235   visibility: visible;
2236 }
2237
2238 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon {
2239   list-style-image: url(chrome://browser/skin/identity-mixed-active-blocked.svg);
2240   visibility: visible;
2241 }
2242
2243 /* === END identity-block.inc.css === */
2244
2245 #page-proxy-favicon {
2246   -moz-image-region: rect(0, 16px, 16px, 0);
2247 }
2248
2249 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
2250 /*  -moz-margin-end: 1px;*/
2251 }
2252
2253 #identity-box:hover > #page-proxy-favicon {
2254   -moz-image-region: rect(0, 32px, 16px, 16px);
2255 }
2256
2257 #identity-box:hover:active > #page-proxy-favicon,
2258 #identity-box[open=true] > #page-proxy-favicon {
2259   -moz-image-region: rect(0, 48px, 16px, 32px);
2260 }
2261
2262 #identity-box:hover {
2263   background-color: #FFCF00;
2264   color: #000000;
2265 }
2266
2267 #identity-box:hover:active,
2268 #identity-box[open=true] {
2269   background-color: #FF9F00;
2270   color: #000000;
2271 }
2272
2273 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover,
2274 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active,
2275 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] {
2276   background-color: #9C9CFF;
2277   color: #000000;
2278 }
2279
2280 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover,
2281 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active,
2282 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] {
2283   background-color: #008484;
2284   color: #000000;
2285 }
2286
2287 /* autocomplete */
2288
2289 #treecolAutoCompleteImage {
2290   max-width: 36px;
2291 }
2292
2293 .ac-result-type-bookmark,
2294 .autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) {
2295   list-style-image: url("chrome://browser/skin/places/bookmark.png");
2296   -moz-image-region: rect(0px 16px 16px 0px);
2297   width: 16px;
2298   height: 16px;
2299 }
2300
2301 richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark,
2302 .autocomplete-treebody::-moz-tree-image(selected, current, bookmark, treecolAutoCompleteImage) {
2303 /*  -moz-image-region: rect(0px 48px 16px 32px);*/
2304 }
2305
2306 .ac-result-type-keyword,
2307 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage),
2308 richlistitem[type~="action"][actiontype="searchengine"] > .ac-title-box > .ac-site-icon {
2309   list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon");
2310   width: 16px;
2311   height: 16px;
2312 }
2313
2314   .ac-result-type-keyword[selected="true"],
2315   .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage, selected),
2316   richlistitem[type~="action"][actiontype="searchengine"][selected="true"] > .ac-title-box > .ac-site-icon {
2317     list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon-inverted");
2318   }
2319
2320 .ac-result-type-tag,
2321 .autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) {
2322   list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
2323   width: 16px;
2324   height: 16px;
2325 }
2326
2327 .ac-comment,
2328 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description,
2329 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
2330   font-size: 1.05em;
2331 }
2332
2333 .ac-extra > .ac-comment,
2334 .ac-url-text,
2335 .ac-action-text {
2336   font-size: 1em;
2337 }
2338
2339 .ac-url-text,
2340 .ac-action-text {
2341   color: #9C9CFF;
2342 }
2343
2344 richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-icon {
2345   list-style-image: url("chrome://browser/skin/actionicon-tab.png");
2346   -moz-image-region: rect(0, 16px, 16px, 0);
2347   padding: 0 3px;
2348   width: 22px;
2349   height: 16px;
2350 }
2351
2352 @media (min-resolution: 1.1dppx) {
2353   richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-icon {
2354     list-style-image: url("chrome://browser/skin/actionicon-tab@2x.png");
2355     -moz-image-region: rect(0, 32px, 32px, 0);
2356   }
2357 }
2358
2359 richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url-box > .ac-action-icon {
2360   -moz-image-region: rect(16px, 16px, 32px, 0);
2361 }
2362
2363 .autocomplete-treebody::-moz-tree-cell-text(treecolAutoCompleteComment) {
2364   color: #8050B0;
2365 }
2366
2367 .ac-comment[selected="true"],
2368 .ac-url-text[selected="true"],
2369 .ac-action-text[selected="true"] {
2370   color: inherit !important;
2371 }
2372
2373 .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
2374 .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
2375 {
2376   color: #8050B0;
2377   font-size: smaller;
2378 }
2379
2380 .autocomplete-treebody::-moz-tree-cell(suggesthint) {
2381   border-top: 1px solid #9C9CFF;
2382 }
2383
2384 /* combined go/reload/stop button in location bar */
2385
2386 #urlbar-go-button,
2387 #urlbar-reload-button,
2388 #urlbar-stop-button {
2389   border-style: none;
2390   list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
2391 /*  padding: 0 9px;*/
2392   margin-inline-start: 0px;
2393   border-inline-start: 1px solid var(--urlbar-separator-color);
2394   border-image: linear-gradient(transparent 15%,
2395                                 var(--urlbar-separator-color) 15%,
2396                                 var(--urlbar-separator-color) 85%,
2397                                 transparent 85%);
2398   border-image-slice: 1;
2399 }
2400
2401 #urlbar:-moz-locale-dir(ltr) > toolbarbutton {
2402   border-top-left-radius: 0px;
2403   border-bottom-left-radius: 0px;
2404 }
2405
2406 #urlbar:-moz-locale-dir(rtl) > toolbarbutton {
2407   border-top-right-radius: 0px;
2408   border-bottom-right-radius: 0px;
2409 }
2410
2411 #urlbar > toolbarbutton:not([disabled=true]):active:hover,
2412 #urlbar-reload-button:not(:hover) {
2413   -moz-border-start-style: none;
2414   -moz-padding-start: 3px;
2415 }
2416
2417 #urlbar-reload-button {
2418   -moz-image-region: rect(0px, 14px, 14px, 0px);
2419 }
2420
2421 #urlbar-reload-button[disabled=true] {
2422   -moz-image-region: rect(28px, 14px, 42px, 0px);
2423 }
2424
2425 #urlbar-reload-button:not([disabled=true]):hover {
2426   -moz-image-region: rect(14px, 14px, 28px, 0px);
2427 }
2428
2429 #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2430   transform: scaleX(-1);
2431 }
2432
2433 #urlbar-go-button {
2434   -moz-image-region: rect(0, 42px, 14px, 28px);
2435 }
2436
2437 #urlbar-go-button:hover {
2438   -moz-image-region: rect(14px, 42px, 28px, 28px);
2439 }
2440
2441 #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2442   transform: scaleX(-1);
2443 }
2444
2445 #urlbar-stop-button {
2446   -moz-image-region: rect(0px, 28px, 14px, 14px);
2447 }
2448
2449 #urlbar-stop-button:hover {
2450   -moz-image-region: rect(14px, 28px, 28px, 14px);
2451 }
2452
2453 @media (min-resolution: 1.1dppx) {
2454   #urlbar-go-button,
2455   #urlbar-reload-button,
2456   #urlbar-stop-button {
2457     list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
2458   }
2459
2460   #urlbar-go-button > .toolbarbutton-icon,
2461   #urlbar-reload-button > .toolbarbutton-icon,
2462   #urlbar-stop-button > .toolbarbutton-icon {
2463     width: 14px;
2464   }
2465
2466   #urlbar-go-button {
2467     -moz-image-region: rect(0, 84px, 28px, 56px);
2468   }
2469
2470   #urlbar-go-button:hover {
2471     -moz-image-region: rect(28px, 84px, 56px, 56px);
2472   }
2473
2474   #urlbar-go-button:hover:active {
2475     -moz-image-region: rect(56px, 84px, 84px, 56px);
2476   }
2477
2478   #urlbar-reload-button {
2479     -moz-image-region: rect(0, 28px, 28px, 0);
2480   }
2481
2482   #urlbar-reload-button:not([disabled]):hover {
2483     -moz-image-region: rect(28px, 28px, 56px, 0);
2484   }
2485
2486   #urlbar-reload-button:not([disabled]):hover:active {
2487     -moz-image-region: rect(56px, 28px, 84px, 0);
2488   }
2489
2490   #urlbar-stop-button {
2491     -moz-image-region: rect(0, 56px, 28px, 28px);
2492   }
2493
2494   #urlbar-stop-button:not([disabled]):hover {
2495     -moz-image-region: rect(28px, 56px, 56px, 28px);
2496   }
2497
2498   #urlbar-stop-button:hover:active {
2499     -moz-image-region: rect(56px, 56px, 84px, 28px);
2500   }
2501 }
2502
2503 /* popup blocker button */
2504
2505 #page-report-button {
2506   list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
2507   -moz-image-region: rect(0, 16px, 16px, 0);
2508 }
2509
2510 #page-report-button:hover ,
2511 #page-report-button:hover:active,
2512 #page-report-button[open="true"] {
2513   -moz-image-region: rect(0, 32px, 16px, 16px);
2514 }
2515
2516 /* Reader mode button */
2517
2518 #reader-mode-button {
2519   list-style-image: url("chrome://browser/skin/readerMode.svg");
2520   -moz-image-region: rect(0, 16px, 16px, 0);
2521 }
2522
2523 #reader-mode-button:hover,
2524 #reader-mode-button[readeractive]:hover {
2525   -moz-image-region: rect(0, 32px, 16px, 16px);
2526 }
2527
2528 #reader-mode-button:hover:active,
2529 #reader-mode-button[readeractive] {
2530   -moz-image-region: rect(0, 48px, 16px, 32px);
2531 }
2532
2533 /* social share panel */
2534
2535 .social-share-frame {
2536   min-width: 756px;
2537   height: 150px;
2538 }
2539
2540 #share-container {
2541   min-width: 756px;
2542   background-color: white;
2543   background-repeat: no-repeat;
2544   background-position: center center;
2545 }
2546 #share-container[loading] {
2547   background-image: url(chrome://browser/skin/tabbrowser/pendingpaint.png);
2548 }
2549 #share-container > browser {
2550   transition: opacity 150ms ease-in-out;
2551   opacity: 1;
2552 }
2553 #share-container[loading] > browser {
2554   opacity: 0;
2555 }
2556
2557 .social-share-toolbar {
2558   border-bottom: 1px solid #9C9CFF;
2559   padding: 2px;
2560 }
2561
2562 #social-share-provider-buttons {
2563   padding: 0;
2564   margin: 0;
2565 }
2566
2567 .share-provider-button {
2568   padding: 5px;
2569   margin: 2px;
2570 }
2571
2572 .share-provider-button > .toolbarbutton-text {
2573   display: none;
2574 }
2575 .share-provider-button > .toolbarbutton-icon {
2576   width: 16px;
2577   min-height: 16px;
2578   max-height: 16px;
2579 }
2580
2581 /* fixup corners for share panel */
2582 .social-panel > .social-panel-frame {
2583   border-radius: inherit;
2584 }
2585
2586 #social-share-panel {
2587   min-height: 100px;
2588   min-width: 766px;
2589 }
2590
2591 #share-container,
2592 .social-share-frame {
2593   border-top-left-radius: 0;
2594   border-bottom-left-radius: inherit;
2595   border-top-right-radius: 0;
2596   border-bottom-right-radius: inherit;
2597 }
2598
2599 #social-share-panel > .social-share-toolbar {
2600   border-top-left-radius: inherit;
2601   border-top-right-radius: inherit;
2602 }
2603
2604 #social-share-provider-buttons {
2605   border-top-left-radius: inherit;
2606   border-top-right-radius: inherit;
2607 }
2608
2609 /* social recommending panel */
2610
2611 #social-mark-button {
2612   -moz-image-region: rect(0, 16px, 16px, 0);
2613 }
2614
2615 /* bookmarks menu-button */
2616
2617 #bookmarks-menu-button.bookmark-item {
2618   list-style-image: url("chrome://browser/skin/places/bookmark.png");
2619   -moz-image-region: rect(0px 16px 16px 0px);
2620 }
2621
2622 #bookmarks-menu-button.bookmark-item[starred] {
2623   -moz-image-region: rect(0px 32px 16px 16px);
2624 }
2625
2626 #nav-bar #bookmarks-menu-button[cui-areatype="toolbar"]:not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
2627   padding-top: 2px;
2628   padding-bottom: 2px;
2629 }
2630
2631 #BMB_bookmarksPopup[side="top"],
2632 #BMB_bookmarksPopup[side="bottom"] {
2633   margin-left: -20px;
2634   margin-right: -20px;
2635 }
2636
2637 #BMB_bookmarksPopup[side="left"],
2638 #BMB_bookmarksPopup[side="right"] {
2639   margin-top: -20px;
2640   margin-bottom: -20px;
2641 }
2642
2643 /* bookmarking panel */
2644
2645 #editBookmarkPanelStarIcon {
2646   list-style-image: url("chrome://browser/skin/places/starred48.png");
2647   width: 48px;
2648   height: 48px;
2649 }
2650
2651 #editBookmarkPanelStarIcon[unstarred] {
2652   list-style-image: url("chrome://browser/skin/places/unstarred48.png");
2653 }
2654
2655 #editBookmarkPanelTitle {
2656   font-size: 130%;
2657 }
2658
2659 #editBookmarkPanelHeader,
2660 #editBookmarkPanelContent {
2661   margin-bottom: .5em;
2662 }
2663
2664 /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
2665 #editBMPanel_folderTree {
2666   min-width: 27em;
2667 }
2668
2669 .panel-promo-box {
2670   margin: 5px 0 -6px;
2671   padding: 5px 0;
2672   border-top: 1px solid #9C9CFF;
2673   border-bottom-left-radius: 5px;
2674   border-bottom-right-radius: 5px;
2675 }
2676
2677 .panel-promo-icon {
2678   list-style-image: url("chrome://browser/skin/sync-notification-24.png");
2679   -moz-margin-end: 10px;
2680   vertical-align: middle;
2681 }
2682
2683 .panel-promo-closebutton {
2684   list-style-image: url("chrome://global/skin/icons/close-button.gif");
2685   -moz-margin-end: -3px;
2686   margin-top: -3px;
2687 }
2688
2689 .panel-promo-closebutton:hover {
2690   list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2691 }
2692
2693 .panel-promo-closebutton:hover:active {
2694   list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2695 }
2696
2697 .panel-promo-closebutton > .toolbarbutton-text {
2698   padding: 0;
2699 }
2700
2701 /* ::::: content area ::::: */
2702
2703 #sidebar-box {
2704   background-color: #9C9CFF;
2705   color: #000000;
2706 }
2707
2708 #sidebar {
2709   background-color: #000000;
2710 }
2711
2712 #sidebar-splitter {
2713   -moz-margin-start: 0;
2714 }
2715
2716 #sidebar-header {
2717   color: #000000;
2718   padding: 2px;
2719 }
2720
2721 #sidebar-title {
2722   -moz-padding-start: 0px;
2723 }
2724
2725 #sidebar-header > .close-icon {
2726 /*  padding: 4px 2px;
2727   margin: 0;
2728   border: none;*/
2729   list-style-image: url("chrome://global/skin/icons/close-button.gif");
2730 }
2731
2732 #sidebar-header > .close-icon:hover,
2733 #sidebar-header > .close-icon:hover:active {
2734   list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2735 }
2736
2737 #sidebar-splitter:-moz-locale-dir(ltr),
2738 #sidebar:-moz-locale-dir(ltr) {
2739   border-radius: 0 5px 0 0;
2740 }
2741
2742 #sidebar-splitter:-moz-locale-dir(rtl),
2743 #sidebar:-moz-locale-dir(rtl) {
2744   border-radius: 5px 0 0 0;
2745 }
2746
2747 .browserContainer > findbar {
2748 /*
2749   background-color: -moz-dialog;
2750   color: -moz-DialogText;
2751 */
2752 }
2753
2754 /* Tabstrip */
2755
2756 #TabsToolbar {
2757   min-height: 0;
2758   padding: 0;
2759   -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
2760 }
2761
2762 #TabsToolbar .toolbar-holder {
2763   background-color: #000000; /* correct effect of being an actual toolbar */
2764 }
2765
2766 #main-window[disablechrome] #TabsToolbar,
2767 #TabsToolbar[tabsontop="false"] {
2768   border-bottom: 1px solid #008484;
2769 }
2770
2771 /* === BEGIN tabs.inc.css === */
2772
2773 :root {
2774   /* --tab-toolbar-navbar-overlap: 1px; */
2775   /* --navbar-tab-toolbar-highlight-overlap: 1px; */
2776   /* --tab-min-height: 31px; */
2777 }
2778 #TabsToolbar {
2779   /* --tab-stroke-background-size: auto 100%; */
2780 }
2781
2782 .tabbrowser-tab,
2783 .tabs-newtab-button,
2784 #TabsToolbar > #new-tab-button {
2785   margin-top: 0px;
2786 }
2787
2788 .tabbrowser-tab {
2789   padding: 1px 4px 2px;
2790 }
2791
2792 .tabbrowser-tab:first-of-type {
2793   -moz-margin-start: 2px;
2794 }
2795
2796 .tabs-newtab-button,
2797 #TabsToolbar > #new-tab-button {
2798   border-radius: 8px 8px 0px 0px;
2799   -moz-margin-start: 0;
2800 }
2801
2802 .tabs-newtab-button:not(:hover),
2803 #TabsToolbar > #new-tab-button:not(:hover) {
2804   background-color: #C09070;
2805 }
2806
2807 /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
2808 .tabbrowser-tab[visuallyselected=true] {
2809 /*  position: relative;
2810   z-index: 2;*/
2811 }
2812
2813 .tab-background-middle {
2814 }
2815
2816 .tab-content {
2817 }
2818
2819 .tab-content[pinned] {
2820 }
2821
2822 .tab-throbber,
2823 .tab-icon-image,
2824 .tab-icon-sound,
2825 .tab-close-button {
2826 }
2827
2828 .tab-throbber,
2829 .tab-icon-image {
2830   height: 16px;
2831   width: 16px;
2832   -moz-margin-end: 3px;
2833 }
2834
2835 .tab-icon-image {
2836   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
2837 }
2838
2839 .tab-icon-overlay {
2840   width: 16px;
2841   height: 16px;
2842   margin-top: -8px;
2843   -moz-margin-start: -15px;
2844   position: relative;
2845 }
2846
2847 .tab-icon-overlay[crashed] {
2848   list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
2849 }
2850
2851 .tab-icon-overlay[soundplaying],
2852 .tab-icon-overlay[muted]:not([crashed]) {
2853   border-radius: 10px;
2854 }
2855
2856 .tab-icon-overlay[soundplaying]:hover,
2857 .tab-icon-overlay[muted]:hover {
2858   background-color: #FFCF00;
2859 }
2860
2861 .tab-icon-overlay[soundplaying] {
2862   display: -moz-box;
2863   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio");
2864 }
2865
2866 .tab-icon-overlay[muted]:not([crashed]) {
2867   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
2868 }
2869
2870 #TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not(:hover) {
2871   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white");
2872 }
2873
2874
2875 #TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not(:hover) {
2876   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted");
2877 }
2878
2879 .tab-throbber[busy] {
2880   list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png");
2881 }
2882
2883 .tab-throbber[progress] {
2884   list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.png");
2885 }
2886
2887 .tab-throbber[pinned],
2888 .tab-icon-image[pinned] {
2889   -moz-margin-start: 2px;
2890   -moz-margin-end: 2px;
2891 }
2892
2893 .tab-label {
2894   /* this needs to add up to the 16px of the icon image */
2895   height: 12px;
2896   margin-top: 2px !important;
2897   margin-bottom: 2px !important;
2898 }
2899
2900 .tab-icon-sound {
2901   -moz-margin-start: 4px;
2902   width: 16px;
2903   height: 16px;
2904   padding: 0;
2905 }
2906
2907 .tab-icon-sound[muted] {
2908   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
2909 }
2910
2911 .tab-icon-sound[muted]:hover {
2912   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover");
2913 }
2914
2915 .tab-icon-sound[muted]:hover:active {
2916   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed");
2917 }
2918
2919 .tab-icon-sound[soundplaying] {
2920   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab");
2921 }
2922
2923 .tab-icon-sound[soundplaying]:hover {
2924   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-hover");
2925 }
2926
2927 .tab-icon-sound[soundplaying]:hover:active {
2928   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-pressed");
2929 }
2930
2931 .tab-icon-sound[muted] {
2932   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted");
2933 }
2934
2935 .tab-icon-sound[muted]:hover {
2936   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-hover");
2937 }
2938
2939 .tab-icon-sound[muted]:hover:active {
2940   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-pressed");
2941 }
2942
2943 .tab-icon-sound[visuallyselected=true][soundplaying] {
2944   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio");
2945 }
2946
2947 .tab-icon-sound[visuallyselected=true][soundplaying]:hover {
2948   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-hover");
2949 }
2950
2951 .tab-icon-sound[visuallyselected=true][soundplaying]:hover:active {
2952   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-pressed");
2953 }
2954
2955 .tab-icon-sound[visuallyselected=true][muted] {
2956   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
2957 }
2958
2959 .tab-icon-sound[visuallyselected=true][muted]:hover {
2960   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover");
2961 }
2962
2963 .tab-icon-sound[visuallyselected=true][muted]:hover:active {
2964   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed");
2965 }
2966
2967 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying] {
2968   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white");
2969 }
2970
2971 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover {
2972   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-hover");
2973 }
2974
2975 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover:active {
2976   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-pressed");
2977 }
2978
2979 #TabsToolbar[brighttext] .tab-icon-sound[muted] {
2980   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white");
2981 }
2982
2983 #TabsToolbar[brighttext] .tab-icon-sound[muted]:hover {
2984   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-hover");
2985 }
2986
2987 #TabsToolbar[brighttext] .tab-icon-sound[muted]:hover:active {
2988   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-pressed");
2989 }
2990
2991 .tab-close-button {
2992   margin-top: 1px;
2993   padding: 0;
2994 }
2995
2996 .tab-background,
2997 .tabs-newtab-button {
2998   /* overlap the tab curves */
2999 }
3000
3001 .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
3002 }
3003
3004 /* Tab Overflow */
3005 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
3006 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3007 }
3008
3009 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:-moz-locale-dir(rtl),
3010 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:-moz-locale-dir(ltr) {
3011 }
3012
3013 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]) {
3014 }
3015
3016 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3017 }
3018
3019 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator[collapsed],
3020 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator[collapsed] {
3021 }
3022
3023 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator,
3024 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator {
3025 }
3026
3027 .tab-background-start[visuallyselected=true]::after,
3028 .tab-background-start[visuallyselected=true]::before,
3029 .tab-background-start,
3030 .tab-background-end,
3031 .tab-background-end[visuallyselected=true]::after,
3032 .tab-background-end[visuallyselected=true]::before {
3033 }
3034
3035 .tabbrowser-tab:not([visuallyselected=true]),
3036 .tabbrowser-tab:-moz-lwtheme {
3037 }
3038
3039 /* tabbrowser-tab focus ring */
3040 .tabbrowser-tab:focus {
3041   outline: 1px dotted;
3042 }
3043
3044 /* Selected tab */
3045
3046 .tabbrowser-tab[visuallyselected="true"] {
3047 }
3048
3049 /* End selected tab */
3050
3051 /* User Context UI - change tab decoration depending on userContextId.
3052    Defaults to gray for unknown usercontextids. */
3053 .tabbrowser-tab[usercontextid] {
3054   background-image: linear-gradient(to right, transparent 20%, #A09090 30%, #A09090 70%, transparent 80%);
3055   background-size: auto 2px;
3056   background-repeat: no-repeat;
3057 }
3058
3059 /* Personal User Context */
3060 .tabbrowser-tab[usercontextid="1"] {
3061   background-image: linear-gradient(to right, transparent 20%, #9C9CFF 30%, #9C9CFF 70%, transparent 80%);
3062 }
3063 /* Work User Context */
3064 .tabbrowser-tab[usercontextid="2"] {
3065   background-image: linear-gradient(to right, transparent 20%, #FF9F00 30%, #FF9F00 70%, transparent 80%);
3066 }
3067 /* Banking User Context */
3068 .tabbrowser-tab[usercontextid="3"] {
3069   background-image: linear-gradient(to right, transparent 20%, #008484 30%, #008484 70%, transparent 80%);
3070 }
3071 /* Shopping User Context */
3072 .tabbrowser-tab[usercontextid="4"] {
3073   background-image: linear-gradient(to right, transparent 20%, #E7ADE7 30%, #E7ADE7 70%, transparent 80%);
3074 }
3075
3076 /* Tab pointer-events */
3077 /*
3078 .tabbrowser-tab {
3079   pointer-events: none;
3080 }
3081
3082 .tab-background-middle,
3083 .tabs-newtab-button,
3084 .tab-icon-overlay[soundplaying],
3085 .tab-icon-overlay[muted]:not([crashed]),
3086 .tab-icon-sound,
3087 .tab-close-button {
3088   pointer-events: auto;
3089 }
3090 */
3091 /* Pinned tabs */
3092
3093 /*
3094 .tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([visuallyselected="true"]),
3095 .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([visuallyselected="true"]) {
3096 */
3097 .tabbrowser-tab:-moz-any([image], [pinned]):-moz-any([attention], [titlechanged]):not([visuallyselected="true"]) {
3098   background-color: #E7ADE7;
3099 }
3100
3101 .tab-label[attention]:not([visuallyselected="true"]) {
3102   font-weight: bold;
3103 }
3104
3105 .tabbrowser-tab[pinned][titlechanged]:not([visuallyselected="true"]):hover {
3106   background-color: #3333FF;
3107   color: #000000;
3108 }
3109
3110 /* Tab separators */
3111 /*
3112 .tabbrowser-tab::after,
3113 .tabbrowser-tab::before {
3114   width: 1px;
3115   -moz-margin-start: -1px;
3116   background-image: linear-gradient(transparent 5px,
3117                                     currentColor 5px,
3118                                     currentColor calc(100% - 4px),
3119                                     transparent calc(100% - 4px));
3120   opacity: 0.2;
3121 }
3122
3123 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::before,
3124 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::after {
3125   opacity: 0.4;
3126 }
3127 */
3128 /* Also show separators beside the selected tab when dragging it. */
3129 /*
3130 #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
3131 .tabbrowser-tab:not([visuallyselected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
3132 #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([visuallyselected]):not([beforehovered]):not(:hover)::after {
3133   content: "";
3134   display: -moz-box;
3135 }
3136 */
3137 /* New tab button */
3138
3139 .tabs-newtab-button {
3140   width: 28px;
3141   /* width: calc(36px + var(--tab-curve-width)); */
3142 }
3143
3144 /* === END tabs.inc.css === */
3145
3146 /* Background tabs:
3147  *
3148  * Decrease the height of the hoverable region of background tabs whenever the tabs are at the top
3149  * of the window (e.g. no menubar, tabs in titlebar, etc.) to make it easier to drag the window by
3150  * the titlebar. We don't need this in fullscreen since window dragging is not an issue there.
3151  */
3152 #main-window[tabsintitlebar][sizemode=normal] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar .tab-background-middle:not([visuallyselected=true]) {
3153 /*  clip-path: url(chrome://browser/content/browser.xul#tab-hover-clip-path);*/
3154 }
3155
3156 /* Tab DnD indicator */
3157 .tab-drop-indicator {
3158   list-style-image: url("chrome://browser/skin/tabbrowser/tabDragIndicator.png");
3159   margin-bottom: -11px;
3160 }
3161
3162 /* Tab close button */
3163 .tab-close-button {
3164   list-style-image: url("chrome://global/skin/icons/close-button.gif");
3165 }
3166
3167 .tab-close-button:hover,
3168 .tab-close-button:hover[selected="true"] {
3169   list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
3170 }
3171
3172 .tab-close-button:hover:active,
3173 .tab-close-button:hover:active[selected="true"] {
3174   list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
3175 }
3176
3177 /* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
3178
3179 .tabbrowser-arrowscrollbox > .scrollbutton-up,
3180 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3181   margin: 0;
3182   padding-top: 0;
3183   padding-bottom: 0;
3184   background-origin: border-box;
3185 }
3186
3187 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3188 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3189 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext,
3190 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext {
3191  }
3192
3193 .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
3194 .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
3195  }
3196
3197 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
3198 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
3199 /*  transform: scaleX(-1);*/
3200 }
3201
3202 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3203   transition: 1s background-color ease-out;
3204 }
3205
3206 .tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] {
3207   background-color: #008484;
3208 }
3209
3210 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]),
3211 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]) {
3212 /*  border-width: 0 2px 0 0;
3213   border-style: solid;
3214   border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;*/
3215 }
3216
3217 .tabs-newtab-button > .toolbarbutton-icon {
3218   margin-top: -1px;
3219   margin-bottom: -1px;
3220 }
3221
3222 .tabs-newtab-button,
3223 #TabsToolbar > #new-tab-button,
3224 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
3225 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
3226   list-style-image: url("chrome://browser/skin/tabbrowser/newtabFx.png");
3227   -moz-image-region: rect(0, 16px, 18px, 0);
3228 }
3229
3230 .tabs-newtab-button,
3231 .tabs-newtab-button:hover,
3232 #TabsToolbar > #new-tab-button,
3233 #TabsToolbar > #new-tab-button:hover {
3234   -moz-image-region: rect(0, 32px, 18px, 16px);
3235 }
3236
3237 #main-window[tabsintitlebar]:not([inFullscreen]) .tabs-newtab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3238 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3239 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3240 .tabs-newtab-button:-moz-lwtheme-brighttext,
3241 #TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext,
3242 #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext {
3243 }
3244
3245 #TabsToolbar > #new-tab-button {
3246   width: 26px;
3247 }
3248
3249 #alltabs-button {
3250   list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
3251 }
3252
3253 #alltabs-button:hover,
3254 #alltabs-button:hover:active,
3255 #alltabs-button[open="true"] {
3256   list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
3257 }
3258
3259 #main-window[tabsintitlebar]:not([inFullscreen]) #alltabs-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3260 #alltabs-button:-moz-lwtheme-brighttext {
3261 }
3262
3263 #alltabs-button > .toolbarbutton-icon {
3264 /*  margin: 0 2px;*/
3265 }
3266
3267 #alltabs-button > .toolbarbutton-menu-dropmarker {
3268   display: none;
3269 }
3270
3271 /* All tabs menupopup */
3272 .alltabs-item > .menu-iconic-left > .menu-iconic-icon {
3273   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
3274   -moz-image-region: auto;
3275 }
3276
3277 .alltabs-item[selected="true"] {
3278   font-weight: bold;
3279 }
3280
3281 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3282   list-style-image: url("chrome://global/skin/icons/loading.gif");
3283 }
3284
3285 .alltabs-item[tabIsVisible]:not([_moz-menuactive="true"]) {
3286   background-color: #402800;
3287 }
3288
3289 .alltabs-endimage[muted] {
3290   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
3291 }
3292
3293 .alltabs-endimage[soundplaying] {
3294   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio");
3295 }
3296
3297 toolbarbutton.chevron {
3298   list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
3299 }
3300
3301 toolbarbutton.chevron:hover {
3302   list-style-image: url("chrome://global/skin/toolbar/chevron-hover.gif") !important;
3303 }
3304 /*
3305 toolbar[brighttext] toolbarbutton.chevron {
3306   list-style-image: url("chrome://global/skin/toolbar/chevron-inverted.png") !important;
3307 }
3308 */
3309 toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
3310 toolbarbutton.chevron:-moz-locale-dir(rtl):hover > .toolbarbutton-icon {
3311   transform: scaleX(-1);
3312 }
3313
3314 toolbarbutton.chevron > .toolbarbutton-text,
3315 toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
3316   display: none;
3317 }
3318
3319 toolbarbutton.chevron > .toolbarbutton-icon {
3320   margin: 0;
3321 }
3322
3323 #sidebar-throbber[loading="true"] {
3324   list-style-image: url("chrome://global/skin/icons/loading.gif");
3325   -moz-margin-end: 4px;
3326 }
3327
3328 /* Bookmarks toolbar */
3329 #PlacesToolbarDropIndicator {
3330   list-style-image: url("chrome://communicator/skin/bookmarks/toolbarDropMarker.png");
3331 }
3332
3333 toolbarbutton.bookmark-item[dragover="true"][open="true"] {
3334   background-color: #008484 !important;
3335   color: #FFCF00 !important;
3336 }
3337
3338 /* rules for menupopup drop indicators */
3339 .menupopup-drop-indicator-bar {
3340   position: relative;
3341   /* these two margins must together compensate the indicator's height */
3342   margin-top: -1px;
3343   margin-bottom: -1px;
3344 }
3345
3346 .menupopup-drop-indicator {
3347   list-style-image: none;
3348   height: 2px;
3349   -moz-margin-end: -4em;
3350   background-color: #008484;
3351 }
3352
3353 /* === BEGIN notification-icons.inc.css === */
3354
3355 .popup-notification-icon {
3356   width: 64px;
3357   height: 64px;
3358   -moz-margin-end: 10px;
3359 }
3360
3361 .popup-notification-icon[popupid="geolocation"] {
3362   list-style-image: url("chrome://browser/skin/Geolocation-64.png");
3363 }
3364
3365 .popup-notification-icon[popupid="xpinstall-disabled"],
3366 .popup-notification-icon[popupid="addon-install-blocked"],
3367 .popup-notification-icon[popupid="addon-install-origin-blocked"] {
3368   list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg);
3369 }
3370
3371 .popup-notification-icon[popupid="addon-progress"] {
3372   list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg);
3373 }
3374
3375 .popup-notification-icon[popupid="addon-install-failed"] {
3376   list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg);
3377 }
3378
3379 .popup-notification-icon[popupid="addon-install-confirmation"] {
3380   list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg);
3381 }
3382
3383 #addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] {
3384   list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg);
3385 }
3386
3387 .popup-notification-icon[popupid="addon-install-complete"] {
3388   list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg);
3389 }
3390
3391 .popup-notification-icon[popupid="addon-install-restart"] {
3392   list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg);
3393 }
3394
3395 .popup-notification-icon[popupid="click-to-play-plugins"] {
3396   list-style-image: url("chrome://mozapps/skin/plugins/pluginBlocked-64.png");
3397 }
3398
3399 .popup-notification-icon[popupid="web-notifications"] {
3400   list-style-image: url("chrome://browser/skin/web-notifications-icon.svg");
3401 }
3402
3403 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
3404 .popup-notification-icon[popupid*="offline-app-requested"],
3405 .popup-notification-icon[popupid="offline-app-usage"] {
3406   list-style-image: url("chrome://global/skin/icons/alert-question.gif");
3407 }
3408
3409 .popup-notification-icon[popupid="password"] {
3410   list-style-image: url("chrome://mozapps/skin/passwordmgr/key-64.png");
3411 }
3412
3413 .popup-notification-icon[popupid="webapps-install-progress"],
3414 .popup-notification-icon[popupid="webapps-install"] {
3415   list-style-image: url("chrome://global/skin/icons/webapps-64.png");
3416 }
3417
3418 .popup-notification-icon[popupid="webRTC-sharingDevices"],
3419 .popup-notification-icon[popupid="webRTC-shareDevices"] {
3420   list-style-image: url("chrome://browser/skin/webRTC-shareDevice-64.png");
3421 }
3422
3423 .popup-notification-icon[popupid="webRTC-sharingMicrophone"],
3424 .popup-notification-icon[popupid="webRTC-shareMicrophone"] {
3425   list-style-image: url("chrome://browser/skin/webRTC-shareMicrophone-64.png");
3426 }
3427
3428 .popup-notification-icon[popupid="webRTC-sharingScreen"],
3429 .popup-notification-icon[popupid="webRTC-shareScreen"] {
3430   list-style-image: url(chrome://browser/skin/webRTC-shareScreen-64.png);
3431 }
3432
3433 .popup-notification-icon[popupid="pointerLock"] {
3434   list-style-image: url("chrome://browser/skin/pointerLock-64.png");
3435 }
3436
3437 /* Notification icon box */
3438 #notification-popup .panel-promo-box {
3439 /*  margin: 10px -10px -10px; */
3440 }
3441
3442 #notification-popup-box {
3443   position: relative;
3444   background-color: #000000;
3445   background-clip: padding-box;
3446   padding-left: 3px;
3447   padding-right: 8px;
3448   border-radius: 3px 0 0 3px;
3449   border-image: url("chrome://browser/skin/urlbar-arrow.png") 0 8 0 0 / 0 8px 0 0;
3450   -moz-margin-end: -8px;
3451   border-right-width: 8px;
3452 }
3453
3454 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > #notification-popup-box {
3455 /*  padding-left: 7px; */
3456 }
3457
3458 /* This changes the direction of the main notification box on the url bar. */
3459 #notification-popup-box:-moz-locale-dir(rtl),
3460 /* This adds a second flip for the notification anchors, as they don't switch direction
3461    for RTL mode. */
3462 .notification-anchor-icon:-moz-locale-dir(rtl) {
3463   transform: scaleX(-1);
3464 }
3465
3466 /* For the anchor icons in the chat window, we don't have the notification popup box,
3467    so we need to cancel the RTL transform. */
3468 .notification-anchor-icon.chat-toolbarbutton:-moz-locale-dir(rtl) {
3469   transform: none;
3470 }
3471
3472 .notification-anchor-icon {
3473   list-style-image: url("chrome://global/skin/icons/information-16.png");
3474
3475   width: 16px;
3476   height: 16px;
3477   margin: 0 2px;
3478 }
3479
3480 .notification-anchor-icon:-moz-focusring {
3481   outline: 1px dotted #008484;
3482 }
3483
3484 .identity-notification-icon,
3485 #identity-notification-icon {
3486   list-style-image: url("chrome://mozapps/skin/profile/profileicon.png");
3487 }
3488
3489 .geo-notification-icon,
3490 #geo-notification-icon {
3491   list-style-image: url("chrome://browser/skin/Geolocation-16.png");
3492 }
3493
3494 #addons-notification-icon {
3495   list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#default);
3496 }
3497
3498 #addons-notification-icon:hover {
3499   list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#hover);
3500 }
3501
3502 #addons-notification-icon:hover:active {
3503   list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#active);
3504 }
3505
3506 .indexedDB-notification-icon,
3507 #indexedDB-notification-icon {
3508   list-style-image: url("chrome://global/skin/icons/question-16.png");
3509 }
3510
3511 #password-notification-icon {
3512   list-style-image: url("chrome://mozapps/skin/passwordmgr/key-16.png");
3513 }
3514
3515 #login-fill-notification-icon {
3516   /* Temporary icon until the capture and fill doorhangers are unified. */
3517   list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png);
3518   transform: scaleX(-1);
3519 }
3520
3521 #webapps-notification-icon {
3522   list-style-image: url("chrome://gobal/skin/icons/webapps-16.png");
3523 }
3524
3525 #plugins-notification-icon {
3526   list-style-image: url("chrome://browser/skin/notification-pluginNormal.png");
3527 }
3528
3529 #plugins-notification-icon.plugin-hidden {
3530   list-style-image: url("chrome://browser/skin/notification-pluginAlert.png");
3531 }
3532
3533 #plugins-notification-icon.plugin-blocked {
3534   list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png");
3535 }
3536
3537 #plugins-notification-icon {
3538 /*  -moz-image-region: rect(0, 16px, 16px, 0);*/
3539 }
3540
3541 #plugins-notification-icon:hover {
3542 /*  -moz-image-region: rect(0, 32px, 16px, 16px);*/
3543 }
3544
3545 #notification-popup-box[hidden] {
3546   /* Override display:none to make the pluginBlockedNotification animation work
3547      when showing the notification repeatedly. */
3548   display: -moz-box;
3549   visibility: collapse;
3550 }
3551
3552 #plugins-notification-icon.plugin-blocked[showing] {
3553   animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
3554 }
3555
3556 @keyframes pluginBlockedNotification {
3557   from {
3558     opacity: 0;
3559   }
3560   to {
3561     opacity: 1;
3562   }
3563 }
3564
3565 .webRTC-shareDevices-notification-icon,
3566 #webRTC-shareDevices-notification-icon {
3567   list-style-image: url("chrome://browser/skin/webRTC-shareDevice-16.png");
3568 }
3569
3570 .webRTC-sharingDevices-notification-icon,
3571 #webRTC-sharingDevices-notification-icon {
3572   list-style-image: url("chrome://browser/skin/webRTC-sharingDevice-16.png");
3573 }
3574
3575 .webRTC-shareMicrophone-notification-icon,
3576 #webRTC-shareMicrophone-notification-icon {
3577   list-style-image: url("chrome://browser/skin/webRTC-shareMicrophone-16.png");
3578 }
3579
3580 .webRTC-sharingMicrophone-notification-icon,
3581 #webRTC-sharingMicrophone-notification-icon {
3582   list-style-image: url("chrome://browser/skin/webRTC-sharingMicrophone-16.png");
3583 }
3584
3585 .webRTC-shareScreen-notification-icon,
3586 #webRTC-shareScreen-notification-icon {
3587   list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16.png);
3588 }
3589
3590 .webRTC-sharingScreen-notification-icon,
3591 #webRTC-sharingScreen-notification-icon {
3592   list-style-image: url(chrome://browser/skin/webRTC-sharingScreen-16.png);
3593 }
3594
3595 .web-notifications-notification-icon,
3596 #web-notifications-notification-icon {
3597   list-style-image: url("chrome://browser/skin/web-notifications-tray.svg");
3598   -moz-image-region: rect(0, 16px, 16px, 0);
3599 }
3600
3601 .web-notifications-notification-icon:hover,
3602 #web-notifications-notification-icon:hover {
3603   -moz-image-region: rect(0, 32px, 16px, 16px);
3604 }
3605
3606 .web-notifications-notification-icon:hover:active,
3607 #web-notifications-notification-icon:hover:active {
3608   -moz-image-region: rect(0, 48px, 16px, 32px);
3609 }
3610
3611 #pointerLock-notification-icon {
3612   list-style-image: url("chrome://browser/skin/pointerLock-16.png");
3613 }
3614
3615 .translate-notification-icon,
3616 #translate-notification-icon {
3617   list-style-image: url("chrome://browser/skin/translation-16.png");
3618   -moz-image-region: rect(0px, 16px, 16px, 0px);
3619 }
3620
3621 .translated-notification-icon,
3622 #translated-notification-icon {
3623   list-style-image: url("chrome://browser/skin/translation-16.png");
3624   -moz-image-region: rect(0px, 32px, 16px, 16px);
3625 }
3626
3627 .popup-notification-icon[popupid="servicesInstall"] {
3628   list-style-image: url("chrome://browser/skin/social/services-64.png");
3629 }
3630 #servicesInstall-notification-icon {
3631   list-style-image: url("chrome://browser/skin/social/services-16.png");
3632 }
3633
3634 /* EME notifications */
3635
3636 .popup-notification-icon[popupid="drmContentPlaying"],
3637 #eme-notification-icon {
3638   list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
3639 }
3640
3641 #eme-notification-icon:hover:active {
3642   list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed");
3643 }
3644
3645 #eme-notification-icon[firstplay=true] {
3646   animation: emeTeachingMoment 0.2s linear 0s 5 normal;
3647 }
3648
3649 @keyframes emeTeachingMoment {
3650   0% {transform: translateX(0); }
3651   25% {transform: translateX(3px) }
3652   75% {transform: translateX(-3px) }
3653   100% { transform: translateX(0); }
3654 }
3655
3656 /* HiDPI notification icons */
3657 @media (min-resolution: 1.1dppx) {
3658 /*  #notification-popup-box {
3659     border-image: url("chrome://browser/skin/urlbar-arrow@2x.png") 0 16 0 0 fill;
3660   }
3661 */
3662   .notification-anchor-icon {
3663     list-style-image: url(chrome://global/skin/icons/information-32.png);
3664   }
3665
3666   .webRTC-shareDevices-notification-icon,
3667   #webRTC-shareDevices-notification-icon {
3668     list-style-image: url(chrome://browser/skin/webRTC-shareDevice-16@2x.png);
3669   }
3670
3671   .webRTC-sharingDevices-notification-icon,
3672   #webRTC-sharingDevices-notification-icon {
3673     list-style-image: url(chrome://browser/skin/webRTC-sharingDevice-16@2x.png);
3674   }
3675
3676   .webRTC-shareMicrophone-notification-icon,
3677   #webRTC-shareMicrophone-notification-icon {
3678     list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-16@2x.png);
3679   }
3680
3681   .webRTC-sharingMicrophone-notification-icon,
3682   #webRTC-sharingMicrophone-notification-icon {
3683     list-style-image: url(chrome://browser/skin/webRTC-sharingMicrophone-16@2x.png);
3684   }
3685
3686   .webRTC-shareScreen-notification-icon,
3687   #webRTC-shareScreen-notification-icon {
3688     list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16@2x.png);
3689   }
3690
3691   .webRTC-sharingScreen-notification-icon,
3692   #webRTC-sharingScreen-notification-icon {
3693     list-style-image: url(chrome://browser/skin/webRTC-sharingScreen-16@2x.png);
3694   }
3695
3696   .popup-notification-icon[popupid="webRTC-sharingDevices"],
3697   .popup-notification-icon[popupid="webRTC-shareDevices"] {
3698     list-style-image: url(chrome://browser/skin/webRTC-shareDevice-64@2x.png);
3699   }
3700
3701   .popup-notification-icon[popupid="webRTC-sharingMicrophone"],
3702   .popup-notification-icon[popupid="webRTC-shareMicrophone"] {
3703     list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-64@2x.png);
3704   }
3705
3706   .popup-notification-icon[popupid="webRTC-sharingScreen"],
3707   .popup-notification-icon[popupid="webRTC-shareScreen"] {
3708     list-style-image: url(chrome://browser/skin/webRTC-shareScreen-64@2x.png);
3709   }
3710 }
3711
3712 /* === END notification-icons.inc.css === */
3713
3714 .popup-notification-body[popupid="addon-progress"],
3715 .popup-notification-body[popupid="addon-install-confirmation"] {
3716   width: 28em;
3717   max-width: 28em;
3718 }
3719
3720 /* Translation infobar */
3721
3722 /* === BEGIN infobar.inc.css === */
3723
3724 notification[value="translation"] .messageImage {
3725   list-style-image: url("chrome://browser/skin/translation-16.png");
3726   -moz-image-region: rect(0, 32px, 16px, 16px);
3727 }
3728
3729 @media (min-resolution: 1.25dppx) {
3730   notification[value="translation"] .messageImage {
3731     list-style-image: url("chrome://browser/skin/translation-16@2x.png");
3732     -moz-image-region: rect(0, 64px, 32px, 32px);
3733   }
3734 }
3735
3736 notification[value="translation"][state="translating"] .messageImage {
3737   list-style-image: url("chrome://browser/skin/translating-16.png");
3738   -moz-image-region: auto;
3739 }
3740
3741 @media (min-resolution: 1.25dppx) {
3742   notification[value="translation"][state="translating"] .messageImage {
3743     list-style-image: url("chrome://browser/skin/translating-16@2x.png");
3744   }
3745 }
3746
3747 notification[value="translation"] hbox[anonid="details"] {
3748   overflow: hidden;
3749 }
3750
3751 notification[value="translation"] button,
3752 notification[value="translation"] menulist {
3753   min-width: 0;
3754 }
3755
3756 notification[value="translation"] menulist > .menulist-dropmarker {
3757 }
3758
3759 .translation-menupopup arrowscrollbox {
3760   padding-bottom: 0;
3761 }
3762
3763 .translation-attribution {
3764   cursor: pointer;
3765   -moz-box-align: end;
3766   font-size: small;
3767 }
3768
3769 .translation-attribution > label {
3770   margin-bottom: 0;
3771 }
3772
3773 .translation-attribution > image {
3774   width: 70px;
3775 }
3776
3777 .translation-welcome-panel {
3778   width: 305px;
3779 }
3780
3781 .translation-welcome-logo {
3782   height: 32px;
3783   width: 32px;
3784   list-style-image: url(chrome://browser/skin/translation-16@2x.png);
3785   -moz-image-region: rect(0, 64px, 32px, 32px);
3786 }
3787
3788 .translation-welcome-content {
3789   -moz-margin-start: 16px;
3790 }
3791
3792 .translation-welcome-headline {
3793   font-size: larger;
3794   font-weight: bold;
3795 }
3796
3797 .translation-welcome-body {
3798   padding: 1em 0;
3799   margin: 0 0;
3800 }
3801
3802 /* === END infobar.inc.css === */
3803
3804 notification[value="translation"] {
3805   min-height: 40px;
3806 }
3807
3808 .translation-menupopup {
3809   -moz-appearance: none;
3810 }
3811
3812 /* Loop/ Hello browser styles */
3813
3814 notification[value="loop-sharing-notification"] .button-menubutton-button {
3815   min-width: 0;
3816   border: 0;
3817   margin: 0;
3818 }
3819
3820 notification[value="loop-sharing-notification"] .messageImage {
3821   list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16.png);
3822 }
3823
3824 /* Bookmarks roots menu-items */
3825 #subscribeToPageMenuitem:not([disabled]),
3826 #subscribeToPageMenupopup,
3827 #BMB_subscribeToPageMenuitem:not([disabled]),
3828 #BMB_subscribeToPageMenupopup {
3829   list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
3830 }
3831
3832 #bookmarksToolbarFolderMenu,
3833 #BMB_bookmarksToolbar,
3834 #panelMenu_bookmarksToolbar {
3835   list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
3836   -moz-image-region: auto;
3837 }
3838
3839 #BMB_unsortedBookmarks,
3840 #panelMenu_unsortedBookmarks {
3841   list-style-image: url("chrome://communicator/skin/bookmarks/unsortedBookmarks.png");
3842   -moz-image-region: auto;
3843 }
3844
3845 #panelMenu_pocket,
3846 #menu_pocket,
3847 #BMB_pocket {
3848   list-style-image: url("chrome://browser/content/pocket/panels/img/pocketmenuitem16.png");
3849 }
3850
3851 /* ::::: Keyboard UI Panel ::::: */
3852
3853 .KUI-panel {
3854   color: #FF9F00;
3855   border-style: none;
3856   border-radius: 20px;
3857 }
3858
3859 .KUI-panel[level="top"] {
3860   /*background-color: rgba(27%,27%,27%,.65);*/
3861 }
3862
3863 /* Ctrl-Tab */
3864
3865 #ctrlTab-panel {
3866   padding: 20px 10px 10px;
3867   font-weight: bold;
3868 }
3869
3870 .ctrlTab-favicon[src] {
3871   background-color: #000000;
3872   width: 20px;
3873   height: 20px;
3874   padding: 2px;
3875 }
3876
3877 .ctrlTab-preview-inner > .tabPreview-canvas {
3878 }
3879
3880 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
3881   margin-bottom: 2px;
3882 }
3883
3884 .ctrlTab-preview-inner {
3885   padding-bottom: 10px;
3886 }
3887
3888 #ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
3889   padding: 10px;
3890   background-color: #000000;
3891   border-radius: .5em;
3892 }
3893
3894 .ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
3895   color: white;
3896   background-color: #000000;
3897   text-shadow: none;
3898   padding: 8px;
3899   border: 2px solid #9C9CFF;
3900   border-radius: .5em;
3901 }
3902
3903 .ctrlTab-preview:not(#ctrlTab-showAll):focus > * > .ctrlTab-preview-inner {
3904   margin: -10px -10px 0;
3905 }
3906
3907 #ctrlTab-showAll {
3908   margin-top: .5em;
3909 }
3910
3911 /* Sync Panel */
3912
3913 .sync-panel-icon {
3914   height:32px;
3915   width: 32px;
3916   background: url("chrome://browser/content/abouthome/sync.png") top left no-repeat;
3917 }
3918
3919 .sync-panel-inner {
3920   width: 0;
3921   padding-left: 10px;
3922 }
3923
3924 .sync-panel-button-box {
3925   margin-top: 1em;
3926 }
3927
3928 #sync-start-panel-title {
3929   font-size: 120%;
3930   font-weight: bold;
3931   margin-bottom: 5px;
3932 }
3933
3934 #sync-start-panel-subtitle {
3935   margin-bottom: 0;
3936 }
3937
3938 /* Status panel */
3939
3940 .statuspanel-label {
3941   margin: 0;
3942   padding: 2px 4px;
3943   background: #404000;
3944   border: 1px none #9C9CFF;
3945   border-top-style: solid;
3946   color: #FF9F00;
3947   text-shadow: none;
3948 }
3949
3950 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
3951 .statuspanel-label:-moz-locale-dir(rtl)[mirror] {
3952   border-right-style: solid;
3953   border-top-right-radius: .3em;
3954   margin-right: 1em;
3955 }
3956
3957 .statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
3958 .statuspanel-label:-moz-locale-dir(ltr)[mirror] {
3959   border-left-style: solid;
3960   border-top-left-radius: .3em;
3961   margin-left: 1em;
3962 }
3963
3964 /* HACK to abolish devily color on main content */
3965
3966 #content {
3967   background-color: transparent !important;
3968 }
3969
3970 /* === BEGIN fullscreen/warning.inc.css === */
3971
3972 html|*#fullscreen-warning {
3973   align-items: center;
3974   background: rgba(0, 0, 0, 0.9);
3975   border: 2px solid #A09090;
3976   box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
3977   border-radius: 8px;
3978   padding: 24px 16px;
3979   font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3980 }
3981
3982 html|*#fullscreen-warning::before {
3983   margin: 0;
3984   width: 24px; height: 24px;
3985 }
3986
3987 html|*#fullscreen-warning.verifiedIdentity::before,
3988 html|*#fullscreen-warning.verifiedDomain::before {
3989   content: url("chrome://browser/skin/fullscreen/secure.svg");
3990 }
3991
3992 html|*#fullscreen-warning.unknownIdentity::before {
3993   content: url("chrome://browser/skin/fullscreen/insecure.svg");
3994 }
3995
3996 html|*#fullscreen-domain-text,
3997 html|*#fullscreen-generic-text {
3998   font-size: 21px;
3999   font-weight: lighter;
4000   color: #A09090;
4001   margin: 0 16px;
4002 }
4003
4004 html|*#fullscreen-domain {
4005   font-weight: bold;
4006   margin: 0;
4007 }
4008
4009 html|*#fullscreen-exit-button {
4010   padding: 5px 30px;
4011   font: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
4012   font-size: 14px;
4013   font-weight: lighter;
4014   margin: 0;
4015   box-sizing: content-box;
4016
4017   border-radius: 300px;
4018   border: none;
4019   background-color: #C09070;
4020   color: #000000;
4021 }
4022
4023 /* === END fullscreen/warning.inc.css === */
4024
4025 /* === BEGIN commandline.inc.css === */
4026
4027 /* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS.
4028    We are copy/pasting variables from light-theme and dark-theme,
4029    since they aren't loaded in this context (within browser.css). */
4030 :root #developer-toolbar {
4031   --gcli-background-color: #000000; /* --theme-toolbar-background */
4032   --gcli-input-background: rgba(0, 0, 0, .75); /* --theme-tab-toolbar-background */
4033   --gcli-input-focused-background: #000000; /* --theme-sidebar-background */
4034   --gcli-input-color: #FF9F00; /* --theme-body-color-alt */
4035   --gcli-border-color: #9C9CFF; /* --theme-splitter-color */
4036   --selection-background: #008484; /* --theme-selection-background */
4037   --selection-color: #000000; /* --theme-selection-color */
4038 }
4039
4040 /* Developer toolbar */
4041
4042 #developer-toolbar {
4043   border-top: 3px solid var(--gcli-background-color);