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