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;
161 @include margin-right(6px);
162 @include margin-left(auto);
164 line-height: $control-bar-height;
167 font-size: $control-bar-font-size;
169 .vjs-peertube-displayed {
173 .vjs-peertube-hidden {
177 .download-speed-number,
178 .upload-speed-number,
181 font-weight: $font-semibold;
184 .download-speed-text,
188 @include margin-right(15px);
192 @include margin-right(2px);
194 display: inline-block;
197 background-size: contain;
198 vertical-align: middle;
199 background-repeat: no-repeat;
204 background-image: url('#{$assets-path}/player/images/arrow-down.svg');
208 background-image: url('#{$assets-path}/player/images/arrow-up.svg');
214 .vjs-previous-video {
215 width: $control-bar-button-width - 4px;
224 mask-image: url('#{$assets-path}/player/images/next.svg');
225 -webkit-mask-image: url('#{$assets-path}/player/images/next.svg');
227 -webkit-mask-size: cover;
229 background-color: #fff;
230 width: $control-bar-next-previous-play-font-size;
231 height: $control-bar-next-previous-play-font-size;
232 display: inline-block;
236 transform: rotate(180deg);
242 @include disable-outline;
245 width: $control-bar-icon-size;
247 .vjs-icon-placeholder {
248 display: inline-block;
249 width: $control-bar-icon-size;
250 height: $control-bar-icon-size;
251 vertical-align: middle;
252 background: url('#{$assets-path}/player/images/volume.svg') no-repeat;
253 background-size: contain;
260 &.vjs-vol-0 .vjs-icon-placeholder {
261 background: url('#{$assets-path}/player/images/volume-mute.svg') no-repeat;
262 background-size: contain;
266 .vjs-volume-control {
267 @include margin(0, 5px, 0, 5px);
269 width: $control-bar-icon-size;
275 background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcCAQAAACw95UnAAAAMElEQVRIx2NgoBL4n4YKGUYNHkEG4zJg1OCRYDCpBowaPJwMppbLRg0eNXjUYBLEAXWNUA6QNm1lAAAAAElFTkSuQmCC') no-repeat;
276 background-size: $control-bar-icon-size $control-bar-volume-slider-height;
279 max-width: $control-bar-icon-size;
280 max-height: $control-bar-volume-slider-height;
285 background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcAQAAAAAyhWABAAAAAnRSTlMAAHaTzTgAAAAZSURBVHgBYwAB/g9EUv+JokCqiaT+U4MCAPKPS7WUUOc1AAAAAElFTkSuQmCC') no-repeat;
286 background-size: $control-bar-icon-size $control-bar-volume-slider-height;
287 max-width: $control-bar-icon-size;
289 max-height: $control-bar-volume-slider-height;
303 .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,
304 .vjs-volume-panel.vjs-volume-panel-horizontal:active,
305 .vjs-volume-panel.vjs-volume-panel-horizontal:focus,
306 .vjs-volume-panel.vjs-volume-panel-horizontal:hover {
308 transition-property: none;
311 .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-horizontal {
316 .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control {
317 transition-property: none;
327 .vjs-volume-control {
328 display: inline-block;
338 @include disable-outline;
341 width: $control-bar-button-width;
343 .vjs-icon-placeholder {
344 display: inline-block;
345 height: $control-bar-icon-size - 5px;
346 width: $control-bar-icon-size - 5px;
347 vertical-align: middle;
348 background: url('#{$assets-path}/player/images/settings.svg') no-repeat;
349 background-size: contain;
358 @include disable-outline;
359 @include disable-default-a-behaviour;
362 text-decoration: none;
363 line-height: $control-bar-height;
364 font-weight: $font-semibold;
369 .vjs-theater-control {
370 @include disable-outline;
372 width: $control-bar-button-width;
375 .vjs-icon-placeholder {
376 transition: transform 0.2s ease;
377 display: inline-block;
378 width: $control-bar-icon-size;
379 height: $control-bar-icon-size;
380 vertical-align: middle;
381 background: url('#{$assets-path}/player/images/theater.svg') no-repeat;
382 background-size: contain;
390 .vjs-fullscreen-control {
391 @include disable-outline;
393 width: $control-bar-button-width;
395 .vjs-icon-placeholder {
396 display: inline-block;
397 width: $control-bar-icon-size;
398 height: $control-bar-icon-size;
399 vertical-align: middle;
400 background: url('#{$assets-path}/player/images/fullscreen.svg') no-repeat;
401 background-size: contain;
409 @media screen and (max-width: $screen-width-750) {
410 .vjs-theater-control {
416 .download-speed-text,
418 display: none !important;
423 @media screen and (max-width: $screen-width-570) {
424 .vjs-volume-control {
429 padding: 0 !important;
431 .vjs-peertube-displayed {
432 display: none !important;
442 display: none !important;
446 display: none !important;
451 @media screen and (max-width: $screen-width-350) {
453 .vjs-previous-video {
454 display: none !important;
458 padding: 0 !important;
461 > button:first-child {
462 @include margin-left($first-control-bar-element-margin-left-small-width);
465 > button:last-child {
466 @include margin-right($first-control-bar-element-margin-left-small-width);
470 @include margin-left(0);
477 display: none !important;