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