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   $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     margin-left: var(--gridVideosMiniatureMargins) !important;
 107     margin-right: var(--gridVideosMiniatureMargins) !important;
 108   } @else {
 109     padding-left: var(--gridVideosMiniatureMargins) !important;
 110     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   @include grid-videos-miniature-margins;
 122
 123   @media screen and (min-width: $mobile-view) {
 124     .videos,
 125     .playlists {
 126       --miniatureMinWidth: #{$video-thumbnail-width - 25px};
 127       --miniatureMaxWidth: #{$video-thumbnail-width};
 128
 129       display: grid;
 130       column-gap: 30px;
 131       grid-template-columns: repeat(
 132         auto-fill,
 133         minmax(var(--miniatureMinWidth), 1fr)
 134       );
 135
 136       .video-wrapper,
 137       .playlist-wrapper {
 138         margin: 0 auto;
 139         width: 100%;
 140
 141         my-video-miniature,
 142         my-video-playlist-miniature {
 143           display: block;
 144           min-width: var(--miniatureMinWidth);
 145           max-width: var(--miniatureMaxWidth);
 146         }
 147       }
 148
 149       @media screen and (min-width: #{breakpoint(xm)}) {
 150         column-gap: 15px;
 151       }
 152
 153       @media screen and (min-width: #{breakpoint(fhd)}) {
 154         column-gap: 2%;
 155       }
 156     }
 157   }
 158 }