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