2 // Let's talk pixel math!
3 // Start with a base font size of 10px (assuming that hasn't changed)
5 // - Progress holder is 3px
6 // - Progress handle is 9px
7 // - Progress handle is pulled up 3px to center it.
10 // - Progress holder becomes 5px
11 // - Progress handle becomes 15px
12 // - Progress handle is pulled up 5px to center it
15 .video-js .vjs-progress-control {
17 @include display-flex(center);
21 .vjs-live .vjs-progress-control {
25 // Box containing play and load progresses. Also acts as seek scrubber.
26 .video-js .vjs-progress-holder {
28 @include transition(all 0.2s);
32 // We need an increased hit area on hover
33 .video-js .vjs-progress-control:hover .vjs-progress-holder {
34 font-size: 1.666666666666666666em;
37 /* If we let the font size grow as much as everything else, the current time tooltip ends up
38 ginormous. If you'd like to enable the current time tooltip all the time, this should be disabled
39 to avoid a weird hitch when you roll off the hover. */
41 // Also show the current time tooltip
42 .video-js .vjs-progress-control:hover .vjs-time-tooltip,
43 .video-js .vjs-progress-control:hover .vjs-mouse-display:after,
44 .video-js .vjs-progress-control:hover .vjs-play-progress:after {
45 font-family: $text-font-family;
51 .video-js .vjs-progress-holder .vjs-play-progress,
52 .video-js .vjs-progress-holder .vjs-load-progress,
53 .video-js .vjs-progress-holder .vjs-tooltip-progress-bar,
54 .video-js .vjs-progress-holder .vjs-load-progress div {
60 // updated by javascript during playback
67 .video-js .vjs-mouse-display {
68 @extend .vjs-icon-circle;
74 .video-js .vjs-play-progress {
75 background-color: $primary-foreground-color;
76 @extend .vjs-icon-circle;
81 top: -0.333333333333333em;
87 // Current Time "tooltip"
88 // By default this is hidden and only shown when hovering over the progress control
89 .video-js .vjs-time-tooltip,
90 .video-js .vjs-mouse-display:after,
91 .video-js .vjs-play-progress:after {
99 content: attr(data-current-time);
100 padding: 6px 8px 8px 8px;
101 @include background-color-with-alpha(#fff, 0.8);
102 @include border-radius(0.3em);
105 .video-js .vjs-time-tooltip,
106 .video-js .vjs-play-progress:before,
107 .video-js .vjs-play-progress:after {
111 .video-js .vjs-progress-control .vjs-keep-tooltips-inside:after {
115 .video-js .vjs-load-progress {
116 // For IE8 we'll lighten the color
117 background: lighten($secondary-background-color, 25%);
118 // Otherwise we'll rely on stacked opacities
119 background: rgba($secondary-background-color, $secondary-background-transparency);
122 // there are child elements of the load progress bar that represent the
123 // specific time ranges that have been buffered
124 .video-js .vjs-load-progress div {
125 // For IE8 we'll lighten the color
126 background: lighten($secondary-background-color, 50%);
127 // Otherwise we'll rely on stacked opacities
128 background: rgba($secondary-background-color, 0.75);
131 .video-js.vjs-no-flex .vjs-progress-control {
135 .video-js .vjs-time-tooltip {
136 display: inline-block;
143 .vjs-tooltip-progress-bar {
147 .video-js .vjs-progress-control .vjs-mouse-display {
152 background-color: #000;
155 .vjs-no-flex .vjs-progress-control .vjs-mouse-display {
158 .video-js .vjs-progress-control:hover .vjs-mouse-display {
161 .video-js.vjs-user-inactive .vjs-progress-control .vjs-mouse-display,
162 .video-js.vjs-user-inactive .vjs-progress-control .vjs-mouse-display:after {
165 $trans: visibility 1.0s, opacity 1.0s;
166 @include transition($trans);
168 .video-js.vjs-user-inactive.vjs-no-flex .vjs-progress-control .vjs-mouse-display,
169 .video-js.vjs-user-inactive.vjs-no-flex .vjs-progress-control .vjs-mouse-display:after {
172 .vjs-mouse-display .vjs-time-tooltip,
173 .video-js .vjs-progress-control .vjs-mouse-display:after {
175 @include background-color-with-alpha(#000, 0.8);