aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2017-12-20 09:43:51 +0100
committerChocobozzz <me@florianbigard.com>2017-12-20 09:52:59 +0100
commit86f278cb4c582d487959b532b570b1a59f1fe5d2 (patch)
tree4da5a387e457d501f3839b88d31009546cb312cd
parente203f2e0e1ba778201191dfaf83bc90341616610 (diff)
downloadPeerTube-86f278cb4c582d487959b532b570b1a59f1fe5d2.tar.gz
PeerTube-86f278cb4c582d487959b532b570b1a59f1fe5d2.tar.zst
PeerTube-86f278cb4c582d487959b532b570b1a59f1fe5d2.zip
Improve player on small screen
-rw-r--r--client/src/sass/video-js-custom.scss32
-rw-r--r--client/src/standalone/videos/embed.scss71
2 files changed, 63 insertions, 40 deletions
diff --git a/client/src/sass/video-js-custom.scss b/client/src/sass/video-js-custom.scss
index 25362c5af..b093bbdec 100644
--- a/client/src/sass/video-js-custom.scss
+++ b/client/src/sass/video-js-custom.scss
@@ -102,7 +102,7 @@ $control-bar-height: 34px;
102 padding: 0; 102 padding: 0;
103 103
104 .vjs-current-time-display { 104 .vjs-current-time-display {
105 line-height: $control-bar-height; 105 line-height: calc(#{$control-bar-height} + 1px);
106 106
107 &::after { 107 &::after {
108 content: "/"; 108 content: "/";
@@ -117,7 +117,7 @@ $control-bar-height: 34px;
117 padding: 0; 117 padding: 0;
118 118
119 .vjs-duration-display { 119 .vjs-duration-display {
120 line-height: $control-bar-height; 120 line-height: calc(#{$control-bar-height} + 1px);
121 } 121 }
122 } 122 }
123 123
@@ -271,18 +271,19 @@ $control-bar-height: 34px;
271 .vjs-menu-button-popup { 271 .vjs-menu-button-popup {
272 font-size: 13px; 272 font-size: 13px;
273 font-weight: $font-semibold; 273 font-weight: $font-semibold;
274 width: 42px; 274 width: 50px;
275 275
276 // Thanks: https://github.com/kmoskwiak/videojs-resolution-switcher/pull/92/files 276 // Thanks: https://github.com/kmoskwiak/videojs-resolution-switcher/pull/92/files
277 .vjs-resolution-button-label { 277 .vjs-resolution-button-label {
278 line-height: $control-bar-height; 278 line-height: $control-bar-height;
279 position: absolute; 279 position: absolute;
280 top: 0; 280 top: 0;
281 left: -1px; 281 left: 4px;
282 width: 100%; 282 width: 100%;
283 height: 100%; 283 height: 100%;
284 text-align: center; 284 text-align: center;
285 box-sizing: inherit; 285 box-sizing: inherit;
286 text-align: center;
286 } 287 }
287 288
288 .vjs-resolution-button { 289 .vjs-resolution-button {
@@ -293,9 +294,9 @@ $control-bar-height: 34px;
293 top: 20px; 294 top: 20px;
294 295
295 .vjs-menu-content { 296 .vjs-menu-content {
296 width: 4em; 297 width: 50px;
297 left: 50%; /* Center the menu, in it's parent */ 298 left: 50%; /* Center the menu, in it's parent */
298 margin-left: -2em; /* half of width, to center */ 299 margin-left: -21px;
299 } 300 }
300 301
301 li { 302 li {
@@ -306,10 +307,25 @@ $control-bar-height: 34px;
306 } 307 }
307 } 308 }
308 309
309 @media screen and (max-width: 450px) { 310 @media screen and (max-width: 550px) {
310 .vjs-webtorrent-displayed { 311 .vjs-webtorrent {
312 padding: 0 !important;
313
314 .vjs-webtorrent-displayed {
315 display: none !important;
316 }
317 }
318 }
319
320 @media screen and (max-width: 300px) {
321 .vjs-volume-control {
311 display: none !important; 322 display: none !important;
312 } 323 }
324
325 .vjs-volume-panel {
326 width: 26px !important;
327 margin-right: 83px !important;
328 }
313 } 329 }
314} 330}
315 331
diff --git a/client/src/standalone/videos/embed.scss b/client/src/standalone/videos/embed.scss
index b6ca13e0e..fbc0e33a0 100644
--- a/client/src/standalone/videos/embed.scss
+++ b/client/src/standalone/videos/embed.scss
@@ -14,47 +14,54 @@ html, body {
14 margin: 0; 14 margin: 0;
15} 15}
16 16
17.video-js { 17
18
19.video-js.vjs-peertube-skin {
18 width: 100%; 20 width: 100%;
19 height: 100%; 21 height: 100%;
20 overflow: hidden; 22 overflow: hidden;
21}
22
23.vjs-poster {
24 background-size: 100% auto;
25}
26
27.vjs-peertube-link {
28 color: #fff;
29 text-decoration: none;
30 font-size: $font-size;
31 line-height: $control-bar-height;
32 transition: all .4s;
33 font-weight: $font-semibold;
34 margin-right: 3px;
35}
36
37.vjs-peertube-link:hover {
38 text-shadow: 0 0 1em #fff;
39}
40 23
41// Fix volume panel because we added a new component (PeerTube link) 24 .vjs-poster {
42.vjs-volume-panel { 25 background-size: 100% auto;
43 margin-right: 121px !important; 26 }
44}
45 27
46@media screen and (max-width: 350px) { 28 .vjs-peertube-link {
47 .vjs-play-control { 29 color: #fff;
48 padding: 0 5px !important; 30 text-decoration: none;
49 width: 25px !important; 31 font-size: $font-size;
32 line-height: $control-bar-height;
33 transition: all .4s;
34 font-weight: $font-semibold;
35 margin-right: 3px;
36 padding: 0 5px;
50 } 37 }
51 38
52 .vjs-volume-control { 39 .vjs-peertube-link:hover {
53 display: none !important; 40 text-shadow: 0 0 1em #fff;
54 } 41 }
55 42
43 // Fix volume panel because we added a new component (PeerTube link)
56 .vjs-volume-panel { 44 .vjs-volume-panel {
57 width: 26px !important; 45 margin-right: 137px !important;
58 margin-right: 140px !important; 46 }
47
48 @media screen and (max-width: 350px) {
49 .vjs-play-control {
50 padding: 0 5px !important;
51 width: 25px !important;
52 }
53
54 .vjs-volume-control {
55 display: none !important;
56 }
57
58 .vjs-volume-panel {
59 width: 26px !important;
60 margin-right: 140px !important;
61 }
62
63 .vjs-peertube-link {
64 padding: 0;
65 }
59 } 66 }
60} 67}