diff options
author | Chocobozzz <me@florianbigard.com> | 2019-05-13 11:18:24 +0200 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2019-05-13 11:19:29 +0200 |
commit | 72675ebe0181ab2389fb2f75a3b2acdca6e09c07 (patch) | |
tree | 65af2f9b50346175a83b3fa9e91d5f2dc0aee8eb /client/src/app/videos/+video-watch/video-watch.component.scss | |
parent | 722bca907b6aa69c3b617221870451ccf436921a (diff) | |
download | PeerTube-72675ebe0181ab2389fb2f75a3b2acdca6e09c07.tar.gz PeerTube-72675ebe0181ab2389fb2f75a3b2acdca6e09c07.tar.zst PeerTube-72675ebe0181ab2389fb2f75a3b2acdca6e09c07.zip |
Move video watch playlist in its own component
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 | 66 |
1 files changed, 6 insertions, 60 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 d8113b666..8ca5c4118 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.scss +++ b/client/src/app/videos/+video-watch/video-watch.component.scss | |||
@@ -15,10 +15,10 @@ $player-factor: 1.7; // 16/9 | |||
15 | } | 15 | } |
16 | 16 | ||
17 | @mixin playlist-below-player { | 17 | @mixin playlist-below-player { |
18 | width: 100%; | 18 | width: 100% !important; |
19 | height: auto; | 19 | height: auto !important; |
20 | max-height: 300px; | 20 | max-height: 300px !important; |
21 | border-bottom: 1px solid $separator-border-color; | 21 | border-bottom: 1px solid $separator-border-color !important; |
22 | } | 22 | } |
23 | 23 | ||
24 | .root { | 24 | .root { |
@@ -37,7 +37,7 @@ $player-factor: 1.7; // 16/9 | |||
37 | width: 100%; | 37 | width: 100%; |
38 | } | 38 | } |
39 | 39 | ||
40 | .playlist { | 40 | my-video-watch-playlist /deep/ .playlist { |
41 | @include playlist-below-player; | 41 | @include playlist-below-player; |
42 | } | 42 | } |
43 | } | 43 | } |
@@ -80,60 +80,6 @@ $player-factor: 1.7; // 16/9 | |||
80 | } | 80 | } |
81 | } | 81 | } |
82 | 82 | ||
83 | .playlist { | ||
84 | min-width: 200px; | ||
85 | max-width: 470px; | ||
86 | height: 66vh; | ||
87 | background-color: var(--mainBackgroundColor); | ||
88 | overflow-y: auto; | ||
89 | border-bottom: 1px solid $separator-border-color; | ||
90 | |||
91 | .playlist-info { | ||
92 | padding: 5px 30px; | ||
93 | background-color: #e4e4e4; | ||
94 | |||
95 | .playlist-display-name { | ||
96 | font-size: 18px; | ||
97 | font-weight: $font-semibold; | ||
98 | margin-bottom: 5px; | ||
99 | } | ||
100 | |||
101 | .playlist-by-index { | ||
102 | color: $grey-foreground-color; | ||
103 | display: flex; | ||
104 | |||
105 | .playlist-by { | ||
106 | margin-right: 5px; | ||
107 | } | ||
108 | |||
109 | .playlist-index span:first-child::after { | ||
110 | content: '/'; | ||
111 | margin: 0 3px; | ||
112 | } | ||
113 | } | ||
114 | } | ||
115 | |||
116 | my-video-playlist-element-miniature { | ||
117 | /deep/ { | ||
118 | .video { | ||
119 | .position { | ||
120 | margin-right: 0; | ||
121 | } | ||
122 | |||
123 | .video-info { | ||
124 | .video-info-name { | ||
125 | font-size: 15px; | ||
126 | } | ||
127 | } | ||
128 | } | ||
129 | |||
130 | my-video-thumbnail { | ||
131 | @include thumbnail-size-component(90px, 50px); | ||
132 | } | ||
133 | } | ||
134 | } | ||
135 | } | ||
136 | |||
137 | /deep/ .video-js { | 83 | /deep/ .video-js { |
138 | width: getPlayerWidth(66vh); | 84 | width: getPlayerWidth(66vh); |
139 | height: 66vh; | 85 | height: 66vh; |
@@ -508,7 +454,7 @@ my-video-comments { | |||
508 | flex-direction: column; | 454 | flex-direction: column; |
509 | justify-content: center; | 455 | justify-content: center; |
510 | 456 | ||
511 | .playlist { | 457 | my-video-watch-playlist /deep/ .playlist { |
512 | @include playlist-below-player; | 458 | @include playlist-below-player; |
513 | } | 459 | } |
514 | } | 460 | } |