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

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