Jump to content

MediaWiki:Common.css: Difference between revisions

From Flerf Wiki
m Switch from CSS blur to true pixelation via downscale + pixelated image-rendering
m Switch from CSS blur to true pixelation via downscale + pixelated image-rendering
Line 1: Line 1:
/* NSFW spoiler - pixelated until mouse moves over image */
.spoiler-img {
.spoiler-img {
     display: table;
     display: table;
Line 4: Line 5:
}
}
.spoiler-img img {
.spoiler-img img {
     image-rendering: pixelated;
     filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='pixelate' x='0' y='0'><feFlood x='4' y='4' height='2' width='2'/><feComposite width='10' height='10'/><feTile result='a'/><feComposite in='SourceGraphic' in2='a' operator='in'/><feMorphology operator='dilate' radius='5'/></filter></svg>#pixelate");
    image-rendering: -moz-crisp-edges;
     transition: filter 0.3s;
    transform: scale(0.05);
    transform-origin: top left;
    width: 2000% !important;
    height: 2000% !important;
     transition: transform 0.3s, width 0.3s, height 0.3s;
     cursor: pointer;
     cursor: pointer;
}
}
.spoiler-img.revealed img {
.spoiler-img.revealed img {
     transform: scale(1);
     filter: none;
    width: auto !important;
    height: auto !important;
}
}

Revision as of 13:13, 4 May 2026

/* NSFW spoiler - pixelated until mouse moves over image */
.spoiler-img {
    display: table;
    overflow: hidden;
}
.spoiler-img img {
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='pixelate' x='0' y='0'><feFlood x='4' y='4' height='2' width='2'/><feComposite width='10' height='10'/><feTile result='a'/><feComposite in='SourceGraphic' in2='a' operator='in'/><feMorphology operator='dilate' radius='5'/></filter></svg>#pixelate");
    transition: filter 0.3s;
    cursor: pointer;
}
.spoiler-img.revealed img {
    filter: none;
}