diff options
Diffstat (limited to 'javascript/videojs/src/css/components/_progress.scss')
| -rw-r--r-- | javascript/videojs/src/css/components/_progress.scss | 192 |
1 files changed, 0 insertions, 192 deletions
diff --git a/javascript/videojs/src/css/components/_progress.scss b/javascript/videojs/src/css/components/_progress.scss deleted file mode 100644 index 5334c65..0000000 --- a/javascript/videojs/src/css/components/_progress.scss +++ /dev/null @@ -1,192 +0,0 @@ -// .vjs-progress-control / ProgressControl -// -// This is the container for all progress bar-related components/elements. -.video-js .vjs-progress-control { - cursor: pointer; - @include flex(auto); - @include display-flex(center); - min-width: 4em; - touch-action: none; -} - -.video-js .vjs-progress-control.disabled { - cursor: default; -} - -.vjs-live .vjs-progress-control { - display: none; -} - -.vjs-liveui .vjs-progress-control { - @include display-flex(center); -} - -// .vjs-progress-holder / SeekBar -// -// Box containing play and load progress bars. It also acts as seek scrubber. -.video-js .vjs-progress-holder { - @include flex(auto); - @include transition(all 0.2s); - height: 0.3em; -} - -.video-js .vjs-progress-control .vjs-progress-holder { - - // This is one of the rare cases where we are using a pixel dimension. The - // reason is that the progress holder font-size changes on hover. With the - // default em-based margins, this means it gets narrower and causes issues - // with mouseover behaviors/math. - margin: 0 10px; -} - -// This increases the size of the progress holder so there is an increased -// hit area for clicks/touches. -.video-js .vjs-progress-control:hover .vjs-progress-holder, -.video-js.vjs-scrubbing.vjs-touch-enabled .vjs-progress-control .vjs-progress-holder { - font-size: 1.666666666666666666em; -} - -.video-js .vjs-progress-control:hover .vjs-progress-holder.disabled { - font-size: 1em; -} - -// .vjs-play-progress / PlayProgressBar and .vjs-load-progress / LoadProgressBar -// -// These are bars that appear within the progress control to communicate the -// amount of media that has played back and the amount of media that has -// loaded, respectively. -.video-js .vjs-progress-holder .vjs-play-progress, -.video-js .vjs-progress-holder .vjs-load-progress, -.video-js .vjs-progress-holder .vjs-load-progress div { - position: absolute; - display: block; - height: 100%; - margin: 0; - padding: 0; - // updated by javascript during playback - width: 0; -} - -.video-js .vjs-play-progress { - background-color: $primary-foreground-color; - @extend .vjs-icon-circle; - - // Progress handle - &:before { - font-size: 0.9em; - position: absolute; - right: -0.5em; - line-height: .35em; - z-index: 1; - } -} - -// Remove content from play-progress when using SVGs. -.vjs-svg-icons-enabled .vjs-play-progress { - &:before { - content: none !important; - } -} - -.vjs-play-progress .vjs-svg-icon { - position: absolute; - top: -0.35em; - right: -0.4em; - width: 0.9em; - height: 0.9em; - pointer-events: none; - line-height: 0.15em; - z-index: 1; -} - -.video-js .vjs-load-progress { - background: rgba($secondary-background-color, $secondary-background-transparency); -} - -// There are child elements of the load progress bar that represent the -// specific time ranges that have been buffered. -.video-js .vjs-load-progress div { - background: rgba($secondary-background-color, 0.75); -} - -// .vjs-time-tooltip -// -// These elements are displayed above the progress bar. -// -// By default, they are hidden and only shown when hovering over the progress -// control. -.video-js .vjs-time-tooltip { - @include background-color-with-alpha(#fff, 0.8); - @include border-radius(0.3em); - color: #000; - - // By floating the tooltips to the right, their right edge becomes aligned - // with the right edge of their parent element. However, in order to have them - // centered, they must be pulled further to the right via positioning (e.g. - // `right: -10px;`. This part is left to JavaScript. - float: right; - font-family: $text-font-family; - - // The font-size should translate to a consistent 10px for time tooltips in - // all states. This is tricky because the .vjs-progress-holder element - // changes its font-size when the .vjs-progress-control is hovered. - font-size: 1em; - padding: 6px 8px 8px 8px; - pointer-events: none; - position: absolute; - top: -3.4em; - visibility: hidden; - z-index: 1; -} - -.video-js .vjs-progress-holder:focus .vjs-time-tooltip { - display: none; -} - -.video-js .vjs-progress-control:hover .vjs-time-tooltip, -.video-js .vjs-progress-control:hover .vjs-progress-holder:focus .vjs-time-tooltip, -.video-js.vjs-scrubbing.vjs-touch-enabled .vjs-progress-control .vjs-time-tooltip { - display: block; - - // Ensure that we maintain a font-size of ~10px. - font-size: 0.6em; - visibility: visible; -} - -.video-js .vjs-progress-control.disabled:hover .vjs-time-tooltip { - font-size: 1em; -} - -// .vjs-mouse-display / MouseTimeDisplay -// -// This element tracks the mouse position along the progress control and -// includes a tooltip, which displays the time at that point in the media. -.video-js .vjs-progress-control .vjs-mouse-display { - display: none; - position: absolute; - width: 1px; - height: 100%; - background-color: #000; - z-index: 1; -} - -.video-js .vjs-progress-control:hover .vjs-mouse-display { - display: block; -} - -.video-js.vjs-scrubbing.vjs-touch-enabled .vjs-progress-control .vjs-mouse-display { - display: block; -} - -.video-js.vjs-user-inactive .vjs-progress-control .vjs-mouse-display, -.video-js.vjs-touch-enabled:not(.vjs-scrubbing) .vjs-progress-control .vjs-mouse-display { - visibility: hidden; - opacity: 0; - $trans: visibility 1.0s, opacity 1.0s; - @include transition($trans); -} - -.vjs-mouse-display .vjs-time-tooltip { - color: #fff; - @include background-color-with-alpha(#000, 0.8); -} |
