piano-game/index.css

Become a better pianist

@charset "UTF-8";

@import 'node_modules/piano-keyboard/index.css';

@font-face {
	font-family: 'Bravura';
	font-style: normal;
	font-weight: 400;
	src: local('Bravura'),
		url('./font/Bravura.otf') format('otf'),
		url('./font/Bravura.eot') format('eot'),
		url('./font/Bravura.woff') format('woff'),
		url('./font/Bravura.svg') format('svg');
	/*unicode-range:U+E000-1D1FF;*/
}

.piano-game {
	position: relative;
	width: 100%;
	min-height: 320px;
	box-sizing: border-box;
}

.piano-game-score {
	width: 100%;
	/* This ratio keeps the rect formed by staves/keys centered */
	height: 53%;
	display: block;
	position: relative;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-content: stretch;
	align-items: center;
}
.piano-game-stave {
	position: relative;
	box-sizing: border-box;
	flex: 0 1 auto;
	align-self: auto;
	width: 85%;
	padding-left: 2.9rem;
	font-family: 'Bravura';
	line-height: 3.2rem;
	font-size: 3.2rem;
}
.piano-game-position {
	text-align: center;
	position: relative;
}
.piano-game-position-space {
	height: .8rem;
	line-height: .8rem;
}
.piano-game-position-line {
	box-sizing: border-box;
	height: 0;
	border-top: .1rem solid rgba(127,127,127,.5);
}
.piano-game-position-ledger {
	box-sizing: border-box;
	border-top: .1rem solid rgba(127,127,127,0);
	margin: auto;
	height: 0;
	line-height: 0;
	width: 1.8rem;
	position: relative;
}
.piano-game-note {
	position: relative;
	display: inline-block;
	vertical-align: top;
	line-height: 0;
	transition: 1s ease-out;
}
.piano-game-note-right {
	text-shadow: 0 0 6px rgb(56, 221, 75);
	color: rgba(48, 218, 69, .8);
}
.piano-game-note:after {
	/* http://unicode.org/charts/PDF/U1D100.pdf */
	content: '\1D15D';
}
.piano-game-note-sharp:before {
	content: '\266f';
	position: absolute;
	left: -1rem;
}
.piano-game-note-active {
	color: rgb(185,0,0);
}
.piano-game-position-space .piano-game-note {
	line-height: .95rem;
}
.piano-game-position-ledger-visible {
	border-top: .1rem solid rgba(127,127,127,.5);
}
.piano-game-clef {
	position: absolute;
	top: 0;
	left: 0;
	line-height: 3.2rem;
	margin-top: .15rem;
}
.piano-game-clef-treble {
	position: absolute;
	top: 3.6rem;
	left: -.2rem;
}
.piano-game-clef-treble:before {
	content: '\1D11E';
}
.piano-game-clef-bass {
	position: absolute;
	top: 7rem;
}
.piano-game-clef-bass:before {
	content: '\1D122';
}


.piano-game-keyboard {
	box-sizing: border-box;
	border-top: 3px solid rgb(185,0,0);
	width: 100%;
	height: 47%;
}
/** Hide half of the keys on the small screens */
@media (max-width: 479px) {
	.piano-keyboard-key:nth-child(n+8) {
		display: none;
	}
}
@media (max-width: 959px) {
	.piano-keyboard-key:nth-child(n+15) {
		display: none;
	}
}
.piano-keyboard-key-white {
	box-sizing: border-box;
	border-right: 1px solid rgba(70,50,0,.12);
	box-shadow: none;
	background: white;
}
.piano-keyboard-key-white:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: -1px;
	height: .4rem;
	background: linear-gradient(rgba(60,10,0,.2) 0%, rgba(20,0,30,.07) 45%, rgba(0,0,0,0) 105%) no-repeat;
}
.piano-keyboard-key-black {
	width: 75%;
	background: rgb(35,37,40);
}
.piano-keyboard-key-black:after {
    border-bottom: 1rem solid rgba(5, 10, 0, .12);
    border-left: .3rem solid rgba(0, 0, 0, .06);
    border-right: .3rem solid rgba(0, 0, 0, .06);
    border-top: none;
}
.piano-keyboard-key-active {
	background: rgb(185,0,0);
}
.piano-keyboard-key-wrong {
	background: rgba(234, 101, 84, 1);
}
.piano-keyboard-key-right {
	background: rgba(48, 218, 69, 1);
}