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

   1 .video-miniature {
   2   display: inline-block;
   3   padding-right: 15px;
   4   margin-bottom: 30px;
   5   height: 175px;
   6   vertical-align: top;
   7
   8   .video-miniature-thumbnail {
   9     display: inline-block;
  10     position: relative;
  11     border-radius: 4px;
  12     overflow: hidden;
  13
  14     &:hover {
  15       text-decoration: none !important;
  16     }
  17
  18     img.blur-filter {
  19       filter: blur(5px);
  20       transform : scale(1.03);
  21     }
  22
  23     .video-miniature-thumbnail-overlay {
  24       position: absolute;
  25       right: 5px;
  26       bottom: 5px;
  27       display: inline-block;
  28       background-color: rgba(0, 0, 0, 0.7);
  29       color: #fff;
  30       font-size: 12px;
  31       font-weight: $font-bold;
  32       border-radius: 3px;
  33       padding: 0 5px;
  34     }
  35   }
  36
  37   .video-miniature-information {
  38     width: 200px;
  39     margin-top: 2px;
  40     line-height: normal;
  41
  42     .video-miniature-name {
  43       display: block;
  44       overflow: hidden;
  45       text-overflow: ellipsis;
  46       white-space: nowrap;
  47       font-weight: bold;
  48       transition: color 0.2s;
  49       font-size: 16px;
  50       font-weight: $font-semibold;
  51       color: #000;
  52
  53       &:hover {
  54         text-decoration: none;
  55       }
  56
  57       &.blur-filter {
  58         filter: blur(3px);
  59         padding-left: 4px;
  60       }
  61     }
  62
  63     .video-miniature-created-at-views {
  64       display: block;
  65       font-size: 13px;
  66     }
  67
  68     .video-miniature-account {
  69       font-size: 12px;
  70       color: #585858;
  71     }
  72   }
  73 }