2 @use '_variables' as *;
4 @use '_bootstrap-variables';
5 @use '_miniature' as *;
7 @function getPlayerHeight ($width) {
8 @return calc(#{$width} / #{$video-watch-player-factor});
11 @function getPlayerWidth ($height) {
12 @return calc(#{$height} * #{$video-watch-player-factor});
15 @mixin playlist-below-player {
16 width: 100% !important;
17 height: auto !important;
18 max-height: 300px !important;
20 border-bottom: 1px solid $separator-border-color !important;
24 &.theater-enabled #video-wrapper {
25 $height: calc(100vh - #{$header-height} - #{$theater-bottom-space});
27 flex-direction: column;
28 justify-content: center;
41 my-video-watch-playlist ::ng-deep .playlist {
42 @include playlist-below-player;
48 font-weight: $font-semibold;
58 background-color: #000;
60 justify-content: center;
64 justify-content: center;
66 height: $video-height;
72 flex-direction: column;
75 justify-content: center;
76 background-color: #141313;
81 @media screen and (max-width: 1000px) {
85 @media screen and (max-width: 600px) {
92 max-width: getPlayerWidth(66vh);
93 height: $video-height;
95 // VideoJS create an inner video player
98 position: relative !important;
102 @media screen and (max-width: 600px) {
104 height: getPlayerHeight(100vw) !important;
108 ::ng-deep .video-js {
110 height: getPlayerHeight(100vw) !important;
120 .flex-direction-column {
121 flex-direction: column;
129 font-weight: $font-semibold;
139 // Set min width for flex item
143 .video-info-first-row {
151 @include peertube-word-wrap;
153 @include margin-right(30px);
154 min-height: 40px; // Align with the action buttons
156 font-weight: $font-semibold;
160 .video-info-first-row-bottom {
167 .video-info-date-views {
168 @include margin-right(10px);
175 .video-info-channel {
176 font-weight: $font-semibold;
180 @include disable-default-a-behaviour;
181 @include peertube-word-wrap;
183 color: pvar(--mainForegroundColor);
190 .video-info-channel-left {
193 .video-info-channel-left-links {
195 flex-direction: column;
200 font-weight: $font-regular;
210 my-subscribe-button {
211 @include margin-left(5px);
215 .video-actions-rates {
216 @include margin-left(auto);
217 @include margin-right(0);
226 height: 40px; // Align with the title
230 .action-button:not(:first-child),
232 my-video-actions-dropdown {
233 @include margin-left(5px);
236 ::ng-deep.action-button {
237 @include peertube-button;
238 @include button-with-icon(21px, 0, -1px);
241 font-weight: $font-semibold;
242 display: inline-block;
245 background-color: transparent !important;
246 color: pvar(--actionButtonColor);
247 text-transform: uppercase;
257 &.action-button-support {
258 color: pvar(--supportButtonColor);
261 @include apply-svg-color(pvar(--supportButtonColor));
265 &.action-button-support {
267 ::ng-deep path:first-child {
268 fill: pvar(--supportButtonHeartColor) !important;
273 &.action-button-save {
281 @include margin-left(3px);
286 .video-info-likes-dislikes-bar-outer-container {
290 .video-info-likes-dislikes-bar-inner-container {
295 .video-info-likes-dislikes-bar {
296 $likes-bar-height: 2px;
297 height: $likes-bar-height;
298 margin-top: -$likes-bar-height;
300 background-color: #ccc;
306 background-color: #909090;
309 background-color: pvar(--activatedActionButtonColor);
317 @include margin-left($video-watch-info-margin-left);
320 .video-attributes .video-attribute {
325 .video-attribute-label {
326 @include padding-right(5px);
329 display: inline-block;
330 color: pvar(--greyForegroundColor);
331 font-weight: $font-bold;
334 a.video-attribute-value {
335 @include disable-default-a-behaviour;
336 color: pvar(--mainForegroundColor);
343 &.video-attribute-tags {
344 .video-attribute-value:not(:nth-child(2)) {
354 my-recommended-videos {
355 @include padding-left(15px);
362 display: inline-block;
367 @media screen and (max-width: 1600px) {
368 .video-bottom .video-info .video-attributes .video-attribute {
373 // Use the same breakpoint than in the typescript component to display the other video miniatures as row
374 @media screen and (max-width: 1100px) {
376 flex-direction: column;
377 justify-content: center;
379 my-video-watch-playlist ::ng-deep .playlist {
380 @include playlist-below-player;
385 flex-direction: column;
388 my-recommended-videos {
389 @include padding-left(0);
393 @media screen and (max-width: 600px) {
395 margin-top: 20px !important;
396 padding-bottom: 20px !important;
401 .video-info-first-row {
412 @media screen and (max-width: 450px) {
414 .action-button .icon-text {
415 display: none !important;
418 .video-info .video-info-first-row {
423 .video-info-date-views {
427 .video-actions-rates {
435 // Special case for iOS, that takes into account the width for fullscreens
436 #video-wrapper ::ng-deep .video-js.vjs-fullscreen {