client/src/sass/include/_miniature.scss

   1 @use '_variables';
   2 @use '_mixins';
   3
   4 @mixin miniature-name {
   5   @include ellipsis-multiline(1.1em, 2);
   6   @include peertube-word-wrap(false);
   7
   8   transition: color 0.2s;
   9   font-weight: $font-semibold;
  10   color: pvar(--mainForegroundColor);
  11
  12   &:hover {
  13     text-decoration: none;
  14   }
  15
  16   &.blur-filter {
  17     @include padding-left(4px);
  18
  19     filter: blur(3px);
  20   }
  21 }
  22
  23 @mixin miniature-thumbnail {
  24   $play-overlay-transition: 0.2s ease;
  25   $play-overlay-height: 26px;
  26   $play-overlay-width: 18px;
  27
  28   @include disable-outline;
  29
  30   display: flex;
  31   flex-direction: column;
  32   position: relative;
  33   border-radius: 3px;
  34   width: 100%;
  35   height: 100%;
  36   overflow: hidden;
  37   background-color: #ececec;
  38   transition: filter $play-overlay-transition;
  39
  40   .play-overlay {
  41     position: absolute;
  42     right: 0;
  43     bottom: 0;
  44
  45     width: inherit;
  46     height: inherit;
  47     opacity: 0;
  48     background-color: rgba(0, 0, 0, 0.3);
  49
  50     &,
  51     .icon {
  52       transition: all $play-overlay-transition;
  53     }
  54
  55     .icon {
  56       @include play-icon($play-overlay-width, $play-overlay-height);
  57     }
  58   }
  59
  60   &:hover {
  61     text-decoration: none !important;
  62
  63     .play-overlay {
  64       opacity: 1;
  65
  66       .icon {
  67         transform: translate(-50%, -50%) scale(1);
  68       }
  69     }
  70   }
  71
  72   &.focus-visible {
  73     box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
  74     outline: none;
  75   }
  76
  77   img {
  78     width: inherit;
  79     height: inherit;
  80
  81     &.blur-filter {
  82       filter: blur(20px);
  83       transform: scale(1.03);
  84     }
  85   }
  86 }
  87
  88 @mixin thumbnail-size-component ($width, $height) {
  89   ::ng-deep .video-thumbnail {
  90     width: $width;
  91     height: $height;
  92   }
  93 }
  94
  95 @mixin static-thumbnail-overlay {
  96   display: inline-block;
  97   background-color: rgba(0, 0, 0, 0.7);
  98   color: #fff;
  99 }
 100
 101 // Use margin by default, or padding if $margin is false
 102 @mixin grid-videos-miniature-margins ($margin: true, $min-margin: 0) {
 103   --gridVideosMiniatureMargins: #{pvar(--videosHorizontalMarginContent)};
 104
 105   @if $margin {
 106     @include margin-left(var(--gridVideosMiniatureMargins) !important);
 107     @include margin-right(var(--gridVideosMiniatureMargins) !important);
 108   } @else {
 109     @include padding-left(var(--gridVideosMiniatureMargins) !important);
 110     @include padding-right(var(--gridVideosMiniatureMargins) !important);
 111   }
 112
 113   @media screen and (max-width: $mobile-view) {
 114     --gridVideosMiniatureMargins: #{$min-margin};
 115
 116     width: auto;
 117   }
 118 }
 119
 120 @mixin grid-videos-miniature-layout {
 121   @media screen and (min-width: $mobile-view) {
 122     .videos,
 123     .playlists {
 124       --miniatureMinWidth: #{$video-thumbnail-width - 25px};
 125       --miniatureMaxWidth: #{$video-thumbnail-width};
 126
 127       display: grid;
 128       column-gap: 30px;
 129       grid-template-columns: repeat(
 130         auto-fill,
 131         minmax(var(--miniatureMinWidth), 1fr)
 132       );
 133
 134       .video-wrapper,
 135       .playlist-wrapper {
 136         margin: 0 auto;
 137         width: 100%;
 138
 139         my-video-miniature,
 140         my-video-playlist-miniature {
 141           display: block;
 142           min-width: var(--miniatureMinWidth);
 143           max-width: var(--miniatureMaxWidth);
 144         }
 145       }
 146
 147       @media screen and (min-width: #{breakpoint(xm)}) {
 148         column-gap: 15px;
 149       }
 150
 151       @media screen and (min-width: #{breakpoint(fhd)}) {
 152         column-gap: 2%;
 153       }
 154     }
 155   }
 156 }
 157
 158 @mixin grid-videos-miniature-layout-with-margins {
 159   @include grid-videos-miniature-margins;
 160   @include grid-videos-miniature-layout;
 161 }