aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2019-04-05 15:23:41 +0200
committerChocobozzz <me@florianbigard.com>2019-04-05 15:23:41 +0200
commit3143ae17a014576ec21b535ba9e8266ca727a152 (patch)
tree6556a402759b8177471486a77e638da65495fb51 /client/src/app/videos
parent8dfceec44a5eec8b0190d1d5076aab0f03a0cb52 (diff)
downloadPeerTube-3143ae17a014576ec21b535ba9e8266ca727a152.tar.gz
PeerTube-3143ae17a014576ec21b535ba9e8266ca727a152.tar.zst
PeerTube-3143ae17a014576ec21b535ba9e8266ca727a152.zip
Improve playlist element style
Diffstat (limited to 'client/src/app/videos')
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.scss37
1 files changed, 20 insertions, 17 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 c1eaf9b2b..d61a0bc3e 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -16,6 +16,8 @@ $player-factor: 1.7; // 16/9
16 16
17@mixin playlist-below-player { 17@mixin playlist-below-player {
18 width: 100%; 18 width: 100%;
19 height: auto;
20 max-height: 300px;
19 border-bottom: 1px solid $separator-border-color; 21 border-bottom: 1px solid $separator-border-color;
20} 22}
21 23
@@ -51,6 +53,12 @@ $player-factor: 1.7; // 16/9
51 justify-content: center; 53 justify-content: center;
52 margin: 0 -15px; 54 margin: 0 -15px;
53 55
56 #videojs-wrapper {
57 display: flex;
58 justify-content: center;
59 flex-grow: 1;
60 }
61
54 .remote-server-down { 62 .remote-server-down {
55 color: #fff; 63 color: #fff;
56 display: flex; 64 display: flex;
@@ -73,10 +81,12 @@ $player-factor: 1.7; // 16/9
73 } 81 }
74 82
75 .playlist { 83 .playlist {
76 width: 400px; 84 min-width: 200px;
85 max-width: 470px;
77 height: 66vh; 86 height: 66vh;
78 background-color: var(--mainBackgroundColor); 87 background-color: var(--mainBackgroundColor);
79 overflow-y: auto; 88 overflow-y: auto;
89 border-bottom: 1px solid $separator-border-color;
80 90
81 .playlist-info { 91 .playlist-info {
82 padding: 5px 30px; 92 padding: 5px 30px;
@@ -492,6 +502,15 @@ my-video-comments {
492} 502}
493 503
494@media screen and (max-width: 1100px) { 504@media screen and (max-width: 1100px) {
505 #video-wrapper {
506 flex-direction: column;
507 justify-content: center;
508
509 .playlist {
510 @include playlist-below-player;
511 }
512 }
513
495 .video-bottom { 514 .video-bottom {
496 flex-direction: column; 515 flex-direction: column;
497 516
@@ -506,22 +525,6 @@ my-video-comments {
506 } 525 }
507} 526}
508 527
509@media screen and (max-width: 900px) {
510 #video-wrapper {
511 flex-direction: column;
512 justify-content: center;
513
514 #videojs-wrapper {
515 display: flex;
516 justify-content: center;
517 }
518
519 .playlist {
520 @include playlist-below-player;
521 }
522 }
523}
524
525@media screen and (max-width: 600px) { 528@media screen and (max-width: 600px) {
526 .video-bottom { 529 .video-bottom {
527 margin: 20px 0 0 0 !important; 530 margin: 20px 0 0 0 !important;