Custom style (CSS) being overwritten by "dim page" setting

[LaundryHamper]

Lines 484-491 in src/includes/content.js are:

PVI.DIV.style.cssText =
  "margin: 0; padding: 0; " +
  (cfg.hz.css || "") +
  (cfg.hz.cssdim
    ? "box-shadow: 0 0 0 2000px rgba(0, 0, 0," +
      cfg.hz.cssdim +
      ")"
      : "") +
  "; visibility: visible; cursor: default; display: none; z-index: 2147483647; " +
  "position: fixed !important; box-sizing: content-box !important; left: auto; top: auto; right: auto; bottom: auto; width: auto; height: auto; max-width: none !important; max-height: none !important; ";

This creates CSS from the contents of the Custom style (CSS) box, a bit more using the Dim page setting, and some other raw CSS.

The bit for the Dim page setting creates box-shadow: rgba(0, 0, 0, [VALUE FROM DIM PAGE]) 0px 0px 0px 2000px), but the white outer glow around the popup, rgba(255, 255, 255, 0.8) 0px 0px 150px, is added as a second entry in that box-shadow style - so the final output is

box-shadow: rgba(0, 0, 0, [VALUE FROM DIM PAGE]) 0px 0px 0px 2000px, rgba(255, 255, 255, 0.8) 0px 0px 150px;

...Because the Dim-page stuff comes after the user CSS stuff, the user can't fully get rid of that glow unless they include !important in their custom CSS.

I recommend either making the outer glow styling a separate bit of code before the Custom style (CSS) portion and separate from the Dim page bit, or (IMHO the better option) taking it out of content.js altogether and putting it into the default Custom style (CSS) entries (line 40 in src/defaults.jsn) - there's already a bit of box-shadow styling in there anyway, the complete line would be

"css": "margin: 3px 3px 20px;\nbackground: #f8f8ff padding-box;\nborder: 3px solid hsla(0,0%,95%,.6);\nborder-radius: 2px;\nbox-shadow: 0 0 2px #666, 0 0 150px rgba(255, 255, 255, 0.8);",.

Thanks for maintaining the extension, the web would be shit without it :3