body, html, #content { margin: 0; padding: 0; height: 100%; background: #262626; font-family: Helvetica, sans-serif; } *, *:before, *:after { box-sizing: border-box; cursor: default; } *:not(input):not(button):not(select):not(textarea) { -webkit-user-select: none; } :focus { outline: none; } a { cursor: pointer; color: inherit; } /** * Animations */ @-webkit-keyframes reveal-controls { 0% { transform: translate(-50%, 10em); } 100% { transform: translate(-50%, -50%); } } @-webkit-keyframes reveal-notes { 0% { transform: translate(0, -20em); } 100% { transform: translate(0, 0); } } /** * Main */ .main { position: relative; width: calc(100% - 65px); height: 100%; margin-left: 65px; } .main p { position: relative; margin: 0; } .main .roll { display: flex; height: 100%; flex-direction: column; } /** noteboard **/ .main .noteboard { position: relative; overflow: hidden; flex-basis: 100%; } .main .noteboard .inner { backface-visibility: hidden; perspective: 1000; } /* closed controls */ .main .noteboard .controls { position: absolute; top: 50%; left: 50%; -webkit-animation: reveal-controls 0.5s ease forwards; width: 100%; text-align: center; transform: translate(-50%, 10em); } .main .noteboard .controls img { display: block; margin: 0 auto 1em auto; } /* notes */ .main .noteboard canvas { -webkit-animation: reveal-notes 0.5s ease; } .main .noteboard .note { display: block; position: absolute; left: 0; bottom: 0; width: calc(100% / 52); border: 1px solid #262626; } /* black */ .main .noteboard [data-black="true"] { width: calc(100% / 52 * 0.6); border-radius: 5px; margin-left: calc(-100% / 52 * 0.6 / 2); z-index: 1; overflow: hidden; box-shadow: inset 1000em 1000em rgba(0, 0, 0, 0.2); } /* percussion */ .main .noteboard [data-channel="9"] { border-radius: 20px; min-height: 10px; } /** channel colors **/ [data-channel="0"] { background-color: hsl(225, 49%, 44%) !important; } [data-channel="1"] { background-color: hsl(22.5, 84%, 56%) !important; } [data-channel="2"] { background-color: hsl(45, 53%, 39%) !important; } [data-channel="3"] { background-color: hsl(67.5, 84%, 56%) !important; } [data-channel="4"] { background-color: hsl(90, 84%, 56%) !important; } [data-channel="5"] { background-color: hsl(112.5, 84%, 56%) !important; } [data-channel="6"] { background-color: hsl(135, 84%, 56%) !important; } [data-channel="7"] { background-color: hsl(157.5, 84%, 56%) !important; } [data-channel="8"] { background-color: hsl(180, 84%, 56%) !important; } [data-channel="9"] { background-color: hsl(202.5, 84%, 56%) !important; } [data-channel="10"] { background-color: hsl(247.5, 84%, 56%) !important; } [data-channel="11"] { background-color: hsl(270, 84%, 56%) !important; } [data-channel="12"] { background-color: hsl(292.5, 84%, 56%) !important; } [data-channel="13"] { background-color: hsl(315, 84%, 56%) !important; } [data-channel="14"] { background-color: hsl(337.5, 84%, 56%) !important; } [data-channel="15"] { background-color: hsl(0, 84%, 56%) !important; } /** keyboard **/ .main .keyboard { width: 100%; padding-bottom: 13%; } .main .key { position: absolute; left: 0; bottom: 0; background: white; display: inline-block; height: 100%; } .main [data-black="false"]:not(:last-child) { border-right: 1px solid #262626; } .main [data-black="true"] { bottom: 40%; background: #262626; border: 1px solid #262626; border-top: 0; margin-left: calc(-100% / 52 * 0.6 / 2); width: calc(100% / 52 * 0.6); height: 60%; } .main .key:not([data-channel="false"]) { box-shadow: inset 1000em 1000em rgba(0, 0, 0, 0.1); } .main [data-black="true"][data-channel="-1"] { box-shadow: inset 1000em 1000em rgba(255, 255, 255, 0.1); } /** sidebar controls **/ .main .control { position: absolute; top: 0; left: -65px; height: 100%; width: 50px; padding: 9px; background: #1e1e1e; text-align: center; } .main .control button { -webkit-appearance: none; width: 32px; height: 32px; border: 0; cursor: pointer; color: white; background: none; } .main .control .switch-play-state, .main .control .open-channels-window, .main .control .close { background: center center no-repeat; text-indent: -10000em; } .main .control > * { display: block; margin: 0 auto 1em auto; } /* playback control */ .main .control .switch-play-state { background-image: url('../images/icons/play.png'); } .main .control .switch-play-state.pause { background-image: url('../images/icons/pause.png'); } /* channels */ .main .control .open-channels-window { background-image: url('../images/icons/channels.png'); } /* set play speed */ .main .control .selector { text-align: center; line-height: 32px; border: 1px solid white; border-radius: 3px; overflow: hidden; padding: 0; } .main .control .selector:hover { background: rgba(255, 255, 255, 0.05); } .main .control .selector:active { padding: 1px 0 0 0; } .main .control .selector:before { content: '×'; cursor: pointer; } /* close opened file */ .main .control .close { background-image: url('../images/icons/close.png'); position: absolute; left: 9px; bottom: 0; } /** scroll **/ .main .scroll { position: absolute; top: 0; left: -15px; height: 100%; background: #1e1e1e; } /** * Channels modal */ .vex.vex .channels ul { list-style: none; padding: 0; width: calc(100% + 2em); margin: 0 0 0 -1em; } .vex .channels ul li { display: block; width: 100%; padding: 0 0 0 44px; background-position: 6px center; background-repeat: no-repeat; } .vex .channels ul li span { display: block; height: 100%; padding: 9px; background: white; } .vex .channels ul li:nth-child(2n) span { background: #e2e2e2; } .vex .channels ul li:hover, .vex .channels ul li:hover span { box-shadow: inset 1000em 1000em rgba(0, 0, 0, 0.15); } /** icons **/ .vex .channels ul li.piano { background-image: url('../images/icons/instruments/piano.png'); } .vex .channels ul li.percussive { background-image: url('../images/icons/instruments/percussive.png'); } .vex .channels ul li.percussion { background-image: url('../images/icons/instruments/percussion.png'); } .vex .channels ul li.effect { background-image: url('../images/icons/instruments/effect.png'); } .vex .channels ul li.brass { background-image: url('../images/icons/instruments/brass.png'); } .vex .channels ul li.pipe { background-image: url('../images/icons/instruments/pipe.png'); } .vex .channels ul li.string { background-image: url('../images/icons/instruments/string.png'); } .vex .channels ul li.synth { background-image: url('../images/icons/instruments/synth.png'); } .vex .channels ul li.guitar { background-image: url('../images/icons/instruments/guitar.png'); } .vex .channels ul li.orchestra { background-image: url('../images/icons/instruments/orchestra.png'); } .vex .channels ul li.bass { background-image: url('../images/icons/instruments/bass.png'); } .vex .channels ul li.organ { background-image: url('../images/icons/instruments/organ.png'); } /** * UI Components */ /** scroll **/ .scroll, ::-webkit-scrollbar { height: 200px; width: 15px; overflow: hidden; position: relative; } ::-webkit-scrollbar-track { background: #262626; } .scroll .position, ::-webkit-scrollbar-thumb { display: block; width: 100%; position: absolute; height: 5%; min-height: 20px; transform: translate(0, 50%); background: rgba(255, 255, 255, 0.15); } .scroll .position:hover, ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); }