aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/sass')
-rw-r--r--client/src/sass/application.scss3
-rw-r--r--client/src/sass/player/_player-variables.scss13
-rw-r--r--client/src/sass/player/context-menu.scss33
-rw-r--r--client/src/sass/player/mobile.scss16
-rw-r--r--client/src/sass/player/peertube-skin.scss (renamed from client/src/sass/video-js-custom.scss)299
-rw-r--r--client/src/sass/player/player.scss5
-rw-r--r--client/src/sass/player/settings-menu.scss180
-rw-r--r--client/src/sass/player/spinner.scss54
8 files changed, 310 insertions, 293 deletions
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 850fd1d0b..4006c9128 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -10,7 +10,8 @@ $icon-font-path: '../../node_modules/bootstrap-sass/assets/fonts/bootstrap/';
10@import '~primeng/resources/primeng.css'; 10@import '~primeng/resources/primeng.css';
11@import '~video.js/dist/video-js.css'; 11@import '~video.js/dist/video-js.css';
12 12
13@import './video-js-custom'; 13$assets-path: '../assets/';
14@import './player/player';
14@import './loading-bar'; 15@import './loading-bar';
15 16
16[hidden] { 17[hidden] {
diff --git a/client/src/sass/player/_player-variables.scss b/client/src/sass/player/_player-variables.scss
new file mode 100644
index 000000000..110129790
--- /dev/null
+++ b/client/src/sass/player/_player-variables.scss
@@ -0,0 +1,13 @@
1$primary-foreground-color: #fff;
2$primary-foreground-opacity: 0.9;
3$primary-foreground-opacity-hover: 1;
4$primary-background-color: #000;
5
6$font-size: 13px;
7$control-bar-height: 34px;
8
9$slider-bg-color: lighten($primary-background-color, 33%);
10
11$progress-margin: 10px;
12
13$assets-path: '../../assets/' !default; \ No newline at end of file
diff --git a/client/src/sass/player/context-menu.scss b/client/src/sass/player/context-menu.scss
new file mode 100644
index 000000000..71d6d1b1d
--- /dev/null
+++ b/client/src/sass/player/context-menu.scss
@@ -0,0 +1,33 @@
1@import '_variables';
2@import '_mixins';
3@import './_player-variables';
4
5$context-menu-width: 350px;
6
7/* Sass for videojs-contextmenu-ui */
8
9.video-js .vjs-contextmenu-ui-menu {
10 position: absolute;
11 background-color: rgba(0, 0, 0, 0.5);
12 padding: 5px 0;
13 width: $context-menu-width;
14
15 .vjs-menu-content {
16 opacity: $primary-foreground-opacity;
17 color: $primary-foreground-color;
18 font-size: $font-size !important;
19 font-weight: $font-semibold;
20 }
21
22 .vjs-menu-item {
23 cursor: pointer;
24 font-size: 1em;
25 padding: 8px 16px;
26 text-align: left;
27 text-transform: none;
28
29 &:hover {
30 background-color: rgba(255, 255, 255, 0.2);
31 }
32 }
33} \ No newline at end of file
diff --git a/client/src/sass/player/mobile.scss b/client/src/sass/player/mobile.scss
new file mode 100644
index 000000000..c2fa855ab
--- /dev/null
+++ b/client/src/sass/player/mobile.scss
@@ -0,0 +1,16 @@
1@import '_variables';
2@import '_mixins';
3
4/* Special mobile style */
5
6.video-js.vjs-peertube-skin.vjs-is-mobile {
7 .vjs-control-bar {
8 .vjs-progress-control .vjs-slider .vjs-play-progress {
9 // Always display the circle on mobile
10 &::before {
11 margin-top: -1px;
12 opacity: 1;
13 }
14 }
15 }
16} \ No newline at end of file
diff --git a/client/src/sass/video-js-custom.scss b/client/src/sass/player/peertube-skin.scss
index c69423fe2..de6501962 100644
--- a/client/src/sass/video-js-custom.scss
+++ b/client/src/sass/player/peertube-skin.scss
@@ -1,5 +1,6 @@
1@import '_variables'; 1@import '_variables';
2@import '_mixins'; 2@import '_mixins';
3@import './_player-variables';
3 4
4@mixin big-play-button-triangle-size($triangle-size) { 5@mixin big-play-button-triangle-size($triangle-size) {
5 width: $triangle-size; 6 width: $triangle-size;
@@ -8,23 +9,6 @@
8 left: calc(53% - #{($triangle-size / 2)}); 9 left: calc(53% - #{($triangle-size / 2)});
9} 10}
10 11
11$primary-foreground-color: #fff;
12$primary-foreground-opacity: 0.9;
13$primary-foreground-opacity-hover: 1;
14$primary-background-color: #000;
15
16$font-size: 13px;
17$control-bar-height: 34px;
18
19$slider-bg-color: lighten($primary-background-color, 33%);
20
21$setting-transition-duration: 0.15s;
22$setting-transition-easing: ease-out;
23
24$context-menu-width: 350px;
25
26$progress-margin: 10px;
27
28.video-js.vjs-peertube-skin { 12.video-js.vjs-peertube-skin {
29 font-size: $font-size; 13 font-size: $font-size;
30 color: $primary-foreground-color; 14 color: $primary-foreground-color;
@@ -91,7 +75,7 @@ $progress-margin: 10px;
91 @include big-play-button-triangle-size(45px); 75 @include big-play-button-triangle-size(45px);
92 76
93 content: ''; 77 content: '';
94 background-image: url('../assets/player/images/big-play-button.svg'); 78 background-image: url('#{$assets-path}/player/images/big-play-button.svg');
95 } 79 }
96 80
97 &:hover { 81 &:hover {
@@ -292,11 +276,11 @@ $progress-margin: 10px;
292 top: -1px; 276 top: -1px;
293 277
294 &.icon-download { 278 &.icon-download {
295 background-image: url('../assets/player/images/arrow-down.svg'); 279 background-image: url('#{$assets-path}/player/images/arrow-down.svg');
296 } 280 }
297 281
298 &.icon-upload { 282 &.icon-upload {
299 background-image: url('../assets/player/images/arrow-up.svg'); 283 background-image: url('#{$assets-path}/player/images/arrow-up.svg');
300 } 284 }
301 } 285 }
302 } 286 }
@@ -327,7 +311,7 @@ $progress-margin: 10px;
327 width: 22px; 311 width: 22px;
328 height: 22px; 312 height: 22px;
329 vertical-align: middle; 313 vertical-align: middle;
330 background: url('../assets/player/images/volume.svg') no-repeat; 314 background: url('#{$assets-path}/player/images/volume.svg') no-repeat;
331 background-size: contain; 315 background-size: contain;
332 316
333 &::before { 317 &::before {
@@ -336,7 +320,7 @@ $progress-margin: 10px;
336 } 320 }
337 321
338 &.vjs-vol-0 .vjs-icon-placeholder { 322 &.vjs-vol-0 .vjs-icon-placeholder {
339 background: url('../assets/player/images/volume-mute.svg') no-repeat; 323 background: url('#{$assets-path}/player/images/volume-mute.svg') no-repeat;
340 background-size: contain; 324 background-size: contain;
341 } 325 }
342 } 326 }
@@ -421,7 +405,7 @@ $progress-margin: 10px;
421 width: 22px; 405 width: 22px;
422 height: 22px; 406 height: 22px;
423 vertical-align: middle; 407 vertical-align: middle;
424 background: url('../assets/player/images/fullscreen.svg') no-repeat; 408 background: url('#{$assets-path}/player/images/fullscreen.svg') no-repeat;
425 background-size: contain; 409 background-size: contain;
426 410
427 &::before { 411 &::before {
@@ -558,58 +542,6 @@ $progress-margin: 10px;
558 } 542 }
559} 543}
560 544
561// Thanks: https://projects.lukehaas.me/css-loaders/
562.vjs-loading-spinner {
563 left: 50%;
564 font-size: 10px;
565 text-indent: -9999em;
566 border: 0.7em solid rgba(255, 255, 255, 0.2);
567 border-left-color: #ffffff;
568 transform: translateZ(0);
569 animation: 0.3s ease-out 1.1s forwards vjs-spinner-show, spinner 1.4s infinite linear !important;
570 overflow: hidden;
571 visibility: hidden;
572
573 &::before {
574 animation: none !important;
575 }
576
577 &::after {
578 border-radius: 50%;
579 width: 6em;
580 height: 6em;
581 animation: none !important;
582 }
583
584 @keyframes spinner {
585 0% {
586 transform: rotate(0deg);
587 }
588 100% {
589 transform: rotate(360deg);
590 }
591 }
592
593 @keyframes vjs-spinner-show {
594 0% {
595 display: none;
596 opacity: 0;
597 }
598
599 1% {
600 display: block;
601 visibility: visible;
602 opacity: 0;
603 }
604
605 100% {
606 display: block;
607 visibility: visible;
608 opacity: 1;
609 }
610 }
611}
612
613// Error display disabled 545// Error display disabled
614.vjs-error:not(.vjs-error-display-enabled) { 546.vjs-error:not(.vjs-error-display-enabled) {
615 .vjs-error-display { 547 .vjs-error-display {
@@ -626,221 +558,4 @@ $progress-margin: 10px;
626 .vjs-error-display { 558 .vjs-error-display {
627 display: block; 559 display: block;
628 } 560 }
629}
630
631
632/* Sass for videojs-settings-menu */
633
634.video-js {
635
636 .vjs-settings {
637 @include disable-outline;
638
639 cursor: pointer;
640 width: 37px;
641
642 .vjs-icon-placeholder {
643 display: inline-block;
644 width: 17px;
645 height: 17px;
646 vertical-align: middle;
647 background: url('../assets/player/images/settings.svg') no-repeat;
648 background-size: contain;
649
650 &::before {
651 content: '';
652 }
653 }
654 }
655
656 .vjs-settings-sub-menu-title {
657 width: 4em;
658 text-transform: initial;
659 }
660
661 .vjs-settings-dialog {
662 position: absolute;
663 right: .5em;
664 bottom: 3.5em;
665 color: $primary-foreground-color;
666 opacity: $primary-foreground-opacity;
667 margin: 0 auto;
668 font-size: $font-size !important;
669
670 width: auto;
671 overflow: hidden;
672
673 transition: width $setting-transition-duration $setting-transition-easing, height $setting-transition-duration $setting-transition-easing;
674
675 .vjs-settings-sub-menu-value,
676 .vjs-settings-sub-menu-title {
677 display: table-cell;
678 padding: 0 5px;
679 }
680
681 .vjs-settings-sub-menu-title {
682 text-align: left;
683 font-weight: $font-semibold;
684 }
685
686 .vjs-settings-sub-menu-value {
687 width: 100%;
688 text-align: right;
689
690 small {
691 font-size: 0.85em;
692 opacity: 0.8;
693 }
694 }
695
696 .vjs-settings-panel {
697 position: absolute;
698 bottom: 0;
699 right: 0;
700 overflow-y: auto;
701 overflow-x: hidden;
702 border-radius: 1px;
703 }
704
705 .vjs-settings-panel-child {
706 display: flex;
707
708 align-items: flex-end;
709 white-space: nowrap;
710
711 &:focus,
712 &:active {
713 outline: none;
714 }
715
716 > .vjs-menu {
717 flex: 1;
718 min-width: 200px;
719 }
720
721 > .vjs-menu,
722 > .vjs-settings-sub-menu {
723 transition: all $setting-transition-duration $setting-transition-easing;
724
725 .vjs-menu-item {
726
727 &:hover {
728 background-color: rgba(255, 255, 255, 0.2);
729 }
730
731 &:first-child {
732 margin-top: 5px;
733 }
734
735 &:last-child {
736 margin-bottom: 5px;
737 }
738 }
739
740 li {
741 font-size: 1em;
742 text-transform: initial;
743
744 &:hover {
745 cursor: pointer;
746 }
747 }
748 }
749
750 > .vjs-menu {
751 .vjs-menu-item {
752 padding: 8px 16px;
753 }
754
755 .vjs-settings-sub-menu-value::after {
756 @include chevron-right(9px, 2px);
757
758 margin-left: 5px;
759 }
760 }
761
762 > .vjs-settings-sub-menu {
763 width: 80px;
764
765 .vjs-menu-item {
766 outline: 0;
767 font-weight: $font-semibold;
768
769 padding: 5px 8px;
770 text-align: right;
771
772 &.vjs-back-button {
773 background-color: inherit;
774 padding: 8px 8px 13px 8px;
775 margin-bottom: 5px;
776 border-bottom: 1px solid grey;
777
778 &::before {
779 @include chevron-left(9px, 2px);
780
781 margin-right: 5px;
782 }
783 }
784
785 &.vjs-selected {
786 background-color: inherit;
787 color: inherit;
788 position: relative;
789
790 &::before {
791 @include icon(15px);
792
793 position: absolute;
794 left: 8px;
795 content: ' ';
796 margin-top: 1px;
797 background-image: url('../assets/player/images/tick.svg');
798 }
799 }
800 }
801 }
802 }
803 }
804}
805
806/* Sass for videojs-contextmenu-ui */
807
808.video-js .vjs-contextmenu-ui-menu {
809 position: absolute;
810 background-color: rgba(0, 0, 0, 0.5);
811 padding: 5px 0;
812 width: $context-menu-width;
813
814 .vjs-menu-content {
815 opacity: $primary-foreground-opacity;
816 color: $primary-foreground-color;
817 font-size: $font-size !important;
818 font-weight: $font-semibold;
819 }
820
821 .vjs-menu-item {
822 cursor: pointer;
823 font-size: 1em;
824 padding: 8px 16px;
825 text-align: left;
826 text-transform: none;
827
828 &:hover {
829 background-color: rgba(255, 255, 255, 0.2);
830 }
831 }
832}
833
834/* Special mobile style */
835
836.video-js.vjs-peertube-skin.vjs-is-mobile {
837 .vjs-control-bar {
838 .vjs-progress-control .vjs-slider .vjs-play-progress {
839 // Always display the circle on mobile
840 &::before {
841 margin-top: -1px;
842 opacity: 1;
843 }
844 }
845 }
846} \ No newline at end of file 561} \ No newline at end of file
diff --git a/client/src/sass/player/player.scss b/client/src/sass/player/player.scss
new file mode 100644
index 000000000..e4a315d1f
--- /dev/null
+++ b/client/src/sass/player/player.scss
@@ -0,0 +1,5 @@
1@import './peertube-skin';
2@import './mobile';
3@import './context-menu';
4@import './settings-menu';
5@import './spinner'; \ No newline at end of file
diff --git a/client/src/sass/player/settings-menu.scss b/client/src/sass/player/settings-menu.scss
new file mode 100644
index 000000000..6c213c5d1
--- /dev/null
+++ b/client/src/sass/player/settings-menu.scss
@@ -0,0 +1,180 @@
1@import '_variables';
2@import '_mixins';
3@import './_player-variables';
4
5$setting-transition-duration: 0.15s;
6$setting-transition-easing: ease-out;
7
8/* Sass for videojs-settings-menu */
9
10.video-js {
11
12 .vjs-settings {
13 @include disable-outline;
14
15 cursor: pointer;
16 width: 37px;
17
18 .vjs-icon-placeholder {
19 display: inline-block;
20 width: 17px;
21 height: 17px;
22 vertical-align: middle;
23 background: url('#{$assets-path}/player/images/settings.svg') no-repeat;
24 background-size: contain;
25
26 &::before {
27 content: '';
28 }
29 }
30 }
31
32 .vjs-settings-sub-menu-title {
33 width: 4em;
34 text-transform: initial;
35 }
36
37 .vjs-settings-dialog {
38 position: absolute;
39 right: .5em;
40 bottom: 3.5em;
41 color: $primary-foreground-color;
42 opacity: $primary-foreground-opacity;
43 margin: 0 auto;
44 font-size: $font-size !important;
45
46 width: auto;
47 overflow: hidden;
48
49 transition: width $setting-transition-duration $setting-transition-easing, height $setting-transition-duration $setting-transition-easing;
50
51 .vjs-settings-sub-menu-value,
52 .vjs-settings-sub-menu-title {
53 display: table-cell;
54 padding: 0 5px;
55 }
56
57 .vjs-settings-sub-menu-title {
58 text-align: left;
59 font-weight: $font-semibold;
60 }
61
62 .vjs-settings-sub-menu-value {
63 width: 100%;
64 text-align: right;
65
66 small {
67 font-size: 0.85em;
68 opacity: 0.8;
69 }
70 }
71
72 .vjs-settings-panel {
73 position: absolute;
74 bottom: 0;
75 right: 0;
76 overflow-y: auto;
77 overflow-x: hidden;
78 border-radius: 1px;
79 }
80
81 .vjs-settings-panel-child {
82 display: flex;
83
84 align-items: flex-end;
85 white-space: nowrap;
86
87 &:focus,
88 &:active {
89 outline: none;
90 }
91
92 > .vjs-menu {
93 flex: 1;
94 min-width: 200px;
95 }
96
97 > .vjs-menu,
98 > .vjs-settings-sub-menu {
99 transition: all $setting-transition-duration $setting-transition-easing;
100
101 .vjs-menu-item {
102
103 &:hover {
104 background-color: rgba(255, 255, 255, 0.2);
105 }
106
107 &:first-child {
108 margin-top: 5px;
109 }
110
111 &:last-child {
112 margin-bottom: 5px;
113 }
114 }
115
116 li {
117 font-size: 1em;
118 text-transform: initial;
119
120 &:hover {
121 cursor: pointer;
122 }
123 }
124 }
125
126 > .vjs-menu {
127 .vjs-menu-item {
128 padding: 8px 16px;
129 }
130
131 .vjs-settings-sub-menu-value::after {
132 @include chevron-right(9px, 2px);
133
134 margin-left: 5px;
135 }
136 }
137
138 > .vjs-settings-sub-menu {
139 width: 80px;
140
141 .vjs-menu-item {
142 outline: 0;
143 font-weight: $font-semibold;
144
145 padding: 5px 8px;
146 text-align: right;
147
148 &.vjs-back-button {
149 background-color: inherit;
150 padding: 8px 8px 13px 8px;
151 margin-bottom: 5px;
152 border-bottom: 1px solid grey;
153
154 &::before {
155 @include chevron-left(9px, 2px);
156
157 margin-right: 5px;
158 }
159 }
160
161 &.vjs-selected {
162 background-color: inherit;
163 color: inherit;
164 position: relative;
165
166 &::before {
167 @include icon(15px);
168
169 position: absolute;
170 left: 8px;
171 content: ' ';
172 margin-top: 1px;
173 background-image: url('#{$assets-path}/player/images/tick.svg');
174 }
175 }
176 }
177 }
178 }
179 }
180} \ No newline at end of file
diff --git a/client/src/sass/player/spinner.scss b/client/src/sass/player/spinner.scss
new file mode 100644
index 000000000..a6af8da33
--- /dev/null
+++ b/client/src/sass/player/spinner.scss
@@ -0,0 +1,54 @@
1@import '_variables';
2@import '_mixins';
3
4// Thanks: https://projects.lukehaas.me/css-loaders/
5.vjs-loading-spinner {
6 left: 50%;
7 font-size: 10px;
8 text-indent: -9999em;
9 border: 0.7em solid rgba(255, 255, 255, 0.2);
10 border-left-color: #ffffff;
11 transform: translateZ(0);
12 animation: 0.3s ease-out 1.1s forwards vjs-spinner-show, spinner 1.4s infinite linear !important;
13 overflow: hidden;
14 visibility: hidden;
15
16 &::before {
17 animation: none !important;
18 }
19
20 &::after {
21 border-radius: 50%;
22 width: 6em;
23 height: 6em;
24 animation: none !important;
25 }
26
27 @keyframes spinner {
28 0% {
29 transform: rotate(0deg);
30 }
31 100% {
32 transform: rotate(360deg);
33 }
34 }
35
36 @keyframes vjs-spinner-show {
37 0% {
38 display: none;
39 opacity: 0;
40 }
41
42 1% {
43 display: block;
44 visibility: visible;
45 opacity: 0;
46 }
47
48 100% {
49 display: block;
50 visibility: visible;
51 opacity: 1;
52 }
53 }
54} \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-24 00:43:15 +0000