2 @use '_variables' as *;
4 @use '_bootstrap-variables';
5 @use '_miniature' as *;
9 @function getPlayerHeight ($width) {
10 @return calc(#{$width} / #{$video-watch-player-factor});
13 @function getPlayerWidth ($height) {
14 @return calc(#{$height} * #{$video-watch-player-factor});
17 @mixin playlist-below-player {
18 width: 100% !important;
19 height: auto !important;
20 max-height: 300px !important;
22 border-bottom: 1px solid $separator-border-color !important;
26 font-weight: $font-semibold;
38 .flex-direction-column {
39 flex-direction: column;
43 &.theater-enabled #video-wrapper {
44 $height: calc(100vh - #{$header-height} - #{$theater-bottom-space});
46 flex-direction: column;
47 justify-content: center;
60 my-video-watch-playlist ::ng-deep .playlist {
61 @include playlist-below-player;
67 background-color: #000;
69 justify-content: center;
73 max-width: getPlayerWidth($video-height);
74 height: $video-height;
76 // VideoJS create an inner video player
79 position: relative !important;
86 justify-content: center;
88 height: $video-height;
94 flex-direction: column;
97 justify-content: center;
98 background-color: #141313;
103 @media screen and (max-width: 1000px) {
107 @media screen and (max-width: 600px) {
117 font-weight: $font-semibold;
128 // Set min width for flex item
133 .video-info-first-row {
142 @include peertube-word-wrap;
144 @include margin-right(30px);
146 min-height: 40px; // Align with the action buttons
148 font-weight: $font-semibold;
152 .video-info-first-row-bottom {
159 .video-info-date-views {
160 @include margin-right(10px);
167 .video-info-channel {
168 font-weight: $font-semibold;
172 @include disable-default-a-behaviour;
173 @include peertube-word-wrap;
175 color: pvar(--mainForegroundColor);
183 .video-info-channel-left {
186 .video-info-channel-left-links {
188 flex-direction: column;
193 font-weight: $font-regular;
203 my-subscribe-button {
204 @include margin-left(5px);
208 @include margin-left($video-watch-info-margin-left);
217 .video-attribute-label {
218 @include padding-right(5px);
221 display: inline-block;
222 color: pvar(--greyForegroundColor);
223 font-weight: $font-bold;
226 a.video-attribute-value {
227 @include disable-default-a-behaviour;
228 color: pvar(--mainForegroundColor);
235 .video-attribute-tags {
236 .video-attribute-value:not(:nth-child(2)) {
244 @include margin-left(auto);
245 @include margin-right(0);
255 my-recommended-videos {
256 @include padding-left(15px);
263 display: inline-block;
268 @media screen and (max-width: 1600px) {
269 .video-attributes .video-attribute {
274 // Use the same breakpoint than in the typescript component to display the other video miniatures as row
275 @media screen and (max-width: 1100px) {
277 flex-direction: column;
278 justify-content: center;
280 my-video-watch-playlist ::ng-deep .playlist {
281 @include playlist-below-player;
286 flex-direction: column;
289 my-recommended-videos {
290 @include padding-left(0);
294 @media screen and (max-width: 600px) {
296 height: getPlayerHeight(100vw) !important;
299 ::ng-deep .video-js {
301 height: getPlayerHeight(100vw) !important;
306 margin-top: 20px !important;
307 padding-bottom: 20px !important;
320 @media screen and (max-width: 450px) {
325 .video-info-date-views {
334 // Special case for iOS, that takes into account the width for fullscreens
335 #video-wrapper ::ng-deep .video-js.vjs-fullscreen {