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