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