JavaScript-Piano/styles.css at master · soluman92/JavaScript-Piano · GitHub

43 lines (36 loc) · 612 Bytes

*, *::before, *::after {

box-sizing: border-box;

}

body {

background-color: #143F6B;

margin: 0;

min-height: 100vh;

display: flex;

justify-content: center;

align-items: center;

}

.piano {

display: flex;

}

.key {

height: calc(var(--width) * 4);

width: var(--width);

}

.white {

--width: 100px;

background-color: white;

border: 1px solid #333;

}

.white.active {

background-color: #CCC;

}

.black {

--width: 60px;

background-color: black;

margin-left: calc(var(--width) / -2);

margin-right: calc(var(--width) / -2);

z-index: 2;

}

.black.active {

background-color: #333;

}

Expand file tree