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;
60 justify-content: center;
67 flex-direction: column;
70 justify-content: center;
71 background-color: #141313;
76 @media screen and (max-width: 1000px) {
80 @media screen and (max-width: 600px) {
87 max-width: getPlayerWidth(66vh);
90 // VideoJS create an inner video player
93 position: relative !important;
97 @media screen and (max-width: 600px) {
101 height: getPlayerHeight(100vw)
111 .flex-direction-column {
112 flex-direction: column;
120 font-weight: $font-semibold;
130 // Set min width for flex item
134 .video-info-first-row {
137 & > div:first-child {
143 min-height: 40px; // Align with the action buttons
145 font-weight: $font-semibold;
149 .video-info-first-row-bottom {
156 .video-info-date-views {
163 .video-info-channel {
164 font-weight: $font-semibold;
168 @include disable-default-a-behaviour;
170 color: var(--mainForegroundColor);
177 @include avatar(18px);
179 margin: -2px 5px 0 0;
183 .video-info-channel-left {
186 .video-info-channel-left-links {
188 flex-direction: column;
199 my-subscribe-button {
209 .video-actions-rates {
216 height: 40px; // Align with the title
220 .action-button:not(:first-child),
222 my-video-actions-dropdown {
226 ::ng-deep.action-button {
227 @include peertube-button;
228 @include button-with-icon(21px, 0, -1px);
229 @include apply-svg-color(var(--actionButtonColor));
232 font-weight: $font-semibold;
233 display: inline-block;
234 padding: 0 10px 0 10px;
236 background-color: transparent !important;
237 color: var(--actionButtonColor);
238 text-transform: uppercase;
248 &.action-button-like,
249 &.action-button-dislike {
250 filter: brightness(120%);
257 &.action-button-like.activated {
259 color: $activated-action-button-color;
263 @include apply-svg-color($activated-action-button-color);
267 &.action-button-dislike.activated {
269 color: $activated-action-button-color;
273 @include apply-svg-color($activated-action-button-color);
277 &.action-button-support {
278 color: var(--supportButtonColor);
281 @include apply-svg-color(var(--supportButtonColor));
285 &.action-button-support {
287 ::ng-deep path:first-child {
288 fill: var(--supportButtonHeartColor) !important;
293 &.action-button-save {
306 .video-info-likes-dislikes-bar-outer-container {
310 .video-info-likes-dislikes-bar-inner-container {
315 .video-info-likes-dislikes-bar {
316 $likes-bar-height: 2px;
317 height: $likes-bar-height;
318 margin-top: -$likes-bar-height;
320 background-color: #ccc;
326 background-color: #909090;
329 background-color: $activated-action-button-color;
336 .video-info-description {
338 margin-left: $video-info-margin-left;
341 .video-info-description-html {
342 @include peertube-word-wrap;
345 text-decoration: none;
349 .glyphicon, .description-loading {
353 .description-loading {
354 display: inline-block;
357 .video-info-description-more {
359 font-weight: $font-semibold;
360 color: $grey-foreground-color;
371 margin-left: $video-info-margin-left;
374 .video-attributes .video-attribute {
379 .video-attribute-label {
382 display: inline-block;
383 color: $grey-foreground-color;
384 font-weight: $font-bold;
387 a.video-attribute-value {
388 @include disable-default-a-behaviour;
389 color: var(--mainForegroundColor);
396 &.video-attribute-tags {
397 .video-attribute-value:not(:nth-child(2)) {
406 ::ng-deep .other-videos {
408 min-width: $video-miniature-width;
410 @media screen and (min-width: 1800px - (3* $video-miniature-width)) {
415 margin: 0 !important;
427 @media screen and (max-width: 1800px - (3* $video-miniature-width)) {
430 @media screen and (max-width: 500px) {
439 display: inline-block;
444 // If the view is not expanded, take into account the menu
446 width: calc(100% - #{$menu-width});
449 @media screen and (max-width: $small-view) {
451 margin-left: $menu-width - 15px; // Menu is absolute
455 :host-context(.expanded) {
471 justify-content: flex-start;
472 background-color: rgba(0, 0, 0, 0.9);
475 .privacy-concerns-text {
480 @include disable-default-a-behaviour;
482 color: var(--mainColor);
483 transition: color 0.3s;
490 .privacy-concerns-okay {
491 background-color: var(--mainColor);
492 padding: 5px 8px 5px 7px;
496 transition: background-color 0.3s;
497 font-weight: $font-semibold;
500 background-color: #000;
505 @media screen and (max-width: 1600px) {
506 .video-bottom .video-info .video-attributes .video-attribute {
511 @media screen and (max-width: 1300px) {
516 .privacy-concerns-text {
522 @media screen and (max-width: 1100px) {
524 flex-direction: column;
525 justify-content: center;
527 my-video-watch-playlist ::ng-deep .playlist {
528 @include playlist-below-player;
533 flex-direction: column;
535 ::ng-deep .other-videos {
536 padding-left: 0 !important;
538 ::ng-deep .video-miniature {
546 @media screen and (max-width: 600px) {
548 margin: 20px 0 0 0 !important;
553 .video-info-first-row {
563 ::ng-deep .other-videos .video-miniature {
564 flex-direction: column;
576 @media screen and (max-width: 450px) {
578 .action-button .icon-text {
579 display: none !important;
582 .video-info .video-info-first-row {
587 .video-info-date-views {
591 .video-actions-rates {
596 .video-info-description {
597 font-size: 14px !important;