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