.playlist { margin: 2em 0; } .playlist .playlist-time-scale { height: 30px; } .playlist .playlist-tracks { background: #E0EFF1; } .playlist .channel { background: grey; } .playlist .channel-progress { background: orange; } .playlist .cursor { background: black; } .playlist .wp-fade { background-color: rgba(0, 0, 0, 0.1); } .playlist .state-cursor, .playlist .state-select { cursor: text; } .playlist .state-fadein { cursor: w-resize; } .playlist .state-fadeout { cursor: e-resize; } .playlist .state-shift { cursor: ew-resize; } .playlist .selection.point { background: red; } .playlist .selection.segment { background: rgba(0, 0, 0, 0.1); } .playlist .channel-wrapper.silent .channel { opacity: 0.3; } .playlist .controls { background: white; text-align: center; } .playlist .controls header { overflow: hidden; color: white; background-color: blueviolet; margin-bottom: 1em; height: 20px; } .playlist .controls label { margin: 1em auto; width: 100%; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); } .playlist .controls label:before { content: "\f027"; color: black; font-size: 18px; padding-right: 5px; -moz-osx-font-smoothing: grayscale; } .playlist .controls label:after { content: "\f028"; color: black; font-size: 18px; padding-left: 5px; } .playlist .controls input[type=range] { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: inline-block; width: 75%; } .playlist .controls input[type=range]::-webkit-slider-runnable-track { height: 8px; background: #ddd; border: none; border-radius: 3px; padding: 1px; } .playlist .controls input[type=range]::-moz-range-track { height: 8px; background: #ddd; border: none; border-radius: 3px; padding: 1px; } .playlist .controls input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; height: 16px; width: 16px; border-radius: 50%; background: goldenrod; margin-top: -5px; cursor: ew-resize; } .playlist .controls input[type=range]::-moz-range-thumb { border: none; height: 16px; width: 16px; border-radius: 50%; background: goldenrod; margin-top: -5px; cursor: ew-resize; } .playlist .controls input[type=range]:focus { outline: none; } .playlist .controls input[type=range]:focus::-webkit-slider-runnable-track { background: #ccc; } .playlist .controls input[type=range]:focus::-moz-range-track { background: #ccc; } .playlist .annotations .annotations-boxes { text-align: center; } .playlist .annotations .annotation-box { border: 2px dashed grey; padding: 0 10px; } .playlist .annotations .annotation-box .resize-handle { background: grey; opacity: 0.3; cursor: ew-resize; } .playlist .annotations .annotation-box .id { cursor: pointer; display: inline-block; width: 100%; height: 100%; } .playlist .annotations .annotations-text { font-size: 19px; font-weight: 300; margin-top: 1em; height: 160px; overflow-x: hidden; overflow-y: auto; } .playlist .annotations .annotations-text .annotation { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; } .playlist .annotations .annotations-text .annotation span { margin: 0.3rem 0.6rem; } .playlist .annotations .annotations-text .annotation span:last-of-type { margin-right: 1.2rem; } .playlist .annotations .annotations-text .annotation .annotation-id { font-size: 16px; line-height: 27px; } .playlist .annotations .annotations-text .annotation .annotation-start { font-size: 16px; line-height: 27px; } .playlist .annotations .annotations-text .annotation .annotation-end { font-size: 16px; line-height: 27px; } .playlist .annotations .annotations-text .annotation .annotation-lines { flex-grow: 10; } .playlist .annotations .annotations-text .annotation .annotation-actions { flex-basis: auto; width: 80px; text-align: right; font-size: 16px; } .playlist .annotations .annotations-text .annotation .annotation-actions i { margin-right: 0.6rem; } .playlist .annotations .annotations-text .annotation .annotation-actions i:last-of-type { margin-right: 0; } .playlist .annotations .annotations-text .annotation .annotation-actions i:hover { color: orange; cursor: pointer; } .playlist .annotations .current { background-color: #EBF4F6; } /*# sourceMappingURL=test.css.map */