diff options
| author | Chocobozzz <me@florianbigard.com> | 2017-12-20 09:43:51 +0100 |
|---|---|---|
| committer | Chocobozzz <me@florianbigard.com> | 2017-12-20 09:52:59 +0100 |
| commit | 86f278cb4c582d487959b532b570b1a59f1fe5d2 (patch) | |
| tree | 4da5a387e457d501f3839b88d31009546cb312cd /client/src/standalone | |
| parent | e203f2e0e1ba778201191dfaf83bc90341616610 (diff) | |
| download | PeerTube-86f278cb4c582d487959b532b570b1a59f1fe5d2.tar.gz PeerTube-86f278cb4c582d487959b532b570b1a59f1fe5d2.tar.zst PeerTube-86f278cb4c582d487959b532b570b1a59f1fe5d2.zip | |
Improve player on small screen
Diffstat (limited to 'client/src/standalone')
| -rw-r--r-- | client/src/standalone/videos/embed.scss | 71 |
1 files changed, 39 insertions, 32 deletions
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 | } |