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);
244 font-weight: $font-semibold;
245 display: inline-block;
248 background-color: transparent !important;
249 color: pvar(--actionButtonColor);
250 text-transform: uppercase;
260 &.action-button-support {
261 color: pvar(--supportButtonColor);
264 @include apply-svg-color(pvar(--supportButtonColor));
268 &.action-button-support {
270 ::ng-deep path:first-child {
271 fill: pvar(--supportButtonHeartColor) !important;
276 &.action-button-save {
284 @include margin-left(3px);
289 .video-info-likes-dislikes-bar-outer-container {
293 .video-info-likes-dislikes-bar-inner-container {
298 .video-info-likes-dislikes-bar {
299 $likes-bar-height: 2px;
300 height: $likes-bar-height;
301 margin-top: -$likes-bar-height;
303 background-color: #ccc;
309 background-color: #909090;
312 background-color: pvar(--activatedActionButtonColor);
319 .video-info-description {
320 @include margin-left($video-info-margin-left);
321 @include margin-right(0);
327 .video-info-description-html {
328 @include peertube-word-wrap;
331 text-decoration: none;
336 .description-loading {
337 @include margin-left(3px);
340 .description-loading {
341 display: inline-block;
344 .video-info-description-more {
346 font-weight: $font-semibold;
347 color: pvar(--greyForegroundColor);
358 @include margin-left($video-info-margin-left);
361 .video-attributes .video-attribute {
366 .video-attribute-label {
367 @include padding-right(5px);
370 display: inline-block;
371 color: pvar(--greyForegroundColor);
372 font-weight: $font-bold;
375 a.video-attribute-value {
376 @include disable-default-a-behaviour;
377 color: pvar(--mainForegroundColor);
384 &.video-attribute-tags {
385 .video-attribute-value:not(:nth-child(2)) {
395 my-recommended-videos {
396 @include padding-left(15px);
403 display: inline-block;
408 // If the view is not expanded, take into account the menu
410 z-index: z(dropdown) + 1;
411 width: calc(100% - #{$menu-width});
414 @media screen and (max-width: $small-view) {
416 @include margin-left($menu-width - 15px); // Menu is absolute
420 :host-context(.expanded) {
422 @include margin-left(-15px);
431 z-index: z(privacymsg);
438 justify-content: space-between;
439 background-color: rgba(0, 0, 0, 0.9);
442 .privacy-concerns-text {
447 @include disable-default-a-behaviour;
449 color: pvar(--mainColor);
450 transition: color 0.3s;
457 .privacy-concerns-button {
458 @include margin-left(auto);
460 padding: 5px 8px 5px 7px;
464 transition: background-color 0.3s;
465 font-weight: $font-semibold;
468 background-color: #000;
472 .privacy-concerns-okay {
473 @include margin-left(10px);
475 background-color: pvar(--mainColor);
479 @media screen and (max-width: 1600px) {
480 .video-bottom .video-info .video-attributes .video-attribute {
485 @media screen and (max-width: 1300px) {
490 .privacy-concerns-text {
496 // Use the same breakpoint than in the typescript component to display the other video miniatures as row
497 @media screen and (max-width: 1100px) {
499 flex-direction: column;
500 justify-content: center;
502 my-video-watch-playlist ::ng-deep .playlist {
503 @include playlist-below-player;
508 flex-direction: column;
511 my-recommended-videos {
512 @include padding-left(0);
516 @media screen and (max-width: 600px) {
518 margin-top: 20px !important;
519 padding-bottom: 20px !important;
524 .video-info-first-row {
539 @media screen and (max-width: 450px) {
541 .action-button .icon-text {
542 display: none !important;
545 .video-info .video-info-first-row {
550 .video-info-date-views {
554 .video-actions-rates {
559 .video-info-description {
560 font-size: 14px !important;
566 // Special case for iOS, that takes into account the width for fullscreens
567 #video-wrapper ::ng-deep .video-js.vjs-fullscreen {