X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2F%2Bvideos%2F%2Bvideo-watch%2Fvideo-watch.component.scss;h=555126cbc293eb709be5d7248b7b934e953df20b;hb=903353d67a8d0fdda8465ed6c57b77a9a5afbe92;hp=00a4b0dee0749fac4d2a156c6473f07cf1d04f15;hpb=b40a219338fed042072decea203838ca5e2b265f;p=github%2FChocobozzz%2FPeerTube.git diff --git a/client/src/app/+videos/+video-watch/video-watch.component.scss b/client/src/app/+videos/+video-watch/video-watch.component.scss index 00a4b0dee..555126cbc 100644 --- a/client/src/app/+videos/+video-watch/video-watch.component.scss +++ b/client/src/app/+videos/+video-watch/video-watch.component.scss @@ -27,13 +27,14 @@ $video-info-margin-left: 44px; flex-direction: column; justify-content: center; + $height: calc(100vh - #{$header-height} - #{$theater-bottom-space}); + #videojs-wrapper { width: 100%; + height: $height; } ::ng-deep .video-js { - $height: calc(100vh - #{$header-height} - #{$theater-bottom-space}); - height: $height; width: 100%; max-width: initial; @@ -50,6 +51,8 @@ $video-info-margin-left: 44px; } #video-wrapper { + $video-height: 66vh; + background-color: #000; display: flex; justify-content: center; @@ -58,6 +61,7 @@ $video-info-margin-left: 44px; display: flex; justify-content: center; flex-grow: 1; + height: $video-height; } .remote-server-down { @@ -84,7 +88,7 @@ $video-info-margin-left: 44px; ::ng-deep .video-js { width: 100%; max-width: getPlayerWidth(66vh); - height: 66vh; + height: $video-height; // VideoJS create an inner video player video { @@ -94,10 +98,14 @@ $video-info-margin-left: 44px; } @media screen and (max-width: 600px) { + #videojs-wrapper { + height: getPlayerHeight(100vw) !important; + } + .remote-server-down, ::ng-deep .video-js { width: 100vw; - height: getPlayerHeight(100vw) + height: getPlayerHeight(100vw) !important; } } } @@ -189,7 +197,7 @@ $video-info-margin-left: 44px; line-height: 1.37; a:nth-of-type(2) { - font-weight: 500; + font-weight: $font-regular; font-size: 90%; } @@ -344,7 +352,7 @@ $video-info-margin-left: 44px; .video-info-description-html { @include peertube-word-wrap; - /deep/ a { + ::ng-deep a { text-decoration: none; } } @@ -577,10 +585,6 @@ my-video-comments { .privacy-concerns { width: 100%; - - strong { - display: none; - } } } @@ -609,3 +613,9 @@ my-video-comments { } } } + + +// Special case for iOS, that takes into account the width for fullscreens +#video-wrapper ::ng-deep .video-js.vjs-fullscreen { + max-width: unset; +}