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