MediaWiki:Common.css - Revision history

ICSpin: Slightly larger pixel blocks and reduced blur

2026-05-04T17:16:37Z

Slightly larger pixel blocks and reduced blur

← Older revision		Revision as of 13:16, 4 May 2026
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='20' height='20'/><feTile result='a'/><feComposite in='SourceGraphic' in2='a' operator='in'/><feMorphology operator='dilate' radius='10'/></filter></svg>#pixelate") blur(~~3px~~);		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;

ICSpin: Double pixel block size and add blur for softer chunky mosaic

2026-05-04T17:15:42Z

Double pixel block size and add blur for softer chunky mosaic

← Older revision		Revision as of 13:15, 4 May 2026
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='10' height='10'/><feTile result='a'/><feComposite in='SourceGraphic' in2='a' operator='in'/><feMorphology operator='dilate' radius='5'/></filter></svg>#pixelate");		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;

ICSpin: Switch from CSS blur to true pixelation via downscale + pixelated image-rendering

2026-05-04T17:13:58Z

Switch from CSS blur to true pixelation via downscale + pixelated image-rendering

← Older revision		Revision as of 13:13, 4 May 2026
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~~;
	}		}

ICSpin: Switch from CSS blur to true pixelation via downscale + pixelated image-rendering

2026-05-04T17:13:30Z

Switch from CSS blur to true pixelation via downscale + pixelated image-rendering

← Older revision		Revision as of 13:13, 4 May 2026
Line 1:		Line 1:
	~~/* NSFW spoiler - pixelated until mouse moves over image */~~
	.spoiler-img {		.spoiler-img {
	display: table;		display: table;
Line 5:		Line 4:
	}		}
	.spoiler-img img {		.spoiler-img img {
	~~filter~~: ~~blur~~(~~6px~~);		image-rendering: pixelated;
	transition: ~~filter~~ 0.3s;		image-rendering: -moz-crisp-edges;
			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 {
	~~filter~~: ~~none~~;		transform: scale(1);
			width: auto !important;
			height: auto !important;
	}		}

ICSpin: Tighten spoiler blur and clip bleed (overflow: hidden, smaller blur radius)

2026-05-04T17:11:48Z

Tighten spoiler blur and clip bleed (overflow: hidden, smaller blur radius)

← Older revision		Revision as of 13:11, 4 May 2026
Line 5:		Line 5:
	}		}
	.spoiler-img img {		.spoiler-img img {
	filter: blur(~~8px~~) ~~contrast(1.5);~~		filter: blur(6px);
	~~transform: scale(0.1);~~		transition: filter 0.3s;
	~~transform-origin: center;~~
	~~image-rendering: pixelated~~;
	transition: filter ~~0.3s, transform~~ 0.3s;
	cursor: pointer;		cursor: pointer;
	}		}
	.spoiler-img.revealed img {		.spoiler-img.revealed img {
	filter: none;		filter: none;
	~~transform: scale(1);~~
	}		}

ICSpin: Tighten spoiler blur and clip bleed (overflow: hidden, smaller blur radius)

2026-05-04T17:11:24Z

Tighten spoiler blur and clip bleed (overflow: hidden, smaller blur radius)

← Older revision		Revision as of 13:11, 4 May 2026
Line 3:		Line 3:
	display: table;		display: table;
	overflow: hidden;		overflow: hidden;
	~~position: relative;~~
	}		}
	.spoiler-img img {		.spoiler-img img {
	filter: blur(~~3px~~) contrast(1.2) ~~saturate~~(1.3);		filter: blur(8px) contrast(1.5);
	transition: filter 0.3s;		transform: scale(0.1);
			transform-origin: center;
			image-rendering: pixelated;
			transition: filter 0.3s, transform 0.3s;
	cursor: pointer;		cursor: pointer;
	}		}
	.spoiler-img.revealed img {		.spoiler-img.revealed img {
	filter: none;		filter: none;
			transform: scale(1);
	}		}

