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