Template:Semitones/styles.css

/*
For width calculations in lieu of CSS vars:
2.5em = white key width
  2em = black key width
  1px = border-width
*/
.semitones {
	display: flex;
	width: calc(7 * (2.5em + 2 * 1px));
}
.semitones-white, .semitones-black {
	border-bottom-left-radius: 0.25em;
	border-bottom-right-radius: 0.25em;
	border: 1px solid var(--color-base, black);
}
.semitones-white {
	width: 2.5em;
	padding-top: 3.5em;
}
.semitones-white .semitones-main {
	color: var(--color-base, black);
}
.semitones-white .semitones-secondary {
	color: var(--color-subtle, gray);
}
.semitones-black {
	width: 2em;
	height: 3em;
	margin-left: calc(-0.5 * 2em - 1px);
	margin-right: calc(-0.5 * 2em - 1px);
	z-index: 5;
	background-color: var(--color-base, black);
	padding: 0.1em 0 0.25em;
}
.semitones-black .semitones-main {
	color: var(--background-color-base, white);
}