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   padding-top: 10px;
 146
 147   &:first-child {
 148     padding-top: 30px;
 149   }
 150
 151   my-video-miniature {
 152     text-align: left;
 153   }
 154
 155   .section-title {
 156     font-size: 24px;
 157     font-weight: $font-semibold;
 158     margin-bottom: 30px;
 159     display: flex;
 160     justify-content: space-between;
 161
 162     a {
 163       &:hover, &:focus:not(.focus-visible), &:active {
 164         text-decoration: none;
 165         outline: none;
 166       }
 167
 168       color: var(--mainForegroundColor);
 169     }
 170   }
 171
 172   &.channel {
 173     .section-title {
 174       a {
 175         display: flex;
 176         width: fit-content;
 177         align-items: center;
 178
 179         img {
 180           @include avatar(28px);
 181
 182           margin-right: 8px;
 183         }
 184       }
 185
 186       .followers {
 187         color: $grey-foreground-color;
 188         font-weight: normal;
 189         font-size: 14px;
 190         margin-left: 10px;
 191         position: relative;
 192         top: 2px;
 193       }
 194     }
 195   }
 196
 197   @media screen and (max-width: $mobile-view) {
 198     max-height: initial;
 199     overflow: initial;
 200
 201     @include video-miniature-small-screen;
 202
 203     .section-title {
 204       font-size: 17px;
 205     }
 206   }
 207 }
 208
 209 @mixin adapt-margin-content-width {
 210   width: $video-miniature-width * 6;
 211   margin: auto !important;
 212
 213   @media screen and (max-width: 1800px) {
 214     width: $video-miniature-width * 5;
 215   }
 216
 217   @media screen and (max-width: 1800px - $video-miniature-width) {
 218     width: $video-miniature-width * 4;
 219   }
 220
 221   @media screen and (max-width: 1800px - (2* $video-miniature-width)) {
 222     width: $video-miniature-width * 3;
 223   }
 224
 225   @media screen and (max-width: 1800px - (3* $video-miniature-width)) {
 226     width: $video-miniature-width * 2;
 227   }
 228
 229   @media screen and (max-width: 500px) {
 230     width: auto;
 231     margin: 0 !important;
 232
 233     .videos {
 234       @include video-miniature-small-screen;
 235     }
 236   }
 237 }