client/src/app/shared/video/video-miniature.component.scss

   1 @import '_variables';
   2 @import '_mixins';
   3 @import '_miniature';
   4
   5 .video-miniature {
   6   width: $video-miniature-width;
   7   display: inline-flex;
   8   flex-direction: column;
   9   margin-bottom: 30px;
  10   height: 195px;
  11   vertical-align: top;
  12
  13   .video-miniature-information {
  14     width: 200px;
  15     line-height: normal;
  16
  17     .video-miniature-name {
  18       @include miniature-name;
  19     }
  20
  21     .video-miniature-created-at-views {
  22       display: block;
  23       font-size: 13px;
  24     }
  25
  26     .video-miniature-account,
  27     .video-miniature-channel {
  28       @include disable-default-a-behaviour;
  29       @include ellipsis;
  30
  31       display: block;
  32       font-size: 13px;
  33       color: $grey-foreground-color;
  34
  35       &:hover {
  36         color: $grey-foreground-hover-color;
  37       }
  38     }
  39
  40     .video-info-privacy,
  41     .video-info-blacklisted .blacklisted-label,
  42     .video-info-nsfw {
  43       font-weight: $font-semibold;
  44     }
  45
  46     .video-info-blacklisted {
  47       color: red;
  48
  49       .blacklisted-reason::before {
  50         content: ' - ';
  51       }
  52     }
  53
  54     .video-info-nsfw {
  55       color: red;
  56     }
  57   }
  58
  59   &.display-as-row {
  60     flex-direction: row;
  61     margin-bottom: 0;
  62     height: auto;
  63     width: 100%;
  64
  65     my-video-thumbnail {
  66       margin-right: 10px;
  67     }
  68
  69     .video-miniature-information {
  70       width: auto;
  71
  72       .video-miniature-name {
  73         @include ellipsis-multiline(1.3em, 2);
  74
  75         margin-top: 2px;
  76         margin-bottom: 5px;
  77       }
  78
  79       .video-miniature-created-at-views,
  80       .video-miniature-account,
  81       .video-miniature-channel {
  82         font-size: 14px;
  83       }
  84
  85       .video-info-privacy {
  86         margin-top: 5px;
  87       }
  88
  89       .video-info-blacklisted {
  90         margin-top: 3px;
  91       }
  92     }
  93
  94     @media screen and (max-width: $small-view) {
  95       flex-direction: column;
  96       height: auto;
  97
  98       my-video-thumbnail {
  99         margin-right: 0;
 100       }
 101     }
 102   }
 103 }