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: 13px;
  57
  58     .video-info-privacy {
  59       font-weight: $font-semibold;
  60
  61       &::after {
  62         content: '-';
  63         margin: 0 3px;
  64       }
  65     }
  66   }
  67
  68   .video-info-description {
  69     margin-top: 10px;
  70     color: pvar(--greyForegroundColor);
  71   }
  72 }
  73
  74 .miniature:not(.display-as-row) {
  75
  76   .miniature-name {
  77     margin-top: 10px;
  78     margin-bottom: 5px;
  79   }
  80
  81   .miniature-thumbnail {
  82     @include block-ratio($selector: '::ng-deep a');
  83
  84     margin-top: 10px;
  85     margin-bottom: 5px;
  86   }
  87 }
  88
  89 .miniature.display-as-row {
  90   --rowThumbnailWidth: #{$video-thumbnail-width};
  91   --rowThumbnailHeight: #{$video-thumbnail-height};
  92
  93   display: flex;
  94
  95   .miniature-name {
  96     @include ellipsis-multiline($video-miniature-row-name-font-size, 2);
  97   }
  98
  99   .miniature-thumbnail {
 100     @include margin-right(10px);
 101
 102     width: var(--rowThumbnailWidth);
 103     height: var(--rowThumbnailHeight);
 104   }
 105 }
 106
 107 @include on-small-main-col {
 108   .miniature.display-as-row {
 109     --rowThumbnailWidth: #{$video-thumbnail-medium-width};
 110     --rowThumbnailHeight: #{$video-thumbnail-medium-height};
 111   }
 112 }
 113
 114 @include on-mobile-main-col {
 115   .miniature.display-as-row {
 116     --rowThumbnailWidth: #{$video-thumbnail-small-width};
 117     --rowThumbnailHeight: #{$video-thumbnail-small-height};
 118   }
 119 }