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-bottom {
  14     display: flex;
  15
  16     .video-miniature-information {
  17       width: 200px;
  18       line-height: normal;
  19
  20       .video-miniature-name {
  21         @include miniature-name;
  22       }
  23
  24       .video-miniature-created-at-views {
  25         display: block;
  26         font-size: 13px;
  27       }
  28
  29       .video-miniature-account,
  30       .video-miniature-channel {
  31         @include disable-default-a-behaviour;
  32         @include ellipsis;
  33
  34         display: block;
  35         font-size: 13px;
  36         color: $grey-foreground-color;
  37
  38         &:hover {
  39           color: $grey-foreground-hover-color;
  40         }
  41       }
  42
  43       .video-info-privacy,
  44       .video-info-blacklisted .blacklisted-label,
  45       .video-info-nsfw {
  46         font-weight: $font-semibold;
  47       }
  48
  49       .video-info-blacklisted {
  50         color: red;
  51
  52         .blacklisted-reason::before {
  53           content: ' - ';
  54         }
  55       }
  56
  57       .video-info-nsfw {
  58         color: red;
  59       }
  60     }
  61
  62     .video-actions {
  63       margin-top: 3px;
  64       margin-right: 10px;
  65
  66       /deep/ .dropdown-root:not(.show) {
  67         opacity: 0;
  68       }
  69
  70       /deep/ .playlist-dropdown.show + my-action-dropdown .dropdown-root {
  71         opacity: 1;
  72       }
  73     }
  74
  75     &:hover .video-actions /deep/ .dropdown-root {
  76       opacity: 1;
  77     }
  78
  79     @media screen and (max-width: $small-view) {
  80       .video-miniature-information .video-miniature-name {
  81         margin-top: 0;
  82       }
  83
  84       .video-actions {
  85         margin: 0;
  86         top: -3px;
  87
  88         /deep/ .dropdown-root {
  89           display: block !important;
  90         }
  91       }
  92     }
  93   }
  94
  95   &.display-as-row {
  96     flex-direction: row;
  97     margin-bottom: 0;
  98     height: auto;
  99     width: 100%;
 100
 101     my-video-thumbnail {
 102       margin-right: 10px;
 103     }
 104
 105     .video-bottom {
 106       .video-miniature-information {
 107         width: auto;
 108         min-width: 500px;
 109
 110         .video-miniature-name {
 111           @include ellipsis-multiline(1.3em, 2);
 112
 113           margin-top: 2px;
 114           margin-bottom: 5px;
 115         }
 116
 117         .video-miniature-created-at-views,
 118         .video-miniature-account,
 119         .video-miniature-channel {
 120           font-size: 14px;
 121           width: fit-content;
 122         }
 123
 124         .video-info-privacy {
 125           margin-top: 5px;
 126         }
 127
 128         .video-info-blacklisted {
 129           margin-top: 3px;
 130         }
 131       }
 132
 133       .video-actions {
 134         margin: 0;
 135         top: -3px;
 136       }
 137     }
 138
 139     @media screen and (max-width: $small-view) {
 140       flex-direction: column;
 141       height: auto;
 142
 143       my-video-thumbnail {
 144         margin-right: 0;
 145       }
 146
 147       .video-miniature-information {
 148         min-width: initial;
 149       }
 150     }
 151   }
 152 }