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