vue-piano-roll/dist/vue-piano-roll.css

A DAW-like Piano Roll Vue Component.

.pr-fullscreen-icon[data-v-a5fbc04f]{color:#fff;color:var(--v8862eefa);position:absolute;bottom:.5rem;right:.75rem;z-index:100;cursor:pointer}.pr-fullscreen-icon[data-v-a5fbc04f]:hover{opacity:.8}[data-v-7856d859]{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.pr-shrink-wrap[data-v-7856d859]{--pr-title-width: clamp(4rem, calc(4 * var(--pr-tone-grid-cell-width)), 6rem);position:relative;width:100%;max-height:inherit}.pr-shrink-wrap.pr-fullscreen[data-v-7856d859]{position:fixed;top:0;left:0;width:100%;height:100%;max-height:100%;z-index:5;background-color:#4c5563;background-color:var(--pr-background-color)}.pr-container[data-v-7856d859]{position:relative;overflow:scroll;max-height:inherit}.pr-container .pr-piano-roll[data-v-7856d859]{position:relative;font-weight:700;color:#fff;color:var(--pr-label-color)}.pr-container .pr-piano-roll .pr-tone[data-v-7856d859]{display:grid;grid-template-columns:var(--pr-title-width) 1fr;background-color:var(--pr-background-color)}.pr-container .pr-piano-roll .pr-tone>div[data-v-7856d859]{border-style:solid;border-width:0;border-bottom-width:1px;border-right-width:1px;border-bottom-width:var(--pr-border-width);border-right-width:var(--pr-border-width);border-color:#6b7280;border-color:var(--pr-grid-color)}.pr-container .pr-piano-roll .pr-tone .pr-label[data-v-7856d859]{display:inline-block;width:100%;border-color:#4b5563;border-color:var(--pr-label-border-color);background-color:#6b7280;background-color:var(--pr-label-background-color);padding:.25rem;text-align:right;display:flex;flex-direction:column;justify-content:center;height:var(--pr-tone-grid-height);font-size:var(--pr-label-font-size)}.pr-container .pr-piano-roll .pr-tone .pr-beat[data-v-7856d859]{height:100%;width:100%;border-right-width:0}.pr-container .pr-piano-roll .pr-tone .pr-beat.pr-beat-end[data-v-7856d859]{border-right-width:1px;border-right-width:var(--pr-border-width)}.pr-container .pr-piano-roll .pr-tone .pr-tone-inner[data-v-7856d859]{height:var(--pr-tone-grid-height);background:var(--pr-tone-grid-bg);min-width:var(--pr-tone-grid-width)}.pr-container .pr-piano-roll .pr-tone.pr-sharp[data-v-7856d859]{background-color:#374151}.pr-container .pr-piano-roll .pr-tone.pr-sharp .pr-tone-inner[data-v-7856d859]{background:var(--pr-tone-grid-incidental-bg)}.pr-container .pr-piano-roll .pr-tone.pr-sharp .pr-label[data-v-7856d859]{background-color:#374151;background-color:var(--pr-label-incidental-color)}.pr-container .pr-piano-roll .pr-note-grid[data-v-7856d859]{display:grid;width:100%;height:var(--pr-tone-grid-height);grid-template-columns:var(--pr-note-grid-template);grid-template-rows:var(--pr-note-grid-template-rows);position:absolute;top:-1px;top:var(--pr-note-grid-top);left:0;left:var(--pr-note-grid-left);pointer-events:none;min-width:var(--pr-tone-grid-width)}.pr-container .pr-piano-roll .pr-note-grid .pr-ghost[data-v-7856d859]{pointer-events:none;position:absolute;z-index:10;width:100%;height:100%;background-color:#ffffff4d;background-color:var(--pr-shadow-color)}.pr-container .pr-piano-roll .pr-note-grid .pr-note[data-v-7856d859]{position:relative;z-index:20;pointer-events:initial}.pr-container .pr-piano-roll .pr-note-grid .pr-note .pr-note-inner[data-v-7856d859]{position:absolute;border-style:solid;border-width:2px;border-width:var(--pr-note-height);width:100%;height:100%;display:grid;grid-template-columns:.5rem 1fr .5rem}.pr-container .pr-piano-roll .pr-note-grid .pr-note .pr-note-inner .pr-middle[data-v-7856d859]{cursor:grab}.pr-container .pr-piano-roll .pr-note-grid .pr-note .pr-note-inner .pr-edge[data-v-7856d859]{cursor:col-resize}.pr-container .pr-piano-roll .pr-note-grid .pr-note.pr-dragging .pr-note-inner .pr-middle[data-v-7856d859]{cursor:grabbing}.pr-container .pr-piano-roll .pr-playhead[data-v-7856d859]{position:absolute;background-color:#9ca3af;z-index:10;top:0;opacity:.5;pointer-events:none;left:calc(var(--pr-note-grid-left) + var(--pr-playhead-left));height:var(--pr-playhead-height);width:var(--pr-playhead-width)}.pr-container .pr-piano-roll .pr-playhead.pr-hidden[data-v-7856d859]{display:none}