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);
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;
362 text-decoration: none;
363 line-height: $control-bar-height;
364 font-weight: $font-semibold;
368 .vjs-theater-control {
369 @include disable-outline;
371 width: $control-bar-button-width;
374 .vjs-icon-placeholder {
375 transition: transform 0.2s ease;
376 display: inline-block;
377 width: $control-bar-icon-size;
378 height: $control-bar-icon-size;
379 vertical-align: middle;
380 background: url('#{$assets-path}/player/images/theater.svg') no-repeat;
381 background-size: contain;
389 .vjs-fullscreen-control {
390 @include disable-outline;
392 width: $control-bar-button-width;
394 .vjs-icon-placeholder {
395 display: inline-block;
396 width: $control-bar-icon-size;
397 height: $control-bar-icon-size;
398 vertical-align: middle;
399 background: url('#{$assets-path}/player/images/fullscreen.svg') no-repeat;
400 background-size: contain;
408 @media screen and (max-width: $screen-width-750) {
409 .vjs-theater-control {
415 .download-speed-text,
417 display: none !important;
422 @media screen and (max-width: $screen-width-570) {
424 padding: 0 !important;
426 .vjs-peertube-displayed {
427 display: none !important;
433 display: none !important;
437 display: none !important;
442 @media screen and (max-width: $screen-width-350) {
445 .vjs-previous-video {
446 display: none !important;
450 padding: 0 !important;
453 > button:first-child {
454 @include margin-left($first-control-bar-element-margin-left-small-width);
457 > button:last-child {
458 @include margin-right($first-control-bar-element-margin-left-small-width);
463 display: none !important;