client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss

   1 @use '_variables' as *;
   2 @use '_mixins' as *;
   3 @use '_miniature' as *;
   4
   5 .miniature {
   6   display: inline-block;
   7   width: 100%;
   8
   9   &.no-videos:not(.to-manage) {
  10     a {
  11       cursor: default !important;
  12     }
  13   }
  14
  15   &.to-manage,
  16   &.no-videos {
  17     .play-overlay {
  18       display: none;
  19     }
  20   }
  21 }
  22
  23 .miniature-thumbnail {
  24   @include miniature-thumbnail;
  25
  26   .miniature-playlist-info-overlay {
  27     @include static-thumbnail-overlay;
  28
  29     position: absolute;
  30     right: 0;
  31     bottom: 0;
  32     height: 100%;
  33     padding: 0 10px;
  34     display: flex;
  35     align-items: center;
  36     font-size: 14px;
  37     font-weight: $font-semibold;
  38   }
  39 }
  40
  41 .miniature-info {
  42
  43   .miniature-name {
  44     @include miniature-name;
  45   }
  46
  47   .by {
  48     @include disable-default-a-behaviour;
  49
  50     display: block;
  51     color: pvar(--greyForegroundColor);
  52   }
  53
  54   .privacy-date {
  55     margin-top: 5px;
  56     font-size: 14px;
  57
  58     .privacy {
  59       font-weight: $font-semibold;
  60
  61       &::after {
  62         content: '-';
  63         margin: 0 3px;
  64       }
  65     }
  66   }
  67
  68   .description {
  69     @include peertube-word-wrap;
  70
  71     margin-top: 10px;
  72     color: pvar(--greyForegroundColor);
  73   }
  74 }
  75
  76 .miniature:not(.display-as-row) {
  77
  78   .miniature-name {
  79     margin-top: 10px;
  80     margin-bottom: 5px;
  81   }
  82
  83   .miniature-thumbnail {
  84     @include block-ratio($selector: '::ng-deep a');
  85
  86     margin-top: 10px;
  87     margin-bottom: 5px;
  88   }
  89 }
  90
  91 .miniature.display-as-row {
  92   --rowThumbnailWidth: #{$video-thumbnail-width};
  93   --rowThumbnailHeight: #{$video-thumbnail-height};
  94
  95   display: flex;
  96
  97   .miniature-name {
  98     font-size: $video-miniature-row-name-font-size;
  99   }
 100
 101   .miniature-thumbnail {
 102     @include margin-right(10px);
 103
 104     min-width: var(--rowThumbnailWidth);
 105     max-width: var(--rowThumbnailWidth);
 106     height: var(--rowThumbnailHeight);
 107   }
 108 }
 109
 110 @include on-small-main-col {
 111   .miniature.display-as-row {
 112     --rowThumbnailWidth: #{$video-thumbnail-medium-width};
 113     --rowThumbnailHeight: #{$video-thumbnail-medium-height};
 114   }
 115 }
 116
 117 @include on-mobile-main-col {
 118   .miniature.display-as-row {
 119     --rowThumbnailWidth: #{$video-thumbnail-small-width};
 120     --rowThumbnailHeight: #{$video-thumbnail-small-height};
 121   }
 122 }