MediaWiki:Common.css/src/ lib.scss

@use 'sass:color';

$breakpoint-l: 1366px;
$breakpoint-wikigg-header: 961px;

@mixin widget-style($background: var(--theme-widget-background)) {
	border-width: 1px;
	border-style: solid;
	border-color: var(--theme-widget-border-color);
	border-radius: var(--theme-widget-border-radius);
	box-shadow: var(--theme-widget-shadow);
	background: $background;
}

@mixin the-grass($position: absolute){
	margin: 0;
	width: 100%;
	height: var(--theme-top-background-height);
	background: var(--theme-top-background);
	pointer-events: none;
	position: $position;
	top: var(--theme-top-background-offset);
}

@mixin box-style($padding: var(--layout-box-padding)){
	border: 1px solid var(--theme-box-border-color);
	border-radius: var(--theme-box-border-radius);
	background: var(--theme-box-background);
	//box-shadow: var(--theme-box-inset-shadow);
	padding: $padding;
}

@mixin heading-style {
	margin: 0;
	color: var(--theme-heading-color);
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-weight: normal;
	line-height: 1.25;
}

@mixin pixelated{
	image-rendering: pixelated; /*<< for chrome */
	image-rendering: crisp-edges; /*<< for firefox */
}
@mixin pseudo-block{
	content: '';
	display: block;
	pointer-events: none;
}
@mixin hr{
	height: 0;
	border-top: 1px solid var(--theme-hr-color-top);
	border-bottom: 1px solid var(--theme-hr-color-bottom);
}

@mixin mask-icon($color, $icon: 0, $size: 100% 100%, $position: center center){
	@if $icon != 0 {
		--mask: #{$icon} no-repeat;
		-webkit-mask: var(--mask);
		mask: var(--mask);
		-webkit-mask-size: #{$size};
		mask-size: #{$size};
		-webkit-mask-position: #{$position};
		mask-position: #{$position};
	}
	background-color: #{$color};
}

@mixin tab-icon {
	width: calc(var(--icon-margin)*2 + var(--icon-size));
	//height: 100%;
	box-sizing: content-box;
	padding: var(--tab-padding-y);
	color: transparent;/*<< for watch/unwatch, the text of <a> will be plain 'watch'/'unwatch' without <span> after clicking. */
	display: flex;
	align-items: center;
	&::before{
		content: '';
		display: block;
		position: unset;
		background-image: none;
		width: var(--icon-size);
		height: var(--icon-size);
		flex: 0 0 auto;
		margin: var(--icon-margin);
		@include mask-icon(var(--theme-link-color), var(--icon));
	}
	&:hover::before{
		@include mask-icon(var(--theme-link-color-hover));
	}
	span{
		display: none;
	}
}

// based on .mixin-placeholder from here:
// https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.less/mediawiki.mixins.less
@mixin placeholder {
	// Chrome 4-56, WebKit, Blink, Edge 12-18
	&::-webkit-input-placeholder {
		@content;
	}
	// Internet Explorer 10-11
	&:-ms-input-placeholder {
		@content;
	}
	// Firefox 19-50
	&::-moz-placeholder {
		@content;
	}
	// W3C Standard Selectors Level 4
	&::placeholder {
		@content;
	}
}

@function to-rgb($hexcolor) {
   	@return color.red($hexcolor), color.green($hexcolor), color.blue($hexcolor);
}