diff options
Diffstat (limited to 'client/src/sass/video-js-custom.scss')
-rw-r--r-- | client/src/sass/video-js-custom.scss | 257 |
1 files changed, 231 insertions, 26 deletions
diff --git a/client/src/sass/video-js-custom.scss b/client/src/sass/video-js-custom.scss index 2fa3527a8..2c589553c 100644 --- a/client/src/sass/video-js-custom.scss +++ b/client/src/sass/video-js-custom.scss | |||
@@ -1,7 +1,7 @@ | |||
1 | @import '_variables'; | 1 | @import '_variables'; |
2 | @import '_mixins'; | 2 | @import '_mixins'; |
3 | 3 | ||
4 | $primary-foreground-color: #eee; | 4 | $primary-foreground-color: #fff; |
5 | $primary-foreground-opacity: 0.9; | 5 | $primary-foreground-opacity: 0.9; |
6 | $primary-foreground-opacity-hover: 1; | 6 | $primary-foreground-opacity-hover: 1; |
7 | $primary-background-color: #000; | 7 | $primary-background-color: #000; |
@@ -11,9 +11,12 @@ $control-bar-height: 34px; | |||
11 | 11 | ||
12 | $slider-bg-color: lighten($primary-background-color, 33%); | 12 | $slider-bg-color: lighten($primary-background-color, 33%); |
13 | 13 | ||
14 | $setting-transition-duration: 0.15s; | ||
15 | $setting-transition-easing: ease-out; | ||
16 | |||
14 | .video-js.vjs-peertube-skin { | 17 | .video-js.vjs-peertube-skin { |
15 | font-size: $font-size; | 18 | font-size: $font-size; |
16 | color: #fff; | 19 | color: $primary-foreground-color; |
17 | 20 | ||
18 | .vjs-dock-text { | 21 | .vjs-dock-text { |
19 | padding-right: 10px; | 22 | padding-right: 10px; |
@@ -22,16 +25,16 @@ $slider-bg-color: lighten($primary-background-color, 33%); | |||
22 | .vjs-dock-description { | 25 | .vjs-dock-description { |
23 | font-size: 11px; | 26 | font-size: 11px; |
24 | 27 | ||
25 | &:before, &:after { | 28 | &::before, &::after { |
26 | display: inline-block; | 29 | display: inline-block; |
27 | content: '\1F308'; | 30 | content: '\1F308'; |
28 | } | 31 | } |
29 | 32 | ||
30 | &:before { | 33 | &::before { |
31 | margin-right: 4px; | 34 | margin-right: 4px; |
32 | } | 35 | } |
33 | 36 | ||
34 | &:after { | 37 | &::after { |
35 | margin-left: 4px; | 38 | margin-left: 4px; |
36 | transform: scale(-1, 1); | 39 | transform: scale(-1, 1); |
37 | } | 40 | } |
@@ -41,7 +44,7 @@ $slider-bg-color: lighten($primary-background-color, 33%); | |||
41 | line-height: $control-bar-height; | 44 | line-height: $control-bar-height; |
42 | } | 45 | } |
43 | 46 | ||
44 | .vjs-volume-level:before { | 47 | .vjs-volume-level::before { |
45 | content: ''; /* Remove Circle From Progress Bar */ | 48 | content: ''; /* Remove Circle From Progress Bar */ |
46 | } | 49 | } |
47 | 50 | ||
@@ -95,7 +98,7 @@ $slider-bg-color: lighten($primary-background-color, 33%); | |||
95 | 98 | ||
96 | .vjs-control-bar, | 99 | .vjs-control-bar, |
97 | .vjs-big-play-button, | 100 | .vjs-big-play-button, |
98 | .vjs-menu-button .vjs-menu-content { | 101 | .vjs-settings-dialog { |
99 | background-color: rgba($primary-background-color, 0.5); | 102 | background-color: rgba($primary-background-color, 0.5); |
100 | } | 103 | } |
101 | 104 | ||
@@ -110,8 +113,13 @@ $slider-bg-color: lighten($primary-background-color, 33%); | |||
110 | } | 113 | } |
111 | 114 | ||
112 | .vjs-play-progress { | 115 | .vjs-play-progress { |
113 | &::before:hover { | 116 | |
114 | top: -0.372em; | 117 | &::before { |
118 | top: -0.3em; | ||
119 | |||
120 | &:hover { | ||
121 | top: -0.372em; | ||
122 | } | ||
115 | } | 123 | } |
116 | 124 | ||
117 | .vjs-time-tooltip { | 125 | .vjs-time-tooltip { |
@@ -141,8 +149,11 @@ $slider-bg-color: lighten($primary-background-color, 33%); | |||
141 | .vjs-mute-control, | 149 | .vjs-mute-control, |
142 | .vjs-volume-control, | 150 | .vjs-volume-control, |
143 | .vjs-resolution-control, | 151 | .vjs-resolution-control, |
144 | .vjs-fullscreen-control | 152 | .vjs-fullscreen-control, |
153 | .vjs-peertube-link, | ||
154 | .vjs-settings | ||
145 | { | 155 | { |
156 | color: $primary-foreground-color !important; | ||
146 | opacity: $primary-foreground-opacity; | 157 | opacity: $primary-foreground-opacity; |
147 | transition: opacity .1s; | 158 | transition: opacity .1s; |
148 | 159 | ||
@@ -155,6 +166,7 @@ $slider-bg-color: lighten($primary-background-color, 33%); | |||
155 | .vjs-duration, | 166 | .vjs-duration, |
156 | .vjs-peertube { | 167 | .vjs-peertube { |
157 | color: $primary-foreground-color; | 168 | color: $primary-foreground-color; |
169 | opacity: $primary-foreground-opacity; | ||
158 | } | 170 | } |
159 | 171 | ||
160 | .vjs-progress-control { | 172 | .vjs-progress-control { |
@@ -172,6 +184,7 @@ $slider-bg-color: lighten($primary-background-color, 33%); | |||
172 | .vjs-play-control { | 184 | .vjs-play-control { |
173 | @include disable-outline; | 185 | @include disable-outline; |
174 | 186 | ||
187 | cursor: pointer; | ||
175 | font-size: $font-size; | 188 | font-size: $font-size; |
176 | padding: 0 17px; | 189 | padding: 0 17px; |
177 | margin-right: 5px; | 190 | margin-right: 5px; |
@@ -291,7 +304,7 @@ $slider-bg-color: lighten($primary-background-color, 33%); | |||
291 | 304 | ||
292 | .vjs-volume-control { | 305 | .vjs-volume-control { |
293 | width: 30px; | 306 | width: 30px; |
294 | margin: 0; | 307 | margin: 0 5px 0 0; |
295 | } | 308 | } |
296 | 309 | ||
297 | .vjs-volume-bar { | 310 | .vjs-volume-bar { |
@@ -348,6 +361,16 @@ $slider-bg-color: lighten($primary-background-color, 33%); | |||
348 | } | 361 | } |
349 | } | 362 | } |
350 | 363 | ||
364 | .vjs-peertube-link { | ||
365 | @include disable-outline; | ||
366 | @include disable-default-a-behaviour; | ||
367 | |||
368 | text-decoration: none; | ||
369 | line-height: $control-bar-height; | ||
370 | font-weight: $font-semibold; | ||
371 | padding: 0 5px; | ||
372 | } | ||
373 | |||
351 | .vjs-fullscreen-control { | 374 | .vjs-fullscreen-control { |
352 | @include disable-outline; | 375 | @include disable-outline; |
353 | 376 | ||
@@ -371,19 +394,6 @@ $slider-bg-color: lighten($primary-background-color, 33%); | |||
371 | font-weight: $font-semibold; | 394 | font-weight: $font-semibold; |
372 | width: 50px; | 395 | width: 50px; |
373 | 396 | ||
374 | // Thanks: https://github.com/kmoskwiak/videojs-resolution-switcher/pull/92/files | ||
375 | .vjs-resolution-button-label { | ||
376 | line-height: $control-bar-height; | ||
377 | position: absolute; | ||
378 | top: 0; | ||
379 | left: 0; | ||
380 | width: 100%; | ||
381 | height: 100%; | ||
382 | text-align: center; | ||
383 | box-sizing: inherit; | ||
384 | text-align: center; | ||
385 | } | ||
386 | |||
387 | .vjs-resolution-button { | 397 | .vjs-resolution-button { |
388 | @include disable-outline; | 398 | @include disable-outline; |
389 | } | 399 | } |
@@ -451,6 +461,35 @@ $slider-bg-color: lighten($primary-background-color, 33%); | |||
451 | } | 461 | } |
452 | } | 462 | } |
453 | 463 | ||
464 | // Play/pause animations | ||
465 | .vjs-has-started .vjs-play-control { | ||
466 | &.vjs-playing { | ||
467 | animation: remove-pause-button 0.25s ease; | ||
468 | } | ||
469 | |||
470 | &.vjs-paused { | ||
471 | animation: add-play-button 0.25s ease; | ||
472 | } | ||
473 | |||
474 | @keyframes remove-pause-button { | ||
475 | 0% { | ||
476 | transform: rotate(90deg); | ||
477 | } | ||
478 | 100% { | ||
479 | transform: rotate(0deg); | ||
480 | } | ||
481 | } | ||
482 | |||
483 | @keyframes add-play-button { | ||
484 | 0% { | ||
485 | transform: rotate(-90deg); | ||
486 | } | ||
487 | 100% { | ||
488 | transform: rotate(0deg); | ||
489 | } | ||
490 | } | ||
491 | } | ||
492 | |||
454 | // Thanks: https://projects.lukehaas.me/css-loaders/ | 493 | // Thanks: https://projects.lukehaas.me/css-loaders/ |
455 | .vjs-loading-spinner { | 494 | .vjs-loading-spinner { |
456 | left: 50%; | 495 | left: 50%; |
@@ -463,11 +502,11 @@ $slider-bg-color: lighten($primary-background-color, 33%); | |||
463 | overflow: hidden; | 502 | overflow: hidden; |
464 | visibility: hidden; | 503 | visibility: hidden; |
465 | 504 | ||
466 | &:before { | 505 | &::before { |
467 | animation: none !important; | 506 | animation: none !important; |
468 | } | 507 | } |
469 | 508 | ||
470 | &:after { | 509 | &::after { |
471 | border-radius: 50%; | 510 | border-radius: 50%; |
472 | width: 6em; | 511 | width: 6em; |
473 | height: 6em; | 512 | height: 6em; |
@@ -520,3 +559,169 @@ $slider-bg-color: lighten($primary-background-color, 33%); | |||
520 | display: block; | 559 | display: block; |
521 | } | 560 | } |
522 | } | 561 | } |
562 | |||
563 | |||
564 | /* Sass for videojs-settings-menu */ | ||
565 | |||
566 | .video-js { | ||
567 | |||
568 | .vjs-settings { | ||
569 | @include disable-outline; | ||
570 | |||
571 | cursor: pointer; | ||
572 | width: 37px; | ||
573 | |||
574 | .vjs-icon-placeholder { | ||
575 | display: inline-block; | ||
576 | width: 17px; | ||
577 | height: 17px; | ||
578 | vertical-align: middle; | ||
579 | background: url('../assets/player/images/settings.svg') no-repeat; | ||
580 | background-size: contain; | ||
581 | |||
582 | &::before { | ||
583 | content: ''; | ||
584 | } | ||
585 | } | ||
586 | } | ||
587 | |||
588 | .vjs-settings-sub-menu-title { | ||
589 | width: 4em; | ||
590 | text-transform: initial; | ||
591 | } | ||
592 | |||
593 | .vjs-settings-dialog { | ||
594 | position: absolute; | ||
595 | right: .5em; | ||
596 | bottom: 3.5em; | ||
597 | color: $primary-foreground-color; | ||
598 | opacity: $primary-foreground-opacity; | ||
599 | margin: 0 auto; | ||
600 | font-size: $font-size !important; | ||
601 | |||
602 | width: auto; | ||
603 | overflow: hidden; | ||
604 | |||
605 | transition: width $setting-transition-duration $setting-transition-easing, height $setting-transition-duration $setting-transition-easing; | ||
606 | |||
607 | .vjs-settings-sub-menu-value, | ||
608 | .vjs-settings-sub-menu-title { | ||
609 | display: table-cell; | ||
610 | padding: 0 5px; | ||
611 | } | ||
612 | |||
613 | .vjs-settings-sub-menu-title { | ||
614 | text-align: left; | ||
615 | font-weight: $font-semibold; | ||
616 | } | ||
617 | |||
618 | .vjs-settings-sub-menu-value { | ||
619 | width: 100%; | ||
620 | text-align: right; | ||
621 | } | ||
622 | |||
623 | .vjs-settings-panel { | ||
624 | position: absolute; | ||
625 | bottom: 0; | ||
626 | right: 0; | ||
627 | overflow-y: auto; | ||
628 | overflow-x: hidden; | ||
629 | border-radius: 1px; | ||
630 | } | ||
631 | |||
632 | .vjs-settings-panel-child { | ||
633 | display: flex; | ||
634 | |||
635 | align-items: flex-end; | ||
636 | white-space: nowrap; | ||
637 | |||
638 | &:focus, | ||
639 | &:active { | ||
640 | outline: none; | ||
641 | } | ||
642 | |||
643 | > .vjs-menu { | ||
644 | flex: 1; | ||
645 | min-width: 200px; | ||
646 | } | ||
647 | |||
648 | > .vjs-menu, | ||
649 | > .vjs-settings-sub-menu { | ||
650 | transition: all $setting-transition-duration $setting-transition-easing; | ||
651 | |||
652 | .vjs-menu-item { | ||
653 | |||
654 | &:first-child { | ||
655 | margin-top: 5px; | ||
656 | } | ||
657 | |||
658 | &:last-child { | ||
659 | margin-bottom: 5px; | ||
660 | } | ||
661 | } | ||
662 | |||
663 | li { | ||
664 | font-size: 1em; | ||
665 | text-transform: initial; | ||
666 | |||
667 | &:hover { | ||
668 | cursor: pointer; | ||
669 | } | ||
670 | } | ||
671 | } | ||
672 | |||
673 | > .vjs-menu { | ||
674 | .vjs-menu-item { | ||
675 | padding: 8px 16px; | ||
676 | } | ||
677 | |||
678 | .vjs-settings-sub-menu-value::after { | ||
679 | @include chevron-right(9px, 2px); | ||
680 | |||
681 | margin-left: 5px; | ||
682 | } | ||
683 | } | ||
684 | |||
685 | > .vjs-settings-sub-menu { | ||
686 | width: 80px; | ||
687 | |||
688 | .vjs-menu-item { | ||
689 | outline: 0; | ||
690 | font-weight: $font-semibold; | ||
691 | |||
692 | padding: 5px 8px; | ||
693 | text-align: right; | ||
694 | |||
695 | &.vjs-back-button { | ||
696 | background-color: inherit; | ||
697 | padding: 8px 8px 13px 8px; | ||
698 | margin-bottom: 5px; | ||
699 | border-bottom: 1px solid grey; | ||
700 | |||
701 | &::before { | ||
702 | @include chevron-left(9px, 2px); | ||
703 | |||
704 | margin-right: 5px; | ||
705 | } | ||
706 | } | ||
707 | |||
708 | &.vjs-selected { | ||
709 | background-color: inherit; | ||
710 | color: inherit; | ||
711 | position: relative; | ||
712 | |||
713 | &::before { | ||
714 | @include icon(15px); | ||
715 | |||
716 | position: absolute; | ||
717 | left: 8px; | ||
718 | content: ' '; | ||
719 | margin-top: 1px; | ||
720 | background-image: url('../assets/player/images/tick.svg'); | ||
721 | } | ||
722 | } | ||
723 | } | ||
724 | } | ||
725 | } | ||
726 | } | ||
727 | } \ No newline at end of file | ||