aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass/video-js-custom.scss
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/sass/video-js-custom.scss')
-rw-r--r--client/src/sass/video-js-custom.scss559
1 files changed, 266 insertions, 293 deletions
diff --git a/client/src/sass/video-js-custom.scss b/client/src/sass/video-js-custom.scss
index 34a958764..1200c07a5 100644
--- a/client/src/sass/video-js-custom.scss
+++ b/client/src/sass/video-js-custom.scss
@@ -1,341 +1,314 @@
1// Thanks: https://github.com/kmoskwiak/videojs-resolution-switcher/pull/92/files 1// Thanks: https://github.com/zanechua/videojs-sublime-inspired-skin
2.vjs-resolution-button-label { 2$primary-foreground-color: #fff;
3 font-size: 1em; 3$primary-background-color: #000;
4 line-height: 3em; 4$font-size: 13px;
5 position: absolute; 5$control-bar-height: 34px;
6 top: 0;
7 left: -1px;
8 width: 100%;
9 height: 100%;
10 text-align: center;
11 box-sizing: inherit;
12}
13
14.vjs-resolution-button {
15 outline: 0 !important;
16 6
17 .vjs-menu { 7.video-js.vjs-peertube-skin {
18 .vjs-menu-content { 8 font-size: $font-size;
19 width: 4em; 9 color: $primary-foreground-color;
20 left: 50%; /* Center the menu, in it's parent */
21 margin-left: -2em; /* half of width, to center */
22 }
23 10
24 li { 11 .vjs-button > .vjs-icon-placeholder::before {
25 text-transform: none; 12 line-height: $control-bar-height;
26 font-size: 1em;
27 }
28 } 13 }
29}
30
31// Thanks: https://github.com/zanechua/videojs-sublime-inspired-skin
32 14
33// Video JS Sublime Skin 15 .vjs-mouse-display:before,
34// The following are SCSS variables to automate some of the values. 16 .vjs-play-progress:before,
35// But don't feel limited by them. Change/replace whatever you want. 17 .vjs-volume-level:before {
18 content: ''; /* Remove Circle From Progress Bar */
19 }
36 20
37// The color of icons, text, and the big play button border. 21 .vjs-audio-button {
38// Try changing to #0f0 22 display: none;
39$primary-foreground-color: #fff; // #fff default 23 }
40 24
41// The default color of control backgrounds is mostly black but with a little 25 .vjs-big-play-button {
42// bit of blue so it can still be seen on all-black video frames, which are common. 26 font-size: 8em;
43// Try changing to #900
44$primary-background-color: #2B333F; // #2B333F default
45 27
46// Try changing to true 28 $big-play-width: 3em;
47$center-big-play-button: true; // true default 29 $big-play-height: 1.5em;
48 30
49.video-js { 31 line-height: $big-play-height;
50 /* The base font size controls the size of everything, not just text. 32 height: $big-play-height;
51 All dimensions use em-based sizes so that the scale along with the font size. 33 width: $big-play-width;
52 Try increasing it to 15px and see what happens. */
53 font-size: 10px;
54 34
55 /* The main font color changes the ICON COLORS as well as the text */ 35 border: 0;
56 color: $primary-foreground-color; 36 border-radius: 0.3em;
57}
58 37
59/* The "Big Play Button" is the play button that shows before the video plays.
60 To center it set the align values to center and middle. The typical location
61 of the button is the center, but there is trend towards moving it to a corner
62 where it gets out of the way of valuable content in the poster image.*/
63.vjs-sublime-skin .vjs-big-play-button {
64 /* The font size is what makes the big play button...big.
65 All width/height values use ems, which are a multiple of the font size.
66 If the .video-js font-size is 10px, then 3em equals 30px.*/
67 font-size: 8em;
68
69 /* We're using SCSS vars here because the values are used in multiple places.
70 Now that font size is set, the following em values will be a multiple of the
71 new font size. If the font-size is 3em (30px), then setting any of
72 the following values to 3em would equal 30px. 3 * font-size. */
73 $big-play-width: 3em;
74 /* 1.5em = 45px default */
75 $big-play-height: 1.5em;
76
77 line-height: $big-play-height;
78 height: $big-play-height;
79 width: $big-play-width;
80
81 /* 0.06666em = 2px default */
82 border: 0;
83 /* 0.3em = 9px default */
84 border-radius: 0.3em;
85
86 @if $center-big-play-button {
87 /* Align center */
88 left: 50%; 38 left: 50%;
89 top: 50%; 39 top: 50%;
90 margin-left: -($big-play-width / 2); 40 margin-left: -($big-play-width / 2);
91 margin-top: -($big-play-height / 2); 41 margin-top: -($big-play-height / 2);
92 } @else {
93 /* Align top left. 0.5em = 15px default */
94 left: 0.5em;
95 top: 0.5em;
96 } 42 }
97}
98
99/* The default color of control backgrounds is mostly black but with a little
100 bit of blue so it can still be seen on all-black video frames, which are common. */
101.video-js .vjs-control-bar,
102.video-js .vjs-big-play-button,
103.video-js .vjs-menu-button .vjs-menu-content {
104 /* IE8 - has no alpha support */
105 background-color: $primary-background-color;
106 /* Opacity: 1.0 = 100%, 0.0 = 0% */
107 background-color: rgba($primary-background-color, 0.7);
108 background-color: transparent;
109}
110
111// Make a slightly lighter version of the main background
112// for the slider background.
113$slider-bg-color: lighten($primary-background-color, 33%);
114
115/* Slider - used for Volume bar and Progress bar */
116.video-js .vjs-slider {
117 background-color: $slider-bg-color;
118 background-color: rgba($slider-bg-color, 0.5);
119 background-color: rgba(255,255,255,.3);
120 border-radius: 2px;
121 height: 6.5px;
122}
123
124/* The slider bar color is used for the progress bar and the volume bar
125 (the first two can be removed after a fix that's coming) */
126.video-js .vjs-volume-level,
127.video-js .vjs-play-progress,
128.video-js .vjs-slider-bar {
129 background: $primary-foreground-color;
130}
131
132/* Enlarged Slider to enable easier tracking. Adjust all the height:6.5px to preferred height for the slider if necessary. */
133.video-js .vjs-progress-holder .vjs-load-progress,
134.video-js .vjs-progress-holder .vjs-load-progress div,
135.video-js .vjs-progress-holder .vjs-play-progress,
136.video-js .vjs-progress-holder .vjs-tooltip-progress-bar {
137 height: 6.5px;
138}
139
140/* The main progress bar also has a bar that shows how much has been loaded. */
141.video-js .vjs-load-progress {
142 /* For IE8 we'll lighten the color */
143 background: ligthen($slider-bg-color, 25%);
144 /* Otherwise we'll rely on stacked opacities */
145 background: rgba($slider-bg-color, 0.5);
146}
147
148/* The load progress bar also has internal divs that represent
149 smaller disconnected loaded time ranges */
150.video-js .vjs-load-progress div {
151 /* For IE8 we'll lighten the color */
152 background: ligthen($slider-bg-color, 50%);
153 /* Otherwise we'll rely on stacked opacities */
154 background: rgba($slider-bg-color, 0.75);
155}
156
157//Skin Style Starts
158.vjs-sublime-skin .vjs-poster {
159 outline: none; /* Remove Blue Outline on Click*/
160 outline: 0;
161}
162 43
163.vjs-sublime-skin:hover .vjs-big-play-button { 44 &:hover .vjs-big-play-button {
164 background-color: transparent; 45 background-color: transparent;
165} 46 }
166
167.vjs-sublime-skin .vjs-fullscreen-control:before,
168.vjs-sublime-skin.vjs-fullscreen .vjs-fullscreen-control:before {
169 content: ''; /* Remove Fullscreen Exit Icon */
170}
171
172.vjs-sublime-skin.vjs-fullscreen .vjs-fullscreen-control {
173 background: #fff;
174}
175
176.vjs-sublime-skin .vjs-fullscreen-control {
177 border: 3px solid #fff;
178 box-sizing: border-box;
179 cursor: pointer;
180 margin-top: -7px;
181 top: 50%;
182 height: 14px;
183 width: 22px;
184 margin-right: 10px;
185}
186 47
187.vjs-sublime-skin.vjs-fullscreen .vjs-fullscreen-control:after { 48 .vjs-control-bar,
188 background: #000; 49 .vjs-big-play-button,
189 content: ""; 50 .vjs-menu-button .vjs-menu-content {
190 display: block; 51 background-color: rgba($primary-background-color, 0.5);
191 position: absolute; 52 }
192 bottom: 0;
193 left: 0;
194 height: 5px;
195 width: 5px;
196}
197 53
198.vjs-sublime-skin .vjs-progress-holder { 54 $slider-bg-color: lighten($primary-background-color, 33%);
199 margin: 0;
200}
201 55
202.vjs-sublime-skin .vjs-progress-control .vjs-progress-holder:after { 56 .vjs-slider {
57 background-color: rgba(255, 255, 255, .3);
203 border-radius: 2px; 58 border-radius: 2px;
204 display: block; 59 height: 5px;
205 height: 6.5px; 60 }
206}
207
208.vjs-sublime-skin .vjs-progress-control .vjs-load-progres,
209.vjs-sublime-skin .vjs-progress-control .vjs-play-progress {
210 border-radius: 2px;
211 height: 6.5px;
212}
213 61
214.vjs-sublime-skin .vjs-playback-rate { 62 /* The slider bar color is used for the progress bar and the volume bar
215 display: none; /* Remove Playback Rate */ 63 (the first two can be removed after a fix that's coming) */
216} 64 .vjs-volume-level,
65 .vjs-play-progress,
66 .vjs-slider-bar {
67 background: $primary-foreground-color;
68 }
217 69
218.vjs-sublime-skin .vjs-progress-control { 70 .vjs-load-progress {
219 margin-right: 50px; 71 background: rgba($slider-bg-color, 0.5);
220} 72 }
221 73
222.vjs-sublime-skin .vjs-time-control { 74 .vjs-load-progress div {
223 right: 55px; 75 background: rgba($slider-bg-color, 0.75);
224} 76 }
225 77
226.vjs-sublime-skin .vjs-volume-menu-button:before { 78 .vjs-poster {
227 width: 1.2em; 79 outline: none; /* Remove Blue Outline on Click*/
228 z-index: 1; 80 outline: 0;
229} 81 }
230 82
231.vjs-sublime-skin .vjs-volume-menu-button .vjs-menu, 83 .vjs-control-bar {
232.vjs-sublime-skin .vjs-volume-menu-button:focus .vjs-menu, 84 height: $control-bar-height;
233.vjs-sublime-skin .vjs-volume-menu-button.vjs-slider-active .vjs-menu {
234 display: block;
235 opacity: 1;
236}
237 85
238.vjs-sublime-skin .vjs-volume-menu-button, 86 .vjs-progress-control {
239.vjs-sublime-skin .vjs-volume-panel { 87 bottom: 34px;
240 width: 6em; 88 width: 100%;
241 position: absolute; 89 position: absolute;
242 right: 0; 90 height: 5px;
243 margin-right: 65px;
244}
245 91
246.vjs-sublime-skin .vjs-volume-menu-button .vjs-menu-content, 92 .vjs-progress-holder {
247.vjs-sublime-skin .vjs-volume-menu-button:hover, 93 margin: 0;
248.vjs-sublime-skin .vjs-volume-menu-button:focus, 94 border-radius: 0;
249.vjs-sublime-skin .vjs-volume-menu-button.vjs-slider-active, 95 }
250.vjs-sublime-skin .vjs-volume-panel .vjs-volume-control, 96 }
251.vjs-sublime-skin .vjs-volume-panel:hover,
252.vjs-sublime-skin .vjs-volume-panel:focus,
253.vjs-sublime-skin .vjs-volume-panel.vjs-slider-active {
254 width: 6em;
255}
256 97
257.vjs-sublime-skin .vjs-volume-menu-button .vjs-menu { 98 .vjs-play-control {
258 left: 23px; 99 font-size: $font-size;
259} 100 padding: 0 17px;
101 margin-right: 5px;
102 }
260 103
261.vjs-sublime-skin .vjs-mouse-display:before, 104 .vjs-time-control {
262.vjs-sublime-skin .vjs-play-progress:before, 105 &.vjs-current-time {
263.vjs-sublime-skin .vjs-volume-level:before { 106 font-size: $font-size;
264 content: ''; /* Remove Circle From Progress Bar */ 107 display: inline-block;
265} 108 padding: 0;
109
110 .vjs-current-time-display {
111 line-height: $control-bar-height;
112
113 &::after {
114 content: "/";
115 margin: 0 1px 0 2px;
116 }
117 }
118 }
119
120 &.vjs-duration {
121 font-size: $font-size;
122 display: inline-block;
123 padding: 0;
124
125 .vjs-duration-display {
126 line-height: $control-bar-height;
127 }
128 }
129
130 &.vjs-remaining-time {
131 display: none;
132 }
133 }
266 134
267.vjs-sublime-skin .vjs-mouse-display:after, 135 .vjs-webtorrent {
268.vjs-sublime-skin .vjs-play-progress:after, 136 width: 100%;
269.vjs-sublime-skin .vjs-time-tooltip { 137 line-height: $control-bar-height;
270 width: 5.5em; 138 text-align: right;
271} 139 padding-right: 60px;
140
141 .download-speed-number, .upload-speed-number, .peers-number {
142 font-weight: $font-semibold;
143 }
144
145 .download-speed-text, .upload-speed-text, .peers-text {
146 margin-right: 15px;
147 }
148
149 .icon {
150 display: inline-block;
151 width: 15px;
152 height: 15px;
153 background-size: contain;
154 vertical-align: middle;
155 background-repeat: no-repeat;
156 margin-right: 6px;
157 position: relative;
158 top: -1px;
159
160 &.icon-download {
161 background-image: url('../assets/player/images/arrow-down.svg');
162 }
163
164 &.icon-upload {
165 background-image: url('../assets/player/images/arrow-up.svg');
166 }
167 }
168 }
272 169
273.vjs-sublime-skin .vjs-audio-button { 170 .vjs-mute-control {
274 display: none; 171 .vjs-icon-placeholder {
275} 172 display: inline-block;
173 width: 22px;
174 height: 22px;
175 vertical-align: middle;
176 background: url('../assets/player/images/volume.svg') no-repeat;
177 background-size: contain;
178
179 &::before {
180 content: '';
181 }
182 }
183
184 &.vjs-vol-0 .vjs-icon-placeholder {
185 background: url('../assets/player/images/volume-mute.svg') no-repeat;
186 background-size: contain;
187 }
188 }
276 189
277.vjs-sublime-skin .vjs-volume-bar { 190 .vjs-volume-menu-button,
278 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcCAQAAACw95UnAAAAMElEQVRIx2NgoBL4n4YKGUYNHkEG4zJg1OCRYDCpBowaPJwMppbLRg0eNXjUYBLEAXWNUA6QNm1lAAAAAElFTkSuQmCC); 191 .vjs-volume-panel {
279 background-size: 22px 14px; 192 width: 6em;
280 background-repeat: no-repeat; 193 position: absolute;
281 height: 100%; 194 right: 0;
282 width: 100%; 195 margin-right: 65px;
283 max-width: 22px; 196 }
284 max-height: 14px;
285 margin: 7px 4px;
286 border-radius: 0;
287}
288 197
289.vjs-sublime-skin .vjs-volume-level { 198 .vjs-volume-bar {
290 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcAQAAAAAyhWABAAAAAnRSTlMAAHaTzTgAAAAZSURBVHgBYwAB/g9EUv+JokCqiaT+U4MCAPKPS7WUUOc1AAAAAElFTkSuQmCC); 199 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcCAQAAACw95UnAAAAMElEQVRIx2NgoBL4n4YKGUYNHkEG4zJg1OCRYDCpBowaPJwMppbLRg0eNXjUYBLEAXWNUA6QNm1lAAAAAElFTkSuQmCC) no-repeat;
291 background-size: 22px 14px; 200 background-size: 22px 14px;
292 background-repeat: no-repeat; 201 height: 100%;
293 max-width: 22px; 202 width: 100%;
294 max-height: 14px; 203 max-width: 22px;
295 height: 100%; 204 max-height: 14px;
296} 205 margin: 7px 4px;
206 border-radius: 0;
207 top: 3px;
208
209 .vjs-volume-level {
210 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcAQAAAAAyhWABAAAAAnRSTlMAAHaTzTgAAAAZSURBVHgBYwAB/g9EUv+JokCqiaT+U4MCAPKPS7WUUOc1AAAAAElFTkSuQmCC) no-repeat;
211 background-size: 22px 14px;
212 max-width: 22px;
213 max-height: 14px;
214 height: 100%;
215 }
216 }
297 217
298/* New for VideoJS v6 */ 218 .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,
299.vjs-sublime-skin .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active, 219 .vjs-volume-panel.vjs-volume-panel-horizontal:active,
300.vjs-sublime-skin .vjs-volume-panel.vjs-volume-panel-horizontal:active, 220 .vjs-volume-panel.vjs-volume-panel-horizontal:focus,
301.vjs-sublime-skin .vjs-volume-panel.vjs-volume-panel-horizontal:focus, 221 .vjs-volume-panel.vjs-volume-panel-horizontal:hover {
302.vjs-sublime-skin .vjs-volume-panel.vjs-volume-panel-horizontal:hover { 222 width: 6em;
303 width: 6em; 223 transition-property: none;
304 transition-property: none; 224 }
305}
306 225
307.vjs-sublime-skin .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-horizontal { 226 .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-horizontal {
308 width: 3em; 227 width: 3em;
309 height: auto; 228 height: auto;
310} 229 }
311 230
312.vjs-sublime-skin .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control { 231 .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control {
313 transition-property: none; 232 transition-property: none;
314} 233 }
315 234
316.vjs-sublime-skin .vjs-fullscreen-control .vjs-icon-placeholder { 235 .vjs-volume-panel {
317 display: none; /* Remove Duplicate Fullscreen Icon */ 236 .vjs-mute-control {
318} 237 width: 2em;
238 z-index: 1;
239 padding: 0;
240 }
241
242 .vjs-volume-control {
243 display: inline-block;
244 position: relative;
245 left: 5px;
246 opacity: 1;
247 width: 3em;
248 height: auto;
249 }
250 }
319 251
320.vjs-sublime-skin .vjs-volume-panel .vjs-mute-control { 252 .vjs-fullscreen-control {
321 width: 2em; 253 width: 37px;
322 z-index: 1; 254
323 padding: 0; 255 .vjs-icon-placeholder {
324} 256 display: inline-block;
257 width: 22px;
258 height: 22px;
259 vertical-align: middle;
260 background: url('../assets/player/images/fullscreen.svg') no-repeat;
261 background-size: contain;
262
263 &::before {
264 content: '';
265 }
266 }
267 }
325 268
326.vjs-sublime-skin .vjs-volume-panel .vjs-volume-control { 269 .vjs-menu-button-popup {
327 display: inline-block; 270 font-size: 13px;
328 position: relative; 271 font-weight: $font-semibold;
329 left: 5px; 272 width: 42px;
330 opacity: 1; 273
331 width: 3em; 274 // Thanks: https://github.com/kmoskwiak/videojs-resolution-switcher/pull/92/files
332 height: auto; 275 .vjs-resolution-button-label {
276 line-height: $control-bar-height;
277 position: absolute;
278 top: 0;
279 left: -1px;
280 width: 100%;
281 height: 100%;
282 text-align: center;
283 box-sizing: inherit;
284 }
285
286 .vjs-resolution-button {
287 outline: 0 !important;
288 }
289
290 .vjs-menu {
291 top: 20px;
292
293 .vjs-menu-content {
294 width: 4em;
295 left: 50%; /* Center the menu, in it's parent */
296 margin-left: -2em; /* half of width, to center */
297 }
298
299 li {
300 text-transform: none;
301 font-size: 13px;
302 }
303 }
304 }
305 }
333} 306}
334 307
335// Thanks: https://projects.lukehaas.me/css-loaders/ 308// Thanks: https://projects.lukehaas.me/css-loaders/
336.vjs-loading-spinner { 309.vjs-loading-spinner {
337 margin: 0 !important; 310 margin: 0 !important;
338 position: absolute; 311 //position: absolute;
339 // 15px is the nav bar height 312 // 15px is the nav bar height
340 top: calc(50% - 15px); 313 top: calc(50% - 15px);
341 left: 50%; 314 left: 50%;
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-14 07:17:04 +0000