X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fstandalone%2Fvideos%2Fembed.scss;h=fbc0e33a050e0fd7a2f4376271bcc4cefb1bb64e;hb=86f278cb4c582d487959b532b570b1a59f1fe5d2;hp=938a6e48ceafe87dd2b1fffa728e6745499289fc;hpb=3d09cdbf90902894c841d0a5ddb35eb772c53b8b;p=github%2FChocobozzz%2FPeerTube.git diff --git a/client/src/standalone/videos/embed.scss b/client/src/standalone/videos/embed.scss index 938a6e48c..fbc0e33a0 100644 --- a/client/src/standalone/videos/embed.scss +++ b/client/src/standalone/videos/embed.scss @@ -1,3 +1,5 @@ +@import '_variables'; +@import '_mixins'; @import '~video.js/dist/video-js.css'; @import '~videojs-dock/dist/videojs-dock.css'; @import '../../sass/video-js-custom.scss'; @@ -12,31 +14,54 @@ html, body { margin: 0; } -.video-js { + + +.video-js.vjs-peertube-skin { width: 100%; height: 100%; overflow: hidden; -} -.vjs-poster { - background-size: 100% auto; -} + .vjs-poster { + background-size: 100% auto; + } -.vjs-peertube-link { - color: white; - text-decoration: none; - font-size: 1.3em; - line-height: 2.20; - transition: all .4s; - position: relative; - right: 6px; -} + .vjs-peertube-link { + color: #fff; + text-decoration: none; + font-size: $font-size; + line-height: $control-bar-height; + transition: all .4s; + font-weight: $font-semibold; + margin-right: 3px; + padding: 0 5px; + } -.vjs-peertube-link:hover { - text-shadow: 0 0 1em #fff; -} + .vjs-peertube-link:hover { + text-shadow: 0 0 1em #fff; + } + + // Fix volume panel because we added a new component (PeerTube link) + .vjs-volume-panel { + margin-right: 137px !important; + } + + @media screen and (max-width: 350px) { + .vjs-play-control { + padding: 0 5px !important; + width: 25px !important; + } + + .vjs-volume-control { + display: none !important; + } + + .vjs-volume-panel { + width: 26px !important; + margin-right: 140px !important; + } -// Fix volume panel because we added a new component (PeerTube link) -.vjs-volume-panel { - margin-right: 90px !important; + .vjs-peertube-link { + padding: 0; + } + } }