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   .video-bottom {
  60     display: flex;
  61
  62     .video-actions {
  63       margin-top: 3px;
  64       margin-right: 10px;
  65     }
  66
  67     /deep/ .dropdown-root:not(.show) {
  68       display: none;
  69     }
  70
  71     &:hover /deep/ .dropdown-root {
  72       display: block;
  73     }
  74
  75     /deep/ .playlist-dropdown.show + my-action-dropdown .dropdown-root {
  76       display: block;
  77     }
  78
  79     @media screen and (max-width: $small-view) {
  80       .video-actions {
  81         margin-right: 0;
  82       }
  83
  84       /deep/ .dropdown-root {
  85         display: block !important;
  86       }
  87     }
  88   }
  89
  90   &.display-as-row {
  91     flex-direction: row;
  92     margin-bottom: 0;
  93     height: auto;
  94     width: 100%;
  95
  96     my-video-thumbnail {
  97       margin-right: 10px;
  98     }
  99
 100     .video-miniature-information {
 101       width: auto;
 102
 103       .video-miniature-name {
 104         @include ellipsis-multiline(1.3em, 2);
 105
 106         margin-top: 2px;
 107         margin-bottom: 5px;
 108       }
 109
 110       .video-miniature-created-at-views,
 111       .video-miniature-account,
 112       .video-miniature-channel {
 113         font-size: 14px;
 114       }
 115
 116       .video-info-privacy {
 117         margin-top: 5px;
 118       }
 119
 120       .video-info-blacklisted {
 121         margin-top: 3px;
 122       }
 123     }
 124
 125     .video-bottom .video-actions {
 126       margin: 0;
 127       top: -3px;
 128     }
 129
 130     @media screen and (max-width: $small-view) {
 131       flex-direction: column;
 132       height: auto;
 133
 134       my-video-thumbnail {
 135         margin-right: 0;
 136       }
 137     }
 138   }
 139 }