body { all: unset; min-height: 100vh; display: flex; justify-content: center; align-items: center; user-select: none; } main { flex-grow: 1; display: flex; } #controls { margin: 20px; display: flex; flex-flow: column; justify-content: center; align-items: center; } #container { flex-grow: 1; margin: 20px; } ::-moz-focus-inner { border: none; } button#playpause { border: none; background: none; cursor: pointer; font-size: 64px; margin: 8px; vertical-align: middle; transition: all 50ms; } button#playpause:hover, button#playpause:focus { filter: brightness(120%); outline: none; } button#playpause:active { transform: translate(1px, 1px); } label#volume-label { font-size: 30px; vertical-align: middle; } input#volume { vertical-align: middle; width: 80px; height: 30px; border-radius: 3px; background: #eee; cursor: pointer; -webkit-appearance: none; } input#volume::-moz-range-thumb { height: 30px; width: 20px; background-color: #999; border-radius: 3px; border: none; } input#volume::-webkit-slider-thumb { height: 30px; width: 20px; background-color: #999; border-radius: 3px; -webkit-appearance: none; } input#volume:hover, input#volume:focus { filter: brightness(102%); outline: none; } .context-menu { list-style: none; margin: 0; padding: 0; position: absolute; z-index: 9999999; border: 1px solid #999999; border-radius: 2px; box-shadow: 2px 2px 6px #66666633; background: #fcfcfc; } .context-menu button { background: none; border: none; font-size: 1em; padding: 4px 20px; } .context-menu button:hover { background: #dddddd99; } .playlist .channel { background: #aaa; } .playlist .channel-progress { background: none; } .playlist .selection.point { width: 2px !important; } .playlist .selection.point::after { /* Draw a triangle at the bottom */ content: ''; position: absolute; width: 0; height: 0; bottom: 0; left: -5px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #f00; } .playlist .selection.segment { background: #f006; border-left: 2px solid red; border-right: 2px solid red; } .playlist .selection.segment:before { /* Draw a triangle at the bottom */ content: ''; position: absolute; width: 0; height: 0; bottom: 0; left: -7px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid red; } .playlist .selection.segment:after { /* Draw a triangle at the bottom */ content: ''; position: absolute; width: 0; height: 0; bottom: 0; right: -7px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid red; } .playlist .playlist-time-scale { color: #666; font-family: sans-serif; font-size: smaller; } .playlist .cursor { width: 2px !important; background: #666; } .playlist .cursor::after { /* Draw a triangle at the bottom */ content: ''; position: absolute; width: 0; height: 0; bottom: 0; left: -5px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #666; }