MediaWiki:Common.less/mixins.less - Revision history

Alex at 16:14, 17 October 2024

2024-10-17T16:14:33Z

← Older revision		Revision as of 18:14, 17 October 2024
Line 1:		Line 1:
			/*
	/* 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;}
			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;
			}

Alex at 16:12, 17 October 2024

2024-10-17T16:12:14Z

← Older revision		Revision as of 18:12, 17 October 2024
Line 1:		Line 1:
			/* 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;}
	/*
	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;
	}

Alex: Created page with "/* 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-@..."

2024-10-16T23:09:48Z

Created page with "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-@..."

New page

/*
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;
}