2 @use '_variables' as *;
4 @use './_player-variables' as *;
6 .video-js.vjs-peertube-skin .vjs-control-bar {
9 height: $control-bar-height;
10 background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
11 box-shadow: 0 -15px 40px 10px rgba(0, 0, 0, 0.2);
12 text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
13 transition: visibility 0.3s, opacity 0.3s !important;
15 &.control-bar-hidden {
16 display: none !important;
19 > button:first-child {
20 @include margin-left($first-control-bar-element-margin-left);
24 @include margin-right($first-control-bar-element-margin-left);
27 .vjs-progress-control,
32 .vjs-resolution-control,
33 .vjs-fullscreen-control,
37 color: pvar(--embedForegroundColor) !important;
39 opacity: $primary-foreground-opacity;
40 transition: opacity .1s;
43 opacity: $primary-foreground-opacity-hover;
50 color: pvar(--embedForegroundColor);
51 opacity: $primary-foreground-opacity;
54 .vjs-progress-control {
55 @include margin-left($progress-margin);
58 top: $control-bar-slider-top;
59 z-index: 100; // On top of the progress bar
60 width: calc(100% - (2 * #{$progress-margin}));
66 background-color: rgba(255, 255, 255, .2);
71 background: pvar(--embedForegroundColor);
73 // Not display the circle if the progress is not hovered
76 transition: opacity 0.1s ease;
90 background: rgba(255, 255, 255, .2);
96 .vjs-progress-control:hover .vjs-slider,
97 .vjs-progress-control .vjs-slider.vjs-sliding {
100 .vjs-play-progress::before {
106 @include disable-outline;
109 width: $control-bar-button-width;
111 .vjs-icon-placeholder::before {
112 font-size: $control-bar-play-font-size;
120 line-height: inherit;
123 @include margin-left(.5em);
125 font-size: $control-bar-font-size;
126 display: inline-block;
129 .vjs-current-time-display {
130 line-height: calc(#{$control-bar-height} - 1px);
133 @include margin(0, 1px, 0, 2px);
141 font-size: $control-bar-font-size;
142 display: inline-block;
145 .vjs-duration-display {
146 line-height: calc(#{$control-bar-height} - 1px);
150 &.vjs-remaining-time {
156 line-height: $control-bar-height;
162 @include margin-right(6px);
163 @include margin-left(auto);
165 line-height: $control-bar-height;
168 font-size: $control-bar-font-size;
170 .vjs-peertube-displayed {
174 .vjs-peertube-hidden {
178 .download-speed-number,
179 .upload-speed-number,
182 font-weight: $font-semibold;
185 .download-speed-text,
189 @include margin-right(15px);
193 @include margin-right(2px);
195 display: inline-block;
198 background-size: contain;
199 vertical-align: middle;
200 background-repeat: no-repeat;
205 background-image: url('#{$assets-path}/player/images/arrow-down.svg');
209 background-image: url('#{$assets-path}/player/images/arrow-up.svg');
215 .vjs-previous-video {
216 width: $control-bar-button-width - 4px;
225 mask-image: url('#{$assets-path}/player/images/next.svg');
226 -webkit-mask-image: url('#{$assets-path}/player/images/next.svg');
228 -webkit-mask-size: cover;
230 background-color: #fff;
231 width: $control-bar-next-previous-play-font-size;
232 height: $control-bar-next-previous-play-font-size;
233 display: inline-block;
237 transform: rotate(180deg);
243 @include disable-outline;
246 width: $control-bar-icon-size;
248 .vjs-icon-placeholder {
249 display: inline-block;
250 width: $control-bar-icon-size;
251 height: $control-bar-icon-size;
252 vertical-align: middle;
253 background: url('#{$assets-path}/player/images/volume.svg') no-repeat;
254 background-size: contain;
261 &.vjs-vol-0 .vjs-icon-placeholder {
262 background: url('#{$assets-path}/player/images/volume-mute.svg') no-repeat;
263 background-size: contain;
267 .vjs-volume-control {
268 @include margin(0, 5px, 0, 5px);
270 width: $control-bar-icon-size;
276 background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcCAQAAACw95UnAAAAMElEQVRIx2NgoBL4n4YKGUYNHkEG4zJg1OCRYDCpBowaPJwMppbLRg0eNXjUYBLEAXWNUA6QNm1lAAAAAElFTkSuQmCC') no-repeat;
277 background-size: $control-bar-icon-size $control-bar-volume-slider-height;
280 max-width: $control-bar-icon-size;
281 max-height: $control-bar-volume-slider-height;
286 background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcAQAAAAAyhWABAAAAAnRSTlMAAHaTzTgAAAAZSURBVHgBYwAB/g9EUv+JokCqiaT+U4MCAPKPS7WUUOc1AAAAAElFTkSuQmCC') no-repeat;
287 background-size: $control-bar-icon-size $control-bar-volume-slider-height;
288 max-width: $control-bar-icon-size;
290 max-height: $control-bar-volume-slider-height;
304 .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,
305 .vjs-volume-panel.vjs-volume-panel-horizontal:active,
306 .vjs-volume-panel.vjs-volume-panel-horizontal:focus,
307 .vjs-volume-panel.vjs-volume-panel-horizontal:hover {
309 transition-property: none;
312 .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-horizontal {
317 .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control {
318 transition-property: none;
328 .vjs-volume-control {
329 display: inline-block;
339 @include disable-outline;
342 width: $control-bar-button-width;
344 .vjs-icon-placeholder {
345 display: inline-block;
346 height: $control-bar-icon-size - 5px;
347 width: $control-bar-icon-size - 5px;
348 vertical-align: middle;
349 background: url('#{$assets-path}/player/images/settings.svg') no-repeat;
350 background-size: contain;
359 @include disable-outline;
360 @include disable-default-a-behaviour;
363 text-decoration: none;
364 line-height: $control-bar-height;
365 font-weight: $font-semibold;
370 .vjs-theater-control {
371 @include disable-outline;
373 width: $control-bar-button-width;
376 .vjs-icon-placeholder {
377 transition: transform 0.2s ease;
378 display: inline-block;
379 width: $control-bar-icon-size;
380 height: $control-bar-icon-size;
381 vertical-align: middle;
382 background: url('#{$assets-path}/player/images/theater.svg') no-repeat;
383 background-size: contain;
391 .vjs-fullscreen-control {
392 @include disable-outline;
394 width: $control-bar-button-width;
396 .vjs-icon-placeholder {
397 display: inline-block;
398 width: $control-bar-icon-size;
399 height: $control-bar-icon-size;
400 vertical-align: middle;
401 background: url('#{$assets-path}/player/images/fullscreen.svg') no-repeat;
402 background-size: contain;
410 @media screen and (max-width: $screen-width-750) {
411 .vjs-theater-control {
417 .download-speed-text,
419 display: none !important;
424 @media screen and (max-width: $screen-width-570) {
425 .vjs-volume-control {
430 padding: 0 !important;
432 .vjs-peertube-displayed {
433 display: none !important;
443 display: none !important;
447 display: none !important;
452 @media screen and (max-width: $screen-width-350) {
454 .vjs-previous-video {
455 display: none !important;
459 padding: 0 !important;
462 > button:first-child {
463 @include margin-left($first-control-bar-element-margin-left-small-width);
466 > button:last-child {
467 @include margin-right($first-control-bar-element-margin-left-small-width);
471 @include margin-left(0);
478 display: none !important;