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

   1 .video-miniature {
   2   margin: 15px 10px;
   3   display: inline-block;
   4   position: relative;
   5   height: 190px;
   6   vertical-align: top;
   7
   8   .video-miniature-thumbnail {
   9     display: inline-block;
  10     position: relative;
  11     border-radius: 3px;
  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: 0px;
  26       bottom: 0px;
  27       display: inline-block;
  28       background-color: rgba(0, 0, 0, 0.7);
  29       color: #fff;
  30       padding: 3px 5px;
  31       font-size: 11px;
  32       font-weight: bold;
  33       width: 100%;
  34
  35       .video-miniature-thumbnail-overlay-views {
  36
  37       }
  38
  39       .video-miniature-thumbnail-overlay-duration {
  40         float: right;
  41       }
  42     }
  43   }
  44
  45   .video-miniature-information {
  46     width: 200px;
  47
  48     .video-miniature-name {
  49       height: 23px;
  50       display: block;
  51       overflow: hidden;
  52       text-overflow: ellipsis;
  53       white-space: nowrap;
  54       font-weight: bold;
  55       transition: color 0.2s;
  56       font-size: 15px;
  57
  58       &:hover {
  59         text-decoration: none;
  60       }
  61
  62       &.blur-filter {
  63         filter: blur(3px);
  64         padding-left: 4px;
  65       }
  66
  67       .video-miniature-tags {
  68         // Fix for chrome when tags are long
  69         width: 201px;
  70
  71         .video-miniature-tag {
  72           font-size: 13px;
  73           cursor: pointer;
  74           position: relative;
  75           top: -2px;
  76
  77           .label {
  78             transition: background-color 0.2s;
  79           }
  80         }
  81       }
  82     }
  83
  84     .video-miniature-author, .video-miniature-created-at {
  85       display: block;
  86       margin-left: 1px;
  87       font-size: 11px;
  88       color: $video-miniature-other-infos;
  89       opacity: 0.9;
  90     }
  91
  92     .video-miniature-author {
  93       transition: color 0.2s;
  94
  95       &:hover {
  96         color: #23527c;
  97         text-decoration: none;
  98       }
  99     }
 100   }
 101 }