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       width: 0;
  56       height: 0;
  57
  58       position: absolute;
  59       left: 50%;
  60       top: 50%;
  61       transform: translate(-50%, -50%) scale(0.5);
  62
  63       border-top: ($play-overlay-height / 2) solid transparent;
  64       border-bottom: ($play-overlay-height / 2) solid transparent;
  65
  66       border-left: $play-overlay-width solid rgba(255, 255, 255, 0.95);
  67     }
  68   }
  69
  70   &:hover {
  71     text-decoration: none !important;
  72
  73     .play-overlay {
  74       opacity: 1;
  75
  76       .icon {
  77         transform: translate(-50%, -50%) scale(1);
  78       }
  79     }
  80   }
  81
  82   &.focus-visible {
  83     box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
  84     outline: none;
  85   }
  86
  87   img {
  88     width: inherit;
  89     height: inherit;
  90
  91     &.blur-filter {
  92       filter: blur(20px);
  93       transform : scale(1.03);
  94     }
  95   }
  96 }
  97
  98 @mixin thumbnail-size-component ($width, $height) {
  99   ::ng-deep .video-thumbnail {
 100     width: $width;
 101     height: $height;
 102   }
 103 }
 104
 105 @mixin static-thumbnail-overlay {
 106   display: inline-block;
 107   background-color: rgba(0, 0, 0, 0.7);
 108   color: #fff;
 109 }
 110
 111 @mixin miniature-rows {
 112   &:first-child {
 113     padding-top: 30px;
 114
 115     .section-title {
 116       border-top: none !important;
 117     }
 118   }
 119
 120   .section-title {
 121     font-size: 24px;
 122     font-weight: $font-semibold;
 123     padding-top: 15px;
 124     margin-bottom: 15px;
 125     display: flex;
 126     justify-content: space-between;
 127     border-top: 1px solid $separator-border-color;
 128
 129     a {
 130       &:hover, &:focus:not(.focus-visible), &:active {
 131         text-decoration: none;
 132         outline: none;
 133       }
 134
 135       color: pvar(--mainForegroundColor);
 136     }
 137   }
 138
 139   &.channel {
 140     .section-title {
 141       a {
 142         display: flex;
 143         width: fit-content;
 144         align-items: center;
 145
 146         img {
 147           @include avatar(28px);
 148
 149           margin-right: 8px;
 150         }
 151       }
 152
 153       .followers {
 154         color: pvar(--greyForegroundColor);
 155         font-weight: normal;
 156         font-size: 14px;
 157         margin-left: 10px;
 158         position: relative;
 159         top: 2px;
 160       }
 161     }
 162   }
 163
 164   .show-more {
 165     position: relative;
 166     top: -5px;
 167     display: inline-block;
 168     font-size: 16px;
 169     text-transform: uppercase;
 170     color: pvar(--greyForegroundColor);
 171     margin-bottom: 10px;
 172     font-weight: $font-semibold;
 173     text-decoration: none;
 174   }
 175
 176   @media screen and (max-width: $mobile-view) {
 177     max-height: initial;
 178     overflow: initial;
 179
 180     .section-title {
 181       font-size: 17px;
 182       margin-left: 10px;
 183     }
 184   }
 185 }
 186
 187 @mixin fluid-videos-miniature-layout {
 188   margin-left: 3vw !important;
 189   margin-right: 3vw !important;
 190
 191   @media screen and (max-width: $mobile-view) {
 192     width: auto;
 193     margin: 0 !important;
 194
 195     .videos {
 196       text-align: center;
 197
 198       ::ng-deep .video-miniature {
 199         padding-right: 0;
 200         height: auto;
 201         width: 100%;
 202         margin-bottom: 25px;
 203
 204         .video-miniature-information {
 205           width: 100% !important;
 206           text-align: left;
 207
 208           span {
 209             width: 100%;
 210           }
 211         }
 212
 213         .video-thumbnail {
 214           border-radius: 0;
 215         }
 216       }
 217     }
 218   }
 219
 220   @media screen and (min-width: #{breakpoint(fhd)}) {
 221     margin-left: 6vw !important;
 222     margin-right: 6vw !important;
 223   }
 224
 225   @media screen and (min-width: $mobile-view) {
 226
 227     .videos {
 228       --miniature-min-width: #{$video-thumbnail-width - 15px};
 229       --miniature-max-width: #{$video-thumbnail-width};
 230
 231       display: grid;
 232       column-gap: 5px;
 233       grid-template-columns: repeat(
 234         auto-fill,
 235         minmax(
 236           var(--miniature-min-width),
 237           1fr
 238         )
 239       );
 240
 241       @media screen and (min-width: #{breakpoint(fhd)}) {
 242         column-gap: 1%;
 243         --miniature-min-width: #{$video-thumbnail-width};
 244       }
 245
 246       .video-wrapper {
 247         margin: 0 auto;
 248         width: 100%;
 249
 250         my-video-miniature {
 251           display: block;
 252           min-width: var(--miniature-min-width);
 253           max-width: var(--miniature-max-width);
 254         }
 255       }
 256     }
 257   }
 258 }