MediaWiki:Common.css: Difference between revisions
m Switch from CSS blur to true pixelation via downscale + pixelated image-rendering |
m Double pixel block size and add blur for softer chunky mosaic |
||
| Line 1: | Line 1: | ||
/* NSFW spoiler - pixelated until mouse moves over image */ | /* NSFW spoiler - chunky pixelated blocks until mouse moves over image */ | ||
.spoiler-img { | .spoiler-img { | ||
display: table; | display: table; | ||
| Line 5: | Line 5: | ||
} | } | ||
.spoiler-img img { | .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=' | 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='20' height='20'/><feTile result='a'/><feComposite in='SourceGraphic' in2='a' operator='in'/><feMorphology operator='dilate' radius='10'/></filter></svg>#pixelate") blur(3px); | ||
transition: filter 0.3s; | transition: filter 0.3s; | ||
cursor: pointer; | cursor: pointer; | ||
Revision as of 13:15, 4 May 2026
/* NSFW spoiler - chunky pixelated blocks 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='20' height='20'/><feTile result='a'/><feComposite in='SourceGraphic' in2='a' operator='in'/><feMorphology operator='dilate' radius='10'/></filter></svg>#pixelate") blur(3px);
transition: filter 0.3s;
cursor: pointer;
}
.spoiler-img.revealed img {
filter: none;
}