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