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 | 64 |
1 files changed, 10 insertions, 54 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 555126cbc..e8ad10a11 100644 --- a/client/src/app/+videos/+video-watch/video-watch.component.scss +++ b/client/src/app/+videos/+video-watch/video-watch.component.scss | |||
@@ -3,7 +3,7 @@ | |||
3 | @import '_bootstrap-variables'; | 3 | @import '_bootstrap-variables'; |
4 | @import '_miniature'; | 4 | @import '_miniature'; |
5 | 5 | ||
6 | $player-factor: 1.7; // 16/9 | 6 | $player-factor: 16/9; |
7 | $video-info-margin-left: 44px; | 7 | $video-info-margin-left: 44px; |
8 | 8 | ||
9 | @function getPlayerHeight($width){ | 9 | @function getPlayerHeight($width){ |
@@ -179,12 +179,6 @@ $video-info-margin-left: 44px; | |||
179 | &:hover { | 179 | &:hover { |
180 | opacity: 0.8; | 180 | opacity: 0.8; |
181 | } | 181 | } |
182 | |||
183 | img { | ||
184 | @include avatar(18px); | ||
185 | |||
186 | margin: -2px 5px 0 0; | ||
187 | } | ||
188 | } | 182 | } |
189 | 183 | ||
190 | .video-info-channel-left { | 184 | .video-info-channel-left { |
@@ -212,11 +206,6 @@ $video-info-margin-left: 44px; | |||
212 | } | 206 | } |
213 | } | 207 | } |
214 | 208 | ||
215 | my-feed { | ||
216 | margin-left: 5px; | ||
217 | margin-top: 1px; | ||
218 | } | ||
219 | |||
220 | .video-actions-rates { | 209 | .video-actions-rates { |
221 | margin: 0 0 10px 0; | 210 | margin: 0 0 10px 0; |
222 | align-items: start; | 211 | align-items: start; |
@@ -413,37 +402,12 @@ $video-info-margin-left: 44px; | |||
413 | } | 402 | } |
414 | } | 403 | } |
415 | } | 404 | } |
405 | } | ||
416 | 406 | ||
417 | ::ng-deep .other-videos { | 407 | my-recommended-videos { |
418 | padding-left: 15px; | 408 | display: block; |
419 | min-width: $video-miniature-width; | 409 | padding-left: 15px; |
420 | 410 | min-width: 250px; | |
421 | @media screen and (min-width: 1800px - (3* $video-miniature-width)) { | ||
422 | width: min-content; | ||
423 | } | ||
424 | |||
425 | .title-page { | ||
426 | margin: 0 !important; | ||
427 | } | ||
428 | |||
429 | .video-miniature { | ||
430 | display: flex; | ||
431 | width: max-content; | ||
432 | height: 100%; | ||
433 | padding-bottom: 20px; | ||
434 | flex-wrap: wrap; | ||
435 | } | ||
436 | |||
437 | .video-bottom { | ||
438 | @media screen and (max-width: 1800px - (3* $video-miniature-width)) { | ||
439 | margin-left: 1rem; | ||
440 | } | ||
441 | @media screen and (max-width: 500px) { | ||
442 | margin-left: 0; | ||
443 | margin-top: .5rem; | ||
444 | } | ||
445 | } | ||
446 | } | ||
447 | } | 411 | } |
448 | 412 | ||
449 | my-video-comments { | 413 | my-video-comments { |
@@ -537,6 +501,7 @@ my-video-comments { | |||
537 | } | 501 | } |
538 | } | 502 | } |
539 | 503 | ||
504 | // Use the same breakpoint than in the typescript component to display the other video miniatures as row | ||
540 | @media screen and (max-width: 1100px) { | 505 | @media screen and (max-width: 1100px) { |
541 | #video-wrapper { | 506 | #video-wrapper { |
542 | flex-direction: column; | 507 | flex-direction: column; |
@@ -549,15 +514,10 @@ my-video-comments { | |||
549 | 514 | ||
550 | .video-bottom { | 515 | .video-bottom { |
551 | flex-direction: column; | 516 | flex-direction: column; |
517 | } | ||
552 | 518 | ||
553 | ::ng-deep .other-videos { | 519 | my-recommended-videos { |
554 | padding-left: 0 !important; | 520 | padding-left: 0; |
555 | |||
556 | ::ng-deep .video-miniature { | ||
557 | flex-direction: row; | ||
558 | width: auto; | ||
559 | } | ||
560 | } | ||
561 | } | 521 | } |
562 | } | 522 | } |
563 | 523 | ||
@@ -579,10 +539,6 @@ my-video-comments { | |||
579 | } | 539 | } |
580 | } | 540 | } |
581 | 541 | ||
582 | ::ng-deep .other-videos .video-miniature { | ||
583 | flex-direction: column; | ||
584 | } | ||
585 | |||
586 | .privacy-concerns { | 542 | .privacy-concerns { |
587 | width: 100%; | 543 | width: 100%; |
588 | } | 544 | } |