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       min-width: 500px;
 103
 104       .video-miniature-name {
 105         @include ellipsis-multiline(1.3em, 2);
 106
 107         margin-top: 2px;
 108         margin-bottom: 5px;
 109       }
 110
 111       .video-miniature-created-at-views,
 112       .video-miniature-account,
 113       .video-miniature-channel {
 114         font-size: 14px;
 115         width: fit-content;
 116       }
 117
 118       .video-info-privacy {
 119         margin-top: 5px;
 120       }
 121
 122       .video-info-blacklisted {
 123         margin-top: 3px;
 124       }
 125     }
 126
 127     .video-bottom .video-actions {
 128       margin: 0;
 129       top: -3px;
 130     }
 131
 132     @media screen and (max-width: $small-view) {
 133       flex-direction: column;
 134       height: auto;
 135
 136       my-video-thumbnail {
 137         margin-right: 0;
 138       }
 139
 140       .video-miniature-information {
 141         min-width: initial;
 142       }
 143     }
 144   }
 145 }