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