3 @import '_bootstrap-variables';
6 $other-videos-width: 260px;
7 $player-factor: 1.7; // 16/9
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 {
19 border-bottom: 1px solid $separator-border-color;
23 &.theater-enabled #video-wrapper {
24 flex-direction: column;
25 justify-content: center;
32 $height: calc(100vh - #{$header-height} - #{$theater-bottom-space});
39 @include playlist-below-player;
45 font-weight: $font-semibold;
49 background-color: #000;
51 justify-content: center;
57 flex-direction: column;
60 justify-content: center;
61 background-color: #141313;
66 @media screen and (max-width: 1000px) {
70 @media screen and (max-width: 600px) {
78 background-color: var(--mainBackgroundColor);
83 background-color: #e4e4e4;
85 .playlist-display-name {
87 font-weight: $font-semibold;
92 color: $grey-foreground-color;
99 .playlist-index span:first-child::after {
106 my-video-playlist-element-miniature {
121 @include thumbnail-size-component(90px, 50px);
128 width: getPlayerWidth(66vh);
131 // VideoJS create an inner video player
134 position: relative !important;
138 @media screen and (max-width: 600px) {
142 height: getPlayerHeight(100vw)
156 font-weight: $font-semibold;
166 // Set min width for flex item
170 .video-info-first-row {
173 & > div:first-child {
179 min-height: 40px; // Align with the action buttons
181 font-weight: $font-semibold;
185 .video-info-date-views {
192 .video-info-channel {
193 font-weight: $font-semibold;
197 @include disable-default-a-behaviour;
199 color: var(--mainForegroundColor);
206 @include avatar(18px);
208 margin: -2px 2px 0 5px;
212 my-subscribe-button {
220 @include disable-default-a-behaviour;
225 color: var(--mainForegroundColor);
232 @include avatar(18px);
251 .video-actions-rates {
252 margin: 20px 0 10px 0;
256 height: 40px; // Align with the title
260 .action-button:not(:first-child), .action-dropdown {
265 @include peertube-button;
266 @include grey-button;
267 @include button-with-icon(21px, 0, -1px);
268 @include apply-svg-color($grey-foreground-color);
271 font-weight: $font-semibold;
272 display: inline-block;
273 padding: 0 10px 0 10px;
280 &.action-button-like.activated {
281 background-color: $green;
284 @include apply-svg-color(#fff);
288 &.action-button-dislike.activated {
289 background-color: $red;
292 @include apply-svg-color(#fff);
296 &.action-button-save {
309 display: inline-block;
311 .dropdown-menu .dropdown-item {
312 @include dropdown-with-icon-item;
317 .video-info-likes-dislikes-bar {
318 $likes-bar-height: 2px;
319 height: $likes-bar-height;
320 margin-top: -$likes-bar-height;
322 background-color: $red;
328 background-color: $green;
334 .video-info-description {
338 .video-info-description-html {
339 @include peertube-word-wrap;
342 .glyphicon, .description-loading {
346 .description-loading {
347 display: inline-block;
350 .video-info-description-more {
352 font-weight: $font-semibold;
353 color: $grey-foreground-color;
363 .video-attributes .video-attribute {
368 .video-attribute-label {
371 display: inline-block;
372 color: $grey-foreground-color;
373 font-weight: $font-bold;
376 a.video-attribute-value {
377 @include disable-default-a-behaviour;
378 color: var(--mainForegroundColor);
385 &.video-attribute-tags {
386 .video-attribute-value:not(:nth-child(2)) {
395 /deep/ .other-videos {
397 flex-basis: $other-videos-width;
400 margin-top: 0 !important;
405 width: $other-videos-width;
418 display: inline-block;
423 // If the view is not expanded, take into account the menu
425 width: calc(100% - #{$menu-width});
428 @media screen and (max-width: $small-view) {
430 margin-left: $menu-width;
434 :host-context(.expanded) {
449 justify-content: flex-start;
450 background-color: rgba(0, 0, 0, 0.9);
453 .privacy-concerns-text {
458 @include disable-default-a-behaviour;
460 color: var(--mainColor);
461 transition: color 0.3s;
468 .privacy-concerns-okay {
469 background-color: var(--mainColor);
470 padding: 5px 8px 5px 7px;
474 transition: background-color 0.3s;
475 font-weight: $font-semibold;
478 background-color: #000;
483 @media screen and (max-width: 1600px) {
484 .video-bottom .video-info .video-attributes .video-attribute {
489 @media screen and (max-width: 1300px) {
494 .privacy-concerns-text {
500 @media screen and (max-width: 1100px) {
502 flex-direction: column;
504 /deep/ .other-videos {
505 padding-left: 0 !important;
507 /deep/ .video-miniature {
515 @media screen and (max-width: 900px) {
517 flex-direction: column;
518 justify-content: center;
522 justify-content: center;
526 @include playlist-below-player;
531 @media screen and (max-width: 600px) {
533 margin: 20px 0 0 0 !important;
538 .video-info-first-row {
548 /deep/ .other-videos .video-miniature {
549 flex-direction: column;
561 @media screen and (max-width: 450px) {
563 .action-button .icon-text {
564 display: none !important;
567 .video-info .video-info-first-row {
572 .video-info-date-views {
576 .video-actions-rates {
581 .video-info-description {
582 font-size: 14px !important;