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 | 51 |
1 files changed, 9 insertions, 42 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 index a67605217..f22ffc0ea 100644 --- a/client/src/app/+videos/+video-watch/video-watch.component.scss +++ b/client/src/app/+videos/+video-watch/video-watch.component.scss | |||
@@ -407,37 +407,12 @@ $video-info-margin-left: 44px; | |||
407 | } | 407 | } |
408 | } | 408 | } |
409 | } | 409 | } |
410 | } | ||
410 | 411 | ||
411 | ::ng-deep .other-videos { | 412 | my-recommended-videos { |
412 | padding-left: 15px; | 413 | display: block; |
413 | min-width: $video-miniature-width; | 414 | padding-left: 15px; |
414 | 415 | min-width: 250px; | |
415 | @media screen and (min-width: 1800px - (3* $video-miniature-width)) { | ||
416 | width: min-content; | ||
417 | } | ||
418 | |||
419 | .title-page { | ||
420 | margin: 0 !important; | ||
421 | } | ||
422 | |||
423 | .video-miniature { | ||
424 | display: flex; | ||
425 | width: max-content; | ||
426 | height: 100%; | ||
427 | padding-bottom: 20px; | ||
428 | flex-wrap: wrap; | ||
429 | } | ||
430 | |||
431 | .video-bottom { | ||
432 | @media screen and (max-width: 1800px - (3* $video-miniature-width)) { | ||
433 | margin-left: 1rem; | ||
434 | } | ||
435 | @media screen and (max-width: 500px) { | ||
436 | margin-left: 0; | ||
437 | margin-top: .5rem; | ||
438 | } | ||
439 | } | ||
440 | } | ||
441 | } | 416 | } |
442 | 417 | ||
443 | my-video-comments { | 418 | my-video-comments { |
@@ -531,6 +506,7 @@ my-video-comments { | |||
531 | } | 506 | } |
532 | } | 507 | } |
533 | 508 | ||
509 | // Use the same breakpoint than in the typescript component to display the other video miniatures as row | ||
534 | @media screen and (max-width: 1100px) { | 510 | @media screen and (max-width: 1100px) { |
535 | #video-wrapper { | 511 | #video-wrapper { |
536 | flex-direction: column; | 512 | flex-direction: column; |
@@ -543,15 +519,10 @@ my-video-comments { | |||
543 | 519 | ||
544 | .video-bottom { | 520 | .video-bottom { |
545 | flex-direction: column; | 521 | flex-direction: column; |
522 | } | ||
546 | 523 | ||
547 | ::ng-deep .other-videos { | 524 | my-recommended-videos { |
548 | padding-left: 0 !important; | 525 | padding-left: 0; |
549 | |||
550 | ::ng-deep .video-miniature { | ||
551 | flex-direction: row; | ||
552 | width: auto; | ||
553 | } | ||
554 | } | ||
555 | } | 526 | } |
556 | } | 527 | } |
557 | 528 | ||
@@ -573,10 +544,6 @@ my-video-comments { | |||
573 | } | 544 | } |
574 | } | 545 | } |
575 | 546 | ||
576 | ::ng-deep .other-videos .video-miniature { | ||
577 | flex-direction: column; | ||
578 | } | ||
579 | |||
580 | .privacy-concerns { | 547 | .privacy-concerns { |
581 | width: 100%; | 548 | width: 100%; |
582 | } | 549 | } |