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