2 @use '_variables' as *;
4 @use '_bootstrap-variables';
5 @use '_miniature' as *;
7 $player-factor: math.div(16, 9);
8 $video-info-margin-left: 44px;
10 @function getPlayerHeight ($width) {
11 @return calc(#{$width} / #{$player-factor});
14 @function getPlayerWidth ($height) {
15 @return calc(#{$height} * #{$player-factor});
18 @mixin playlist-below-player {
19 width: 100% !important;
20 height: auto !important;
21 max-height: 300px !important;
23 border-bottom: 1px solid $separator-border-color !important;
27 &.theater-enabled #video-wrapper {
28 $height: calc(100vh - #{$header-height} - #{$theater-bottom-space});
30 flex-direction: column;
31 justify-content: center;
44 my-video-watch-playlist ::ng-deep .playlist {
45 @include playlist-below-player;
51 font-weight: $font-semibold;
61 background-color: #000;
63 justify-content: center;
67 justify-content: center;
69 height: $video-height;
75 flex-direction: column;
78 justify-content: center;
79 background-color: #141313;
84 @media screen and (max-width: 1000px) {
88 @media screen and (max-width: 600px) {
95 max-width: getPlayerWidth(66vh);
96 height: $video-height;
98 // VideoJS create an inner video player
101 position: relative !important;
105 @media screen and (max-width: 600px) {
107 height: getPlayerHeight(100vw) !important;
111 ::ng-deep .video-js {
113 height: getPlayerHeight(100vw) !important;
123 .flex-direction-column {
124 flex-direction: column;
132 font-weight: $font-semibold;
142 // Set min width for flex item
146 .video-info-first-row {
154 @include peertube-word-wrap;
156 @include margin-right(30px);
157 min-height: 40px; // Align with the action buttons
159 font-weight: $font-semibold;
163 .video-info-first-row-bottom {
170 .video-info-date-views {
171 @include margin-right(10px);
178 .video-info-channel {
179 font-weight: $font-semibold;
183 @include disable-default-a-behaviour;
184 @include peertube-word-wrap;
186 color: pvar(--mainForegroundColor);
193 .video-info-channel-left {
196 .video-info-channel-left-links {
198 flex-direction: column;
203 font-weight: $font-regular;
213 my-subscribe-button {
214 @include margin-left(5px);
218 .video-actions-rates {
219 @include margin-left(auto);
220 @include margin-right(0);
229 height: 40px; // Align with the title
233 .action-button:not(:first-child),
235 my-video-actions-dropdown {
236 @include margin-left(5px);
239 ::ng-deep.action-button {
240 @include peertube-button;
241 @include button-with-icon(21px, 0, -1px);
242 @include apply-svg-color(pvar(--actionButtonColor));
245 font-weight: $font-semibold;
246 display: inline-block;
249 background-color: transparent !important;
250 color: pvar(--actionButtonColor);
251 text-transform: uppercase;
261 &.action-button-like,
262 &.action-button-dislike {
263 filter: brightness(120%);
270 &.action-button-like.activated {
272 color: pvar(--activatedActionButtonColor);
276 @include apply-svg-color(pvar(--activatedActionButtonColor));
280 &.action-button-dislike.activated {
282 color: pvar(--activatedActionButtonColor);
286 @include apply-svg-color(pvar(--activatedActionButtonColor));
290 &.action-button-support {
291 color: pvar(--supportButtonColor);
294 @include apply-svg-color(pvar(--supportButtonColor));
298 &.action-button-support {
300 ::ng-deep path:first-child {
301 fill: pvar(--supportButtonHeartColor) !important;
306 &.action-button-save {
314 @include margin-left(3px);
319 .video-info-likes-dislikes-bar-outer-container {
323 .video-info-likes-dislikes-bar-inner-container {
328 .video-info-likes-dislikes-bar {
329 $likes-bar-height: 2px;
330 height: $likes-bar-height;
331 margin-top: -$likes-bar-height;
333 background-color: #ccc;
339 background-color: #909090;
342 background-color: pvar(--activatedActionButtonColor);
349 .video-info-description {
350 @include margin-left($video-info-margin-left);
351 @include margin-right(0);
357 .video-info-description-html {
358 @include peertube-word-wrap;
361 text-decoration: none;
366 .description-loading {
367 @include margin-left(3px);
370 .description-loading {
371 display: inline-block;
374 .video-info-description-more {
376 font-weight: $font-semibold;
377 color: pvar(--greyForegroundColor);
388 @include margin-left($video-info-margin-left);
391 .video-attributes .video-attribute {
396 .video-attribute-label {
397 @include padding-right(5px);
400 display: inline-block;
401 color: pvar(--greyForegroundColor);
402 font-weight: $font-bold;
405 a.video-attribute-value {
406 @include disable-default-a-behaviour;
407 color: pvar(--mainForegroundColor);
414 &.video-attribute-tags {
415 .video-attribute-value:not(:nth-child(2)) {
425 my-recommended-videos {
426 @include padding-left(15px);
433 display: inline-block;
438 // If the view is not expanded, take into account the menu
440 z-index: z(dropdown) + 1;
441 width: calc(100% - #{$menu-width});
444 @media screen and (max-width: $small-view) {
446 @include margin-left($menu-width - 15px); // Menu is absolute
450 :host-context(.expanded) {
452 @include margin-left(-15px);
461 z-index: z(privacymsg);
468 justify-content: space-between;
469 background-color: rgba(0, 0, 0, 0.9);
472 .privacy-concerns-text {
477 @include disable-default-a-behaviour;
479 color: pvar(--mainColor);
480 transition: color 0.3s;
487 .privacy-concerns-button {
488 @include margin-left(auto);
490 padding: 5px 8px 5px 7px;
494 transition: background-color 0.3s;
495 font-weight: $font-semibold;
498 background-color: #000;
502 .privacy-concerns-okay {
503 @include margin-left(10px);
505 background-color: pvar(--mainColor);
509 @media screen and (max-width: 1600px) {
510 .video-bottom .video-info .video-attributes .video-attribute {
515 @media screen and (max-width: 1300px) {
520 .privacy-concerns-text {
526 // Use the same breakpoint than in the typescript component to display the other video miniatures as row
527 @media screen and (max-width: 1100px) {
529 flex-direction: column;
530 justify-content: center;
532 my-video-watch-playlist ::ng-deep .playlist {
533 @include playlist-below-player;
538 flex-direction: column;
541 my-recommended-videos {
542 @include padding-left(0);
546 @media screen and (max-width: 600px) {
548 margin-top: 20px !important;
549 padding-bottom: 20px !important;
554 .video-info-first-row {
569 @media screen and (max-width: 450px) {
571 .action-button .icon-text {
572 display: none !important;
575 .video-info .video-info-first-row {
580 .video-info-date-views {
584 .video-actions-rates {
589 .video-info-description {
590 font-size: 14px !important;
596 // Special case for iOS, that takes into account the width for fullscreens
597 #video-wrapper ::ng-deep .video-js.vjs-fullscreen {