client/src/app/shared/video/video-miniature.component.scss

   1 @import '_variables';
   2 @import '_mixins';
   3
   4 .video-miniature {
   5   display: inline-block;
   6   padding-right: 15px;
   7   margin-bottom: 30px;
   8   height: 175px;
   9   vertical-align: top;
  10
  11   .video-miniature-information {
  12     width: 200px;
  13     margin-top: 2px;
  14     line-height: normal;
  15
  16     .video-miniature-name {
  17       @include ellipsis-multiline(
  18         $font-size: 1rem,
  19         $line-height: 1,
  20         $lines-to-show: 2
  21       );
  22       transition: color 0.2s;
  23       font-size: 16px;
  24       font-weight: $font-semibold;
  25       color: var(--mainForegroundColor);
  26       margin-top: 5px;
  27       margin-bottom: 5px;
  28
  29       &:hover {
  30         text-decoration: none;
  31       }
  32
  33       &.blur-filter {
  34         filter: blur(3px);
  35         padding-left: 4px;
  36       }
  37     }
  38
  39     .video-miniature-created-at-views {
  40       display: block;
  41       font-size: 13px;
  42     }
  43
  44     .video-miniature-account,
  45     .video-miniature-channel {
  46       @include disable-default-a-behaviour;
  47
  48       display: block;
  49       overflow: hidden;
  50       text-overflow: ellipsis;
  51       white-space: nowrap;
  52       font-size: 13px;
  53       color: #585858;
  54
  55       &:hover {
  56         color: #303030;
  57       }
  58     }
  59   }
  60 }