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: var(--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} var(--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 video-miniature-small-screen {
 112   text-align: center;
 113
 114   ::ng-deep .video-miniature {
 115     padding-right: 0;
 116     height: auto;
 117     width: 100%;
 118     margin-bottom: 20px;
 119
 120     .video-miniature-information {
 121       width: 100% !important;
 122       text-align: left;
 123
 124       span {
 125         width: 100%;
 126       }
 127     }
 128
 129     .video-thumbnail {
 130       margin-bottom: 10px;
 131       width: 100%;
 132       height: calc(100% / #{$video-thumbnail-ratio});
 133       border-radius: 0;
 134
 135       img {
 136         width: 100%;
 137         height: 100%;
 138       }
 139     }
 140   }
 141 }
 142
 143 @mixin miniature-rows {
 144   &:first-child {
 145     padding-top: 30px;
 146
 147     .section-title {
 148       border-top: none !important;
 149     }
 150   }
 151
 152   my-video-miniature {
 153     text-align: left;
 154   }
 155
 156   .section-title {
 157     font-size: 24px;
 158     font-weight: $font-semibold;
 159     padding-top: 15px;
 160     margin-bottom: 15px;
 161     display: flex;
 162     justify-content: space-between;
 163     border-top: 1px solid $separator-border-color;
 164
 165     a {
 166       &:hover, &:focus:not(.focus-visible), &:active {
 167         text-decoration: none;
 168         outline: none;
 169       }
 170
 171       color: var(--mainForegroundColor);
 172     }
 173   }
 174
 175   &.channel {
 176     .section-title {
 177       a {
 178         display: flex;
 179         width: fit-content;
 180         align-items: center;
 181
 182         img {
 183           @include avatar(28px);
 184
 185           margin-right: 8px;
 186         }
 187       }
 188
 189       .followers {
 190         color: $grey-foreground-color;
 191         font-weight: normal;
 192         font-size: 14px;
 193         margin-left: 10px;
 194         position: relative;
 195         top: 2px;
 196       }
 197     }
 198   }
 199
 200   .show-more {
 201     position: relative;
 202     top: -5px;
 203     display: inline-block;
 204     font-size: 16px;
 205     text-transform: uppercase;
 206     color: $grey-foreground-color;
 207     margin-bottom: 10px;
 208     font-weight: $font-semibold;
 209     text-decoration: none;
 210   }
 211
 212   @media screen and (max-width: $mobile-view) {
 213     max-height: initial;
 214     overflow: initial;
 215
 216     @include video-miniature-small-screen;
 217
 218     .section-title {
 219       font-size: 17px;
 220     }
 221   }
 222 }
 223
 224 @mixin adapt-margin-content-width {
 225   width: $video-miniature-width * 6;
 226   margin: auto !important;
 227
 228   @media screen and (max-width: 1800px) {
 229     width: $video-miniature-width * 5;
 230   }
 231
 232   @media screen and (max-width: 1800px - $video-miniature-width) {
 233     width: $video-miniature-width * 4;
 234   }
 235
 236   @media screen and (max-width: 1800px - (2* $video-miniature-width)) {
 237     width: $video-miniature-width * 3;
 238   }
 239
 240   @media screen and (max-width: 1800px - (3* $video-miniature-width)) {
 241     width: $video-miniature-width * 2;
 242   }
 243
 244   @media screen and (max-width: $mobile-view) {
 245     width: auto;
 246     margin: 0 !important;
 247
 248     .videos {
 249       @include video-miniature-small-screen;
 250     }
 251   }
 252 }