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