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
  68       &:hover {
  69         text-decoration: none;
  70       }
  71
  72       .video-miniature-tags {
  73         // Fix for chrome when tags a long
  74         width: 201px;
  75
  76         .video-miniature-tag {
  77           font-size: 13px;
  78           cursor: pointer;
  79           position: relative;
  80           top: -2px;
  81
  82           .label {
  83             line-height: $line-height-base;
  84             transition: background-color 0.2s;
  85           }
  86         }
  87       }
  88     }
  89
  90     .video-miniature-author, .video-miniature-created-at {
  91       display: block;
  92       margin-left: 1px;
  93       font-size: 11px;
  94       color: $video-miniature-other-infos;
  95       opacity: 0.9;
  96     }
  97
  98     .video-miniature-author {
  99       transition: color 0.2s;
 100
 101       &:hover {
 102         color: #23527c;
 103         text-decoration: none;
 104       }
 105     }
 106   }
 107 }