diff options
Diffstat (limited to 'client/src/sass/video-js-custom.scss')
-rw-r--r-- | client/src/sass/video-js-custom.scss | 32 |
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 | ||