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-height, $play-overlay-width);
  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 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 @mixin fluid-videos-miniature-layout {
 180   margin-left: $not-expanded-horizontal-margins !important;
 181   margin-right: $not-expanded-horizontal-margins !important;
 182
 183   @media screen and (max-width: $mobile-view) {
 184     width: auto;
 185     margin: 0 !important;
 186
 187     .videos {
 188       text-align: center;
 189
 190       ::ng-deep .video-miniature {
 191         padding-right: 0;
 192         height: auto;
 193         width: 100%;
 194         margin-bottom: 25px;
 195
 196         .video-miniature-information {
 197           width: 100% !important;
 198           text-align: left;
 199
 200           span {
 201             width: 100%;
 202           }
 203         }
 204
 205         .video-thumbnail {
 206           border-radius: 0;
 207         }
 208       }
 209     }
 210   }
 211
 212   @media screen and (min-width: #{breakpoint(fhd)}) {
 213     margin-left: 6vw !important;
 214     margin-right: 6vw !important;
 215   }
 216
 217   @media screen and (min-width: $mobile-view) {
 218
 219     .videos {
 220       --miniature-min-width: #{$video-thumbnail-width - 15px};
 221       --miniature-max-width: #{$video-thumbnail-width};
 222
 223       display: grid;
 224       column-gap: 5px;
 225       grid-template-columns: repeat(
 226         auto-fill,
 227         minmax(
 228           var(--miniature-min-width),
 229           1fr
 230         )
 231       );
 232
 233       @media screen and (min-width: #{breakpoint(fhd)}) {
 234         column-gap: 1%;
 235         --miniature-min-width: #{$video-thumbnail-width};
 236       }
 237
 238       .video-wrapper {
 239         margin: 0 auto;
 240         width: 100%;
 241
 242         my-video-miniature {
 243           display: block;
 244           min-width: var(--miniature-min-width);
 245           max-width: var(--miniature-max-width);
 246         }
 247       }
 248     }
 249   }
 250 }