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