* { } .body.loading > div { padding: 1rem; } .body { width: 100%; height: 100%; display: flex; flex-direction: row; justify-content: space-between; background: linear-gradient( 0deg, rgba(0, 0, 64, 0.5), rgba(64, 64, 128, 0.5) ); padding: 0; } /* Timeline */ canvas { display: block; } .timeline { display: flex; flex-direction: row; position: relative; width: 300px; cursor: crosshair; } .timelineColumn { position: relative; } .ticks .tick { position: absolute; right: 0; width: 4px; height: 1px; background: #ddd; pointer-events: none; } .ticks .tickLabel { pointer-events: none; position: absolute; right: 6px; font-size: 12px; width: 40px; margin-top: -7px; text-align: right; text-shadow: 0 0 2px #00f; } .timeline .cursor { width: 100%; position: absolute; left: 0; pointer-events: none; } .timeline .cursor .line { width: 100%; height: 1px; background: #00f; } .timeline .cursor.playCursor .line { background: #ddd; } .timeline .cursor .tickLabel { position: absolute; pointer-events: none; right: 6px; font-size: 12px; width: 40px; margin-top: -7px; text-align: right; text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 2px #000; } /* Audio player */ .playButton { /*position: absolute;*/ /*top: 0; left: 0;*/ width: 3rem; height: 3rem; padding: 1rem; background: transparent; cursor: pointer; background-size: contain; background-repeat: no-repeat; background-position: center; } .playButton.playing { background-image: url('/static/img/icons_pause_white.svg'); } .playButton.paused { background-image: url('/static/img/icons_play_white.svg'); } /* Script */ .script { position: absolute; top: 0; right: 0; min-width: 4rem; z-index: 8; } .script textarea { height: calc(100vh - 3.15rem); } .script button { position: absolute; top: 0.25rem; right: 0.25rem; z-index: 9; border: 0; background: transparent; } /* Annotations */ .annotations { position: relative; width: 450px; }