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
 128     &:not(h2) {
 129       border-top: 1px solid $separator-border-color;
 130     }
 131
 132     a {
 133       &:hover, &:focus:not(.focus-visible), &:active {
 134         text-decoration: none;
 135         outline: none;
 136       }
 137
 138       color: pvar(--mainForegroundColor);
 139     }
 140   }
 141
 142   &.channel {
 143     .section-title {
 144       a {
 145         display: flex;
 146         width: fit-content;
 147         align-items: center;
 148
 149         img {
 150           @include avatar(28px);
 151
 152           margin-right: 8px;
 153         }
 154       }
 155
 156       .followers {
 157         color: pvar(--greyForegroundColor);
 158         font-weight: normal;
 159         font-size: 14px;
 160         margin-left: 10px;
 161         position: relative;
 162         top: 2px;
 163       }
 164     }
 165   }
 166
 167   .show-more {
 168     position: relative;
 169     top: -5px;
 170     display: inline-block;
 171     font-size: 16px;
 172     text-transform: uppercase;
 173     color: pvar(--greyForegroundColor);
 174     margin-bottom: 10px;
 175     font-weight: $font-semibold;
 176     text-decoration: none;
 177   }
 178
 179   @media screen and (max-width: $mobile-view) {
 180     max-height: initial;
 181     overflow: initial;
 182
 183     .section-title {
 184       font-size: 17px;
 185       margin-left: 10px;
 186     }
 187   }
 188 }
 189
 190 @mixin fluid-videos-miniature-layout {
 191   margin-left: $not-expanded-horizontal-margins !important;
 192   margin-right: $not-expanded-horizontal-margins !important;
 193
 194   @media screen and (max-width: $mobile-view) {
 195     width: auto;
 196     margin: 0 !important;
 197
 198     .videos {
 199       text-align: center;
 200
 201       ::ng-deep .video-miniature {
 202         padding-right: 0;
 203         height: auto;
 204         width: 100%;
 205         margin-bottom: 25px;
 206
 207         .video-miniature-information {
 208           width: 100% !important;
 209           text-align: left;
 210
 211           span {
 212             width: 100%;
 213           }
 214         }
 215
 216         .video-thumbnail {
 217           border-radius: 0;
 218         }
 219       }
 220     }
 221   }
 222
 223   @media screen and (min-width: #{breakpoint(fhd)}) {
 224     margin-left: 6vw !important;
 225     margin-right: 6vw !important;
 226   }
 227
 228   @media screen and (min-width: $mobile-view) {
 229
 230     .videos {
 231       --miniature-min-width: #{$video-thumbnail-width - 15px};
 232       --miniature-max-width: #{$video-thumbnail-width};
 233
 234       display: grid;
 235       column-gap: 5px;
 236       grid-template-columns: repeat(
 237         auto-fill,
 238         minmax(
 239           var(--miniature-min-width),
 240           1fr
 241         )
 242       );
 243
 244       @media screen and (min-width: #{breakpoint(fhd)}) {
 245         column-gap: 1%;
 246         --miniature-min-width: #{$video-thumbnail-width};
 247       }
 248
 249       .video-wrapper {
 250         margin: 0 auto;
 251         width: 100%;
 252
 253         my-video-miniature {
 254           display: block;
 255           min-width: var(--miniature-min-width);
 256           max-width: var(--miniature-max-width);
 257         }
 258       }
 259     }
 260   }
 261 }