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

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