@import '_bootstrap-variables';
@import '_miniature';
-$player-factor: 1.7; // 16/9
+$player-factor: 16/9;
$video-info-margin-left: 44px;
@function getPlayerHeight($width){
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;
}
#video-wrapper {
+ $video-height: 66vh;
+
background-color: #000;
display: flex;
justify-content: center;
display: flex;
justify-content: center;
flex-grow: 1;
+ height: $video-height;
}
.remote-server-down {
::ng-deep .video-js {
width: 100%;
max-width: getPlayerWidth(66vh);
- height: 66vh;
+ height: $video-height;
// VideoJS create an inner video player
video {
}
@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;
}
}
}
&:hover {
opacity: 0.8;
}
-
- img {
- @include avatar(18px);
-
- margin: -2px 5px 0 0;
- }
}
.video-info-channel-left {
line-height: 1.37;
a:nth-of-type(2) {
- font-weight: 500;
+ font-weight: $font-regular;
font-size: 90%;
}
.video-info-description-html {
@include peertube-word-wrap;
- /deep/ a {
+ ::ng-deep a {
text-decoration: none;
}
}
}
}
}
+}
- ::ng-deep .other-videos {
- padding-left: 15px;
- min-width: $video-miniature-width;
-
- @media screen and (min-width: 1800px - (3* $video-miniature-width)) {
- width: min-content;
- }
-
- .title-page {
- margin: 0 !important;
- }
-
- .video-miniature {
- display: flex;
- width: max-content;
- height: 100%;
- padding-bottom: 20px;
- flex-wrap: wrap;
- }
-
- .video-bottom {
- @media screen and (max-width: 1800px - (3* $video-miniature-width)) {
- margin-left: 1rem;
- }
- @media screen and (max-width: 500px) {
- margin-left: 0;
- margin-top: .5rem;
- }
- }
- }
+my-recommended-videos {
+ display: block;
+ padding-left: 15px;
+ min-width: 250px;
}
my-video-comments {
}
}
+// Use the same breakpoint than in the typescript component to display the other video miniatures as row
@media screen and (max-width: 1100px) {
#video-wrapper {
flex-direction: column;
.video-bottom {
flex-direction: column;
+ }
- ::ng-deep .other-videos {
- padding-left: 0 !important;
-
- ::ng-deep .video-miniature {
- flex-direction: row;
- width: auto;
- }
- }
+ my-recommended-videos {
+ padding-left: 0;
}
}
}
}
- ::ng-deep .other-videos .video-miniature {
- flex-direction: column;
- }
-
.privacy-concerns {
width: 100%;
-
- strong {
- display: none;
- }
}
}