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