simple-video-controls/dist/svControls.min.css

A simple custom video player.

:root{--svcAccentColor:#4d9dff}.svcContainer{overflow:hidden;height:100%;width:100%}.svcContainer video{position:relative}.svcControls.svcControlsHidden{opacity:0;transition:opacity .1s 1.3s ease}.svcControls.svcControlsHidden[data-state=paused]{opacity:1;transition:opacity .1s 0s ease}.scvVideo:hover~.svcControls.svcControlsHidden,.svcControls.svcControlsHidden:hover{opacity:1;transition:opacity .1s .1s ease}.svcControls{position:absolute;height:60px;width:100%;display:flex;justify-content:space-between;align-items:center;bottom:0;padding:12px;box-sizing:border-box}.svcControls,.svcControls>*{user-select:none}input[type=range].svcProgress{display:block;width:100%;height:100%;margin:auto 0;border:0;border-radius:50px;padding:unset;background:0 0;box-shadow:none}.svcBtnArea{display:flex}.svcProgressDiv{display:flex;justify-content:center;align-items:center;cursor:pointer;flex-basis:100%;height:5px;padding:0 5px;transition:height .1s 1s ease}.svcBtn{background:0 0;border:0;border-radius:3px;cursor:pointer;min-width:20px;margin:3px;text-align:center;transition:background-color .1s .5s ease-in-out;padding:3px}button.svcBtn{transition:background-color .1s 0s ease-in-out}button.svcBtn:hover,div.svcBtn:hover{transition:background-color .1s ease-in-out;background-color:var(--svcAccentColor)}.svcBtn:active{opacity:1}.svcBtn[data-state=pause]{display:block}.svcBtn[data-state=play],.svcControls[data-state=paused] .svcBtn[data-state=pause]{display:none}.svcControls[data-state=paused] .svcBtn[data-state=play]{display:block}.svcControls input[type=range]{-webkit-appearance:none;background:rgba(240,240,240,.4);border-radius:50px}.svcControls input[type=range]::after,.svcControls input[type=range]::before{content:unset;margin:0;padding:0;display:none}.svcControls input[type=range]:focus{outline:0}.svcControls input[type=range]::-webkit-slider-runnable-track{width:100%;height:6px;cursor:pointer;border-radius:50px;box-shadow:inset 0 0 2px 1px rgba(0,0,0,.1),0 0 6px 0 rgba(0,0,0,.1)}.svcControls input[type=range]::-moz-range-track{width:100%;height:6px;cursor:pointer;border-radius:50px;box-shadow:inset 0 0 2px 1px rgba(0,0,0,.1),0 0 6px 0 rgba(0,0,0,.1)}.svcControls input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:12px;width:12px;margin-top:-3px;outline:0;border:0;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 0 0 2px transparent;transition:box-shadow .2s ease-in-out}.svcControls input[type=range]::-moz-range-thumb{-moz-appearance:none;height:12px;width:12px;margin-top:-3px;outline:0;border:0;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 0 0 2px transparent;transition:box-shadow .2s ease-in-out}.svcControls input[type=range]::-webkit-slider-thumb:hover,.svcControls input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 0 0 2px rgba(255,255,255,.1)}.svcControls input[type=range]::-moz-range-thumb:hover,.svcControls input[type=range]:hover::-moz-range-thumb{box-shadow:0 0 0 2px rgba(255,255,255,.1)}.svcControls input[type=range]::-webkit-slider-thumb:active,.svcControls input[type=range]:active::-webkit-slider-thumb{transition:box-shadow .2s ease;box-shadow:0 0 0 3px rgba(255,255,255,.4)}.svcControls input[type=range]::-moz-range-thumb:active,.svcControls input[type=range]:active::-moz-range-thumb{transition:box-shadow .2s ease;box-shadow:0 0 0 3px rgba(255,255,255,.4)}.svcControls .verticalSlider{position:relative;cursor:pointer;min-width:20px;display:flex;align-items:center;text-align:center;justify-content:center;margin:3px}.svcControls .verticalSlider input[type=range]{position:absolute;cursor:pointer;display:block;-webkit-appearance:none;transition:bottom .3s .5s ease,opacity .1s .5s ease;width:65px;bottom:0;left:unset;opacity:0;margin:0;padding:unset;transform:rotate(270deg)}.svcControls .verticalSlider:hover input[type=range]{transition:bottom .3s ease,opacity .1s .1s ease;opacity:1;bottom:75px}.svcControls .verticalSlider input[type=range]:hover{display:block}.svcControls .verticalSlider.scvNoAudio:hover input[type=range]{display:none;opacity:0}svg.svcIcon{width:18px;height:18px;padding:3px}.svcProgressTime{padding:16px;font-size:16px}