LCARStrek/browser/browser.css

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