aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass
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 /client/src/sass
parente203f2e0e1ba778201191dfaf83bc90341616610 (diff)
downloadPeerTube-86f278cb4c582d487959b532b570b1a59f1fe5d2.tar.gz
PeerTube-86f278cb4c582d487959b532b570b1a59f1fe5d2.tar.zst
PeerTube-86f278cb4c582d487959b532b570b1a59f1fe5d2.zip
Improve player on small screen
Diffstat (limited to 'client/src/sass')
-rw-r--r--client/src/sass/video-js-custom.scss32
1 files changed, 24 insertions, 8 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