diff options
Diffstat (limited to 'src/less/components/progress.less')
-rw-r--r-- | src/less/components/progress.less | 131 |
1 files changed, 0 insertions, 131 deletions
diff --git a/src/less/components/progress.less b/src/less/components/progress.less deleted file mode 100644 index 8f67c277..00000000 --- a/src/less/components/progress.less +++ /dev/null @@ -1,131 +0,0 @@ -// Seeking & buffering progress -// -------------------------------------------------------------- - -.plyr__progress { - position: relative; - flex: 1; - - input[type="range"] { - position: relative; - z-index: 2; - - &::-webkit-slider-runnable-track { - background: transparent; - } - &::-moz-range-track { - background: transparent; - } - &::-ms-fill-upper { - background: transparent; - } - } - - // Seek tooltip to show time - .plyr__tooltip { - left: 0; - } -} - -.plyr__progress--buffer, -.plyr__progress--played, -.plyr__volume--display { - position: absolute; - left: 0; - top: 50%; - width: 100%; - height: @plyr-range-track-height; - margin: -(@plyr-range-track-height / 2) 0 0; - padding: 0; - vertical-align: top; - appearance: none; - border: none; - border-radius: 100px; - - &::-webkit-progress-bar { - background: transparent; - } - &::-webkit-progress-value { - background: currentColor; - border-radius: 100px; - min-width: @plyr-range-track-height; - } - &::-moz-progress-bar { - background: currentColor; - border-radius: 100px; - min-width: @plyr-range-track-height; - } - &::-ms-fill { - border-radius: 100px; - } -} -.plyr__progress--played, -.plyr__volume--display { - z-index: 1; - color: @plyr-range-selected-bg; - background: transparent; - transition: none; - - &::-webkit-progress-value { - min-width: @plyr-range-track-height; - max-width: 99%; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - &::-moz-progress-bar { - min-width: @plyr-range-track-height; - max-width: 99%; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - &::-ms-fill { - display: none; - } -} -.plyr__progress--buffer { - &::-webkit-progress-value { - transition: width .2s ease; - } - &::-moz-progress-bar { - transition: width .2s ease; - } - &::-ms-fill { - transition: width .2s ease; - } -} -.plyr--video .plyr__progress--buffer, -.plyr--video .plyr__volume--display { - background: @plyr-video-range-track-bg; -} -.plyr--video .plyr__progress--buffer { - color: @plyr-video-progress-buffered-bg; -} -.plyr--audio .plyr__progress--buffer, -.plyr--audio .plyr__volume--display { - background: @plyr-audio-range-track-bg; -} -.plyr--audio .plyr__progress--buffer { - color: @plyr-audio-progress-buffered-bg; -} - -// Loading state -.plyr--loading .plyr__progress--buffer { - animation: plyr-progress 1s linear infinite; - background-size: @plyr-progress-loading-size @plyr-progress-loading-size; - background-repeat: repeat-x; - background-image: linear-gradient( - -45deg, - @plyr-progress-loading-bg 25%, - transparent 25%, - transparent 50%, - @plyr-progress-loading-bg 50%, - @plyr-progress-loading-bg 75%, - transparent 75%, - transparent); - color: transparent; -} -.plyr--video.plyr--loading .plyr__progress--buffer { - background-color: @plyr-video-progress-buffered-bg; -} -.plyr--audio.plyr--loading .plyr__progress--buffer { - background-color: @plyr-audio-progress-buffered-bg; -}
\ No newline at end of file |