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

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