X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fstandalone%2Fvideos%2Fembed.scss;h=95573dabeb06b403b0fc41e805e2b67b962f0ba6;hb=bc053fb3037fe1598a190dee057051e77f0b4a05;hp=fbc0e33a050e0fd7a2f4376271bcc4cefb1bb64e;hpb=86f278cb4c582d487959b532b570b1a59f1fe5d2;p=github%2FChocobozzz%2FPeerTube.git diff --git a/client/src/standalone/videos/embed.scss b/client/src/standalone/videos/embed.scss index fbc0e33a0..95573dabe 100644 --- a/client/src/standalone/videos/embed.scss +++ b/client/src/standalone/videos/embed.scss @@ -2,7 +2,19 @@ @import '_mixins'; @import '~video.js/dist/video-js.css'; @import '~videojs-dock/dist/videojs-dock.css'; -@import '../../sass/video-js-custom.scss'; + +$assets-path: '../../assets/'; +@import '../../sass/player/index'; + +[hidden] { + display: none !important; +} + +body { + font-family: $main-fonts; + font-weight: $font-regular; + color: #000; +} video { width: 99%; @@ -12,10 +24,9 @@ video { html, body { height: 100%; margin: 0; + background-color: #000; } - - .video-js.vjs-peertube-skin { width: 100%; height: 100%; @@ -25,26 +36,6 @@ html, body { background-size: 100% auto; } - .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; - } - - // 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; @@ -57,7 +48,6 @@ html, body { .vjs-volume-panel { width: 26px !important; - margin-right: 140px !important; } .vjs-peertube-link { @@ -65,3 +55,47 @@ html, body { } } } + +#error-block { + display: none; + + flex-direction: column; + align-content: center; + justify-content: center; + text-align: center; + width: 100%; + height: 100%; + color: white; + box-sizing: border-box; + font-family: sans-serif; + + #error-title { + font-size: 45px; + margin-bottom: 5px; + } + + #error-content { + font-size: 24px; + } +} + +#placeholder-preview { + position: absolute; + top: 0; + left: 0; + background-size: 100% auto; + width: 100%; + height: 100%; + background-position: 50% 50%; +} + +@media screen and (max-width: 300px) { + #error-block { + font-size: 36px; + + #error-content { + font-size: 14px; + } + } +} +