3 @import '_bootstrap-variables';
6 $player-factor: 1.7; // 16/9
7 $video-info-margin-left: 44px;
9 @function getPlayerHeight($width){
10 @return calc(#{$width} / #{$player-factor})
13 @function getPlayerWidth($height){
14 @return calc(#{$height} * #{$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 &.theater-enabled #video-wrapper {
27 flex-direction: column;
28 justify-content: center;
35 $height: calc(100vh - #{$header-height} - #{$theater-bottom-space});
42 my-video-watch-playlist ::ng-deep .playlist {
43 @include playlist-below-player;
49 font-weight: $font-semibold;
53 background-color: #000;
55 justify-content: center;
59 justify-content: center;
66 flex-direction: column;
69 justify-content: center;
70 background-color: #141313;
75 @media screen and (max-width: 1000px) {
79 @media screen and (max-width: 600px) {
86 max-width: getPlayerWidth(66vh);
89 // VideoJS create an inner video player
92 position: relative !important;
96 @media screen and (max-width: 600px) {
100 height: getPlayerHeight(100vw)
110 .flex-direction-column {
111 flex-direction: column;
119 font-weight: $font-semibold;
129 // Set min width for flex item
133 .video-info-first-row {
136 & > div:first-child {
142 min-height: 40px; // Align with the action buttons
144 font-weight: $font-semibold;
148 .video-info-first-row-bottom {
155 .video-info-date-views {
162 .video-info-channel {
163 font-weight: $font-semibold;
167 @include disable-default-a-behaviour;
169 color: pvar(--mainForegroundColor);
176 @include avatar(18px);
178 margin: -2px 5px 0 0;
182 .video-info-channel-left {
185 .video-info-channel-left-links {
187 flex-direction: column;
202 my-subscribe-button {
212 .video-actions-rates {
219 height: 40px; // Align with the title
223 .action-button:not(:first-child),
225 my-video-actions-dropdown {
229 ::ng-deep.action-button {
230 @include peertube-button;
231 @include button-with-icon(21px, 0, -1px);
232 @include apply-svg-color(pvar(--actionButtonColor));
235 font-weight: $font-semibold;
236 display: inline-block;
237 padding: 0 10px 0 10px;
239 background-color: transparent !important;
240 color: pvar(--actionButtonColor);
241 text-transform: uppercase;
251 &.action-button-like,
252 &.action-button-dislike {
253 filter: brightness(120%);
260 &.action-button-like.activated {
262 color: pvar(--activatedActionButtonColor);
266 @include apply-svg-color(pvar(--activatedActionButtonColor));
270 &.action-button-dislike.activated {
272 color: pvar(--activatedActionButtonColor);
276 @include apply-svg-color(pvar(--activatedActionButtonColor));
280 &.action-button-support {
281 color: pvar(--supportButtonColor);
284 @include apply-svg-color(pvar(--supportButtonColor));
288 &.action-button-support {
290 ::ng-deep path:first-child {
291 fill: pvar(--supportButtonHeartColor) !important;
296 &.action-button-save {
309 .video-info-likes-dislikes-bar-outer-container {
313 .video-info-likes-dislikes-bar-inner-container {
318 .video-info-likes-dislikes-bar {
319 $likes-bar-height: 2px;
320 height: $likes-bar-height;
321 margin-top: -$likes-bar-height;
323 background-color: #ccc;
329 background-color: #909090;
332 background-color: pvar(--activatedActionButtonColor);
339 .video-info-description {
341 margin-left: $video-info-margin-left;
344 .video-info-description-html {
345 @include peertube-word-wrap;
348 text-decoration: none;
352 .glyphicon, .description-loading {
356 .description-loading {
357 display: inline-block;
360 .video-info-description-more {
362 font-weight: $font-semibold;
363 color: pvar(--greyForegroundColor);
374 margin-left: $video-info-margin-left;
377 .video-attributes .video-attribute {
382 .video-attribute-label {
385 display: inline-block;
386 color: pvar(--greyForegroundColor);
387 font-weight: $font-bold;
390 a.video-attribute-value {
391 @include disable-default-a-behaviour;
392 color: pvar(--mainForegroundColor);
399 &.video-attribute-tags {
400 .video-attribute-value:not(:nth-child(2)) {
409 ::ng-deep .other-videos {
411 min-width: $video-miniature-width;
413 @media screen and (min-width: 1800px - (3* $video-miniature-width)) {
418 margin: 0 !important;
425 padding-bottom: 20px;
430 @media screen and (max-width: 1800px - (3* $video-miniature-width)) {
433 @media screen and (max-width: 500px) {
442 display: inline-block;
447 // If the view is not expanded, take into account the menu
449 z-index: z(dropdown) + 1;
450 width: calc(100% - #{$menu-width});
453 @media screen and (max-width: $small-view) {
455 margin-left: $menu-width - 15px; // Menu is absolute
459 :host-context(.expanded) {
469 z-index: z(privacymsg);
476 justify-content: space-between;
477 background-color: rgba(0, 0, 0, 0.9);
480 .privacy-concerns-text {
485 @include disable-default-a-behaviour;
487 color: pvar(--mainColor);
488 transition: color 0.3s;
495 .privacy-concerns-button {
496 padding: 5px 8px 5px 7px;
501 transition: background-color 0.3s;
502 font-weight: $font-semibold;
505 background-color: #000;
509 .privacy-concerns-okay {
510 background-color: pvar(--mainColor);
515 @media screen and (max-width: 1600px) {
516 .video-bottom .video-info .video-attributes .video-attribute {
521 @media screen and (max-width: 1300px) {
526 .privacy-concerns-text {
532 @media screen and (max-width: 1100px) {
534 flex-direction: column;
535 justify-content: center;
537 my-video-watch-playlist ::ng-deep .playlist {
538 @include playlist-below-player;
543 flex-direction: column;
545 ::ng-deep .other-videos {
546 padding-left: 0 !important;
548 ::ng-deep .video-miniature {
556 @media screen and (max-width: 600px) {
558 margin-top: 20px !important;
559 padding-bottom: 20px !important;
564 .video-info-first-row {
574 ::ng-deep .other-videos .video-miniature {
575 flex-direction: column;
587 @media screen and (max-width: 450px) {
589 .action-button .icon-text {
590 display: none !important;
593 .video-info .video-info-first-row {
598 .video-info-date-views {
602 .video-actions-rates {
607 .video-info-description {
608 font-size: 14px !important;