mozilla-org-inverted.css

/**
 * @name Mozilla.org Inverted
 * @stylish-id 109480
 * @author Niklas Gollenstede
 * @licence CC-BY-SA-4.0 or MIT
 * @description
 *     Simple dark 'skin' for Mozilla pages.
 *     Mainly focuses on addond.mozilla.org and developer.mozilla.org, but handles other Mozilla pages as well.
 *
 *     If you have any issues with this style, please open a ticket at https://github.com/NiklasGollenstede/user-styles
 */

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document
    domain("firefox.com"),
    regexp("^https?://(?!metrics)[^/]*\\.mozilla\\.com(/.*)?$"),
    domain("mozilla.net"),
    regexp("^https?://(?!www|air|services\\.addons|bugzilla)[^/]*\\.mozilla\\.org(/.*)?$"), /* keep |hacks ? */
    domain("addons.mozilla.org"), /* explicitly list this to include this block privileged chrome style */
    domain("kb.mozillazine.org")
{

    :root {
        /* the filter value that is used to turn the pages or their main element dark */
        --filter-invert: invert(1) hue-rotate(180deg) saturate(1.666) brightness(1.5);
        /* reversed filter to revert individual elements like imaged back to their original */
        --filter-revert: brightness(0.666) saturate(.6) hue-rotate(180deg) invert(1); /* revert each filter in reverse order */
    }

    html
    {
        background: black;
        filter: var(--filter-invert);
    }

    img,
    video,
    canvas,
    iframe:not([style*="background-color: transparent"]):not([style*="background: transparent"]),
    [style*="background-image"],
    [style*="background:url"],
    [style*="background: url"]
    {
        background: white;
        filter: var(--filter-revert);
    }

    img[src$=".png"]
    {   /* this doesn't work -.- */
        transition: background-color 1.5s;
        background-color: #fff0;
    }

    img[src$=".png"]:not(:hover):not(.avatar), img[src$=".svg"]:not(foo)
    {
        background: unset;
        filter: unset;
    }

    img[src$=".png"]:hover
    {
        background-color: #fff8;
    }
}

@-moz-document
    domain("addons.mozilla.org")
{
    .header-bg, #lightbox
    {
        z-index: 1; /* setting a filter messes with the z-index (in Firefox) */
        filter: var(--filter-revert);
    }
    .header-bg *, #lightbox *
    { filter: unset !important; }
}
@-moz-document
    domain("developer.mozilla.org")
{
    body
    { background-color: #abd9ff !important; }
}
@-moz-document
    domain("accounts.firefox.com")
{
    #fox-logo
    { filter: var(--filter-revert); }
}

@-moz-document
    domain("discourse.mozilla.org")
{
    img.avatar:not(foo):not(bar):not(baz)
    { filter: var(--filter-revert); }
}

@-moz-document /* fix blank black page issue */
    domain("bugzilla.mozilla.org")
{
    html { filter: unset; }
    body { filter: var(--filter-invert); }
    body { background: #f9fcff; }

}