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

   1 @import '_variables';
   2 @import '_mixins';
   3 @import '_miniature';
   4
   5 $more-button-width: 41px;
   6 $more-margin-right: 15px;
   7
   8 .video-miniature {
   9   display: inline-flex;
  10   flex-direction: column;
  11   padding-bottom: $video-miniature-margin-bottom;
  12   height: 195px;
  13   vertical-align: top;
  14   overflow: hidden;
  15
  16   .video-bottom {
  17     display: flex;
  18
  19     .video-miniature-information {
  20       width: $video-miniature-width - $more-button-width - $more-margin-right;
  21       line-height: normal;
  22       font-size: 13px;
  23
  24       .video-miniature-name {
  25         @include miniature-name;
  26         font-size: 110%;
  27       }
  28
  29       .video-miniature-created-at-views {
  30         display: block;
  31         font-size: 95%;
  32       }
  33
  34       .video-miniature-account,
  35       .video-miniature-channel {
  36         @include disable-default-a-behaviour;
  37         @include ellipsis;
  38
  39         display: block;
  40         font-size: 95%;
  41         color: pvar(--greyForegroundColor);
  42
  43         &:hover {
  44           color: $grey-foreground-hover-color;
  45         }
  46       }
  47
  48       .video-info-privacy,
  49       .video-info-blocked .blocked-label,
  50       .video-info-nsfw {
  51         font-weight: $font-semibold;
  52       }
  53
  54       .video-info-blocked {
  55         color: red;
  56
  57         .blocked-reason::before {
  58           content: ' - ';
  59         }
  60       }
  61
  62       .video-info-nsfw {
  63         color: red;
  64       }
  65     }
  66
  67     .video-actions {
  68       margin-top: 3px;
  69       width: $more-button-width;
  70       height: 30px;
  71
  72       ::ng-deep .dropdown-root:not(.show) {
  73         opacity: 0;
  74       }
  75
  76       ::ng-deep .playlist-dropdown.show + my-action-dropdown .dropdown-root {
  77         opacity: 1;
  78       }
  79
  80       ::ng-deep .more-icon {
  81         opacity: .6;
  82
  83         &:hover {
  84           opacity: 1;
  85         }
  86       }
  87     }
  88
  89     @media screen and (max-width: $small-view) {
  90       .video-miniature-information {
  91         margin: 0 10px;
  92       }
  93
  94       .video-actions {
  95         margin: 0;
  96         top: -3px;
  97
  98         ::ng-deep .dropdown-root {
  99           opacity: 1 !important;
 100         }
 101       }
 102     }
 103   }
 104
 105   &:hover ::ng-deep .video-thumbnail .video-thumbnail-actions-overlay,
 106   &:hover .video-bottom .video-actions ::ng-deep .dropdown-root {
 107     opacity: 1;
 108   }
 109
 110   &.fit-width {
 111     width: 100%;
 112     height: unset;
 113     padding-bottom: $video-miniature-margin-bottom / 2;
 114
 115     .video-bottom {
 116       width: 100% !important;
 117
 118       .video-miniature-information {
 119         width: calc(100% - 40px) !important;
 120       }
 121     }
 122
 123     my-video-thumbnail {
 124       @include large-screen-ratio($selector: '::ng-deep .video-thumbnail');
 125     }
 126   }
 127
 128   &.display-as-row {
 129     flex-direction: row;
 130     padding-bottom: 0;
 131     height: auto;
 132     display: flex;
 133     flex-grow: 1;
 134
 135     my-video-thumbnail {
 136       margin-right: 10px;
 137     }
 138
 139     .video-bottom {
 140       .video-miniature-information {
 141         @media screen and (min-width: $small-view) {
 142           width: auto;
 143           min-width: 500px;
 144         }
 145
 146         .video-miniature-name {
 147           @include ellipsis-multiline(1.3em, 2);
 148
 149           margin-top: 2px;
 150           margin-bottom: 5px;
 151         }
 152
 153         .video-miniature-created-at-views,
 154         .video-miniature-account,
 155         .video-miniature-channel {
 156           font-size: 95%;
 157           width: fit-content;
 158         }
 159
 160         .video-info-privacy {
 161           margin-top: 5px;
 162         }
 163
 164         .video-info-blocked {
 165           margin-top: 3px;
 166         }
 167       }
 168
 169       .video-actions {
 170         margin: 0;
 171         top: -3px;
 172       }
 173     }
 174
 175     @media screen and (max-width: $small-view) {
 176       flex-direction: column;
 177       height: auto;
 178
 179       my-video-thumbnail {
 180         margin-right: 0;
 181       }
 182
 183       .video-miniature-information {
 184         min-width: initial;
 185       }
 186     }
 187   }
 188 }