about:blank domain exception for background color


I've set the following to have about:blank be displayed in blue :
@-moz-document url("about:blank") {html {background:#004CD0;}}

I omitted the !important so up to now I've encountered no color problem on sites using about:blank
Yet, I encounter a true difficulty on protonmail.com which uses about:blank in its email composition window ... resulting in the background color I've chosen.

I'd like to know if it's possible to insert in the above rule an exception for a given domain :
@-moz-document url("about:blank") {html {background:#004CD0;}} BUT NOT on domain1, domain2

Thanks :)


  • Not sure it could be solved any other way, but this is what I am using for some time and haven't ran into troubles described above: instead of altering the the @-moz-document rule (imo this cannot be used to solve given problem in any way) use "defensive" selector to style the body element (instead of html; no worry, background-color of body is applied to whole viewport if not told otherwise):

    @-moz-document url("about:blank") {
        head:empty + body:empty { /* ... */ }

    (from style 71889)

    Looking at other "about:blank" styles more common approach is to use *:empty:not([style]):not([text]):not([class]):not([onresize]), but I don't feel it is better. …Although on the second thought, the :not([style]) makes sense.

  • edited April 2016 Firefox
    Thank you very much, myf :)

    Your first style works just fine :
    @-moz-document url("about:blank") {head:empty + body:empty {background:#004CD0;}}

    I had tried previously the other "about:blank" style which didn't perform correctly, at least when applied to ProtonMail's email compose box, which was -- but ain't no more! - my problem.

    I truly appreciate your help. Thanks again :)
  • Pleasure being helpful, thanks for appreciation : ]
  • edited May 2018 Firefox
    Where do you put this css rule? In protonmail's css or the browser's? (If the browser's, what file? .mozilla/firefox/xxxx.default/chrom/userContent.css ??) Thanks.
  • edited May 2018 Firefox
    To re-enable the chrome.css you gotta read this first.
    https://github.com/Izheil/Firefox-57-full-dark-theme-with-scrollbars/tree/master/Scrollbars & tooltips dark theme
    Then, you can edit the whole UI(in which the about: pages are part of).
Sign In or Register to comment.