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   vertical-align: top;
  10
  11   .video-miniature-thumbnail {
  12     display: inline-block;
  13     position: relative;
  14
  15     &:hover {
  16       text-decoration: none !important;
  17     }
  18
  19     .thumbnail-nsfw {
  20       background-color: #000;
  21       color: #fff;
  22       text-align: center;
  23       font-size: 30px;
  24       line-height: 110px;
  25
  26       width: 200px;
  27       height: 110px;
  28     }
  29
  30     img, .thumbnail-nsfw {
  31       border-radius: 3px;
  32     }
  33
  34     .video-miniature-thumbnail-overlay {
  35       position: absolute;
  36       right: 0px;
  37       bottom: 0px;
  38       display: inline-block;
  39       background-color: rgba(0, 0, 0, 0.7);
  40       color: #fff;
  41       padding: 3px 5px;
  42       font-size: 11px;
  43       font-weight: bold;
  44       width: 100%;
  45
  46       .video-miniature-thumbnail-overlay-views {
  47
  48       }
  49
  50       .video-miniature-thumbnail-overlay-duration {
  51         float: right;
  52       }
  53     }
  54   }
  55
  56   .video-miniature-informations {
  57     width: 200px;
  58
  59     .video-miniature-name {
  60       height: 23px;
  61       display: block;
  62       overflow: hidden;
  63       text-overflow: ellipsis;
  64       white-space: nowrap;
  65       font-weight: bold;
  66       transition: color 0.2s;
  67       font-size: 15px;
  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-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
  99     .video-miniature-author {
 100       transition: color 0.2s;
 101
 102       &:hover {
 103         color: #23527c;
 104         text-decoration: none;
 105       }
 106     }
 107   }
 108 }