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

   1 @use '_variables' as *;
   2 @use '_mixins' as *;
   3 @use '_miniature' as *;
   4
   5 $more-button-width: 40px;
   6
   7 .chip {
   8   @include chip;
   9 }
  10
  11 .video-miniature {
  12   font-size: 14px;
  13 }
  14
  15 .video-miniature-name {
  16   @include miniature-name;
  17 }
  18
  19 .video-miniature-information {
  20   width: calc(100% - #{$more-button-width});
  21 }
  22
  23 my-actor-avatar {
  24   @include margin(10px, 10px, 0, 0);
  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: #ff0000;
  53
  54   .blocked-reason::before {
  55     content: ' - ';
  56   }
  57 }
  58
  59 .video-info-nsfw {
  60   color: #ff0000;
  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:hover {
  85   ::ng-deep .video-thumbnail-actions-overlay,
  86   .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     min-width: 1px;
 107   }
 108
 109   .video-miniature-name {
 110     margin-top: 10px;
 111     margin-bottom: 5px;
 112   }
 113
 114   .video-miniature-created-at-views {
 115     display: block;
 116   }
 117
 118   .video-actions {
 119     margin-top: 3px;
 120   }
 121
 122   @media screen and (max-width: $small-view) {
 123     width: 100%;
 124     margin-bottom: 25px;
 125
 126     .video-miniature-information {
 127       margin: 0 10px;
 128
 129       width: 100%;
 130       text-align: left;
 131     }
 132
 133     .video-actions {
 134       margin: 0;
 135       top: -3px;
 136
 137       ::ng-deep .dropdown-root {
 138         opacity: 1 !important;
 139       }
 140     }
 141
 142     ::ng-deep .video-thumbnail {
 143       border-radius: 0;
 144     }
 145   }
 146 }
 147
 148 .video-miniature.display-as-row {
 149   --rowThumbnailWidth: #{$video-thumbnail-width};
 150   --rowThumbnailHeight: #{$video-thumbnail-height};
 151
 152   display: flex;
 153   flex-direction: row;
 154
 155   .video-bottom {
 156     display: flex;
 157     min-width: 1px;
 158   }
 159
 160   // We don't display avatar in row mode
 161   .channel-avatar {
 162     display: none;
 163   }
 164
 165   my-video-thumbnail {
 166     @include margin-right(10px);
 167
 168     min-width: var(--rowThumbnailWidth);
 169     max-width: var(--rowThumbnailWidth);
 170     height: var(--rowThumbnailHeight);
 171   }
 172
 173   .video-miniature-name {
 174     @include ellipsis-multiline($video-miniature-row-name-font-size, 2);
 175   }
 176
 177   .video-miniature-created-at-views,
 178   .video-miniature-account,
 179   .video-miniature-channel {
 180     font-size: $video-miniature-row-info-font-size;
 181   }
 182
 183   .video-actions {
 184     margin-top: -3px;
 185   }
 186 }
 187
 188 @include on-small-main-col {
 189   .video-miniature.display-as-row {
 190     --rowThumbnailWidth: #{$video-thumbnail-medium-width};
 191     --rowThumbnailHeight: #{$video-thumbnail-medium-height};
 192   }
 193 }
 194
 195 @include on-mobile-main-col {
 196   .video-miniature.display-as-row {
 197     --rowThumbnailWidth: #{$video-thumbnail-small-width};
 198     --rowThumbnailHeight: #{$video-thumbnail-small-height};
 199
 200     .video-miniature-name {
 201       font-size: $video-miniature-row-info-font-size;
 202     }
 203
 204     .video-miniature-created-at-views,
 205     .video-miniature-account,
 206     .video-miniature-channel {
 207       font-size: $video-miniature-row-mobile-info-font-size;
 208     }
 209   }
 210 }