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