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

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