Generate Downloadable userChrome.css File

Updated June 13, 2021. Originally posted by jscher2000 on April 26, 2018 beta

You can paste CSS into this lightweight editor (Ace) and then generate a userChrome.css file for download. All text entry and file generation is done within the page without sending any code to my server. This page is not backed up as you work. The editor is not checking your code. (Because the syntax checking is obsolete, I turned it off.)

/* Replace this SAMPLE CONTENT with your own CSS */

/*** Maximize Print Overlay Preview Size ***/

/* Allow panel to be taller */
.dialogBox.printDialogBox[sizeto="available"]{
  --box-ideal-height: 888 !important;
}
/* Remove side margins in narrower windows */
@media (max-width: 1280px) {
  .dialogBox.printDialogBox[sizeto="available"]{
    max-width: 100vw !important;
  }
}

/*** Reposition the site icon and mute button side-by-side when sound is playing ***/

@media (-moz-proton) {
  /* Move the mute/unmute button to the right and enlarge it */
  .tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted]) {
    margin-left: 12px !important; /* pushes icon to the right */
    margin-right: 2px !important; /* closes up some space before the text */
    width: 24px; /* default is 16px */
    height: 24px; /* default is 16px */
    padding: 0 !important; /* allows icon to expand to full size */
  }

  /* Move the site icon to the left a bit and adjust position */
  .tab-icon-stack:not([pinned], [sharing], [crashed]):is([soundplaying], [muted]) > :not(.tab-icon-overlay) {
  	margin-left: -5px !important; /* pushes icon to the left */
    margin-top: 4px !important;  /* reduce by 1px for each 2px reduction in mute button height */
  }

  /* Override the rules for hover/not hover visibility */
     /* for mute button */
  .tabbrowser-tab:not(:hover) .tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted]), 
     /* for site icon */
  .tabbrowser-tab:hover .tab-icon-stack:not([pinned], [sharing], [crashed]):is([soundplaying], [muted]) > :not(.tab-icon-overlay), 
     /* for site icon with Compact density */
  :root[uidensity="compact"] .tab-icon-stack:not([pinned], [sharing], [crashed]):is([soundplaying], [muted]) > :not(.tab-icon-overlay) {
    opacity: 1 !important; /* overrides full transparency with full opacity */
  }
}

using file name: