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

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