client/src/sass/include/_miniature.scss

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