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