MediaWiki:Common.less/mixins.less

/*
	Less mixins to be used from any skin.
*/

// for HiDPI screens; otherwise icons appear blurry
.pixelate() {

	@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
		image-rendering: pixelated; // chrome only supports this value
		image-rendering: crisp-edges; // this is what should be used
	}

}

// used for .messagebox class
.mbox(@name) {
	&.@{name} {
		background-color: var(~"--messagebox-@{name}-background");
		border-color: var(~"--messagebox-@{name}-border");
		color: var(~"--messagebox-@{name}-color");
		
		a,
		a:visited,
		a:active {
			color: var(~"--messagebox-@{name}-link-color");
		}
	}
}

.mboxvar(@name, @background, @border, @color, @link-color) {
	--messagebox-@{name}-background: @background;
	--messagebox-@{name}-border: @border;
	--messagebox-@{name}-color: @color;
	--messagebox-@{name}-link-color: @link-color;
}

// possible replacement of defining inline svgs as css vars using mask-image
// currentColor functionality
.mask(@url) {
	// chrome/edge doesnt support unprefixed as of 2023
	-webkit-mask: url(~'"@{url}"') no-repeat 50% 50% / contain;
	mask: url(~'"@{url}"') no-repeat 50% 50% / contain;
}