MediaWiki:Common.css: Difference between revisions
m Add scroll-safe blur logic for .spoiler-img (require revealed class instead of :hover) |
m Slightly larger pixel blocks and reduced blur |
||
| (9 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
/* NSFW spoiler - | /* NSFW spoiler - chunky pixelated blocks until mouse moves over image */ | ||
.spoiler-img { | |||
display: table; | |||
overflow: hidden; | |||
} | |||
.spoiler-img img { | .spoiler-img img { | ||
filter: blur( | 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='28' height='28'/><feTile result='a'/><feComposite in='SourceGraphic' in2='a' operator='in'/><feMorphology operator='dilate' radius='14'/></filter></svg>#pixelate") blur(2px); | ||
transition: filter 0.3s; | transition: filter 0.3s; | ||
cursor: pointer; | cursor: pointer; | ||
} | } | ||
.spoiler-img.revealed img { | .spoiler-img.revealed img { | ||
filter: none; | filter: none; | ||
} | } | ||
Latest revision as of 13:16, 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='28' height='28'/><feTile result='a'/><feComposite in='SourceGraphic' in2='a' operator='in'/><feMorphology operator='dilate' radius='14'/></filter></svg>#pixelate") blur(2px);
transition: filter 0.3s;
cursor: pointer;
}
.spoiler-img.revealed img {
filter: none;
}