piano.css

html body .content.app-content{display:flex;height:100%}#piano-root{height:100%}.piano-keyboard{width:80%;max-width:880px;height:100%;max-height:350px;margin:0 auto}.key,.piano-keyboard{display:block;position:relative}.key{border:4px solid #000;border-radius:.5rem;border-top-left-radius:0;border-top-right-radius:0;transition:all .03s ease;box-sizing:border-box;text-align:center;z-index:2}.key:first-child{border-top-left-radius:.5rem}.key:last-child{border-top-right-radius:.5rem}.key:not(.sharp){float:left;width:10%;height:100%;background:hsla(0,0%,100%,.8)}.key.sharp{position:absolute;width:6%;height:60%;background:#000;color:#eee;top:0;z-index:3}.key:nth-child(2){left:7%}.key:nth-child(4){left:17%}.key:nth-child(7){left:37%}.key:nth-child(9){left:47%}.key:nth-child(11){left:57%}.key:nth-child(14){left:77%}.key:nth-child(16){left:87%}.playing{transform:scale(.95);border-color:#028ae9;box-shadow:0 0 1rem #028ae9}.hints{display:block;width:100%;position:absolute;bottom:7px;transition:opacity .3s ease-out;font-size:20px;pointer-events:none}#loading-piano{position:fixed;top:0;background:rgba(0,0,0,.71);width:100%;bottom:0;z-index:10;display:flex;align-items:center;justify-content:center;font-size:30px;color:#fff}.loading-progress{position:relative;margin-right:1rem}.loading-progress:after{font-size:inherit;animation:ellipsis 1.25s infinite;content:"··";width:1em;position:absolute;transform:translateY(-35%);top:50%;left:0;right:0;margin:auto;text-align:left;line-height:1}@keyframes ellipsis{0%{content:"··"}25%{content:"···"}50%{content:""}75%{content:"·"}}@media (max-width:980px){.hints{display:none}}@media (max-width:980px) and (orientation:landscape){.content-wrapper.gameroom-wrapper{padding:0!important}.keys{max-height:100%}}.note-container{width:100%;height:100%;display:block}.note-container:not([data-show=true]){opacity:0;margin:2px;pointer-events:none}button{-webkit-appearance:none;width:100%;height:100%;border:.33px solid #000;background-color:#fff;box-sizing:border-box;padding:0;outline:none;transition:background-color .2s;color:#000;font-size:0;border-radius:2px;touch-action:none}button.active{background-color:#777;transition-duration:0s}@media (max-width:980px){button{border:1px solid #000}}.black-notes-container button{background-color:#000;border:none;padding:0 1px;width:calc(100% - 1px)}.black-notes-container button.active{background-color:#777;transition-duration:0s}.black-notes-container .note-container:first-child,.black-notes-container .note-container:last-child{flex-shrink:1.1}.octave-container{display:block;position:relative;height:100%;width:100%}.note-container{order:0;flex-grow:1}.white-notes-container{left:0;height:100%}.black-notes-container,.white-notes-container{position:absolute;top:0;width:100%;display:flex;flex-direction:row}.black-notes-container{height:55%}.black-notes-container .note-container:first-child,.black-notes-container .note-container:last-child{flex-grow:0.5;pointer-events:none}.keyboard-container{display:flex;background-color:#fff;height:80px}.octave-container{flex-grow:1}:host{display:block}#piano-container{background-color:var(--color-light-gray);position:relative;width:100%;padding:5px;display:block}