svg .background { fill: white } path { fill: none; stroke: gray; stroke-width: 1mm; stroke-linecap: round; } g.before path { opacity: 0.5; stroke: gray !important; } g.after path, path.before_in { opacity: .1; stroke: gray !important; } .gray { position: absolute; background: rgba(255, 255, 255, 0.7); } .controls--playback { /* display:flex; */ position: relative; } .timecode { position: absolute; right: 100%; width: 5%; font-size: 8px; } .controls--playback input[type='range'] { /* position: absolute; z-index: 100; bottom: 0; left: 0; right: 0; */ width: 100%; } .controls button.paused, .controls button.playing { position: absolute; left: 100%; width: 30px; height: 30px; } .controls button.paused::before { content: '⏵'; } .controls button.playing::before { content: '⏸'; } .loading .controls button:is(.playing, .paused)::before { content: '↺'; display: inline-block; animation: rotate 1s infinite; } @keyframes rotate { 0% { transform: rotate(359deg) } 100% { transform: rotate(0deg) } } .controls { position: absolute !important; z-index: 100; bottom: 10px; left: 5%; right: 0; width: 90%; } .scrubber {} .tags { line-height: 40px; display: flex; flex-direction: row; padding: 0; margin: 0; } .tags .tag { display: block; padding: 5px; border: solid 1px darkgray; flex-grow: 1; text-align: center; } .tags li { display: block; } .tags .subtags { padding: 0; font-size: 80%; display: flex; flex-direction: row; flex-wrap: wrap; } .tags .subtags .tag { padding: 2px; } .tags .tag:hover { cursor: pointer; background: darkgray; } .tags .tag.selected { background: #3FB8AF; } .tags .tag.annotation-rm { /* display: none; */ overflow: hidden; color: red; font-size: 30px; width: 0; flex-grow: 0; padding: 5px 0; transition: width .3s; pointer-events: none; border: none; direction: rtl; /* hide behind bar, instead into nothing */ } .selected-annotation .tags .tag.annotation-rm { color: red; display: block; width: 30px; pointer-events: all; } .controls .annotation-comment { width: 100%; visibility: hidden; } .selected-annotation .controls .annotation-comment { visibility: visible; } .noUi-handle:focus { /* background: red;; */ border: solid 2px #601be0; } /* .noUi-handle:focus::before, .noUi-handle:focus::after{ background: #601be0; } */ .tags .tag span { display: inline-block; width: 20px; height: 20px; margin-right: 10px; vertical-align: middle; border-radius: 5px; } .tags .subtags .tag span { width: 10px; height: 10px; margin-right: 2px; } .annotations { height: 30px; /* border: solid 1px darkgray; */ position: relative; } .annotations>div { opacity: .4; background: lightseagreen; position: absolute; bottom: 0; top: 0; } .annotations>div:hover, .annotations>div.selected { opacity: 1; cursor: pointer; } .unsaved::before { content: '*'; color: red; display: inline-block; text-align: center; font-size: 30px; position: absolute; top: 10px; left: 10px; } .saved::before { content: '\2713'; display: inline-block; color: green; text-align: center; font-size: 30px; position: absolute; top: 10px; left: 10px; } .noUi-horizontal .noUi-touch-area { cursor: ew-resize; } #interface .noUi-horizontal .noUi-tooltip { /* tooltips go below the buttons */ bottom: auto; top: 110%; } .audioconfig { z-index: 9; background: black; color: white; position: relative; width: 100px; /* as wide as audio controls only */ overflow: hidden; white-space: nowrap; left: -50px; } .audioconfig:hover { width: auto; left: 0px; } .audioconfig select, .audioconfig input { margin: 10px; } audio { vertical-align: middle; width: 100px; /* hides seek head */ } .svganim_annotator { display: flex; flex-direction: column; height: 100%; } .svganim_annotator svg { top: 20px; background: white; margin-left: 20px; flex-shrink: 1; flex-grow: 1; position: static; } .svganim_annotator .audioconfig { order: -1; flex-grow: 0; flex-shrink: 0; position: static; } .svganim_annotator .controls { margin-left: 5%; position: static !important; }