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