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