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   transition: color 0.2s;
   8   font-weight: $font-semibold;
   9   color: pvar(--mainForegroundColor);
  10   margin-top: 10px;
  11   margin-bottom: 5px;
  12
  13   &:hover {
  14     text-decoration: none;
  15   }
  16
  17   &.blur-filter {
  18     filter: blur(3px);
  19     padding-left: 4px;
  20   }
  21 }
  22
  23 $play-overlay-transition: 0.2s ease;
  24 $play-overlay-height: 26px;
  25 $play-overlay-width: 18px;
  26
  27 @mixin miniature-thumbnail {
  28   @include disable-outline;
  29
  30   display: flex;
  31   flex-direction: column;
  32   position: relative;
  33   border-radius: 3px;
  34   overflow: hidden;
  35   width: $video-thumbnail-width;
  36   height: $video-thumbnail-height;
  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 @mixin miniature-rows {
 101   &:first-child {
 102     padding-top: 30px;
 103
 104     .section-title {
 105       border-top: none !important;
 106     }
 107   }
 108
 109   .section-title {
 110     font-size: 24px;
 111     font-weight: $font-semibold;
 112     padding-top: 15px;
 113     margin-bottom: 15px;
 114     display: flex;
 115     justify-content: space-between;
 116
 117     &:not(h2) {
 118       border-top: 1px solid $separator-border-color;
 119     }
 120
 121     a {
 122       &:hover, &:focus:not(.focus-visible), &:active {
 123         text-decoration: none;
 124         outline: none;
 125       }
 126
 127       color: pvar(--mainForegroundColor);
 128     }
 129   }
 130
 131   &.channel {
 132     .section-title {
 133       a {
 134         display: flex;
 135         width: fit-content;
 136         align-items: center;
 137
 138         img {
 139           @include channel-avatar(28px);
 140
 141           margin-right: 8px;
 142         }
 143       }
 144
 145       .followers {
 146         color: pvar(--greyForegroundColor);
 147         font-weight: normal;
 148         font-size: 14px;
 149         margin-left: 10px;
 150         position: relative;
 151         top: 2px;
 152       }
 153     }
 154   }
 155
 156   .show-more {
 157     position: relative;
 158     top: -5px;
 159     display: inline-block;
 160     font-size: 16px;
 161     text-transform: uppercase;
 162     color: pvar(--greyForegroundColor);
 163     margin-bottom: 10px;
 164     font-weight: $font-semibold;
 165     text-decoration: none;
 166   }
 167
 168   @media screen and (max-width: $mobile-view) {
 169     max-height: initial;
 170     overflow: initial;
 171
 172     .section-title {
 173       font-size: 17px;
 174       margin-left: 10px;
 175     }
 176   }
 177 }
 178
 179 // Use margin by default, or padding if $margin is false
 180 @mixin fluid-videos-miniature-margins ($margin: true, $min-margin: 0) {
 181   @if $margin {
 182     margin-left: $not-expanded-horizontal-margins !important;
 183     margin-right: $not-expanded-horizontal-margins !important;
 184   } @else {
 185     padding-left: $not-expanded-horizontal-margins !important;
 186     padding-right: $not-expanded-horizontal-margins !important;
 187   }
 188
 189   @media screen and (max-width: $mobile-view) {
 190     width: auto;
 191
 192     @if $margin {
 193       margin: $min-margin !important;
 194     } @else {
 195       padding: $min-margin !important;
 196     }
 197   }
 198
 199   @media screen and (min-width: #{breakpoint(fhd)}) {
 200     @if $margin {
 201       margin-left: 6vw !important;
 202       margin-right: 6vw !important;
 203     } @else {
 204       padding-left: 6vw !important;
 205       padding-right: 6vw !important;
 206     }
 207   }
 208 }
 209
 210 @mixin fluid-videos-miniature-layout {
 211   @include fluid-videos-miniature-margins;
 212
 213   @media screen and (max-width: $mobile-view) {
 214     .videos {
 215       text-align: center;
 216
 217       ::ng-deep .video-miniature {
 218         padding-right: 0;
 219         height: auto;
 220         width: 100%;
 221         margin-bottom: 25px;
 222
 223         .video-miniature-information {
 224           width: 100% !important;
 225           text-align: left;
 226
 227           span {
 228             width: 100%;
 229           }
 230         }
 231
 232         .video-thumbnail {
 233           border-radius: 0;
 234         }
 235       }
 236     }
 237   }
 238
 239   @media screen and (min-width: $mobile-view) {
 240     .videos {
 241       --miniature-min-width: #{$video-thumbnail-width - 15px};
 242       --miniature-max-width: #{$video-thumbnail-width};
 243
 244       display: grid;
 245       column-gap: 5px;
 246       grid-template-columns: repeat(
 247         auto-fill,
 248         minmax(
 249           var(--miniature-min-width),
 250           1fr
 251         )
 252       );
 253
 254       @media screen and (min-width: #{breakpoint(fhd)}) {
 255         column-gap: 1%;
 256         --miniature-min-width: #{$video-thumbnail-width};
 257       }
 258
 259       .video-wrapper {
 260         margin: 0 auto;
 261         width: 100%;
 262
 263         my-video-miniature {
 264           display: block;
 265           min-width: var(--miniature-min-width);
 266           max-width: var(--miniature-max-width);
 267         }
 268       }
 269     }
 270   }
 271 }