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 {
21 border-bottom: 1px solid $separator-border-color;
25 &.theater-enabled #video-wrapper {
26 flex-direction: column;
27 justify-content: center;
34 $height: calc(100vh - #{$header-height} - #{$theater-bottom-space});
41 @include playlist-below-player;
47 font-weight: $font-semibold;
51 background-color: #000;
53 justify-content: center;
58 justify-content: center;
65 flex-direction: column;
68 justify-content: center;
69 background-color: #141313;
74 @media screen and (max-width: 1000px) {
78 @media screen and (max-width: 600px) {
87 background-color: var(--mainBackgroundColor);
89 border-bottom: 1px solid $separator-border-color;
93 background-color: #e4e4e4;
95 .playlist-display-name {
97 font-weight: $font-semibold;
102 color: $grey-foreground-color;
109 .playlist-index span:first-child::after {
116 my-video-playlist-element-miniature {
131 @include thumbnail-size-component(90px, 50px);
138 width: getPlayerWidth(66vh);
141 // VideoJS create an inner video player
144 position: relative !important;
148 @media screen and (max-width: 600px) {
152 height: getPlayerHeight(100vw)
166 font-weight: $font-semibold;
176 // Set min width for flex item
180 .video-info-first-row {
183 & > div:first-child {
189 min-height: 40px; // Align with the action buttons
191 font-weight: $font-semibold;
195 .video-info-date-views {
202 .video-info-channel {
203 font-weight: $font-semibold;
207 @include disable-default-a-behaviour;
209 color: var(--mainForegroundColor);
216 @include avatar(18px);
218 margin: -2px 2px 0 5px;
222 my-subscribe-button {
230 @include disable-default-a-behaviour;
235 color: var(--mainForegroundColor);
242 @include avatar(18px);
261 .video-actions-rates {
262 margin: 20px 0 10px 0;
266 height: 40px; // Align with the title
270 .action-button:not(:first-child),
272 my-video-actions-dropdown {
277 @include peertube-button;
278 @include grey-button;
279 @include button-with-icon(21px, 0, -1px);
280 @include apply-svg-color($grey-foreground-color);
283 font-weight: $font-semibold;
284 display: inline-block;
285 padding: 0 10px 0 10px;
292 &.action-button-like.activated {
293 background-color: $green;
296 @include apply-svg-color(#fff);
300 &.action-button-dislike.activated {
301 background-color: $red;
304 @include apply-svg-color(#fff);
308 &.action-button-save {
321 .video-info-likes-dislikes-bar {
322 $likes-bar-height: 2px;
323 height: $likes-bar-height;
324 margin-top: -$likes-bar-height;
326 background-color: $red;
332 background-color: $green;
338 .video-info-description {
342 .video-info-description-html {
343 @include peertube-word-wrap;
346 .glyphicon, .description-loading {
350 .description-loading {
351 display: inline-block;
354 .video-info-description-more {
356 font-weight: $font-semibold;
357 color: $grey-foreground-color;
367 .video-attributes .video-attribute {
372 .video-attribute-label {
375 display: inline-block;
376 color: $grey-foreground-color;
377 font-weight: $font-bold;
380 a.video-attribute-value {
381 @include disable-default-a-behaviour;
382 color: var(--mainForegroundColor);
389 &.video-attribute-tags {
390 .video-attribute-value:not(:nth-child(2)) {
399 /deep/ .other-videos {
401 flex-basis: $other-videos-width;
404 margin-top: 0 !important;
409 width: $other-videos-width;
422 display: inline-block;
427 // If the view is not expanded, take into account the menu
429 width: calc(100% - #{$menu-width});
432 @media screen and (max-width: $small-view) {
434 margin-left: $menu-width;
438 :host-context(.expanded) {
453 justify-content: flex-start;
454 background-color: rgba(0, 0, 0, 0.9);
457 .privacy-concerns-text {
462 @include disable-default-a-behaviour;
464 color: var(--mainColor);
465 transition: color 0.3s;
472 .privacy-concerns-okay {
473 background-color: var(--mainColor);
474 padding: 5px 8px 5px 7px;
478 transition: background-color 0.3s;
479 font-weight: $font-semibold;
482 background-color: #000;
487 @media screen and (max-width: 1600px) {
488 .video-bottom .video-info .video-attributes .video-attribute {
493 @media screen and (max-width: 1300px) {
498 .privacy-concerns-text {
504 @media screen and (max-width: 1100px) {
506 flex-direction: column;
507 justify-content: center;
510 @include playlist-below-player;
515 flex-direction: column;
517 /deep/ .other-videos {
518 padding-left: 0 !important;
520 /deep/ .video-miniature {
528 @media screen and (max-width: 600px) {
530 margin: 20px 0 0 0 !important;
535 .video-info-first-row {
545 /deep/ .other-videos .video-miniature {
546 flex-direction: column;
558 @media screen and (max-width: 450px) {
560 .action-button .icon-text {
561 display: none !important;
564 .video-info .video-info-first-row {
569 .video-info-date-views {
573 .video-actions-rates {
578 .video-info-description {
579 font-size: 14px !important;