diff options
Diffstat (limited to 'client/src/app/+videos/+video-watch/video-watch.component.scss')
-rw-r--r-- | client/src/app/+videos/+video-watch/video-watch.component.scss | 607 |
1 files changed, 607 insertions, 0 deletions
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.scss b/client/src/app/+videos/+video-watch/video-watch.component.scss new file mode 100644 index 000000000..2e083982e --- /dev/null +++ b/client/src/app/+videos/+video-watch/video-watch.component.scss | |||
@@ -0,0 +1,607 @@ | |||
1 | @import '_variables'; | ||
2 | @import '_mixins'; | ||
3 | @import '_bootstrap-variables'; | ||
4 | @import '_miniature'; | ||
5 | |||
6 | $player-factor: 1.7; // 16/9 | ||
7 | $video-info-margin-left: 44px; | ||
8 | |||
9 | @function getPlayerHeight($width){ | ||
10 | @return calc(#{$width} / #{$player-factor}) | ||
11 | } | ||
12 | |||
13 | @function getPlayerWidth($height){ | ||
14 | @return calc(#{$height} * #{$player-factor}) | ||
15 | } | ||
16 | |||
17 | @mixin playlist-below-player { | ||
18 | width: 100% !important; | ||
19 | height: auto !important; | ||
20 | max-height: 300px !important; | ||
21 | max-width: initial; | ||
22 | border-bottom: 1px solid $separator-border-color !important; | ||
23 | } | ||
24 | |||
25 | .root { | ||
26 | &.theater-enabled #video-wrapper { | ||
27 | flex-direction: column; | ||
28 | justify-content: center; | ||
29 | |||
30 | #videojs-wrapper { | ||
31 | width: 100%; | ||
32 | } | ||
33 | |||
34 | ::ng-deep .video-js { | ||
35 | $height: calc(100vh - #{$header-height} - #{$theater-bottom-space}); | ||
36 | |||
37 | height: $height; | ||
38 | width: 100%; | ||
39 | max-width: initial; | ||
40 | } | ||
41 | |||
42 | my-video-watch-playlist ::ng-deep .playlist { | ||
43 | @include playlist-below-player; | ||
44 | } | ||
45 | } | ||
46 | } | ||
47 | |||
48 | .blocked-label { | ||
49 | font-weight: $font-semibold; | ||
50 | } | ||
51 | |||
52 | #video-wrapper { | ||
53 | background-color: #000; | ||
54 | display: flex; | ||
55 | justify-content: center; | ||
56 | |||
57 | #videojs-wrapper { | ||
58 | display: flex; | ||
59 | justify-content: center; | ||
60 | flex-grow: 1; | ||
61 | } | ||
62 | |||
63 | .remote-server-down { | ||
64 | color: #fff; | ||
65 | display: flex; | ||
66 | flex-direction: column; | ||
67 | align-items: center; | ||
68 | text-align: center; | ||
69 | justify-content: center; | ||
70 | background-color: #141313; | ||
71 | width: 100%; | ||
72 | font-size: 24px; | ||
73 | height: 500px; | ||
74 | |||
75 | @media screen and (max-width: 1000px) { | ||
76 | font-size: 20px; | ||
77 | } | ||
78 | |||
79 | @media screen and (max-width: 600px) { | ||
80 | font-size: 16px; | ||
81 | } | ||
82 | } | ||
83 | |||
84 | ::ng-deep .video-js { | ||
85 | width: 100%; | ||
86 | max-width: getPlayerWidth(66vh); | ||
87 | height: 66vh; | ||
88 | |||
89 | // VideoJS create an inner video player | ||
90 | video { | ||
91 | outline: 0; | ||
92 | position: relative !important; | ||
93 | } | ||
94 | } | ||
95 | |||
96 | @media screen and (max-width: 600px) { | ||
97 | .remote-server-down, | ||
98 | ::ng-deep .video-js { | ||
99 | width: 100vw; | ||
100 | height: getPlayerHeight(100vw) | ||
101 | } | ||
102 | } | ||
103 | } | ||
104 | |||
105 | .alert { | ||
106 | text-align: center; | ||
107 | border-radius: 0; | ||
108 | } | ||
109 | |||
110 | .flex-direction-column { | ||
111 | flex-direction: column; | ||
112 | } | ||
113 | |||
114 | #video-not-found { | ||
115 | height: 300px; | ||
116 | line-height: 300px; | ||
117 | margin-top: 50px; | ||
118 | text-align: center; | ||
119 | font-weight: $font-semibold; | ||
120 | font-size: 15px; | ||
121 | } | ||
122 | |||
123 | .video-bottom { | ||
124 | display: flex; | ||
125 | margin-top: 1.5rem; | ||
126 | |||
127 | .video-info { | ||
128 | flex-grow: 1; | ||
129 | // Set min width for flex item | ||
130 | min-width: 1px; | ||
131 | max-width: 100%; | ||
132 | |||
133 | .video-info-first-row { | ||
134 | display: flex; | ||
135 | |||
136 | & > div:first-child { | ||
137 | flex-grow: 1; | ||
138 | } | ||
139 | |||
140 | .video-info-name { | ||
141 | margin-right: 30px; | ||
142 | min-height: 40px; // Align with the action buttons | ||
143 | font-size: 27px; | ||
144 | font-weight: $font-semibold; | ||
145 | flex-grow: 1; | ||
146 | } | ||
147 | |||
148 | .video-info-first-row-bottom { | ||
149 | display: flex; | ||
150 | flex-wrap: wrap; | ||
151 | align-items: center; | ||
152 | width: 100%; | ||
153 | } | ||
154 | |||
155 | .video-info-date-views { | ||
156 | align-self: start; | ||
157 | margin-bottom: 10px; | ||
158 | margin-right: 10px; | ||
159 | font-size: 1em; | ||
160 | } | ||
161 | |||
162 | .video-info-channel { | ||
163 | font-weight: $font-semibold; | ||
164 | font-size: 15px; | ||
165 | |||
166 | a { | ||
167 | @include disable-default-a-behaviour; | ||
168 | |||
169 | color: pvar(--mainForegroundColor); | ||
170 | |||
171 | &:hover { | ||
172 | opacity: 0.8; | ||
173 | } | ||
174 | |||
175 | img { | ||
176 | @include avatar(18px); | ||
177 | |||
178 | margin: -2px 5px 0 0; | ||
179 | } | ||
180 | } | ||
181 | |||
182 | .video-info-channel-left { | ||
183 | flex-grow: 1; | ||
184 | |||
185 | .video-info-channel-left-links { | ||
186 | display: flex; | ||
187 | flex-direction: column; | ||
188 | position: relative; | ||
189 | line-height: 1.37; | ||
190 | |||
191 | a:nth-of-type(2) { | ||
192 | font-weight: 500; | ||
193 | font-size: 90%; | ||
194 | } | ||
195 | } | ||
196 | } | ||
197 | |||
198 | my-subscribe-button { | ||
199 | margin-left: 5px; | ||
200 | } | ||
201 | } | ||
202 | |||
203 | my-feed { | ||
204 | margin-left: 5px; | ||
205 | margin-top: 1px; | ||
206 | } | ||
207 | |||
208 | .video-actions-rates { | ||
209 | margin: 0 0 10px 0; | ||
210 | align-items: start; | ||
211 | width: max-content; | ||
212 | margin-left: auto; | ||
213 | |||
214 | .video-actions { | ||
215 | height: 40px; // Align with the title | ||
216 | display: flex; | ||
217 | align-items: center; | ||
218 | |||
219 | .action-button:not(:first-child), | ||
220 | .action-dropdown, | ||
221 | my-video-actions-dropdown { | ||
222 | margin-left: 5px; | ||
223 | } | ||
224 | |||
225 | ::ng-deep.action-button { | ||
226 | @include peertube-button; | ||
227 | @include button-with-icon(21px, 0, -1px); | ||
228 | @include apply-svg-color(pvar(--actionButtonColor)); | ||
229 | |||
230 | font-size: 100%; | ||
231 | font-weight: $font-semibold; | ||
232 | display: inline-block; | ||
233 | padding: 0 10px 0 10px; | ||
234 | white-space: nowrap; | ||
235 | background-color: transparent !important; | ||
236 | color: pvar(--actionButtonColor); | ||
237 | text-transform: uppercase; | ||
238 | |||
239 | &::after { | ||
240 | display: none; | ||
241 | } | ||
242 | |||
243 | &:hover { | ||
244 | opacity: 0.9; | ||
245 | } | ||
246 | |||
247 | &.action-button-like, | ||
248 | &.action-button-dislike { | ||
249 | filter: brightness(120%); | ||
250 | |||
251 | .count { | ||
252 | margin-right: 5px; | ||
253 | } | ||
254 | } | ||
255 | |||
256 | &.action-button-like.activated { | ||
257 | .count { | ||
258 | color: pvar(--activatedActionButtonColor); | ||
259 | } | ||
260 | |||
261 | my-global-icon { | ||
262 | @include apply-svg-color(pvar(--activatedActionButtonColor)); | ||
263 | } | ||
264 | } | ||
265 | |||
266 | &.action-button-dislike.activated { | ||
267 | .count { | ||
268 | color: pvar(--activatedActionButtonColor); | ||
269 | } | ||
270 | |||
271 | my-global-icon { | ||
272 | @include apply-svg-color(pvar(--activatedActionButtonColor)); | ||
273 | } | ||
274 | } | ||
275 | |||
276 | &.action-button-support { | ||
277 | color: pvar(--supportButtonColor); | ||
278 | |||
279 | my-global-icon { | ||
280 | @include apply-svg-color(pvar(--supportButtonColor)); | ||
281 | } | ||
282 | } | ||
283 | |||
284 | &.action-button-support { | ||
285 | my-global-icon { | ||
286 | ::ng-deep path:first-child { | ||
287 | fill: pvar(--supportButtonHeartColor) !important; | ||
288 | } | ||
289 | } | ||
290 | } | ||
291 | |||
292 | &.action-button-save { | ||
293 | my-global-icon { | ||
294 | top: 0 !important; | ||
295 | right: -1px; | ||
296 | } | ||
297 | } | ||
298 | |||
299 | .icon-text { | ||
300 | margin-left: 3px; | ||
301 | } | ||
302 | } | ||
303 | } | ||
304 | |||
305 | .video-info-likes-dislikes-bar-outer-container { | ||
306 | position: relative; | ||
307 | } | ||
308 | |||
309 | .video-info-likes-dislikes-bar-inner-container { | ||
310 | position: absolute; | ||
311 | height: 20px; | ||
312 | } | ||
313 | |||
314 | .video-info-likes-dislikes-bar { | ||
315 | $likes-bar-height: 2px; | ||
316 | height: $likes-bar-height; | ||
317 | margin-top: -$likes-bar-height; | ||
318 | width: 120px; | ||
319 | background-color: #ccc; | ||
320 | position: relative; | ||
321 | top: 10px; | ||
322 | |||
323 | .likes-bar { | ||
324 | height: 100%; | ||
325 | background-color: #909090; | ||
326 | |||
327 | &.liked { | ||
328 | background-color: pvar(--activatedActionButtonColor); | ||
329 | } | ||
330 | } | ||
331 | } | ||
332 | } | ||
333 | } | ||
334 | |||
335 | .video-info-description { | ||
336 | margin: 20px 0; | ||
337 | margin-left: $video-info-margin-left; | ||
338 | font-size: 15px; | ||
339 | |||
340 | .video-info-description-html { | ||
341 | @include peertube-word-wrap; | ||
342 | |||
343 | /deep/ a { | ||
344 | text-decoration: none; | ||
345 | } | ||
346 | } | ||
347 | |||
348 | .glyphicon, .description-loading { | ||
349 | margin-left: 3px; | ||
350 | } | ||
351 | |||
352 | .description-loading { | ||
353 | display: inline-block; | ||
354 | } | ||
355 | |||
356 | .video-info-description-more { | ||
357 | cursor: pointer; | ||
358 | font-weight: $font-semibold; | ||
359 | color: pvar(--greyForegroundColor); | ||
360 | font-size: 14px; | ||
361 | |||
362 | .glyphicon { | ||
363 | position: relative; | ||
364 | top: 2px; | ||
365 | } | ||
366 | } | ||
367 | } | ||
368 | |||
369 | .video-attributes { | ||
370 | margin-left: $video-info-margin-left; | ||
371 | } | ||
372 | |||
373 | .video-attributes .video-attribute { | ||
374 | font-size: 13px; | ||
375 | display: block; | ||
376 | margin-bottom: 12px; | ||
377 | |||
378 | .video-attribute-label { | ||
379 | min-width: 142px; | ||
380 | padding-right: 5px; | ||
381 | display: inline-block; | ||
382 | color: pvar(--greyForegroundColor); | ||
383 | font-weight: $font-bold; | ||
384 | } | ||
385 | |||
386 | a.video-attribute-value { | ||
387 | @include disable-default-a-behaviour; | ||
388 | color: pvar(--mainForegroundColor); | ||
389 | |||
390 | &:hover { | ||
391 | opacity: 0.9; | ||
392 | } | ||
393 | } | ||
394 | |||
395 | &.video-attribute-tags { | ||
396 | .video-attribute-value:not(:nth-child(2)) { | ||
397 | &::before { | ||
398 | content: ', ' | ||
399 | } | ||
400 | } | ||
401 | } | ||
402 | } | ||
403 | } | ||
404 | |||
405 | ::ng-deep .other-videos { | ||
406 | padding-left: 15px; | ||
407 | min-width: $video-miniature-width; | ||
408 | |||
409 | @media screen and (min-width: 1800px - (3* $video-miniature-width)) { | ||
410 | width: min-content; | ||
411 | } | ||
412 | |||
413 | .title-page { | ||
414 | margin: 0 !important; | ||
415 | } | ||
416 | |||
417 | .video-miniature { | ||
418 | display: flex; | ||
419 | width: max-content; | ||
420 | height: 100%; | ||
421 | padding-bottom: 20px; | ||
422 | flex-wrap: wrap; | ||
423 | } | ||
424 | |||
425 | .video-bottom { | ||
426 | @media screen and (max-width: 1800px - (3* $video-miniature-width)) { | ||
427 | margin-left: 1rem; | ||
428 | } | ||
429 | @media screen and (max-width: 500px) { | ||
430 | margin-left: 0; | ||
431 | margin-top: .5rem; | ||
432 | } | ||
433 | } | ||
434 | } | ||
435 | } | ||
436 | |||
437 | my-video-comments { | ||
438 | display: inline-block; | ||
439 | width: 100%; | ||
440 | margin-bottom: 20px; | ||
441 | } | ||
442 | |||
443 | // If the view is not expanded, take into account the menu | ||
444 | .privacy-concerns { | ||
445 | z-index: z(dropdown) + 1; | ||
446 | width: calc(100% - #{$menu-width}); | ||
447 | } | ||
448 | |||
449 | @media screen and (max-width: $small-view) { | ||
450 | .privacy-concerns { | ||
451 | margin-left: $menu-width - 15px; // Menu is absolute | ||
452 | } | ||
453 | } | ||
454 | |||
455 | :host-context(.expanded) { | ||
456 | .privacy-concerns { | ||
457 | width: 100%; | ||
458 | margin-left: -15px; | ||
459 | } | ||
460 | } | ||
461 | |||
462 | .privacy-concerns { | ||
463 | position: fixed; | ||
464 | bottom: 0; | ||
465 | z-index: z(privacymsg); | ||
466 | |||
467 | padding: 5px 15px; | ||
468 | |||
469 | display: flex; | ||
470 | flex-wrap: nowrap; | ||
471 | align-items: center; | ||
472 | justify-content: space-between; | ||
473 | background-color: rgba(0, 0, 0, 0.9); | ||
474 | color: #fff; | ||
475 | |||
476 | .privacy-concerns-text { | ||
477 | margin: 0 5px; | ||
478 | } | ||
479 | |||
480 | a { | ||
481 | @include disable-default-a-behaviour; | ||
482 | |||
483 | color: pvar(--mainColor); | ||
484 | transition: color 0.3s; | ||
485 | |||
486 | &:hover { | ||
487 | color: #fff; | ||
488 | } | ||
489 | } | ||
490 | |||
491 | .privacy-concerns-button { | ||
492 | padding: 5px 8px 5px 7px; | ||
493 | margin-left: auto; | ||
494 | border-radius: 3px; | ||
495 | white-space: nowrap; | ||
496 | cursor: pointer; | ||
497 | transition: background-color 0.3s; | ||
498 | font-weight: $font-semibold; | ||
499 | |||
500 | &:hover { | ||
501 | background-color: #000; | ||
502 | } | ||
503 | } | ||
504 | |||
505 | .privacy-concerns-okay { | ||
506 | background-color: pvar(--mainColor); | ||
507 | margin-left: 10px; | ||
508 | } | ||
509 | } | ||
510 | |||
511 | @media screen and (max-width: 1600px) { | ||
512 | .video-bottom .video-info .video-attributes .video-attribute { | ||
513 | margin-bottom: 5px; | ||
514 | } | ||
515 | } | ||
516 | |||
517 | @media screen and (max-width: 1300px) { | ||
518 | .privacy-concerns { | ||
519 | font-size: 12px; | ||
520 | padding: 2px 5px; | ||
521 | |||
522 | .privacy-concerns-text { | ||
523 | margin: 0; | ||
524 | } | ||
525 | } | ||
526 | } | ||
527 | |||
528 | @media screen and (max-width: 1100px) { | ||
529 | #video-wrapper { | ||
530 | flex-direction: column; | ||
531 | justify-content: center; | ||
532 | |||
533 | my-video-watch-playlist ::ng-deep .playlist { | ||
534 | @include playlist-below-player; | ||
535 | } | ||
536 | } | ||
537 | |||
538 | .video-bottom { | ||
539 | flex-direction: column; | ||
540 | |||
541 | ::ng-deep .other-videos { | ||
542 | padding-left: 0 !important; | ||
543 | |||
544 | ::ng-deep .video-miniature { | ||
545 | flex-direction: row; | ||
546 | width: auto; | ||
547 | } | ||
548 | } | ||
549 | } | ||
550 | } | ||
551 | |||
552 | @media screen and (max-width: 600px) { | ||
553 | .video-bottom { | ||
554 | margin-top: 20px !important; | ||
555 | padding-bottom: 20px !important; | ||
556 | |||
557 | .video-info { | ||
558 | padding: 0; | ||
559 | |||
560 | .video-info-first-row { | ||
561 | |||
562 | .video-info-name { | ||
563 | font-size: 20px; | ||
564 | height: auto; | ||
565 | } | ||
566 | } | ||
567 | } | ||
568 | } | ||
569 | |||
570 | ::ng-deep .other-videos .video-miniature { | ||
571 | flex-direction: column; | ||
572 | } | ||
573 | |||
574 | .privacy-concerns { | ||
575 | width: 100%; | ||
576 | |||
577 | strong { | ||
578 | display: none; | ||
579 | } | ||
580 | } | ||
581 | } | ||
582 | |||
583 | @media screen and (max-width: 450px) { | ||
584 | .video-bottom { | ||
585 | .action-button .icon-text { | ||
586 | display: none !important; | ||
587 | } | ||
588 | |||
589 | .video-info .video-info-first-row { | ||
590 | .video-info-name { | ||
591 | font-size: 18px; | ||
592 | } | ||
593 | |||
594 | .video-info-date-views { | ||
595 | font-size: 14px; | ||
596 | } | ||
597 | |||
598 | .video-actions-rates { | ||
599 | margin-top: 10px; | ||
600 | } | ||
601 | } | ||
602 | |||
603 | .video-info-description { | ||
604 | font-size: 14px !important; | ||
605 | } | ||
606 | } | ||
607 | } | ||