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 > button:first-child {
16 @include margin-left($first-control-bar-element-margin-left);
20 @include margin-right($first-control-bar-element-margin-left);
23 .vjs-progress-control,
28 .vjs-resolution-control,
29 .vjs-fullscreen-control,
33 color: pvar(--embedForegroundColor) !important;
35 opacity: $primary-foreground-opacity;
36 transition: opacity .1s;
39 opacity: $primary-foreground-opacity-hover;
46 color: pvar(--embedForegroundColor);
47 opacity: $primary-foreground-opacity;
50 .vjs-progress-control {
51 @include margin-left($progress-margin);
54 top: $control-bar-slider-top;
55 z-index: 100; // On top of the progress bar
56 width: calc(100% - (2 * #{$progress-margin}));
62 background-color: rgba(255, 255, 255, .2);
67 background: pvar(--embedForegroundColor);
69 // Not display the circle if the progress is not hovered
72 transition: opacity 0.1s ease;
86 background: rgba(255, 255, 255, .2);
92 .vjs-progress-control:hover .vjs-slider,
93 .vjs-progress-control .vjs-slider.vjs-sliding {
96 .vjs-play-progress::before {
102 @include disable-outline;
105 width: $control-bar-button-width;
107 .vjs-icon-placeholder::before {
108 font-size: $control-bar-play-font-size;
116 line-height: inherit;
119 @include margin-left(.5em);
121 font-size: $control-bar-font-size;
122 display: inline-block;
125 .vjs-current-time-display {
126 line-height: calc(#{$control-bar-height} - 1px);
129 @include margin(0, 1px, 0, 2px);
137 font-size: $control-bar-font-size;
138 display: inline-block;
141 .vjs-duration-display {
142 line-height: calc(#{$control-bar-height} - 1px);
146 &.vjs-remaining-time {
152 line-height: $control-bar-height;
158 @include margin-right(6px);
161 line-height: $control-bar-height;
164 font-size: $control-bar-font-size;
166 .vjs-peertube-displayed {
170 .vjs-peertube-hidden {
174 .download-speed-number,
175 .upload-speed-number,
178 font-weight: $font-semibold;
181 .download-speed-text,
185 @include margin-right(15px);
189 @include margin-right(2px);
191 display: inline-block;
194 background-size: contain;
195 vertical-align: middle;
196 background-repeat: no-repeat;
201 background-image: url('#{$assets-path}/player/images/arrow-down.svg');
205 background-image: url('#{$assets-path}/player/images/arrow-up.svg');
211 .vjs-previous-video {
212 width: $control-bar-button-width - 4px;
221 mask-image: url('#{$assets-path}/player/images/next.svg');
222 -webkit-mask-image: url('#{$assets-path}/player/images/next.svg');
224 -webkit-mask-size: cover;
226 background-color: #fff;
227 width: $control-bar-next-previous-play-font-size;
228 height: $control-bar-next-previous-play-font-size;
229 display: inline-block;
233 transform: rotate(180deg);
239 @include disable-outline;
242 width: $control-bar-icon-size;
244 .vjs-icon-placeholder {
245 display: inline-block;
246 width: $control-bar-icon-size;
247 height: $control-bar-icon-size;
248 vertical-align: middle;
249 background: url('#{$assets-path}/player/images/volume.svg') no-repeat;
250 background-size: contain;
257 &.vjs-vol-0 .vjs-icon-placeholder {
258 background: url('#{$assets-path}/player/images/volume-mute.svg') no-repeat;
259 background-size: contain;
263 .vjs-volume-control {
264 @include margin(0, 5px, 0, 5px);
266 width: $control-bar-icon-size;
272 background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcCAQAAACw95UnAAAAMElEQVRIx2NgoBL4n4YKGUYNHkEG4zJg1OCRYDCpBowaPJwMppbLRg0eNXjUYBLEAXWNUA6QNm1lAAAAAElFTkSuQmCC') no-repeat;
273 background-size: $control-bar-icon-size $control-bar-volume-slider-height;
276 max-width: $control-bar-icon-size;
277 max-height: $control-bar-volume-slider-height;
282 background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcAQAAAAAyhWABAAAAAnRSTlMAAHaTzTgAAAAZSURBVHgBYwAB/g9EUv+JokCqiaT+U4MCAPKPS7WUUOc1AAAAAElFTkSuQmCC') no-repeat;
283 background-size: $control-bar-icon-size $control-bar-volume-slider-height;
284 max-width: $control-bar-icon-size;
286 max-height: $control-bar-volume-slider-height;
300 .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,
301 .vjs-volume-panel.vjs-volume-panel-horizontal:active,
302 .vjs-volume-panel.vjs-volume-panel-horizontal:focus,
303 .vjs-volume-panel.vjs-volume-panel-horizontal:hover {
305 transition-property: none;
308 .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-horizontal {
313 .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control {
314 transition-property: none;
324 .vjs-volume-control {
325 display: inline-block;
335 @include disable-outline;
338 width: $control-bar-button-width;
340 .vjs-icon-placeholder {
341 display: inline-block;
342 height: $control-bar-icon-size - 5px;
343 width: $control-bar-icon-size - 5px;
344 vertical-align: middle;
345 background: url('#{$assets-path}/player/images/settings.svg') no-repeat;
346 background-size: contain;
355 @include disable-outline;
356 @include disable-default-a-behaviour;
358 text-decoration: none;
359 line-height: $control-bar-height;
360 font-weight: $font-semibold;
364 .vjs-theater-control {
365 @include disable-outline;
367 width: $control-bar-button-width;
370 .vjs-icon-placeholder {
371 transition: transform 0.2s ease;
372 display: inline-block;
373 width: $control-bar-icon-size;
374 height: $control-bar-icon-size;
375 vertical-align: middle;
376 background: url('#{$assets-path}/player/images/theater.svg') no-repeat;
377 background-size: contain;
385 .vjs-fullscreen-control {
386 @include disable-outline;
388 width: $control-bar-button-width;
390 .vjs-icon-placeholder {
391 display: inline-block;
392 width: $control-bar-icon-size;
393 height: $control-bar-icon-size;
394 vertical-align: middle;
395 background: url('#{$assets-path}/player/images/fullscreen.svg') no-repeat;
396 background-size: contain;
404 @media screen and (max-width: $screen-width-750) {
405 .vjs-theater-control {
411 .download-speed-text,
413 display: none !important;
418 @media screen and (max-width: $screen-width-570) {
420 padding: 0 !important;
422 .vjs-peertube-displayed {
423 display: none !important;
429 display: none !important;
433 display: none !important;
438 @media screen and (max-width: $screen-width-350) {
441 .vjs-previous-video {
442 display: none !important;
446 padding: 0 !important;
449 > button:first-child {
450 @include margin-left($first-control-bar-element-margin-left-small-width);
453 > button:last-child {
454 @include margin-right($first-control-bar-element-margin-left-small-width);
459 display: none !important;