Jump to content

MediaWiki:Common.css: Difference between revisions

From shapez Wiki
Add basic styles for inline keybindings
 
Add styles for generic boxes and inline signals
Line 1: Line 1:
shapez-box {
display: block;
padding: 0.5em;
border: 1px solid;
border-color: light-dark(var(--box-color), hsl(from var(--box-color) h calc(s * 0.5) l / 0.2));
background-color: hsl(from var(--box-color) h s l / 0.2);
--box-color: #aaa;
&.red { --box-color: #ff666a; }
&.green { --box-color: #78ff66; }
&.blue { --box-color: #66a7ff; }
&.cyan { --box-color: #00fcff; }
&.purple { --box-color: #dd66ff; }
&.yellow { --box-color: #fcf52a; }
}
kbd {
kbd {
font-family: inherit;
font-family: inherit;
Line 4: Line 21:
text-decoration-style: dotted;
text-decoration-style: dotted;
text-decoration-thickness: 1px;
text-decoration-thickness: 1px;
> kbd {
font-weight: bold;
}
}
}


kbd > kbd {
.shapez-signal {
font-weight: bold;
&.inline img {
width: 1lh;
height: 1lh;
vertical-align: bottom;
}
}
}

Revision as of 00:32, 3 February 2026

shapez-box {
	display: block;
	padding: 0.5em;
	border: 1px solid;
	border-color: light-dark(var(--box-color), hsl(from var(--box-color) h calc(s * 0.5) l / 0.2));
	background-color: hsl(from var(--box-color) h s l / 0.2);

	--box-color: #aaa;

	&.red { --box-color: #ff666a; }
	&.green { --box-color: #78ff66; }
	&.blue { --box-color: #66a7ff; }
	&.cyan { --box-color: #00fcff; }
	&.purple { --box-color: #dd66ff; }
	&.yellow { --box-color: #fcf52a; }
}

kbd {
	font-family: inherit;
	text-decoration-line: underline;
	text-decoration-style: dotted;
	text-decoration-thickness: 1px;
	
	> kbd {
		font-weight: bold;
	}
}

.shapez-signal {
	&.inline img {
		width: 1lh;
		height: 1lh;
		vertical-align: bottom;
	}
}