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