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");
2035 }
2036
2037 #identity-box[sharing="microphone"] > #sharing-icon {
2038   list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone");
2039 }
2040
2041 #identity-box[sharing="screen"] > #sharing-icon {
2042   list-style-image: url("chrome://browser/skin/notification-icons.svg#screen");
2043
2044 }
2045
2046 #identity-box[sharing] > #sharing-icon {
2047   display: -moz-box;
2048   filter: url("chrome://browser/skin/filters.svg#fill");
2049   fill: #FF0000;
2050   animation-delay: -1.5s;
2051 }
2052
2053 #identity-box[sharing] > #identity-icon,
2054 #sharing-icon {
2055   animation: 3s linear pulse infinite;
2056 }
2057
2058 @keyframes pulse {
2059   0%, 16.66%, 83.33%, 100% {
2060     opacity: 0;
2061   }
2062   33.33%, 66.66% {
2063     opacity: 1;
2064   }
2065 }
2066
2067 /* TRACKING PROTECTION ICON */
2068
2069 #tracking-protection-icon {
2070   width: 16px;
2071   height: 16px;
2072   margin-inline-start: 2px;
2073   margin-inline-end: 0;
2074 }
2075
2076 #tracking-protection-icon[animate] {
2077   transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
2078 }
2079
2080 #tracking-protection-icon:not([state]) {
2081   margin-inline-end: -18px;
2082   pointer-events: none;
2083   opacity: 0;
2084   /* Only animate the shield in, when it disappears hide it immediately. */
2085   transition: none;
2086 }
2087
2088 #urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
2089   visibility: collapse;
2090 }
2091
2092 /* CONNECTION ICON */
2093
2094 #connection-icon {
2095   width: 16px;
2096   height: 16px;
2097   margin-inline-start: 2px;
2098   visibility: collapse;
2099 }
2100
2101 /* === END identity-block.inc.css === */
2102
2103 #page-proxy-favicon {
2104   -moz-image-region: rect(0, 16px, 16px, 0);
2105 }
2106
2107 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
2108 /*  margin-inline-end: 1px;*/
2109 }
2110
2111 #identity-box:hover > #page-proxy-favicon {
2112   -moz-image-region: rect(0, 32px, 16px, 16px);
2113 }
2114
2115 #identity-box:hover:active > #page-proxy-favicon,
2116 #identity-box[open=true] > #page-proxy-favicon {
2117   -moz-image-region: rect(0, 48px, 16px, 32px);
2118 }
2119
2120 #identity-box:hover {
2121   background-color: #FFCF00;
2122   color: #000000;
2123 }
2124
2125 #identity-box:hover:active,
2126 #identity-box[open=true] {
2127   background-color: #FF9F00;
2128   color: #000000;
2129 }
2130
2131 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover,
2132 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active,
2133 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] {
2134   background-color: #A09090;
2135   color: #000000;
2136 }
2137
2138 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover > #identity-icon-labels,
2139 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active > #identity-icon-labels,
2140 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] > #identity-icon-labels {
2141   color: #000000;
2142 }
2143
2144 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover,
2145 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active,
2146 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] {
2147   background-color: #008484;
2148   color: #000000;
2149 }
2150
2151 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover > #identity-icon-labels,
2152 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active > #identity-icon-labels,
2153 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] > #identity-icon-labels {
2154   color: #000000;
2155 }
2156
2157 #identity-box:hover > image,
2158 #identity-box:hover:active > image,
2159 #identity-box[open=true] > image {
2160   filter: url(chrome://global/skin/filters.svg#active-icon-state);
2161 }
2162
2163 /* autocomplete */
2164
2165 #treecolAutoCompleteImage {
2166   max-width: 36px;
2167 }
2168
2169 /*
2170 .autocomplete-richlistbox {
2171   padding: 4px;
2172 }
2173
2174 .autocomplete-richlistitem {
2175   height: 30px;
2176   min-height: 30px;
2177   font: message-box;
2178   border-radius: 2px;
2179   border: 1px solid transparent;
2180 }
2181
2182 .autocomplete-richlistitem[selected=true] {
2183   background-color: hsl(210, 80%, 52%);
2184 }
2185 */
2186 .ac-title {
2187   font-size: 14px;
2188 /*  color: hsl(0, 0%, 0%);*/
2189 }
2190
2191 .ac-tags {
2192   font-size: 12px;
2193 }
2194 /*
2195 html|span.ac-tag {
2196   background-color: hsl(216, 0%, 88%);
2197   color: hsl(0, 0%, 0%);
2198   border-radius: 2px;
2199   border: 1px solid transparent;
2200   padding: 0 1px;
2201 }
2202 */
2203
2204 .ac-separator,
2205 .ac-url,
2206 .ac-action {
2207   font-size: 12px;
2208 }
2209
2210 .ac-separator {
2211 /*  color: hsl(0, 0%, 50%);*/
2212 }
2213
2214 .ac-url {
2215   color: #9C9CFF;
2216 }
2217
2218 .ac-action {
2219   color: #9C9CFF;
2220 }
2221
2222 .ac-title[selected=true],
2223 .ac-separator[selected],
2224 .ac-url[selected=true],
2225 .ac-action[selected=true] {
2226   color: #000000;
2227 }
2228
2229 .ac-tags-text[selected] > html|span.ac-tag {
2230   background-color: #A09090;
2231   color: #000000;
2232 }
2233
2234 html|span.ac-emphasize-text-title,
2235 html|span.ac-emphasize-text-tag,
2236 html|span.ac-emphasize-text-url {
2237   font-weight: 600;
2238 }
2239
2240 .ac-type-icon[type=bookmark] {
2241   list-style-image: url("chrome://browser/skin/urlbar-star.svg#star");
2242 }
2243
2244 .ac-type-icon[type=bookmark][selected][current] {
2245 /*  list-style-image: url("chrome://browser/skin/urlbar-star.svg#star-inverted");*/
2246 }
2247
2248 .ac-result-type-bookmark,
2249 .autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) {
2250   list-style-image: url("chrome://browser/skin/places/bookmark.png");
2251   -moz-image-region: rect(0px 16px 16px 0px);
2252   width: 16px;
2253   height: 16px;
2254 }
2255
2256 richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark,
2257 .autocomplete-treebody::-moz-tree-image(selected, current, bookmark, treecolAutoCompleteImage) {
2258 /*  -moz-image-region: rect(0px 48px 16px 32px);*/
2259 }
2260
2261 .ac-type-icon[type=keyword],
2262 .ac-site-icon[type=searchengine],
2263 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage) {
2264   list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon");
2265 }
2266
2267 .ac-type-icon[type=keyword][selected],
2268 .ac-site-icon[type=searchengine][selected],
2269 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage, selected) {
2270   list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon-inverted");
2271 }
2272
2273 .ac-result-type-tag,
2274 .autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) {
2275   list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
2276   width: 16px;
2277   height: 16px;
2278 }
2279
2280 .ac-type-icon[type=switchtab],
2281 .ac-type-icon[type=remotetab] {
2282   list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab");
2283 }
2284
2285 .ac-type-icon[type=switchtab][selected],
2286 .ac-type-icon[type=remotetab][selected] {
2287   list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab-inverted");
2288 }
2289
2290 .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
2291 .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
2292 {
2293   color: #8050B0;
2294   font-size: smaller;
2295 }
2296
2297 .autocomplete-treebody::-moz-tree-cell(suggesthint) {
2298   border-top: 1px solid #9C9CFF;
2299 }
2300
2301 /* combined go/reload/stop button in location bar */
2302
2303 #urlbar-go-button,
2304 #urlbar-reload-button,
2305 #urlbar-stop-button {
2306   border-style: none;
2307   list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
2308 /*  margin: 0 9px; */
2309   margin-inline-start: 0px;
2310   border-inline-start: 1px solid var(--urlbar-separator-color);
2311   border-image: linear-gradient(transparent 15%,
2312                                 var(--urlbar-separator-color) 15%,
2313                                 var(--urlbar-separator-color) 85%,
2314                                 transparent 85%);
2315   border-image-slice: 1;
2316 }
2317
2318 #urlbar:-moz-locale-dir(ltr) > toolbarbutton {
2319   border-top-left-radius: 0px;
2320   border-bottom-left-radius: 0px;
2321 }
2322
2323 #urlbar:-moz-locale-dir(rtl) > toolbarbutton {
2324   border-top-right-radius: 0px;
2325   border-bottom-right-radius: 0px;
2326 }
2327
2328 #urlbar > toolbarbutton:not([disabled=true]):active:hover,
2329 #urlbar-reload-button:not(:hover) {
2330   border-inline-start-style: none;
2331   padding-inline-start: 3px;
2332 }
2333
2334 #urlbar-reload-button {
2335   -moz-image-region: rect(0px, 14px, 14px, 0px);
2336 }
2337
2338 #urlbar-reload-button[disabled=true] {
2339   -moz-image-region: rect(28px, 14px, 42px, 0px);
2340 }
2341
2342 #urlbar-reload-button:not([disabled=true]):hover {
2343   -moz-image-region: rect(14px, 14px, 28px, 0px);
2344 }
2345
2346 #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2347   transform: scaleX(-1);
2348 }
2349
2350 #urlbar-go-button {
2351   -moz-image-region: rect(0, 42px, 14px, 28px);
2352 }
2353
2354 #urlbar-go-button:hover {
2355   -moz-image-region: rect(14px, 42px, 28px, 28px);
2356 }
2357
2358 #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2359   transform: scaleX(-1);
2360 }
2361
2362 #urlbar-stop-button {
2363   -moz-image-region: rect(0px, 28px, 14px, 14px);
2364 }
2365
2366 #urlbar-stop-button:hover {
2367   -moz-image-region: rect(14px, 28px, 28px, 14px);
2368 }
2369
2370 @media (min-resolution: 1.1dppx) {
2371   #urlbar-go-button,
2372   #urlbar-reload-button,
2373   #urlbar-stop-button {
2374     list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
2375   }
2376
2377   #urlbar-go-button > .toolbarbutton-icon,
2378   #urlbar-reload-button > .toolbarbutton-icon,
2379   #urlbar-stop-button > .toolbarbutton-icon {
2380     width: 14px;
2381   }
2382
2383   #urlbar-go-button {
2384     -moz-image-region: rect(0, 84px, 28px, 56px);
2385   }
2386
2387   #urlbar-go-button:hover {
2388     -moz-image-region: rect(28px, 84px, 56px, 56px);
2389   }
2390
2391   #urlbar-go-button:hover:active {
2392     -moz-image-region: rect(56px, 84px, 84px, 56px);
2393   }
2394
2395   #urlbar-reload-button {
2396     -moz-image-region: rect(0, 28px, 28px, 0);
2397   }
2398
2399   #urlbar-reload-button:not([disabled]):hover {
2400     -moz-image-region: rect(28px, 28px, 56px, 0);
2401   }
2402
2403   #urlbar-reload-button:not([disabled]):hover:active {
2404     -moz-image-region: rect(56px, 28px, 84px, 0);
2405   }
2406
2407   #urlbar-stop-button {
2408     -moz-image-region: rect(0, 56px, 28px, 28px);
2409   }
2410
2411   #urlbar-stop-button:not([disabled]):hover {
2412     -moz-image-region: rect(28px, 56px, 56px, 28px);
2413   }
2414
2415   #urlbar-stop-button:hover:active {
2416     -moz-image-region: rect(56px, 56px, 84px, 28px);
2417   }
2418 }
2419
2420 /* popup blocker button */
2421
2422 #page-report-button {
2423   list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
2424   -moz-image-region: rect(0, 16px, 16px, 0);
2425 }
2426
2427 #page-report-button:hover ,
2428 #page-report-button:hover:active,
2429 #page-report-button[open="true"] {
2430   -moz-image-region: rect(0, 32px, 16px, 16px);
2431 }
2432
2433 /* Reader mode button */
2434
2435 #reader-mode-button {
2436   list-style-image: url("chrome://browser/skin/readerMode.svg");
2437   -moz-image-region: rect(0, 16px, 16px, 0);
2438 }
2439
2440 #reader-mode-button:hover,
2441 #reader-mode-button[readeractive]:hover {
2442   -moz-image-region: rect(0, 32px, 16px, 16px);
2443 }
2444
2445 #reader-mode-button:hover:active,
2446 #reader-mode-button[readeractive] {
2447   -moz-image-region: rect(0, 48px, 16px, 32px);
2448 }
2449
2450 /* social share panel */
2451
2452 /* === BEGIN social.inc.css === */
2453
2454 #manage-share-providers {
2455   list-style-image: url("chrome://browser/skin/ToolbarFx.png");
2456   -moz-image-region: rect(0, 468px, 18px, 450px);
2457 }
2458
2459 #manage-share-providers > .toolbarbutton-icon {
2460   min-height: 18px;
2461   min-width: 18px;
2462 }
2463
2464 .social-panel > .panel-arrowcontainer > .panel-arrowcontent {
2465   padding: 0;
2466 }
2467 /* fixup corners for share panel */
2468 .social-panel > .social-panel-frame {
2469   border-radius: inherit;
2470 }
2471
2472 /* === END social.inc.css === */
2473
2474 .social-panel-frame {
2475   border-radius: inherit;
2476 }
2477
2478 .social-share-frame {
2479   min-width: 756px;
2480   height: 150px;
2481 }
2482
2483 #share-container {
2484   min-width: 756px;
2485   background-color: white;
2486   background-repeat: no-repeat;
2487   background-position: center center;
2488 }
2489 #share-container[loading] {
2490   background-image: url(chrome://browser/skin/tabbrowser/pendingpaint.png);
2491 }
2492 #share-container > browser {
2493   transition: opacity 150ms ease-in-out;
2494   opacity: 1;
2495 }
2496 #share-container[loading] > browser {
2497   opacity: 0;
2498 }
2499
2500 .social-share-toolbar {
2501   border-bottom: 1px solid #9C9CFF;
2502   padding: 2px;
2503 }
2504
2505 #social-share-provider-buttons {
2506   padding: 0;
2507   margin: 0;
2508 }
2509
2510 .share-provider-button {
2511   padding: 5px;
2512   margin: 2px;
2513 }
2514
2515 .share-provider-button > .toolbarbutton-text {
2516   display: none;
2517 }
2518 .share-provider-button > .toolbarbutton-icon {
2519   width: 16px;
2520   min-height: 16px;
2521   max-height: 16px;
2522 }
2523
2524 #social-share-panel {
2525   min-height: 100px;
2526   min-width: 766px;
2527 }
2528
2529 #share-container,
2530 .social-share-frame {
2531   border-top-left-radius: 0;
2532   border-bottom-left-radius: inherit;
2533   border-top-right-radius: 0;
2534   border-bottom-right-radius: inherit;
2535 }
2536
2537 #social-share-panel > .social-share-toolbar {
2538   border-top-left-radius: inherit;
2539   border-top-right-radius: inherit;
2540 }
2541
2542 #social-share-provider-buttons {
2543   border-top-left-radius: inherit;
2544   border-top-right-radius: inherit;
2545 }
2546
2547 /* bookmarks menu-button */
2548
2549 #bookmarks-menu-button.bookmark-item {
2550   list-style-image: url("chrome://browser/skin/places/bookmark.png");
2551   -moz-image-region: rect(0px 16px 16px 0px);
2552 }
2553
2554 #bookmarks-menu-button.bookmark-item[starred] {
2555   -moz-image-region: rect(0px 32px 16px 16px);
2556 }
2557
2558 #nav-bar #bookmarks-menu-button[cui-areatype="toolbar"]:not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
2559   padding-top: 2px;
2560   padding-bottom: 2px;
2561 }
2562
2563 #BMB_bookmarksPopup[side="top"],
2564 #BMB_bookmarksPopup[side="bottom"] {
2565   margin-left: -20px;
2566   margin-right: -20px;
2567 }
2568
2569 #BMB_bookmarksPopup[side="left"],
2570 #BMB_bookmarksPopup[side="right"] {
2571   margin-top: -20px;
2572   margin-bottom: -20px;
2573 }
2574
2575 /* bookmarking panel */
2576
2577 #editBookmarkPanelStarIcon {
2578   list-style-image: url("chrome://browser/skin/places/starred48.png");
2579   width: 48px;
2580   height: 48px;
2581 }
2582
2583 #editBookmarkPanelStarIcon[unstarred] {
2584   list-style-image: url("chrome://browser/skin/places/unstarred48.png");
2585 }
2586
2587 #editBookmarkPanelTitle {
2588   font-size: 130%;
2589 }
2590
2591 #editBookmarkPanelHeader,
2592 #editBookmarkPanelContent {
2593   margin-bottom: .5em;
2594 }
2595
2596 /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
2597 #editBMPanel_folderTree {
2598   min-width: 27em;
2599 }
2600
2601 /* ::::: content area ::::: */
2602
2603 #sidebar-box {
2604   background-color: #9C9CFF;
2605   color: #000000;
2606 }
2607
2608 #sidebar {
2609   background-color: #000000;
2610 }
2611
2612 #sidebar-splitter {
2613   margin-inline-start: 0;
2614 }
2615
2616 #sidebar-header {
2617   color: #000000;
2618   padding: 2px;
2619 }
2620
2621 #sidebar-title {
2622   padding-inline-start: 0px;
2623 }
2624
2625 #sidebar-header > .close-icon {
2626 /*  padding: 4px 2px;
2627   margin: 0;
2628   border: none;*/
2629   list-style-image: url("chrome://global/skin/icons/close-button.gif");
2630 }
2631
2632 #sidebar-header > .close-icon:hover,
2633 #sidebar-header > .close-icon:hover:active {
2634   list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2635 }
2636
2637 #sidebar-splitter:-moz-locale-dir(ltr),
2638 #sidebar:-moz-locale-dir(ltr) {
2639   border-radius: 0 5px 0 0;
2640 }
2641
2642 #sidebar-splitter:-moz-locale-dir(rtl),
2643 #sidebar:-moz-locale-dir(rtl) {
2644   border-radius: 5px 0 0 0;
2645 }
2646
2647 .browserContainer > findbar {
2648 /*
2649   background-color: -moz-dialog;
2650   color: -moz-DialogText;
2651 */
2652 }
2653
2654 /* Tabstrip */
2655
2656 #TabsToolbar {
2657   min-height: 0;
2658   padding: 0;
2659   -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
2660 }
2661
2662 #TabsToolbar .toolbar-holder {
2663   background-color: #000000; /* correct effect of being an actual toolbar */
2664 }
2665
2666 #main-window[disablechrome] #TabsToolbar,
2667 #TabsToolbar[tabsontop="false"] {
2668   border-bottom: 1px solid #008484;
2669 }
2670
2671 /* === BEGIN tabs.inc.css === */
2672
2673 :root {
2674   /* --tab-toolbar-navbar-overlap: 1px; */
2675   /* --navbar-tab-toolbar-highlight-overlap: 1px; */
2676   /* --tab-min-height: 31px; */
2677 }
2678 #TabsToolbar {
2679   /* --tab-stroke-background-size: auto 100%; */
2680 }
2681
2682 .tabbrowser-tab,
2683 .tabs-newtab-button,
2684 #TabsToolbar > #new-tab-button {
2685   margin-top: 0px;
2686 }
2687
2688 .tabbrowser-tab {
2689   padding: 1px 4px 2px;
2690 }
2691
2692 .tabbrowser-tab:first-of-type {
2693   margin-inline-start: 2px;
2694 }
2695
2696 .tabs-newtab-button,
2697 #TabsToolbar > #new-tab-button,
2698 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
2699 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
2700   border-radius: 8px 8px 0px 0px;
2701   margin-inline-start: 0;
2702 }
2703
2704 .tabs-newtab-button:not(:hover),
2705 #TabsToolbar > #new-tab-button:not(:hover),
2706 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
2707 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
2708   background-color: #C09070;
2709 }
2710
2711 /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
2712 .tabbrowser-tab[visuallyselected=true] {
2713 /*  position: relative;
2714   z-index: 2;*/
2715 }
2716
2717 .tab-background-middle {
2718 }
2719
2720 .tab-content {
2721 }
2722
2723 .tab-content[pinned] {
2724 }
2725
2726 .tab-throbber,
2727 .tab-icon-image,
2728 .tab-sharing-icon-overlay,
2729 .tab-icon-sound,
2730 .tab-close-button {
2731 }
2732
2733 .tab-throbber,
2734 .tab-sharing-icon-overlay,
2735 .tab-icon-image {
2736   height: 16px;
2737   width: 16px;
2738   margin-inline-end: 3px;
2739 }
2740
2741 .tab-icon-image {
2742   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
2743 }
2744
2745 .tab-icon-image[sharing]:not([selected]),
2746 .tab-sharing-icon-overlay {
2747   animation: 3s linear pulse infinite;
2748 }
2749
2750 @keyframes pulse {
2751   0%, 16.66%, 83.33%, 100% {
2752     opacity: 0;
2753   }
2754   33.33%, 66.66% {
2755     opacity: 1;
2756   }
2757 }
2758
2759 .tab-icon-image[sharing]:not([selected]) {
2760   animation-delay: -1.5s;
2761 }
2762
2763 .tab-sharing-icon-overlay {
2764   /* 16px of the icon + 6px of margin-inline-end of .tab-icon-image */
2765   margin-inline-start: -22px;
2766   position: relative;
2767 }
2768
2769 .tab-sharing-icon-overlay[sharing="camera"] {
2770   list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing");
2771 }
2772
2773 .tab-sharing-icon-overlay[sharing="microphone"] {
2774   list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing");
2775 }
2776
2777 .tab-sharing-icon-overlay[sharing="screen"] {
2778   list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing");
2779 }
2780
2781 .tab-icon-overlay {
2782   width: 16px;
2783   height: 16px;
2784   margin-top: -8px;
2785   margin-inline-start: -15px;
2786   margin-inline-end: -1px;
2787   position: relative;
2788 }
2789
2790 .tab-icon-overlay[crashed] {
2791   list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
2792 }
2793
2794 .tab-icon-overlay[soundplaying],
2795 .tab-icon-overlay[muted]:not([crashed]) {
2796   border-radius: 10px;
2797 }
2798
2799 .tab-icon-overlay[soundplaying]:hover,
2800 .tab-icon-overlay[muted]:hover {
2801   background-color: #FFCF00;
2802 }
2803
2804 .tab-icon-overlay[soundplaying] {
2805   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio");
2806 }
2807
2808 .tab-icon-overlay[muted]:not([crashed]) {
2809   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
2810 }
2811
2812 #TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not(:hover) {
2813   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white");
2814 }
2815
2816
2817 #TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not(:hover) {
2818   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted");
2819 }
2820
2821 .tab-throbber[busy] {
2822   list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png");
2823 }
2824
2825 .tab-throbber[progress] {
2826   list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.png");
2827 }
2828
2829 @media (min-resolution: 1.1dppx) {
2830   .tab-throbber[busy] {
2831     list-style-image: url("chrome://communicator/skin/brand/throbber-anim-connect.png");
2832   }
2833
2834   .tab-throbber[progress] {
2835     list-style-image: url("chrome://communicator/skin/brand/throbber-anim.png");
2836   }
2837 }
2838
2839 .tab-throbber[pinned],
2840 .tab-icon-image[pinned] {
2841   margin-inline-start: 2px;
2842   margin-inline-end: 2px;
2843 }
2844
2845 .tab-label {
2846   /* this needs to add up to the 16px of the icon image */
2847   height: 12px;
2848   margin-top: 2px !important;
2849   margin-bottom: 2px !important;
2850 }
2851
2852 .tab-icon-sound {
2853   margin-inline-start: 4px;
2854   width: 16px;
2855   height: 16px;
2856   padding: 0;
2857 }
2858
2859 .tab-icon-sound[soundplaying],
2860 .tab-icon-sound[muted] {
2861   list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio);
2862   filter: url(chrome://browser/skin/filters.svg#fill);
2863   fill: currentColor;
2864 }
2865
2866 .tab-icon-sound[muted] {
2867   list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted);
2868 }
2869
2870 .tab-close-button {
2871   margin-top: 1px;
2872   padding: 0;
2873 }
2874
2875 .tab-background,
2876 .tabs-newtab-button {
2877   /* overlap the tab curves */
2878 }
2879
2880 .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
2881 }
2882
2883 /* Tab Overflow */
2884 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
2885 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
2886 }
2887
2888 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:-moz-locale-dir(rtl),
2889 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:-moz-locale-dir(ltr) {
2890 }
2891
2892 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]) {
2893 }
2894
2895 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
2896 }
2897
2898 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator[collapsed],
2899 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator[collapsed] {
2900 }
2901
2902 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator,
2903 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator {
2904 }
2905
2906 .tab-background-start[selected=true]::after,
2907 .tab-background-start[selected=true]::before,
2908 .tab-background-start,
2909 .tab-background-end,
2910 .tab-background-end[selected=true]::after,
2911 .tab-background-end[selected=true]::before {
2912 }
2913
2914 .tabbrowser-tab:not([visuallyselected=true]),
2915 .tabbrowser-tab:-moz-lwtheme {
2916 }
2917
2918 /* tabbrowser-tab focus ring */
2919 .tabbrowser-tab:focus {
2920   outline: 1px dotted;
2921 }
2922
2923 /* Selected tab */
2924
2925 .tabbrowser-tab[visuallyselected="true"] {
2926 }
2927
2928 /* End selected tab */
2929
2930 /* Tab pointer-events */
2931 /*
2932 .tabbrowser-tab {
2933   pointer-events: none;
2934 }
2935
2936 .tab-background-middle,
2937 .tabs-newtab-button,
2938 .tab-icon-overlay[soundplaying],
2939 .tab-icon-overlay[muted]:not([crashed]),
2940 .tab-icon-sound,
2941 .tab-close-button {
2942   pointer-events: auto;
2943 }
2944 */
2945 /* Pinned tabs */
2946
2947 /*
2948 .tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
2949 .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
2950 */
2951 .tabbrowser-tab:-moz-any([image], [pinned]):-moz-any([attention], [titlechanged]):not([visuallyselected="true"]) {
2952   background-color: #E7ADE7;
2953 }
2954
2955 .tab-label[attention]:not([selected="true"]) {
2956   font-weight: bold;
2957 }
2958
2959 .tabbrowser-tab[pinned][titlechanged]:not([visuallyselected="true"]):hover {
2960   background-color: #3333FF;
2961   color: #000000;
2962 }
2963
2964 /* Tab separators */
2965 /*
2966 .tabbrowser-tab::after,
2967 .tabbrowser-tab::before {
2968   width: 1px;
2969   margin-inline-start: -1px;
2970   background-image: linear-gradient(transparent 5px,
2971                                     currentColor 5px,
2972                                     currentColor calc(100% - 4px),
2973                                     transparent calc(100% - 4px));
2974   opacity: 0.2;
2975 }
2976
2977 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::before,
2978 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::after {
2979   opacity: 0.4;
2980 }
2981 */
2982 /* Also show separators beside the selected tab when dragging it. */
2983 /*
2984 #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
2985 .tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
2986 #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after {
2987   content: "";
2988   display: -moz-box;
2989 }
2990 */
2991 /* New tab button */
2992
2993 .tabs-newtab-button {
2994   width: 28px;
2995   /* width: calc(36px + var(--tab-curve-width)); */
2996 }
2997 @media (min-resolution: 1.1dppx) {
2998   /* image preloading hack from like lowdpi styles */
2999   #tabbrowser-tabs::before {
3000   }
3001
3002   .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]),
3003   .tabs-newtab-button:hover {
3004   }
3005
3006   .tab-background-middle[selected=true] {
3007   }
3008
3009   .tab-background-start[selected=true]:-moz-locale-dir(ltr)::after,
3010   .tab-background-end[selected=true]:-moz-locale-dir(rtl)::after {
3011   }
3012
3013   .tab-background-end[selected=true]:-moz-locale-dir(ltr)::after,
3014   .tab-background-start[selected=true]:-moz-locale-dir(rtl)::after {
3015   }
3016
3017   .tab-icon-image {
3018     list-style-image: url("chrome://mozapps/skin/places/defaultFavicon@2x.png");
3019   }
3020 }
3021
3022 /* All tabs menupopup */
3023
3024 .alltabs-item[tabIsVisible]:not([_moz-menuactive="true"]) {
3025   background-color: #402800;
3026 }
3027
3028 .alltabs-endimage[soundplaying],
3029 .alltabs-endimage[muted] {
3030   list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio);
3031   filter: url(chrome://browser/skin/filters.svg#fill);
3032   fill: currentColor;
3033 }
3034
3035 .alltabs-endimage[muted] {
3036   list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted);
3037 }
3038
3039 /* === END tabs.inc.css === */
3040
3041 /* Tab DnD indicator */
3042 .tab-drop-indicator {
3043   list-style-image: url("chrome://browser/skin/tabbrowser/tabDragIndicator.png");
3044   margin-bottom: -11px;
3045 }
3046
3047 /* Tab close button */
3048 .tab-close-button {
3049   list-style-image: url("chrome://global/skin/icons/close-button.gif");
3050 }
3051
3052 .tab-close-button:hover,
3053 .tab-close-button:hover[selected="true"] {
3054   list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
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");
3060 }
3061
3062 /* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
3063
3064 .tabbrowser-arrowscrollbox > .scrollbutton-up,
3065 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3066   margin: 0;
3067   padding-top: 0;
3068   padding-bottom: 0;
3069   background-origin: border-box;
3070 }
3071
3072 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3073 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3074 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext,
3075 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext {
3076  }
3077
3078 .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
3079 .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
3080  }
3081
3082 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
3083 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
3084 /*  transform: scaleX(-1);*/
3085 }
3086
3087 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3088   transition: 1s background-color ease-out;
3089 }
3090
3091 .tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] {
3092   background-color: #008484;
3093 }
3094
3095 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]),
3096 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]) {
3097 /*  border-width: 0 2px 0 0;
3098   border-style: solid;
3099   border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;*/
3100 }
3101
3102 .tabs-newtab-button > .toolbarbutton-icon {
3103   margin-top: -1px;
3104   margin-bottom: -1px;
3105 }
3106
3107 .tabs-newtab-button,
3108 #TabsToolbar > #new-tab-button,
3109 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
3110 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
3111   list-style-image: url("chrome://browser/skin/tabbrowser/newtab.svg");
3112   -moz-image-region: auto;
3113 }
3114
3115 .tabs-newtab-button,
3116 .tabs-newtab-button:hover,
3117 #TabsToolbar > #new-tab-button,
3118 #TabsToolbar > #new-tab-button:hover {
3119 }
3120
3121 #main-window[tabsintitlebar]:not([inFullscreen]) .tabs-newtab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3122 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3123 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3124 .tabs-newtab-button:-moz-lwtheme-brighttext,
3125 #TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext,
3126 #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext {
3127 }
3128
3129 #TabsToolbar > #new-tab-button {
3130   width: 26px;
3131 }
3132
3133 #alltabs-button {
3134   list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
3135 }
3136
3137 #alltabs-button:hover,
3138 #alltabs-button:hover:active,
3139 #alltabs-button[open="true"] {
3140   list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
3141 }
3142
3143 #main-window[tabsintitlebar]:not([inFullscreen]) #alltabs-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3144 #alltabs-button:-moz-lwtheme-brighttext {
3145 }
3146
3147 #alltabs-button > .toolbarbutton-icon {
3148 /*  margin: 0 2px;*/
3149 }
3150
3151 #alltabs-button > .toolbarbutton-menu-dropmarker {
3152   display: none;
3153 }
3154
3155 /* All tabs menupopup */
3156 .alltabs-item > .menu-iconic-left > .menu-iconic-icon {
3157   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
3158   -moz-image-region: auto;
3159 }
3160
3161 .alltabs-item[selected="true"] {
3162   font-weight: bold;
3163 }
3164
3165 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3166   list-style-image: url("chrome://global/skin/icons/loading.png");
3167 }
3168
3169 @media (min-resolution: 1.1dppx) {
3170   .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3171     list-style-image: url("chrome://global/skin/icons/loading@2x.png");
3172   }
3173 }
3174
3175 toolbarbutton.chevron {
3176   list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
3177 }
3178
3179 toolbarbutton.chevron:hover {
3180   list-style-image: url("chrome://global/skin/toolbar/chevron-hover.gif") !important;
3181 }
3182 /*
3183 toolbar[brighttext] toolbarbutton.chevron {
3184   list-style-image: url("chrome://global/skin/toolbar/chevron-inverted.png") !important;
3185 }
3186 */
3187 toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
3188 toolbarbutton.chevron:-moz-locale-dir(rtl):hover > .toolbarbutton-icon {
3189   transform: scaleX(-1);
3190 }
3191
3192 toolbarbutton.chevron > .toolbarbutton-text,
3193 toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
3194   display: none;
3195 }
3196
3197 toolbarbutton.chevron > .toolbarbutton-icon {
3198   margin: 0;
3199 }
3200
3201 #sidebar-throbber[loading="true"] {
3202   list-style-image: url("chrome://global/skin/icons/loading.png");
3203   margin-inline-end: 4px;
3204 }
3205
3206 @media (min-resolution: 1.1dppx) {
3207   #sidebar-throbber[loading="true"] {
3208     list-style-image: url("chrome://global/skin/icons/loading@2x.png");
3209     width: 16px;
3210   }
3211 }
3212
3213 /* Bookmarks toolbar */
3214 #PlacesToolbarDropIndicator {
3215   list-style-image: url("chrome://communicator/skin/bookmarks/toolbarDropMarker.png");
3216 }
3217
3218 toolbarbutton.bookmark-item[dragover="true"][open="true"] {
3219   background-color: #008484 !important;
3220   color: #FFCF00 !important;
3221 }
3222
3223 /* rules for menupopup drop indicators */
3224 .menupopup-drop-indicator-bar {
3225   position: relative;
3226   /* these two margins must together compensate the indicator's height */
3227   margin-top: -1px;
3228   margin-bottom: -1px;
3229 }
3230
3231 .menupopup-drop-indicator {
3232   list-style-image: none;
3233   height: 2px;
3234   margin-inline-end: -4em;
3235   background-color: #008484;
3236 }
3237
3238 /* === BEGIN notification-icons.inc.css === */
3239
3240 #notification-popup-box {
3241   border-radius: 3px 0 0 3px;
3242   padding: 5px 0px;
3243   margin: -5px 0px;
3244   margin-inline-end: -5px;
3245   padding-inline-end: 5px;
3246 }
3247
3248 .notification-anchor-icon,
3249 #blocked-permissions-container > .blocked-permission-icon {
3250   width: 16px;
3251   height: 16px;
3252   margin-inline-start: 2px;
3253 }
3254
3255 /* This class can be used alone or in combination with the class defining the
3256    type of icon displayed. This rule must be defined before the others in order
3257    for its list-style-image to be overridden. */
3258 .notification-anchor-icon {
3259   list-style-image: url("chrome://global/skin/icons/information-16.png");
3260 }
3261
3262 .notification-anchor-icon:-moz-focusring {
3263   outline: 1px dotted #008484;
3264 }
3265
3266 @media (min-resolution: 1.1dppx) {
3267   .notification-anchor-icon {
3268     list-style-image: url(chrome://global/skin/icons/information-32.png);
3269   }
3270 }
3271
3272 .popup-notification-icon {
3273   width: 64px;
3274   height: 64px;
3275   margin-inline-end: 10px;
3276 }
3277
3278 .notification-anchor-icon:not(.plugin-blocked),
3279 #blocked-permissions-container > .blocked-permission-icon {
3280   filter: url(chrome://global/skin/filters.svg#fill);
3281   fill: currentColor;
3282 }
3283
3284 .notification-anchor-icon:not(.plugin-blocked):not(:hover) {
3285 }
3286
3287 /* INDIVIDUAL NOTIFICATIONS */
3288
3289 .popup-notification-icon[popupid="web-notifications"],
3290 .desktop-notification-icon {
3291   list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification);
3292 }
3293
3294 .desktop-notification-icon.blocked-permission-icon {
3295   list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification-blocked);
3296 }
3297
3298 .geo-icon {
3299   list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows);
3300 }
3301
3302 .geo-icon.blocked-permission-icon {
3303   list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-blocked);
3304 }
3305
3306 .popup-notification-icon[popupid="geolocation"] {
3307   list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-detailed);
3308 }
3309
3310 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
3311 .indexedDB-icon {
3312   list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB);
3313 }
3314
3315 .indexedDB-icon.blocked-permission-icon {
3316   list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB-blocked);
3317 }
3318
3319 .login-icon {
3320   list-style-image: url(chrome://browser/skin/notification-icons.svg#login);
3321 }
3322
3323 .popup-notification-icon[popupid="password"] {
3324   list-style-image: url(chrome://browser/skin/notification-icons.svg#login-detailed);
3325 }
3326
3327 .camera-icon,
3328 .popup-notification-icon[popupid="webRTC-shareDevices"] {
3329   list-style-image: url(chrome://browser/skin/notification-icons.svg#camera);
3330 }
3331
3332 .camera-icon.in-use {
3333   list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-sharing);
3334 }
3335
3336 .camera-icon.blocked-permission-icon {
3337   list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-blocked);
3338 }
3339
3340 .microphone-icon {
3341   list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone);
3342 }
3343
3344 .microphone-icon.in-use {
3345   list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-sharing);
3346 }
3347
3348 .microphone-icon.blocked-permission-icon {
3349   list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-blocked);
3350 }
3351
3352 .popup-notification-icon[popupid="webRTC-shareMicrophone"] {
3353   list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-detailed);
3354 }
3355
3356 .popup-notification-icon[popupid="webRTC-shareScreen"],
3357 .screen-icon {
3358   list-style-image: url(chrome://browser/skin/notification-icons.svg#screen);
3359 }
3360
3361 .screen-icon.in-use {
3362   list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-sharing);
3363 }
3364
3365 .screen-icon.blocked-permission-icon {
3366   list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-blocked);
3367 }
3368
3369 /* This icon has a block sign in it, so we don't need a blocked version. */
3370 .popup-icon {
3371   list-style-image: url("chrome://browser/skin/notification-icons.svg#popup");
3372 }
3373
3374 /* EME */
3375
3376 .popup-notification-icon[popupid="drmContentPlaying"],
3377 .drm-icon {
3378   list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
3379 }
3380
3381 .drm-icon:hover:active {
3382   list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed");
3383 }
3384
3385 #eme-notification-icon[firstplay=true] {
3386   animation: emeTeachingMoment 0.2s linear 0s 5 normal;
3387 }
3388
3389 @keyframes emeTeachingMoment {
3390   0% {transform: translateX(0); }
3391   25% {transform: translateX(3px) }
3392   75% {transform: translateX(-3px) }
3393   100% { transform: translateX(0); }
3394 }
3395
3396 /* INSTALL ADDONS */
3397
3398 .install-icon {
3399   list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#default);
3400 }
3401
3402 .popup-notification-icon[popupid="xpinstall-disabled"],
3403 .popup-notification-icon[popupid="addon-install-blocked"],
3404 .popup-notification-icon[popupid="addon-install-origin-blocked"] {
3405   list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg);
3406 }
3407
3408 .popup-notification-icon[popupid="addon-progress"] {
3409   list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg);
3410 }
3411
3412 .popup-notification-icon[popupid="addon-install-failed"] {
3413   list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg);
3414 }
3415
3416 .popup-notification-icon[popupid="addon-install-confirmation"] {
3417   list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg);
3418 }
3419
3420 #addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] {
3421   list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg);
3422 }
3423
3424 .popup-notification-icon[popupid="addon-install-complete"] {
3425   list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg);
3426 }
3427
3428 .popup-notification-icon[popupid="addon-install-restart"] {
3429   list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg);
3430 }
3431
3432 .popup-notification-icon[popupid="click-to-play-plugins"] {
3433   list-style-image: url(chrome://mozapps/skin/plugins/pluginBlocked-64.png);
3434 }
3435
3436 /* OFFLINE APPS */
3437
3438 .popup-notification-icon[popupid*="offline-app-requested"],
3439 .popup-notification-icon[popupid="offline-app-usage"] {
3440   list-style-image: url(chrome://global/skin/icons/question-64.png);
3441 }
3442
3443 /* PLUGINS */
3444
3445 .plugin-icon {
3446   list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
3447 }
3448
3449 .plugin-icon.plugin-blocked {
3450   list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
3451 }
3452
3453 #notification-popup-box[hidden] {
3454   /* Override display:none to make the pluginBlockedNotification animation work
3455      when showing the notification repeatedly. */
3456   display: -moz-box;
3457   visibility: collapse;
3458 }
3459
3460 #plugins-notification-icon.plugin-blocked[showing] {
3461   animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
3462 }
3463
3464 @keyframes pluginBlockedNotification {
3465   from {
3466     opacity: 0;
3467   }
3468   to {
3469     opacity: 1;
3470   }
3471 }
3472
3473 /* SOCIAL API */
3474
3475 .popup-notification-icon[popupid="servicesInstall"] {
3476   list-style-image: url(chrome://browser/skin/social/services-64.png);
3477 }
3478
3479 .service-icon {
3480   list-style-image: url(chrome://browser/skin/social/services-16.png);
3481 }
3482
3483 /* TRANSLATION */
3484
3485 .translation-icon {
3486   list-style-image: url(chrome://browser/skin/translation-16.png);
3487   -moz-image-region: rect(0px, 16px, 16px, 0px);
3488 }
3489
3490 .translation-icon.in-use {
3491   -moz-image-region: rect(0px, 32px, 16px, 16px);
3492 }
3493
3494 /* === END notification-icons.inc.css === */
3495
3496 .popup-notification-body[popupid="addon-progress"],
3497 .popup-notification-body[popupid="addon-install-confirmation"] {
3498   width: 28em;
3499   max-width: 28em;
3500 }
3501
3502 /* Translation infobar */
3503
3504 /* === BEGIN infobar.inc.css === */
3505
3506 notification[value="translation"] .messageImage {
3507   list-style-image: url("chrome://browser/skin/translation-16.png");
3508   -moz-image-region: rect(0, 32px, 16px, 16px);
3509 }
3510
3511 @media (min-resolution: 1.25dppx) {
3512   notification[value="translation"] .messageImage {
3513     list-style-image: url("chrome://browser/skin/translation-16@2x.png");
3514     -moz-image-region: rect(0, 64px, 32px, 32px);
3515   }
3516 }
3517
3518 notification[value="translation"][state="translating"] .messageImage {
3519   list-style-image: url("chrome://browser/skin/translating-16.png");
3520   -moz-image-region: auto;
3521 }
3522
3523 @media (min-resolution: 1.25dppx) {
3524   notification[value="translation"][state="translating"] .messageImage {
3525     list-style-image: url("chrome://browser/skin/translating-16@2x.png");
3526   }
3527 }
3528
3529 notification[value="translation"] hbox[anonid="details"] {
3530   overflow: hidden;
3531 }
3532
3533 notification[value="translation"] button,
3534 notification[value="translation"] menulist {
3535   min-width: 0;
3536 }
3537
3538 notification[value="translation"] menulist > .menulist-dropmarker {
3539 }
3540
3541 .translation-menupopup arrowscrollbox {
3542   padding-bottom: 0;
3543 }
3544
3545 .translation-attribution {
3546   cursor: pointer;
3547   -moz-box-align: end;
3548   font-size: small;
3549 }
3550
3551 .translation-attribution > label {
3552   margin-bottom: 0;
3553 }
3554
3555 .translation-attribution > image {
3556   width: 70px;
3557 }
3558
3559 .translation-welcome-panel {
3560   width: 305px;
3561 }
3562
3563 .translation-welcome-logo {
3564   height: 32px;
3565   width: 32px;
3566   list-style-image: url(chrome://browser/skin/translation-16@2x.png);
3567   -moz-image-region: rect(0, 64px, 32px, 32px);
3568 }
3569
3570 .translation-welcome-content {
3571   margin-inline-start: 16px;
3572 }
3573
3574 .translation-welcome-headline {
3575   font-size: larger;
3576   font-weight: bold;
3577 }
3578
3579 .translation-welcome-body {
3580   padding: 1em 0;
3581   margin: 0 0;
3582 }
3583
3584 /* === END infobar.inc.css === */
3585
3586 notification[value="translation"] {
3587   min-height: 40px;
3588 }
3589
3590 .translation-menupopup {
3591   -moz-appearance: none;
3592 }
3593
3594 /* Bookmarks roots menu-items */
3595 #subscribeToPageMenuitem:not([disabled]),
3596 #subscribeToPageMenupopup {
3597   list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
3598 }
3599
3600 #bookmarksToolbarFolderMenu,
3601 #BMB_bookmarksToolbar,
3602 #panelMenu_bookmarksToolbar {
3603   list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
3604   -moz-image-region: auto;
3605 }
3606
3607 #BMB_unsortedBookmarks,
3608 #panelMenu_unsortedBookmarks {
3609   list-style-image: url("chrome://communicator/skin/bookmarks/unsortedBookmarks.png");
3610   -moz-image-region: auto;
3611 }
3612
3613 /* Status panel */
3614
3615 .statuspanel-label {
3616   margin: 0;
3617   padding: 2px 4px;
3618   background: #404000;
3619   border: 1px none #9C9CFF;
3620   border-top-style: solid;
3621   color: #FF9F00;
3622   text-shadow: none;
3623 }
3624
3625 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
3626 .statuspanel-label:-moz-locale-dir(rtl)[mirror] {
3627   border-right-style: solid;
3628   border-top-right-radius: .3em;
3629   margin-right: 1em;
3630 }
3631
3632 .statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
3633 .statuspanel-label:-moz-locale-dir(ltr)[mirror] {
3634   border-left-style: solid;
3635   border-top-left-radius: .3em;
3636   margin-left: 1em;
3637 }
3638
3639 /* HACK to abolish devily color on main content */
3640
3641 #content {
3642   background-color: transparent !important;
3643 }
3644
3645 /* === BEGIN fullscreen/warning.inc.css === */
3646
3647 html|*.pointerlockfswarning {
3648   align-items: center;
3649   background: rgba(0, 0, 0, 0.9);
3650   border: 2px solid #A09090;
3651   box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
3652   border-radius: 8px;
3653   padding: 24px 16px;
3654   font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3655 }
3656
3657 html|*.pointerlockfswarning::before {
3658   margin: 0;
3659   width: 24px; height: 24px;
3660 }
3661
3662 html|*.pointerlockfswarning[data-identity="verifiedIdentity"]::before,
3663 html|*.pointerlockfswarning[data-identity="verifiedDomain"]::before {
3664   content: url("chrome://browser/skin/fullscreen/secure.svg");
3665 }
3666
3667 html|*.pointerlockfswarning[data-identity="unknownIdentity"]::before {
3668   content: url("chrome://browser/skin/fullscreen/insecure.svg");
3669 }
3670
3671 html|*.pointerlockfswarning-domain-text,
3672 html|*.pointerlockfswarning-generic-text {
3673   font-size: 21px;
3674   font-weight: lighter;
3675   color: #A09090;
3676   margin: 0 16px;
3677 }
3678
3679 html|*.pointerlockfswarning-domain {
3680   font-weight: bold;
3681   margin: 0;
3682 }
3683
3684 html|*.pointerlockfswarning-exit-button {
3685   padding: 5px 30px;
3686   font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3687   font-size: 14px;
3688   font-weight: lighter;
3689   margin: 0;
3690   box-sizing: content-box;
3691
3692   border-radius: 300px;
3693   border: none;
3694   background-color: #C09070;
3695   color: #000000;
3696 }
3697
3698 /* === END fullscreen/warning.inc.css === */
3699
3700 /* === BEGIN ctrlTab.inc.css === */
3701
3702 /* Ctrl-Tab */
3703
3704 #ctrlTab-panel {
3705   -moz-appearance: none;
3706   background: rgba(0%,0%,0%,.7);
3707   color: #FF9F00;
3708   border-style: none;
3709   padding: 20px 10px 10px;
3710   font-weight: bold;
3711 }
3712
3713 .ctrlTab-favicon[src] {
3714   background-color: #000000;
3715   width: 20px;
3716   height: 20px;
3717   padding: 2px;
3718 }
3719
3720 .ctrlTab-preview-inner > .tabPreview-canvas {
3721 /*  box-shadow: 1px 1px 2px hsl(0,0%,12%);*/
3722 }
3723
3724 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
3725   margin-bottom: 2px;
3726 }
3727
3728 .ctrlTab-preview-inner {
3729   padding: 8px;
3730   border: 2px solid transparent;
3731   border-radius: .5em;
3732 }
3733
3734 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner {
3735   margin: -10px -10px 0;
3736 }
3737
3738 #ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
3739   background-color: #000000;
3740 }
3741
3742 .ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
3743   color: #A09090;
3744   background-color: #000000;
3745   text-shadow: none;
3746   border-color: #9C9CFF;
3747 }
3748
3749 #ctrlTab-showAll {
3750   margin-top: .5em;
3751 }
3752
3753 /* === END ctrlTab.inc.css === */
3754
3755 /* === BEGIN commandline.inc.css === */
3756
3757 /* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS.
3758    We are copy/pasting variables from light-theme and dark-theme,
3759    since they aren't loaded in this context (within browser.css). */
3760 :root #developer-toolbar {
3761   --gcli-background-color: #000000; /* --theme-toolbar-background */
3762   --gcli-input-background: rgba(0, 0, 0, .75); /* --theme-tab-toolbar-background */
3763   --gcli-input-focused-background: #000000; /* --theme-sidebar-background */
3764   --gcli-input-color: #FF9F00; /* --theme-body-color-alt */
3765   --gcli-border-color: #9C9CFF; /* --theme-splitter-color */
3766   --selection-background: #008484; /* --theme-selection-background */
3767   --selection-color: #000000; /* --theme-selection-color */
3768   --command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme); /* --theme-command-line-image */
3769   --command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme-focus); /* --theme-command-line-image-focus */
3770 }
3771
3772 /* Developer toolbar */
3773
3774 #developer-toolbar {
3775   border-top: 3px solid var(--gcli-background-color);
3776   border-bottom: none;
3777 }
3778
3779 #developer-toolbar .toolbar-holder {
3780   background-color: #8050B0;
3781   color: #FFCF00;
3782 }
3783
3784 #developer-toolbar .toolbar-holder {
3785   background-color: #8050B0;
3786   color: #FFCF00;
3787 }
3788
3789 #developer-toolbar .toolbar-startcap,
3790 #developer-toolbar .toolbar-endcap{
3791   background-color: #6000CF;
3792 }
3793
3794 #developer-toolbar {
3795 /*  padding: 0;
3796   min-height: 32px; */
3797 }
3798
3799 #developer-toolbar > toolbarbutton {
3800 /*  border: none;
3801   background-color: transparent;
3802   margin: 0;
3803   padding: 0 10px;
3804   width: 32px; */
3805 }
3806
3807 .developer-toolbar-button > image {
3808 /*  margin: auto 10px; */
3809 }
3810
3811 #developer-toolbar-toolbox-button > label {
3812   display: none;
3813 }
3814
3815 .developer-toolbar-button > .toolbarbutton-icon {
3816   width: 16px;
3817   height: 16px;
3818 }
3819
3820 #developer-toolbar-toolbox-button {
3821   list-style-image: url("chrome://devtools/skin/images/toggle-tools.png");
3822   -moz-image-region: rect(0px, 16px, 16px, 0px);
3823 }
3824
3825 #developer-toolbar-toolbox-button > label {
3826   display: none;
3827 }
3828
3829 #developer-toolbar-toolbox-button:hover,
3830 #developer-toolbar-toolbox-button:hover:active,
3831 #developer-toolbar-toolbox-button[checked=true] {
3832   -moz-image-region: rect(0px, 32px, 16px, 16px);
3833 }
3834
3835 @media (min-resolution: 2dppx) {
3836   #developer-toolbar-toolbox-button {
3837     list-style-image: url("chrome://devtools/skin/images/toggle-tools@2x.png");
3838     -moz-image-region: rect(0px, 32px, 32px, 0px);
3839   }
3840
3841   #developer-toolbar-toolbox-button:hover,
3842   #developer-toolbar-toolbox-button:hover:active,
3843   #developer-toolbar-toolbox-button[checked=true] {
3844     -moz-image-region: rect(0px, 64px, 32px, 32px);
3845   }
3846 }
3847
3848 /* GCLI */
3849
3850 html|*#gcli-tooltip-frame,
3851 html|*#gcli-output-frame {
3852   padding: 0;
3853   border-width: 0;
3854   background-color: transparent;
3855 }
3856
3857 #gcli-output,
3858 #gcli-tooltip {
3859   border-width: 0;
3860   background-color: transparent;
3861 }
3862
3863 .gclitoolbar-input-node,
3864 .gclitoolbar-complete-node {
3865   margin: 1px 3px;
3866   -moz-box-align: center;
3867   padding-top: 0;
3868   padding-bottom: 0;
3869   padding-right: 8px;
3870   background-color: transparent;
3871 }
3872
3873 .gclitoolbar-input-node {
3874 /*  line-height: 32px;
3875   outline-style: none; */
3876   background-repeat: no-repeat;
3877   background-color: var(--gcli-input-background);
3878 }
3879
3880 .gclitoolbar-input-node[focused="true"] {
3881   background-color: var(--gcli-input-focused-background);
3882 }
3883
3884 .gclitoolbar-input-node::before {
3885   content: "";
3886   display: inline-block;
3887   -moz-box-ordinal-group: 0;
3888   width: 16px;
3889   height: 16px;
3890   margin: 0 2px;
3891   background-image: var(--command-line-image);
3892 }
3893
3894 .gclitoolbar-input-node[focused="true"]::before {
3895   background-image: var(--command-line-image-focus);
3896 }
3897
3898 .gclitoolbar-input-node:not([focused="true"]) {
3899   border-color: transparent;
3900 }
3901
3902 .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
3903   background-color: var(--selection-background);
3904   color: var(--selection-color);
3905 }
3906
3907 .gclitoolbar-complete-node {
3908   padding-left: 21px;
3909   background-color: transparent;
3910   color: transparent;
3911   z-index: 100;
3912   pointer-events: none;
3913 }
3914
3915 .gcli-in-incomplete,
3916 .gcli-in-error,
3917 .gcli-in-ontab,
3918 .gcli-in-todo,
3919 .gcli-in-closebrace,
3920 .gcli-in-param,
3921 .gcli-in-valid {
3922   margin: 0;
3923   padding: 0;
3924 }
3925
3926 .gcli-in-incomplete {
3927   border-bottom: 2px dotted #8050B0;
3928 }
3929
3930 .gcli-in-error {
3931   border-bottom: 2px dotted #FF0000;
3932 }
3933
3934 .gcli-in-ontab {
3935   color: #9C9CFF;
3936 }
3937
3938 .gcli-in-todo {
3939   color: #795900;
3940 }
3941
3942 .gcli-in-closebrace {
3943   color: #8050B0;
3944 }
3945
3946 /* === END commandline.inc.css === */
3947
3948 /* === BEGIN responsivedesign.inc.css === */
3949
3950 /* Responsive Mode */
3951
3952 .browserContainer[responsivemode] {
3953   background-color: #221500;
3954   padding: 0 20px 20px 20px;
3955 }
3956
3957 .browserStack[responsivemode] {
3958   box-shadow: 0 0 7px #9C9CFF;
3959 }
3960
3961 .devtools-responsiveui-toolbar {
3962   background: transparent;
3963   /* text color is textColor from dark theme, since no theme is applied to
3964    * the responsive toolbar.
3965    */
3966   color: #FF9F00;
3967   margin: 10px 0;
3968   padding: 0;
3969   box-shadow: none;
3970   border-bottom-width: 0;
3971 }
3972
3973 .devtools-responsiveui-textinput {
3974 /*  -moz-appearance: none;
3975   background: #333;
3976   color: #fff;
3977   border: 1px solid #111;
3978   border-radius: 2px;
3979   padding: 0 5px;*/
3980   width: 200px;
3981   margin: 0;
3982 }
3983
3984 .devtools-responsiveui-textinput[attention] {
3985 /*  border-color: #38ace6;
3986   background: rgba(56,172,230,0.4);*/
3987 }
3988
3989 .devtools-responsiveui-menulist,
3990 .devtools-responsiveui-toolbarbutton {
3991   -moz-box-align: center;
3992   min-width: 32px;
3993 /*  min-height: 22px;*/
3994 /*  margin: 0 3px; */
3995 }
3996
3997 .devtools-responsiveui-menulist .menulist-editable-box {
3998   background-color: transparent;
3999 }
4000
4001 .devtools-responsiveui-menulist html|*.menulist-editable-input {
4002   color: inherit;
4003   text-align: center;
4004 }
4005
4006 .devtools-responsiveui-menulist html|*.menulist-editable-input::-moz-selection {
4007 /*  background: hsla(212,7%,57%,.35);*/
4008 }
4009
4010 .devtools-responsiveui-toolbarbutton > .toolbarbutton-icon {
4011   width: 16px;
4012   height: 16px;
4013 }
4014
4015 .devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button {
4016   -moz-box-orient: horizontal;
4017 }
4018
4019 .devtools-responsiveui-menulist:-moz-focusring,
4020 .devtools-responsiveui-toolbarbutton:-moz-focusring {
4021 /*  outline: 1px dotted hsla(210,30%,85%,0.7);
4022   outline-offset: -4px;*/
4023 }
4024
4025 .devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text {
4026   display: none;
4027 }
4028
4029 .devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active {
4030 /*  border-color: hsla(210,8%,5%,.6);
4031   background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
4032   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); */
4033 }
4034
4035 .devtools-responsiveui-menulist[open=true],
4036 .devtools-responsiveui-toolbarbutton[open=true],
4037 .devtools-responsiveui-toolbarbutton[checked=true] {
4038 /*  border-color: hsla(210,8%,5%,.6) !important;
4039   background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
4040   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); */
4041 }
4042
4043 .devtools-responsiveui-toolbarbutton[checked=true] {
4044 /*  color: hsl(208,100%,60%); */
4045 }
4046
4047 .devtools-responsiveui-toolbarbutton[checked=true]:hover {
4048 /*  background-color: transparent !important;*/
4049 }
4050
4051 .devtools-responsiveui-toolbarbutton[checked=true]:hover:active {
4052 /*  background-color: hsla(210,8%,5%,.2) !important;*/
4053 }
4054
4055 .devtools-responsiveui-menulist > .menulist-label-box {
4056   text-align: center;
4057 }
4058
4059 .devtools-responsiveui-menulist > .menulist-dropmarker {
4060 /*  display: -moz-box;
4061   background-color: transparent;
4062   list-style-image: url("chrome://devtools/skin/dropmarker.svg");
4063   -moz-box-align: center;
4064   border-width: 0;
4065   min-width: 16px;*/
4066 }
4067
4068 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
4069 /*  color: inherit;
4070   border-width: 0;
4071   border-inline-end: 1px solid hsla(210,8%,5%,.45);
4072   box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);*/
4073 }
4074
4075 .devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
4076 /*  box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);*/
4077 }
4078
4079 .devtools-responsiveui-toolbarbutton[type=menu-button] {
4080 /*  padding: 0 1px;*/
4081   -moz-box-align: stretch;
4082 }
4083
4084 .devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
4085 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
4086 /*  list-style-image: url("chrome://devtools/skin/dropmarker.svg");
4087   -moz-box-align: center;
4088   padding: 0 3px;*/
4089 }
4090
4091 .devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
4092 .devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
4093   margin-left: 3px;
4094 }
4095
4096 .devtools-responsiveui-close {
4097   list-style-image: url("chrome://devtools/skin/close.svg");
4098 }
4099
4100 .devtools-responsiveui-close:hover {
4101   filter: url(chrome://devtools/skin/images/filters.svg#checked-icon-state);
4102 }
4103
4104 .devtools-responsiveui-close > image {
4105   filter: invert(1);
4106 }
4107
4108 .devtools-responsiveui-rotate {
4109   list-style-image: url("chrome://devtools/skin/images/responsiveui-rotate.png");
4110   -moz-image-region: rect(0px,16px,16px,0px);
4111 }
4112
4113 .devtools-responsiveui-rotate:hover {
4114   -moz-image-region: rect(0px,32px,16px,16px);
4115 }
4116
4117 @media (min-resolution: 2dppx) {
4118   .devtools-responsiveui-rotate {
4119     list-style-image: url("chrome://devtools/skin/images/responsiveui-rotate@2x.png");
4120   }
4121
4122   .devtools-responsiveui-rotate:hover {
4123     -moz-image-region: rect(0px,64px,32px,32px);
4124   }
4125 }
4126
4127 .devtools-responsiveui-touch {
4128   list-style-image: url("chrome://devtools/skin/images/responsiveui-touch.png");
4129   -moz-image-region: rect(0px,16px,16px,0px);
4130 }
4131
4132 .devtools-responsiveui-touch:hover,
4133 .devtools-responsiveui-touch[checked],
4134 .devtools-responsiveui-touch[checked]:hover {
4135   -moz-image-region: rect(0px,32px,16px,16px);
4136 }
4137
4138 @media (min-resolution: 2dppx) {
4139   .devtools-responsiveui-touch {
4140     list-style-image: url("chrome://devtools/skin/images/responsiveui-touch@2x.png");
4141     -moz-image-region: rect(0px,32px,32px,0px);
4142   }
4143
4144   .devtools-responsiveui-touch:hover,
4145   .devtools-responsiveui-touch[checked],
4146   .devtools-responsiveui-touch[checked]:hover {
4147     -moz-image-region: rect(0px,64px,32px,32px);
4148   }
4149 }
4150
4151 .devtools-responsiveui-screenshot {
4152   list-style-image: url("chrome://devtools/skin/images/responsiveui-screenshot.png");
4153   -moz-image-region: rect(0px,16px,16px,0px);
4154 }
4155
4156 .devtools-responsiveui-screenshot:hover {
4157   -moz-image-region: rect(0px,32px,16px,16px);
4158 }
4159
4160 @media (min-resolution: 2dppx) {
4161   .devtools-responsiveui-screenshot {
4162     list-style-image: url("chrome://devtools/skin/images/responsiveui-screenshot@2x.png");
4163   }
4164
4165   .devtools-responsiveui-screenshot:hover {
4166     -moz-image-region: rect(0px,64px,32px,32px);
4167   }
4168 }
4169
4170 .devtools-responsiveui-resizebarV {
4171   width: 7px;
4172   height: 24px;
4173   cursor: ew-resize;
4174   transform: translate(12px, -12px);
4175   background-size: cover;
4176   background-image: url("chrome://devtools/skin/images/responsive-vertical-resizer.png");
4177 }
4178
4179 .devtools-responsiveui-resizebarH {
4180   width: 24px;
4181   height: 7px;
4182   cursor: ns-resize;
4183   transform: translate(-12px, 12px);
4184   background-size: cover;
4185   background-image: url("chrome://devtools/skin/images/responsive-horizontal-resizer.png");
4186 }
4187
4188 .devtools-responsiveui-resizehandle {
4189   width: 16px;
4190   height: 16px;
4191   cursor: se-resize;
4192   transform: translate(12px, 12px);
4193   background-size: cover;
4194   background-image: url("chrome://devtools/skin/images/responsive-se-resizer.png");
4195 }
4196
4197 /* FxOS custom mode with additional buttons and phone look'n feel */
4198
4199 /* Hide devtools manual resizer */
4200 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizehandle,
4201 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarH,
4202 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarV {
4203   display: none;
4204 }
4205
4206 /* Gives responsive mode a phone look'n feel */
4207 .browserStack[responsivemode].fxos-mode {
4208   padding: 60px 15px 0;
4209
4210   border-radius: 25px / 20px;
4211   border-bottom-left-radius: 0;
4212   border-bottom-right-radius: 0;
4213   border: 1px solid #FFFFFF;
4214   border-bottom-width: 0;
4215
4216   background-color: #353535;
4217
4218   box-shadow: 0 3px 0.7px 1px #777777, 0 5px rgba(0, 0, 0, 0.4) inset;
4219
4220   background-image: linear-gradient(to right, #111 11%, #333 56%);
4221   min-width: 320px;
4222 }
4223
4224 .devtools-responsiveui-hardware-buttons {
4225   -moz-appearance: none;
4226   padding: 20px;
4227
4228   border: 1px solid #FFFFFF;
4229   border-bottom-left-radius: 25px;
4230   border-bottom-right-radius: 25px;
4231   border-top-width: 0;
4232
4233   box-shadow: 0 3px 0.7px 1px #777777, 0 -7px rgba(0, 0, 0, 0.4) inset;
4234
4235   background-image: linear-gradient(to right, #111 11%, #333 56%);
4236 }
4237
4238 .devtools-responsiveui-home-button {
4239   -moz-user-focus: ignore;
4240   width: 40px;
4241   height: 30px;
4242   list-style-image: url("chrome://devtools/skin/images/responsiveui-home.png");
4243 }
4244
4245 .devtools-responsiveui-sleep-button {
4246   -moz-user-focus: ignore;
4247   -moz-appearance: none;
4248   /* compensate browserStack top padding */
4249   margin-top: -67px;
4250   margin-right: 10px;
4251
4252   min-width: 10px;
4253   width: 50px;
4254   height: 5px;
4255
4256   border: 1px solid #444;
4257   border-top-right-radius: 12px;
4258   border-top-left-radius: 12px;
4259   border-bottom-color: transparent;
4260
4261   background-image: linear-gradient(to top, #111 11%, #333 56%);
4262 }
4263
4264 .devtools-responsiveui-sleep-button:hover:active {
4265   background-image: linear-gradient(to top, #aaa 11%, #ddd 56%);
4266 }
4267
4268 .devtools-responsiveui-volume-buttons {
4269   margin-left: -29px;
4270 }
4271
4272 .devtools-responsiveui-volume-up-button,
4273 .devtools-responsiveui-volume-down-button {
4274   -moz-user-focus: ignore;
4275   -moz-appearance: none;
4276   border: 1px solid red;
4277   min-width: 8px;
4278   height: 40px;
4279
4280   border: 1px solid #444;
4281   border-right-color: transparent;
4282
4283   background-image: linear-gradient(to right, #111 11%, #333 56%);
4284 }
4285
4286 .devtools-responsiveui-volume-up-button:hover:active,
4287 .devtools-responsiveui-volume-down-button:hover:active {
4288   background-image: linear-gradient(to right, #aaa 11%, #ddd 56%);
4289 }
4290
4291 .devtools-responsiveui-volume-up-button {
4292   border-top-left-radius: 12px;
4293 }
4294
4295 .devtools-responsiveui-volume-down-button {
4296   border-bottom-left-radius: 12px;
4297 }
4298
4299 @media (min-resolution: 2dppx) {
4300   .devtools-responsiveui-resizebarV {
4301     background-image: url("chrome://devtools/skin/images/responsive-vertical-resizer@2x.png");
4302   }
4303
4304   .devtools-responsiveui-resizebarH {
4305     background-image: url("chrome://devtools/skin/images/responsive-horizontal-resizer@2x.png");
4306   }
4307
4308   .devtools-responsiveui-resizehandle {
4309     background-image: url("chrome://devtools/skin/images/responsive-se-resizer@2x.png");
4310   }
4311 }
4312
4313 /* === END responsivedesign.inc.css === */
4314
4315 /* === including indicator.css is done at the start of the file === */
4316
4317 /* Error counter */
4318
4319 #developer-toolbar-toolbox-button[error-count]:before {
4320   color: #000000;
4321   min-width: 16px;
4322   text-shadow: none;
4323   background-color: #FF0000;
4324   border-radius: 1px;
4325   margin-inline-end: 5px;
4326 }
4327
4328 /* === BEGIN plugin-doorhanger.inc.css === */
4329
4330 /**
4331  * Plugin Doorhanger Styles
4332  */
4333
4334 #notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent {
4335   padding: 6px 1px 2px;
4336 }
4337
4338 .click-to-play-plugins-notification-center-box {
4339 }
4340
4341 .plugin-popupnotification-centeritem:nth-child(odd) {
4342 /*  background-color: rgba(0,0,0,0.1);*/
4343 }
4344
4345 .center-item-label {
4346   margin-bottom: 0;
4347   text-overflow: ellipsis;
4348 }
4349
4350 .center-item-warning-icon {
4351   background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.svg");
4352   background-repeat: no-repeat;
4353   width: 16px;
4354   height: 15px;
4355   margin-inline-start: 6px;
4356 }
4357
4358 .click-to-play-plugins-notification-button-container {
4359 }
4360
4361 .click-to-play-popup-button {
4362   width: 50%;
4363 }
4364
4365 .click-to-play-plugins-notification-description-box {
4366   margin-left: 5px;
4367   margin-right: 5px;
4368   margin-top: 0;
4369   padding-bottom: 3px;
4370 }
4371
4372 .click-to-play-plugins-outer-description {
4373   margin-top: 1px;
4374 }
4375
4376 .click-to-play-plugins-notification-link,
4377 .center-item-link {
4378   margin: 0;
4379 }
4380
4381 .messageImage[value="plugin-hidden"] {
4382   list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
4383 }
4384
4385 /* Keep any changes to this style in sync with pluginProblem.css */
4386 notification.pluginVulnerable {
4387 }
4388
4389 notification.pluginVulnerable .messageImage {
4390   list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
4391 }
4392
4393 /* === END plugin-doorhanger.inc.css === */
4394
4395 /* === BEGIN customizeMode.inc.css === */
4396
4397 /* Customization mode */
4398
4399 :root {
4400   --drag-drop-transition-duration: .3s;
4401 }
4402
4403 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox {
4404   margin-bottom: 1em;
4405 }
4406
4407 #main-window:-moz-any([customize-entering],[customize-entered]) #content-deck,
4408 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4409 #main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
4410   margin-left: 1em;
4411   margin-right: 1em;
4412 }
4413
4414 #main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck {
4415   pointer-events: none;
4416 }
4417
4418 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4419 #PanelUI-contents > .panel-customization-placeholder {
4420   -moz-outline-radius: 2.5px;
4421   outline: 1px dashed transparent;
4422 }
4423
4424 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before {
4425   /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */
4426   -moz-box-ordinal-group: 0;
4427   content: "";
4428   display: -moz-box;
4429   height: 100%;
4430   left: 0;
4431   outline-offset: -2px;
4432   pointer-events: none;
4433   position: absolute;
4434   top: 0;
4435   width: 100%;
4436 }
4437
4438 /* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the
4439    #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the
4440    offset from the bottom effectively the same as other targets (-2px). */
4441 #main-window[customize-entered] #TabsToolbar.customization-target::before {
4442 /*  top: -2px;*/
4443 }
4444
4445 /* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */
4446 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover,
4447 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)),
4448 #main-window[customize-entered] #nav-bar-customization-target.customization-target {
4449   position: relative;
4450 }
4451
4452 /* Most target outlines are shown on hover and drag over but the panel menu uses
4453    placeholders instead. */
4454 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before,
4455 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4456 /* nav-bar and panel outlines are always shown */
4457 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4458   outline-color: currentColor;
4459 }
4460
4461 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4462   transition: outline-color 250ms linear;
4463 }
4464
4465 #PanelUI-contents[showoutline=true] > .panel-customization-placeholder {
4466   transition: outline-color 250ms linear;
4467   outline-color: var(--panel-separator-color);
4468 }
4469
4470 #PanelUI-contents > .panel-customization-placeholder {
4471   cursor: auto;
4472   outline-offset: -5px;
4473 }
4474
4475 #main-window[customizing] .customization-target:not(#PanelUI-contents) {
4476   min-width: 100px;
4477 /*  padding-left: 10px;
4478   padding-right: 10px;*/
4479 }
4480
4481 #main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck {
4482   padding: 0 2em 2em;
4483 }
4484
4485 #customization-container {
4486   background-color: #000000;
4487   color: #FF9F00;
4488 }
4489
4490 #customization-palette,
4491 #customization-empty {
4492   padding: 0 15px 15px;
4493 }
4494
4495 #customization-header {
4496   font-size: 1.75em;
4497   line-height: 1.75em;
4498   color: #9C9CFF;
4499   font-weight: 200;
4500   margin: 25px 25px 12px;
4501   padding-bottom: 12px;
4502   border-bottom: 1px solid #A09090;
4503 }
4504
4505 #customization-panel-container {
4506   padding: 10px 10px 0px;
4507 }
4508
4509 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4510 #customization-footer {
4511   /*background-color: rgb(236,236,236);*/
4512 }
4513
4514 #customization-footer {
4515   border-top: 1px solid #9C9CFF;
4516   padding: 10px;
4517 }
4518
4519 .customizationmode-button {
4520   margin: 5px;
4521 }
4522
4523 .customizationmode-button:hover {
4524 }
4525
4526 .customizationmode-button > .box-inherit {
4527 }
4528
4529 .customizationmode-button > .button-icon {
4530 }
4531
4532 .customizationmode-button:not([type=menu]) > .button-text {
4533 }
4534
4535 .customizationmode-button > .button-menu-dropmarker {
4536 }
4537
4538
4539
4540 .customizationmode-button[checked] {
4541   background-color: #008484;
4542 }
4543
4544 .customizationmode-button[checked]:hover:not([disabled]),
4545 .customizationmode-button:hover:not([disabled]) {
4546   background-color: #FFCF00;
4547 }
4548
4549 .customizationmode-button[checked]:hover:active:not([disabled]),
4550 .customizationmode-button:hover:active:not([disabled]),
4551 .customizationmode-button[open] {
4552   background-color: #FF9F00;
4553 }
4554
4555 .customizationmode-button[disabled="true"] {
4556 }
4557
4558 .customizationmode-button > .box-inherit > .box-inherit > .button-icon,
4559 .customizationmode-button > .button-box > .button-icon {
4560 /*  height: 24px;*/
4561 }
4562
4563 #customization-titlebar-visibility-button {
4564   list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png");
4565   -moz-image-region: rect(0, 16px, 16px, 0);
4566 }
4567
4568 #customization-titlebar-visibility-button:hover {
4569   -moz-image-region: rect(16px, 16px, 32px, 0);
4570 }
4571
4572 #customization-titlebar-visibility-button > .button-box {
4573   padding-top: 0;
4574   padding-bottom: 1px;
4575 }
4576
4577 #customization-titlebar-visibility-button:hover:active > .button-box {
4578   padding-top: 1px;
4579   padding-bottom: 0;
4580 }
4581
4582 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-text,
4583 #customization-titlebar-visibility-button > .button-box > .button-text {
4584   /* Sadly, button.css thinks its margins are perfect for everyone. */
4585   margin-inline-start: 5px !important;
4586 }
4587
4588 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon {
4589   width: 20px;
4590   height: 20px;
4591   border-radius: 2px;
4592   background-size: contain;
4593 }
4594
4595 #customization-titlebar-visibility-button > .button-box > .button-icon {
4596   vertical-align: middle;
4597 }
4598
4599 #customization-titlebar-visibility-button[checked] {
4600   -moz-image-region: rect(0, 32px, 16px, 16px);
4601   background-color: #008484;
4602 }
4603
4604 #customization-titlebar-visibility-button[checked]:hover {
4605   -moz-image-region: rect(16px, 32px, 32px, 16px);
4606   background-color: #FFCF00;
4607 }
4608
4609 #customization-titlebar-visibility-button[checked]:hover:active {
4610   background-color: #FF9F00;
4611 }
4612
4613 @media (min-resolution: 1.1dppx) {
4614   #customization-titlebar-visibility-button {
4615     list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle@2x.png");
4616     -moz-image-region: rect(0, 48px, 48px, 0);
4617   }
4618
4619   #customization-titlebar-visibility-button:hover {
4620     -moz-image-region: rect(48px, 48px, 96px, 0);
4621   }
4622
4623   #customization-titlebar-visibility-button[checked] {
4624     -moz-image-region: rect(0, 96px, 48px, 48px);
4625   }
4626
4627   #customization-titlebar-visibility-button[checked]:hover {
4628     -moz-image-region: rect(48px, 96px, 96px, 48px);
4629   }
4630 }
4631
4632 #main-window[customize-entered] #customization-panel-container {
4633   background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
4634   background-position: left top;
4635   background-repeat: repeat;
4636   background-size: auto;
4637   background-attachment: fixed;
4638 }
4639
4640 toolbarpaletteitem[place="toolbar"] {
4641   transition: border-width 250ms ease-in-out;
4642 }
4643
4644 toolbarpaletteitem[mousedown] {
4645   outline: 1px solid #008484;
4646   cursor: -moz-grabbing;
4647   opacity: 0.8;
4648 }
4649
4650 .panel-customization-placeholder,
4651 toolbarpaletteitem[place="palette"],
4652 toolbarpaletteitem[place="panel"] {
4653   transition: transform var(--drag-drop-transition-duration) ease-in-out;
4654 }
4655
4656 #customization-palette {
4657   transition: opacity .3s ease-in-out;
4658   opacity: 0;
4659 }
4660
4661 #customization-palette[showing="true"] {
4662   opacity: 1;
4663 }
4664
4665 toolbarpaletteitem toolbarbutton[disabled] {
4666 /*  color: inherit !important;*/
4667 }
4668
4669 toolbarpaletteitem[notransition].panel-customization-placeholder,
4670 toolbarpaletteitem[notransition][place="toolbar"],
4671 toolbarpaletteitem[notransition][place="palette"],
4672 toolbarpaletteitem[notransition][place="panel"] {
4673   transition: none;
4674 }
4675
4676 toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
4677 toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon,
4678 toolbarpaletteitem > toolbaritem.panel-wide-item,
4679 toolbarpaletteitem > toolbarbutton[type="menu-button"] {
4680   transition: transform  var(--drag-drop-transition-duration) cubic-bezier(.6, 2, .75, 1.5) !important;
4681 }
4682
4683 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon,
4684 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon {
4685   transform: scale(1.3);
4686 }
4687
4688 toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item,
4689 toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] {
4690   transform: scale(1.1);
4691 }
4692
4693 /* Override the toolkit styling for items being dragged over. */
4694 toolbarpaletteitem[place="toolbar"] {
4695   border-left-width: 0;
4696   border-right-width: 0;
4697   margin-right: 0;
4698   margin-left: 0;
4699 }
4700
4701 #customization-palette:not([hidden]) {
4702   margin-bottom: 25px;
4703 }
4704
4705 toolbarpaletteitem[place="palette"]:-moz-focusring,
4706 toolbarpaletteitem[place="panel"]:-moz-focusring,
4707 toolbarpaletteitem[place="toolbar"]:-moz-focusring {
4708   outline-width: 0;
4709 }
4710
4711 toolbarpaletteitem[place="palette"]:not([mousedown="true"]):-moz-focusring,
4712 toolbarpaletteitem[place="panel"]:not([mousedown="true"]):-moz-focusring,
4713 toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
4714   /* Delay adding the focusring back until after the transform transition completes. */
4715   transition: outline-width .01s linear var(--drag-drop-transition-duration);
4716   outline: 1px dotted;
4717   -moz-outline-radius: 2.5px;
4718 }
4719
4720 toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
4721   outline-offset: -5px;
4722 }
4723
4724 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4725 #wrapper-edit-controls[place="palette"] > #edit-controls > separator,
4726 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
4727 #wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
4728   margin-top: 20px;
4729 }
4730
4731 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4732 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
4733   margin-left: 0;
4734   margin-right: 0;
4735   max-width: 24px;
4736   min-width: 24px;
4737   max-height: 24px;
4738   min-height: 24px;
4739   padding: 4px;
4740 }
4741
4742 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
4743 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
4744   width: 16px;
4745 }
4746
4747 #wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
4748   opacity: 1; /* To ensure these buttons always look enabled in customize mode */
4749 }
4750
4751 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
4752 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
4753   display: none;
4754 }
4755
4756 #wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks {
4757   -moz-box-pack: center;
4758   min-height: 48px;
4759 }
4760
4761 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
4762   margin-inline-end: 5px;
4763 }
4764
4765 #customization-palette > toolbarpaletteitem > label {
4766   text-align: center;
4767   margin-left: 0;
4768   margin-right: 0;
4769 }
4770
4771 #customization-lwtheme-menu > .panel-arrowcontainer > .panel-arrowcontent {
4772   -moz-box-orient: vertical;
4773   /* Make the panel padding uniform across all platforms due to the
4774      styling of the section headers and footer. */
4775   padding: 10px;
4776 }
4777
4778 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
4779   width: 32px;
4780   height: 32px;
4781 }
4782
4783 .customization-lwtheme-menu-theme {
4784   -moz-appearance: none;
4785   margin: 0 -5px 5px;
4786   padding-top: 0;
4787   padding-inline-end: 5px;
4788   padding-bottom: 0;
4789   padding-inline-start: 0;
4790 }
4791
4792 .customization-lwtheme-menu-theme[defaulttheme] {
4793   list-style-image: url(chrome://browser/skin/Fxtheme-switcher-icon.png);
4794 }
4795
4796 .customization-lwtheme-menu-theme[active="true"] {
4797   background-color: #008484;
4798 }
4799
4800 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
4801   margin: 5px;
4802 }
4803
4804 .customization-lwtheme-menu-theme > .toolbarbutton-text {
4805   text-align: start;
4806 }
4807
4808 #customization-lwtheme-menu-header,
4809 #customization-lwtheme-menu-recommended {
4810   padding: 10px;
4811   margin-bottom: 5px;
4812 }
4813
4814 #customization-lwtheme-menu-header,
4815 #customization-lwtheme-menu-recommended,
4816 #customization-lwtheme-menu-footer {
4817   background-color: #A09090;
4818   color: #000000;
4819   margin-right: -10px;
4820   margin-left: -10px;
4821 }
4822
4823 #customization-lwtheme-menu-header {
4824   margin-top: -10px;
4825   border-top-right-radius: 3px;
4826   border-top-left-radius: 3px;
4827 }
4828
4829 #customization-lwtheme-menu-recommended {
4830 }
4831
4832 #customization-lwtheme-menu-footer {
4833   margin-bottom: -10px;
4834   border-bottom-right-radius: 3px;
4835   border-bottom-left-radius: 3px;
4836 }
4837
4838 .customization-lwtheme-menu-footeritem {
4839   -moz-appearance: none;
4840   -moz-box-flex: 1;
4841   background-color: #C09070;
4842   color: #000000;
4843   border: 1px solid transparent;
4844   padding: 10px;
4845   margin-left: 0;
4846   margin-right: 0;
4847 }
4848
4849 .customization-lwtheme-menu-footeritem:hover {
4850   background-color: #FFCF00;
4851 }
4852
4853 .customization-lwtheme-menu-footeritem:first-child {
4854 }
4855
4856 /* === END customizeMode.inc.css === */
4857
4858 /* === BEGIN customizeTip.inc.css === */
4859
4860 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent {
4861   padding: 0;
4862   margin: 0;
4863   min-width: 400px;
4864   max-width: 1000px;
4865   min-height: 200px;
4866   border-radius: 3px;
4867 /*  background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%);*/
4868   border: 1px solid #9C9CFF;
4869   color: #FF9F00;
4870 }
4871
4872 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) {
4873 /*  background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%);*/
4874 }
4875
4876 .customization-tipPanel-infoBox {
4877   margin: 20px 25px 25px;
4878   width: 25px;
4879   background-image: url("chrome://browser/skin/customizableui/info-icon-customizeTip.png");
4880   background-repeat: no-repeat;
4881 }
4882
4883 .customization-tipPanel-content {
4884   margin: 25px 0;
4885   font-size: 12px;
4886   line-height: 18px;
4887 }
4888
4889 .customization-tipPanel-em {
4890   margin: 0;
4891   font-weight: bold;
4892 }
4893
4894 .customization-tipPanel-contentImage {
4895   margin-top: 25px;
4896   list-style-image: url("chrome://browser/skin/customizableui/customize-illustration.png");
4897   min-width: 300px;
4898   max-width: 300px;
4899   min-height: 190px;
4900   max-height: 190px;
4901   display: -moz-box;
4902 }
4903
4904 .customization-tipPanel-contentImage:-moz-locale-dir(rtl) {
4905   list-style-image: url("chrome://browser/skin/customizableui/customize-illustration-rtl.png");
4906 }
4907
4908 .customization-tipPanel-link {
4909   -moz-appearance: none;
4910   background: transparent;
4911   border: none;
4912   box-shadow: none;
4913   color: #3333FF;
4914   margin: 0;
4915   cursor: pointer;
4916 }
4917
4918 .customization-tipPanel-link > .button-box > .button-text {
4919   margin: 0 !important;
4920 }
4921
4922 .customization-tipPanel-closeBox > .close-icon {
4923   -moz-appearance: none;
4924   border: 0;
4925   margin-inline-end: -25px;
4926 }
4927
4928 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"],
4929 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
4930   list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png");
4931 }
4932
4933 /* === END customizeTip.inc.css === */
4934
4935 /**
4936  * This next rule is a hack to disable subpixel anti-aliasing on all
4937  * labels during the customize mode transition. Subpixel anti-aliasing
4938  * on Windows with Direct2D layers acceleration is particularly slow to
4939  * paint, so this hack is how we sidestep that performance bottleneck.
4940  */
4941 #main-window:-moz-any([customize-entering],[customize-exiting]) label {
4942   transform: perspective(0.01px);
4943 }
4944
4945 #main-window[customize-entered] > #tab-view-deck {
4946   background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
4947   background-attachment: fixed;
4948 }
4949
4950 #main-window[customization-lwtheme] > #tab-view-deck:-moz-lwtheme {
4951   background-repeat: no-repeat;
4952   background-position: right top;
4953   background-attachment: fixed;
4954   /* The image will get set from CustomizeMode.jsm */
4955   background-image: none;
4956   background-color: transparent;
4957 }
4958
4959 #main-window[customization-lwtheme]:-moz-lwtheme {
4960   background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
4961   background-repeat: repeat;
4962   background-attachment: fixed;
4963   background-position: left top;
4964 }
4965
4966 #main-window[customize-entered] #browser-bottombox,
4967 #main-window[customize-entered] #customization-container {
4968   border-left: 1px solid #9C9CFF;
4969   border-right: 1px solid #9C9CFF;
4970   background-clip: padding-box;
4971 }
4972
4973 #main-window[customize-entered] #browser-bottombox {
4974   border-bottom: 1px solid #9C9CFF;
4975 }
4976
4977 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"] {
4978   margin-right: -2px;
4979 }
4980
4981 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
4982   margin-left: -2px;
4983 }
4984
4985 /* End customization mode */
4986
4987 /* Private browsing indicators */
4988
4989 /**
4990  * Currently, we have two places where we put private browsing indicators on
4991  * Windows. When tabsintitlebar is enabled, we draw the indicator in the titlebar.
4992  * When tabsintitlebar is disabled, we draw the indicator at the end of the
4993  * tabstrip. The titlebar indicator is the fiddliest of the bunch, since we
4994  * want the bottom border of the image to line up with the bottom of the window
4995  * caption buttons. That's why there's so much special-casing going on in here.
4996  */
4997 .private-browsing-indicator {
4998   display: none;
4999   pointer-events: none;
5000 }
5001
5002 #private-browsing-indicator-titlebar {
5003   display: block;
5004   position: absolute;
5005 }
5006
5007 #main-window[privatebrowsingmode=temporary][tabsintitlebar] #private-browsing-indicator-titlebar > .private-browsing-indicator {
5008   display: block;
5009 }
5010
5011 #main-window[privatebrowsingmode=temporary]:-moz-any([inFullscreen],:not([tabsintitlebar])) #TabsToolbar > .private-browsing-indicator {
5012   display: -moz-box;
5013 }
5014
5015 #TabsToolbar > .private-browsing-indicator {
5016   background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") no-repeat center -3px;
5017   margin-inline-start: 4px;
5018   width: 48px;
5019 }
5020
5021 /* Bug 1008183: We're intentionally using the titlebar asset here for fullscreen
5022  * mode, since the tabstrip "mimics" the titlebar in that case with its own
5023  * min/max/close window buttons.
5024  */
5025 #private-browsing-indicator-titlebar > .private-browsing-indicator,
5026 #main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
5027   background: url("chrome://browser/skin/privatebrowsing-mask-titlebar.png") no-repeat center 0px;
5028   margin-inline-end: 4px;
5029   width: 40px;
5030   height: 20px;
5031   position: relative;
5032 }
5033
5034 /* This one is for Linux */
5035 #main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
5036   background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") center no-repeat;
5037   width: 48px;
5038 }
5039
5040 /* End private browsing indicators */
5041
5042 /* === BEGIN UITour.inc.css === */
5043
5044 /* UI Tour */
5045
5046 #UITourHighlightContainer {
5047   -moz-appearance: none;
5048   border: none;
5049   background-color: transparent;
5050   /* This is a buffer to compensate for the movement in the "wobble" effect,
5051      and for the box-shadow of #UITourHighlight. */
5052   padding: 4px;
5053 }
5054
5055 #UITourHighlight {
5056   background-image: radial-gradient(50% 100%, rgba(0,132,132,0.4) 50%, rgba(0,132,132,0.6) 100%);
5057   border-radius: 40px;
5058   border: 1px solid #9C9CFF;
5059   /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
5060      on Linux without an X compositor where opacity is either 0 or 1. */
5061   box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
5062   min-height: 32px;
5063   min-width: 32px;
5064 }
5065
5066 #UITourTooltipBody {
5067   -moz-box-align: start;
5068 }
5069
5070 #UITourTooltipTitleContainer {
5071   -moz-box-align: start;
5072   margin-bottom: 10px;
5073 }
5074
5075 #UITourTooltipIcon {
5076   width: 48px;
5077   height: 48px;
5078   margin-inline-end: 10px;
5079 }
5080
5081 #UITourTooltipTitle,
5082 #UITourTooltipDescription {
5083   max-width: 20rem;
5084 }
5085
5086 #UITourTooltipTitle {
5087   font-size: 1.45rem;
5088   font-weight: bold;
5089   margin: 0;
5090 }
5091
5092 #UITourTooltipDescription {
5093   margin-inline-start: 0;
5094   margin-inline-end: 0;
5095   font-size: 1.15rem;
5096   line-height: 1.8rem;
5097   margin-bottom: 0; /* Override global.css */
5098 }
5099
5100 #UITourTooltipClose {
5101   position: relative;
5102   -moz-appearance: none;
5103   border: none;
5104   background-color: transparent;
5105   min-width: 0;
5106   margin-inline-start: 4px;
5107   margin-top: -2px;
5108 }
5109
5110 #UITourTooltipClose > .toolbarbutton-text {
5111   display: none;
5112 }
5113
5114 #UITourTooltipButtons {
5115   -moz-box-pack: end;
5116   background-color: rgba(0,0,0,.2);
5117   border-top: 1px solid rgba(0,0,0,.4);
5118   margin: 10px -16px -16px;
5119   padding: 16px;
5120 }
5121
5122 #UITourTooltipButtons > label,
5123 #UITourTooltipButtons > button {
5124   margin: 0 15px;
5125 }
5126
5127 #UITourTooltipButtons > label:first-child,
5128 #UITourTooltipButtons > button:first-child {
5129   margin-inline-start: 0;
5130 }
5131
5132 #UITourTooltipButtons > label:last-child,
5133 #UITourTooltipButtons > button:last-child {
5134   margin-inline-end: 0;
5135 }
5136
5137 #UITourTooltipButtons > button[image] > .button-box > .button-icon {
5138   width: 16px;
5139   height: 16px;
5140   margin-inline-end: 5px;
5141 }
5142
5143 #UITourTooltipButtons > label,
5144 #UITourTooltipButtons > button .button-text {
5145   font-size: 1.15rem;
5146 }
5147
5148 #UITourTooltipButtons > button:not(.button-link) {
5149   -moz-appearance: none;
5150   background-color: #C09070;
5151   border-radius: 3000px;
5152   border: none;
5153   color: #000000;
5154   padding: 4px 30px;
5155   transition-property: background-color, color;
5156   transition-duration: 150ms;
5157 }
5158
5159 #UITourTooltipButtons > button:not(.button-link):not(:active):hover {
5160   background-color: #FFCF00;
5161   color: #000000;
5162 }
5163
5164 #UITourTooltipButtons > label,
5165 #UITourTooltipButtons > button.button-link {
5166   -moz-appearance: none;
5167   background: transparent;
5168   border: none;
5169   box-shadow: none;
5170   color: rgba(0,0,0,0.35);
5171   padding-left: 10px;
5172   padding-right: 10px;
5173 }
5174
5175 #UITourTooltipButtons > button.button-link:hover {
5176   color: black;
5177 }
5178
5179 /* The primary button gets the same color as the customize button. */
5180 #UITourTooltipButtons > button.button-primary {
5181   background-color: #A06060; /* LCARS default button background color */
5182   color: #000000;
5183   padding-left: 30px;
5184   padding-right: 30px;
5185 }
5186
5187 #UITourTooltipButtons > button.button-primary:not(:active):hover {
5188   background-color: #FFCF00;
5189   color: #000000;
5190 }
5191
5192 /* Notification overrides for Heartbeat UI */
5193
5194 notification.heartbeat {
5195   background-color: #A09090;
5196 /*  height: 40px;*/
5197 }
5198
5199 @keyframes pulse-onshow {
5200  0% {
5201    opacity: 0;
5202    transform: scale(1.0);
5203  }
5204  25% {
5205    opacity: 1;
5206    transform: scale(1.1);
5207  }
5208  50% {
5209    transform: scale(1.0);
5210  }
5211  75% {
5212    transform: scale(1.1);
5213  }
5214  100% {
5215    transform: scale(1.0);
5216  }
5217 }
5218
5219 @keyframes pulse-twice {
5220  0% {
5221    transform: scale(1.1);
5222  }
5223  50% {
5224    transform: scale(0.8);
5225  }
5226  100% {
5227    transform: scale(1);
5228  }
5229 }
5230
5231 .messageText.heartbeat {
5232   color: #000000;
5233 /*  text-shadow: none; */
5234   margin-inline-start: 0px;
5235 }
5236
5237 .messageImage.heartbeat {
5238   width: 24px;
5239   height: 24px;
5240   margin-inline-start: 8px;
5241   margin-inline-end: 8px;
5242 }
5243
5244 .messageImage.heartbeat.pulse-onshow {
5245   animation-name: pulse-onshow;
5246   animation-duration: 1.5s;
5247   animation-iteration-count: 1;
5248   animation-timing-function: cubic-bezier(.7,1.8,.9,1.1);
5249 }
5250
5251 .messageImage.heartbeat.pulse-twice {
5252   animation-name: pulse-twice;
5253   animation-duration: 1s;
5254   animation-iteration-count: 2;
5255   animation-timing-function: linear;
5256 }
5257
5258 /* Learn More link styles */
5259 .heartbeat > .text-link {
5260   color: #3333FF;
5261   margin-inline-start: 0px;
5262 }
5263
5264 .heartbeat > .text-link:hover {
5265   color: #9C9CFF;
5266   text-decoration: none;
5267 }
5268
5269 .heartbeat > .text-link:hover:active {
5270   color: #FF9F00;
5271 }
5272
5273 /* Heartbeat UI Rating Star Classes */
5274 .heartbeat > #star-rating-container {
5275   display: -moz-box;
5276 /*  margin-bottom: 4px;*/
5277 }
5278
5279 .heartbeat > #star-rating-container > #star5 {
5280   -moz-box-ordinal-group: 5;
5281 }
5282
5283 .heartbeat > #star-rating-container > #star4 {
5284   -moz-box-ordinal-group: 4;
5285 }
5286
5287 .heartbeat > #star-rating-container > #star3 {
5288   -moz-box-ordinal-group: 3;
5289 }
5290
5291 .heartbeat > #star-rating-container > #star2 {
5292   -moz-box-ordinal-group: 2;
5293 }
5294
5295 .heartbeat > #star-rating-container > .star-x  {
5296   background: url("chrome://browser/skin/heartbeat-star-off.svg");
5297   cursor: pointer;
5298   /* Overrides the margin-inline-end for all platforms defined in the .plain class */
5299   margin-inline-end: 4px !important;
5300   width: 16px;
5301   height: 16px;
5302 }
5303
5304 .heartbeat > #star-rating-container > .star-x:hover,
5305 .heartbeat > #star-rating-container > .star-x:hover ~ .star-x {
5306   background: url("chrome://browser/skin/heartbeat-star-lit.svg");
5307 }
5308
5309 /* === END UITour.inc.css === */
5310
5311 #UITourTooltipButtons {
5312   /**
5313    * Override the --panel-arrowcontent-padding so the background extends
5314    * to the sides and bottom of the panel.
5315    */
5316   margin-left: -10px;
5317   margin-right: -10px;
5318   margin-bottom: -10px;
5319 }
5320
5321 /* === BEGIN contextmenu.inc.css === */
5322
5323 menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left {
5324 }
5325
5326 #context-navigation > .menuitem-iconic {
5327   -moz-box-flex: 1;
5328   -moz-box-pack: center;
5329   -moz-box-align: center;
5330 }
5331
5332 #context-navigation > .menuitem-iconic[disabled="true"] {
5333   background-color: transparent;
5334 }
5335
5336 #context-navigation > .menuitem-iconic > .menu-iconic-left {
5337   -moz-appearance: none;
5338 }
5339
5340 #context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
5341   width: 16px;
5342   height: 16px;
5343   margin: 7px;
5344   filter: url(chrome://browser/skin/filters.svg#fill);
5345   fill: currentColor;
5346 }
5347
5348 #context-back {
5349   list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back");
5350 }
5351
5352 #context-forward {
5353   list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward");
5354 }
5355
5356 #context-reload {
5357   list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload");
5358 }
5359
5360 #context-stop {
5361   list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop");
5362 }
5363
5364 #context-bookmarkpage {
5365   list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark");
5366 }
5367
5368 #context-bookmarkpage[starred=true] {
5369   list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked");
5370 }
5371
5372 #context-back:-moz-locale-dir(rtl),
5373 #context-forward:-moz-locale-dir(rtl),
5374 #context-reload:-moz-locale-dir(rtl) {
5375   transform: scaleX(-1);
5376 }
5377
5378 #context-navigation > #context-reload > .menu-iconic-left > .menu-iconic-icon,
5379 #context-navigation > #context-stop > .menu-iconic-left > .menu-iconic-icon {
5380   width: 14px;
5381   height: 14px;
5382   margin: 9px;
5383 }
5384
5385 #context-media-eme-learnmore {
5386   list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
5387 }
5388
5389 #context-media-eme-learnmore {
5390   list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
5391 }
5392
5393 /* === END contextmenu.inc.css === */
5394
5395 #context-navigation {
5396 }
5397
5398 #context-sep-navigation {
5399 /*  margin-top: -4px; */
5400 }
5401
5402 .browser-extension-panel > .panel-arrowcontainer > .panel-arrowcontent {
5403   padding: 0;
5404   overflow: hidden;
5405 }
5406
5407 .webextension-popup-browser {
5408   border-radius: inherit;
5409 }