diff options
author | Chocobozzz <florian.bigard@gmail.com> | 2017-05-01 18:05:28 +0200 |
---|---|---|
committer | Chocobozzz <florian.bigard@gmail.com> | 2017-05-01 18:16:50 +0200 |
commit | 3eeeb87fe62fab3e48455f53c8a725b49878b9b3 (patch) | |
tree | 6b759da1dccd43509eef4546cb43166d1e3e0371 /client/src/app/videos/video-watch/video-watch.component.scss | |
parent | 45ef55fccd120184ed5d02aaa1254a2b26162fac (diff) | |
download | PeerTube-3eeeb87fe62fab3e48455f53c8a725b49878b9b3.tar.gz PeerTube-3eeeb87fe62fab3e48455f53c8a725b49878b9b3.tar.zst PeerTube-3eeeb87fe62fab3e48455f53c8a725b49878b9b3.zip |
Client: try to be responsive
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 | 53 |
1 files changed, 53 insertions, 0 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 8d8454cfd..767a3ed4e 100644 --- a/client/src/app/videos/video-watch/video-watch.component.scss +++ b/client/src/app/videos/video-watch/video-watch.component.scss | |||
@@ -47,6 +47,7 @@ | |||
47 | // Keep a symmetry with the video name | 47 | // Keep a symmetry with the video name |
48 | padding-right: $video-watch-info-padding-left | 48 | padding-right: $video-watch-info-padding-left |
49 | } | 49 | } |
50 | |||
50 | } | 51 | } |
51 | 52 | ||
52 | .video-small-blocks { | 53 | .video-small-blocks { |
@@ -66,6 +67,9 @@ | |||
66 | a { | 67 | a { |
67 | cursor: pointer; | 68 | cursor: pointer; |
68 | transition: color 0.3s; | 69 | transition: color 0.3s; |
70 | white-space: nowrap; | ||
71 | overflow: hidden; | ||
72 | text-overflow: ellipsis; | ||
69 | 73 | ||
70 | &, &:hover { | 74 | &, &:hover { |
71 | color: inherit; | 75 | color: inherit; |
@@ -181,4 +185,53 @@ | |||
181 | } | 185 | } |
182 | } | 186 | } |
183 | } | 187 | } |
188 | |||
189 | @media screen and (max-width: 400px) { | ||
190 | .video-name-views { | ||
191 | font-size: 16px !important; | ||
192 | } | ||
193 | } | ||
194 | |||
195 | @media screen and (max-width: 800px) { | ||
196 | .video-name-views { | ||
197 | .video-name { | ||
198 | padding-left: 5px; | ||
199 | padding-right: 0px; | ||
200 | } | ||
201 | |||
202 | .video-views { | ||
203 | padding-left: 0px; | ||
204 | padding-right: 5px; | ||
205 | } | ||
206 | } | ||
207 | |||
208 | .video-small-blocks { | ||
209 | a, .video-small-block-text { | ||
210 | font-size: 13px !important; | ||
211 | } | ||
212 | |||
213 | .glyphicon { | ||
214 | font-size: 18px !important; | ||
215 | } | ||
216 | |||
217 | .video-small-block-author { | ||
218 | padding-left: 10px; | ||
219 | } | ||
220 | } | ||
221 | |||
222 | .video-details { | ||
223 | .video-details-date-description { | ||
224 | padding-left: 10px; | ||
225 | font-size: 13px !important; | ||
226 | } | ||
227 | |||
228 | .video-details-attributes { | ||
229 | font-size: 11px !important; | ||
230 | |||
231 | .video-details-attribute-label { | ||
232 | width: 50px; | ||
233 | } | ||
234 | } | ||
235 | } | ||
236 | } | ||
184 | } | 237 | } |