ICSpin: Tighten spoiler blur and clip bleed (overflow: hidden, smaller blur radius)

2026-05-04T17:10:52Z

Tighten spoiler blur and clip bleed (overflow: hidden, smaller blur radius)

← Older revision		Revision as of 13:10, 4 May 2026
Line 1:		Line 1:
			/* NSFW spoiler - pixelated until mouse moves over image */
	.spoiler-img {		.spoiler-img {
	display: table;		display: table;
	overflow: hidden;		overflow: hidden;
			position: relative;
	}		}
	.spoiler-img img {		.spoiler-img img {
	filter: ~~url~~(~~"data:image/svg+xml;utf8,<svg xmlns='http://www~~.~~w3.org/2000/svg'><filter id='p'><feGaussianBlur stdDeviation='~~2~~'/><feComponentTransfer><feFuncA type='discrete' tableValues='0~~ 1~~'/></feComponentTransfer><feMorphology operator='dilate' radius='~~3~~'/></filter></svg>#p"~~);		filter: blur(3px) contrast(1.2) saturate(1.3);
	transition: filter 0.3s;		transition: filter 0.3s;
	cursor: pointer;		cursor: pointer;

ICSpin: Tighten spoiler blur and clip bleed (overflow: hidden, smaller blur radius)

2026-05-04T17:10:21Z

Tighten spoiler blur and clip bleed (overflow: hidden, smaller blur radius)

← Older revision		Revision as of 13:10, 4 May 2026
Line 1:		Line 1:
	~~/* NSFW spoiler - pixelated until mouse moves over image */~~
	.spoiler-img {		.spoiler-img {
	display: table;		display: table;
Line 5:		Line 4:
	}		}
	.spoiler-img img {		.spoiler-img img {
	filter: ~~blur~~(~~6px~~);		filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='p'><feGaussianBlur stdDeviation='2'/><feComponentTransfer><feFuncA type='discrete' tableValues='0 1'/></feComponentTransfer><feMorphology operator='dilate' radius='3'/></filter></svg>#p");
	transition: filter 0.3s;		transition: filter 0.3s;
	cursor: pointer;		cursor: pointer;

ICSpin: Tighten spoiler blur and clip bleed (overflow: hidden, smaller blur radius)

2026-05-04T17:09:14Z

Tighten spoiler blur and clip bleed (overflow: hidden, smaller blur radius)

← Older revision		Revision as of 13:09, 4 May 2026
Line 1:		Line 1:
	/* NSFW spoiler - ~~blur~~ until mouse moves over image */		/* NSFW spoiler - pixelated until mouse moves over image */
	.spoiler-img {		.spoiler-img {
	display: table;		display: table;
			overflow: hidden;
	}		}
	.spoiler-img img {		.spoiler-img img {
	filter: blur(~~20px~~);		filter: blur(6px);
	transition: filter 0.3s;		transition: filter 0.3s;
	cursor: pointer;		cursor: pointer;

ICSpin: Remove unused .mw-collapsible-toggle rule; keep .spoiler-img blur styles

2026-05-04T17:06:31Z

Remove unused .mw-collapsible-toggle rule; keep .spoiler-img blur styles

← Older revision		Revision as of 13:06, 4 May 2026
Line 1:		Line 1:
	/* NSFW spoiler - blur until ~~hovered/clicked~~ */		/* NSFW spoiler - blur until mouse moves over image */
			.spoiler-img {
			display: table;
			}
	.spoiler-img img {		.spoiler-img img {
	filter: blur(20px);		filter: blur(20px);
	transition: filter 0.3s;		transition: filter 0.3s;
	cursor: pointer;		cursor: pointer;
	}
	~~@media (hover: hover) and (pointer: fine) {~~
	~~.spoiler-img:hover img {~~
	~~filter: none;~~
	}
	}		}
	.spoiler-img.revealed img {		.spoiler-img.revealed img {
	filter: none;		filter: none;
	}		}