aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass/player/peertube-skin.scss
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/sass/player/peertube-skin.scss')
-rw-r--r--client/src/sass/player/peertube-skin.scss561
1 files changed, 561 insertions, 0 deletions
diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss
new file mode 100644
index 000000000..de6501962
--- /dev/null
+++ b/client/src/sass/player/peertube-skin.scss
@@ -0,0 +1,561 @@
1@import '_variables';
2@import '_mixins';
3@import './_player-variables';
4
5@mixin big-play-button-triangle-size($triangle-size) {
6 width: $triangle-size;
7 height: $triangle-size;
8 top: calc(50% - #{$triangle-size / 2});
9 left: calc(53% - #{($triangle-size / 2)});
10}
11
12.video-js.vjs-peertube-skin {
13 font-size: $font-size;
14 color: $primary-foreground-color;
15
16 .vjs-dock-text {
17 padding-right: 10px;
18 }
19
20 .vjs-dock-description {
21 font-size: 11px;
22
23 &::before, &::after {
24 display: inline-block;
25 content: '\1F308';
26 }
27
28 &::before {
29 margin-right: 4px;
30 }
31
32 &::after {
33 margin-left: 4px;
34 transform: scale(-1, 1);
35 }
36 }
37
38 .vjs-button > .vjs-icon-placeholder::before {
39 line-height: $control-bar-height;
40 }
41
42 .vjs-volume-level::before {
43 content: ''; /* Remove Circle From Progress Bar */
44 }
45
46 .vjs-audio-button {
47 display: none;
48 }
49
50 .vjs-big-play-button {
51 outline: 0;
52 font-size: 6em;
53
54 $big-play-width: 1.2em;
55 $big-play-height: 1.2em;
56
57 border: 6px solid #fff;
58 border-radius: 100%;
59
60 left: 50%;
61 top: 50%;
62 width: $big-play-width;
63 height: $big-play-height;
64 line-height: $big-play-height;
65 margin-left: -($big-play-width / 2);
66 margin-top: -($big-play-height / 2);
67 transition: 0.4s opacity;
68
69 &::-moz-focus-inner {
70 border: 0;
71 padding: 0
72 }
73
74 .vjs-icon-placeholder::before {
75 @include big-play-button-triangle-size(45px);
76
77 content: '';
78 background-image: url('#{$assets-path}/player/images/big-play-button.svg');
79 }
80
81 &:hover {
82 opacity: 0.8;
83 }
84 }
85
86 // Small effect when we click on the play button
87 &.vjs-has-big-play-button-clicked {
88
89 .vjs-big-play-button, .vjs-poster {
90 display: block;
91 visibility: hidden;
92
93 &.vjs-big-play-button, &.vjs-big-play-button::before {
94 opacity: 0;
95 transition: visibility 0.2s, opacity 0.2s;
96 }
97
98 &.vjs-poster, &.vjs-poster::before {
99 opacity: 0;
100 transition: visibility 0.3s, opacity 0.3s;
101 transition-delay: 0.05s;
102 }
103 }
104 }
105
106 // Hide the big play button on autoplay
107 &.vjs-has-autoplay {
108 .vjs-big-play-button {
109 display: none !important;
110 }
111 }
112
113 .vjs-control-bar,
114 .vjs-big-play-button,
115 .vjs-settings-dialog {
116 background-color: rgba($primary-background-color, 0.5);
117 }
118
119 .vjs-poster {
120 outline: none; /* Remove Blue Outline on Click*/
121 outline: 0;
122 }
123
124 .vjs-control-bar {
125 height: $control-bar-height;
126 background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
127 box-shadow: 0 -15px 40px 10px rgba(0, 0, 0, 0.2);
128 text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
129
130 .vjs-progress-control,
131 .vjs-play-control,
132 .vjs-playback-rate,
133 .vjs-mute-control,
134 .vjs-volume-control,
135 .vjs-resolution-control,
136 .vjs-fullscreen-control,
137 .vjs-peertube-link,
138 .vjs-settings
139 {
140 color: $primary-foreground-color !important;
141 opacity: $primary-foreground-opacity;
142 transition: opacity .1s;
143
144 &:hover {
145 opacity: $primary-foreground-opacity-hover;
146 }
147 }
148
149 .vjs-current-time,
150 .vjs-duration,
151 .vjs-peertube {
152 color: $primary-foreground-color;
153 opacity: $primary-foreground-opacity;
154 }
155
156 .vjs-progress-control {
157 position: absolute;
158 z-index: 100; // On top of the progress bar
159 bottom: 29px;
160 width: calc(100% - (2 * #{$progress-margin}));
161 margin-left: $progress-margin;
162 height: 14px;
163
164 .vjs-slider {
165 margin: 0;
166 border-radius: 0;
167 background-color: rgba(255, 255, 255, .2);
168 height: 3px;
169 transition: none;
170
171 .vjs-play-progress {
172 background: $primary-foreground-color;
173
174 // Not display the circle if the progress is not hovered
175 &::before {
176 opacity: 0;
177 transition: opacity 0.1s ease;
178 font-size: 14px;
179
180 top: -0.3em;
181 }
182
183 .vjs-time-tooltip {
184 display: none;
185 }
186 }
187
188 .vjs-load-progress {
189 &, & div {
190 background: rgba(255, 255, 255, .2);
191 }
192 }
193 }
194 }
195
196 .vjs-progress-control:hover .vjs-slider,
197 .vjs-slider.vjs-sliding {
198 height: 5px;
199
200 .vjs-play-progress::before {
201 opacity: 1;
202 }
203 }
204
205
206 .vjs-play-control {
207 @include disable-outline;
208
209 cursor: pointer;
210 font-size: $font-size;
211 margin-right: 5px;
212 }
213
214 .vjs-time-control {
215 line-height: inherit;
216
217 &.vjs-current-time {
218 font-size: $font-size;
219 display: inline-block;
220 padding: 0;
221
222 .vjs-current-time-display {
223 line-height: calc(#{$control-bar-height} + 1px);
224
225 &::after {
226 content: "/";
227 margin: 0 1px 0 2px;
228 }
229 }
230 }
231
232 &.vjs-duration {
233 font-size: $font-size;
234 display: inline-block;
235 padding: 0;
236 .vjs-duration-display {
237 line-height: calc(#{$control-bar-height} + 1px);
238 }
239 }
240
241 &.vjs-remaining-time {
242 display: none;
243 }
244 }
245
246 .vjs-peertube {
247 width: 100%;
248 line-height: $control-bar-height;
249 text-align: right;
250
251 .vjs-peertube-displayed {
252 display: block;
253 }
254
255 .vjs-peertube-hidden {
256 display: none;
257 }
258
259 .download-speed-number, .upload-speed-number, .peers-number {
260 font-weight: $font-semibold;
261 }
262
263 .download-speed-text, .upload-speed-text, .peers-text {
264 margin-right: 15px;
265 }
266
267 .icon {
268 display: inline-block;
269 width: 15px;
270 height: 15px;
271 background-size: contain;
272 vertical-align: middle;
273 background-repeat: no-repeat;
274 margin-right: 6px;
275 position: relative;
276 top: -1px;
277
278 &.icon-download {
279 background-image: url('#{$assets-path}/player/images/arrow-down.svg');
280 }
281
282 &.icon-upload {
283 background-image: url('#{$assets-path}/player/images/arrow-up.svg');
284 }
285 }
286 }
287
288 .vjs-playback-rate {
289 font-size: 10px;
290 width: 37px !important;
291
292 .vjs-playback-rate-value {
293 font-size: 13px;
294 line-height: $control-bar-height;
295 }
296
297 .vjs-menu .vjs-menu-content {
298 width: 37px !important;
299 }
300 }
301
302 .vjs-mute-control {
303 @include disable-outline;
304
305 line-height: $control-bar-height;
306 padding: 0;
307 width: 30px;
308
309 .vjs-icon-placeholder {
310 display: inline-block;
311 width: 22px;
312 height: 22px;
313 vertical-align: middle;
314 background: url('#{$assets-path}/player/images/volume.svg') no-repeat;
315 background-size: contain;
316
317 &::before {
318 content: '';
319 }
320 }
321
322 &.vjs-vol-0 .vjs-icon-placeholder {
323 background: url('#{$assets-path}/player/images/volume-mute.svg') no-repeat;
324 background-size: contain;
325 }
326 }
327
328 .vjs-volume-control {
329 width: 30px;
330 margin: 0 5px 0 0;
331 }
332
333 .vjs-volume-bar {
334 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcCAQAAACw95UnAAAAMElEQVRIx2NgoBL4n4YKGUYNHkEG4zJg1OCRYDCpBowaPJwMppbLRg0eNXjUYBLEAXWNUA6QNm1lAAAAAElFTkSuQmCC) no-repeat;
335 background-size: 22px 14px;
336 height: 100%;
337 width: 100%;
338 max-width: 22px;
339 max-height: 14px;
340 margin: 7px 4px;
341 border-radius: 0;
342 top: 3px;
343
344 .vjs-volume-level {
345 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcAQAAAAAyhWABAAAAAnRSTlMAAHaTzTgAAAAZSURBVHgBYwAB/g9EUv+JokCqiaT+U4MCAPKPS7WUUOc1AAAAAElFTkSuQmCC) no-repeat;
346 background-size: 22px 14px;
347 max-width: 22px;
348 max-height: 14px;
349 height: 100%;
350 }
351 }
352
353 .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,
354 .vjs-volume-panel.vjs-volume-panel-horizontal:active,
355 .vjs-volume-panel.vjs-volume-panel-horizontal:focus,
356 .vjs-volume-panel.vjs-volume-panel-horizontal:hover {
357 width: 6em;
358 transition-property: none;
359 }
360
361 .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-horizontal {
362 width: 3em;
363 height: auto;
364 }
365
366 .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control {
367 transition-property: none;
368 }
369
370 .vjs-volume-panel {
371 .vjs-mute-control {
372 width: 2em;
373 z-index: 1;
374 padding: 0;
375 }
376
377 .vjs-volume-control {
378 display: inline-block;
379 position: relative;
380 left: 5px;
381 opacity: 1;
382 width: 3em;
383 height: auto;
384 }
385 }
386
387 .vjs-peertube-link {
388 @include disable-outline;
389 @include disable-default-a-behaviour;
390
391 text-decoration: none;
392 line-height: $control-bar-height;
393 font-weight: $font-semibold;
394 padding: 0 5px;
395 }
396
397 .vjs-fullscreen-control {
398 @include disable-outline;
399
400 width: 37px;
401 margin-right: 11px;
402
403 .vjs-icon-placeholder {
404 display: inline-block;
405 width: 22px;
406 height: 22px;
407 vertical-align: middle;
408 background: url('#{$assets-path}/player/images/fullscreen.svg') no-repeat;
409 background-size: contain;
410
411 &::before {
412 content: '';
413 }
414 }
415 }
416
417 .vjs-menu-button-popup {
418 font-weight: $font-semibold;
419 width: 50px;
420
421 .vjs-resolution-button {
422 @include disable-outline;
423 }
424
425 .vjs-menu {
426 top: 20px;
427 left: 0;
428
429 .vjs-menu-content {
430 width: 50px;
431 bottom: 20px;
432 }
433
434 li {
435 text-transform: none;
436 font-size: 13px;
437 }
438 }
439 }
440 }
441
442 @media screen and (max-width: 750px) {
443 .vjs-dock-text {
444 font-size: 16px;
445 }
446
447 .vjs-dock-description {
448 font-size: 9px;
449 }
450
451 .vjs-big-play-button {
452 font-size: 5em;
453 border-width: 5px;
454
455 .vjs-icon-placeholder::before {
456 @include big-play-button-triangle-size(32px);
457 }
458 }
459 }
460
461 @media screen and (max-width: 570px) {
462 .vjs-dock-text {
463 font-size: 14px;
464 }
465
466 .vjs-big-play-button {
467 font-size: 4.5em;
468 border-width: 4.5px;
469
470 .vjs-icon-placeholder::before {
471 @include big-play-button-triangle-size(27px);
472 }
473 }
474
475 .vjs-playback-rate {
476 display: none;
477 }
478
479 .vjs-peertube {
480 padding: 0 !important;
481
482 .vjs-peertube-displayed {
483 display: none !important;
484 }
485 }
486 }
487
488 @media screen and (max-width: 300px) {
489 .vjs-dock-text {
490 font-size: 13px;
491 }
492
493 .vjs-big-play-button {
494 font-size: 3em;
495 border-width: 3px;
496
497 .vjs-icon-placeholder::before {
498 @include big-play-button-triangle-size(20px);
499 }
500 }
501
502 .vjs-volume-control {
503 display: none !important;
504 }
505
506 .vjs-peertube-link {
507 padding: 0 !important;
508 }
509
510 .vjs-settings {
511 width: 33px;
512 }
513 }
514}
515
516// Play/pause animations
517.vjs-has-started .vjs-play-control {
518 &.vjs-playing {
519 animation: remove-pause-button 0.25s ease;
520 }
521
522 &.vjs-paused {
523 animation: add-play-button 0.25s ease;
524 }
525
526 @keyframes remove-pause-button {
527 0% {
528 transform: rotate(90deg);
529 }
530 100% {
531 transform: rotate(0deg);
532 }
533 }
534
535 @keyframes add-play-button {
536 0% {
537 transform: rotate(-90deg);
538 }
539 100% {
540 transform: rotate(0deg);
541 }
542 }
543}
544
545// Error display disabled
546.vjs-error:not(.vjs-error-display-enabled) {
547 .vjs-error-display {
548 display: none;
549 }
550
551 .vjs-loading-spinner {
552 display: block;
553 }
554}
555
556// Error display enabled
557.vjs-error.vjs-error-display-enabled {
558 .vjs-error-display {
559 display: block;
560 }
561} \ No newline at end of file