177 lines
4.5 KiB
SCSS
177 lines
4.5 KiB
SCSS
//
|
|
// Let's talk pixel math!
|
|
// Start with a base font size of 10px (assuming that hasn't changed)
|
|
// No Hover:
|
|
// - Progress holder is 3px
|
|
// - Progress handle is 9px
|
|
// - Progress handle is pulled up 3px to center it.
|
|
//
|
|
// Hover:
|
|
// - Progress holder becomes 5px
|
|
// - Progress handle becomes 15px
|
|
// - Progress handle is pulled up 5px to center it
|
|
//
|
|
|
|
.video-js .vjs-progress-control {
|
|
@include flex(auto);
|
|
@include display-flex(center);
|
|
min-width: 4em;
|
|
}
|
|
|
|
.vjs-live .vjs-progress-control {
|
|
display: none;
|
|
}
|
|
|
|
// Box containing play and load progresses. Also acts as seek scrubber.
|
|
.video-js .vjs-progress-holder {
|
|
@include flex(auto);
|
|
@include transition(all 0.2s);
|
|
height: 0.4em;
|
|
}
|
|
|
|
// We need an increased hit area on hover
|
|
.video-js .vjs-progress-control:hover .vjs-progress-holder {
|
|
font-size: 1.666666666666666666em
|
|
}
|
|
|
|
/* If we let the font size grow as much as everything else, the current time tooltip ends up
|
|
ginormous. If you'd like to enable the current time tooltip all the time, this should be disabled
|
|
to avoid a weird hitch when you roll off the hover. */
|
|
|
|
// Also show the current time tooltip
|
|
.video-js .vjs-progress-control:hover .vjs-time-tooltip,
|
|
.video-js .vjs-progress-control:hover .vjs-mouse-display:after,
|
|
.video-js .vjs-progress-control:hover .vjs-play-progress:after {
|
|
font-family: $text-font-family;
|
|
visibility: visible;
|
|
font-size: 0.6em;
|
|
}
|
|
|
|
// Progress Bars
|
|
.video-js .vjs-progress-holder .vjs-play-progress,
|
|
.video-js .vjs-progress-holder .vjs-load-progress,
|
|
.video-js .vjs-progress-holder .vjs-tooltip-progress-bar,
|
|
.video-js .vjs-progress-holder .vjs-load-progress div {
|
|
position: absolute;
|
|
display: block;
|
|
height: 0.4em;
|
|
margin: 0;
|
|
padding: 0;
|
|
// updated by javascript during playback
|
|
width: 0;
|
|
// Needed for IE6
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.video-js .vjs-mouse-display {
|
|
@extend .vjs-icon-circle;
|
|
|
|
&:before {
|
|
display: none;
|
|
}
|
|
}
|
|
.video-js .vjs-play-progress {
|
|
background-color: $progress-color;
|
|
@extend .vjs-icon-circle;
|
|
|
|
// Progress handle
|
|
&:before {
|
|
position: absolute;
|
|
top: -0.222222222222222em;
|
|
right: -0.5em;
|
|
font-size: 0.9em;
|
|
color: $primary-foreground-color;
|
|
}
|
|
}
|
|
|
|
// Current Time "tooltip"
|
|
// By default this is hidden and only shown when hovering over the progress control
|
|
.video-js .vjs-time-tooltip,
|
|
.video-js .vjs-mouse-display:after,
|
|
.video-js .vjs-play-progress:after {
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
top: -3.4em;
|
|
right: -1.9em;
|
|
font-size: 0.9em;
|
|
color: #000;
|
|
content: attr(data-current-time);
|
|
padding: 6px 8px 8px 8px;
|
|
@include background-color-with-alpha(#fff, 0.8);
|
|
@include border-radius(0.3em);
|
|
}
|
|
|
|
.video-js .vjs-time-tooltip,
|
|
.video-js .vjs-play-progress:before,
|
|
.video-js .vjs-play-progress:after {
|
|
z-index: 1;
|
|
}
|
|
|
|
.video-js .vjs-progress-control .vjs-keep-tooltips-inside:after {
|
|
display: none;
|
|
}
|
|
|
|
.video-js .vjs-load-progress {
|
|
// For IE8 we'll lighten the color
|
|
background: lighten($secondary-background-color, 25%);
|
|
// Otherwise we'll rely on stacked opacities
|
|
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 {
|
|
// For IE8 we'll lighten the color
|
|
background: lighten($secondary-background-color, 50%);
|
|
// Otherwise we'll rely on stacked opacities
|
|
background: rgba($secondary-background-color, 0.75);
|
|
}
|
|
|
|
.video-js.vjs-no-flex .vjs-progress-control {
|
|
width: auto;
|
|
}
|
|
|
|
.video-js .vjs-time-tooltip {
|
|
display: inline-block;
|
|
height: 2.4em;
|
|
position: relative;
|
|
float: right;
|
|
right: -1.9em;
|
|
}
|
|
|
|
.vjs-tooltip-progress-bar {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.video-js .vjs-progress-control .vjs-mouse-display {
|
|
display: none;
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 100%;
|
|
background-color: #000;
|
|
z-index: 1;
|
|
}
|
|
.vjs-no-flex .vjs-progress-control .vjs-mouse-display {
|
|
z-index: 0;
|
|
}
|
|
.video-js .vjs-progress-control:hover .vjs-mouse-display {
|
|
display: block;
|
|
}
|
|
.video-js.vjs-user-inactive .vjs-progress-control .vjs-mouse-display,
|
|
.video-js.vjs-user-inactive .vjs-progress-control .vjs-mouse-display:after {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
$trans: visibility 1.0s, opacity 1.0s;
|
|
@include transition($trans);
|
|
}
|
|
.video-js.vjs-user-inactive.vjs-no-flex .vjs-progress-control .vjs-mouse-display,
|
|
.video-js.vjs-user-inactive.vjs-no-flex .vjs-progress-control .vjs-mouse-display:after {
|
|
display: none;
|
|
}
|
|
.vjs-mouse-display .vjs-time-tooltip,
|
|
.video-js .vjs-progress-control .vjs-mouse-display:after {
|
|
color: #fff;
|
|
@include background-color-with-alpha(#000, 0.8);
|
|
}
|