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 my-account-avatar,
  16 .channel-avatar {
  17   margin: 10px 10px 0 0;
  18 }
  19
  20 .channel-avatar img{
  21   @include channel-avatar(40px);
  22 }
  23
  24 .video-miniature-created-at-views {
  25   font-size: 13px;
  26 }
  27
  28 .video-miniature-account,
  29 .video-miniature-channel {
  30   @include disable-default-a-behaviour;
  31   @include ellipsis;
  32
  33   display: block;
  34   font-size: 13px;
  35   color: pvar(--greyForegroundColor);
  36
  37   &:hover {
  38     color: $grey-foreground-hover-color;
  39   }
  40 }
  41
  42 .video-info-privacy,
  43 .video-info-blocked .blocked-label,
  44 .video-info-nsfw {
  45   font-weight: $font-semibold;
  46 }
  47
  48 .video-info-blocked {
  49   color: red;
  50
  51   .blocked-reason::before {
  52     content: ' - ';
  53   }
  54 }
  55
  56 .video-info-nsfw {
  57   color: red;
  58 }
  59
  60 .video-actions {
  61   width: $more-button-width;
  62   height: 30px;
  63
  64   ::ng-deep .dropdown-root:not(.show) {
  65     opacity: 0;
  66   }
  67
  68   ::ng-deep .playlist-dropdown.show + my-action-dropdown .dropdown-root {
  69     opacity: 1;
  70   }
  71
  72   ::ng-deep .more-icon {
  73     opacity: .6;
  74
  75     &:hover {
  76       opacity: 1;
  77     }
  78   }
  79 }
  80
  81 .video-miniature:hover {
  82   ::ng-deep .video-thumbnail-actions-overlay,
  83   .video-actions ::ng-deep .dropdown-root {
  84     opacity: 1 !important;
  85   }
  86 }
  87
  88 // Grid mode
  89 // Takes all the width on mobile
  90 .video-miniature:not(.display-as-row) {
  91   display: flex;
  92   flex-direction: column;
  93   padding-bottom: $video-miniature-margin-bottom;
  94   width: 100%;
  95
  96   my-video-thumbnail {
  97     @include block-ratio($selector: '::ng-deep .video-thumbnail');
  98   }
  99
 100   .video-bottom {
 101     display: flex;
 102     width: 100%;
 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   }
 154
 155   // We don't display avatar in row mode
 156   .channel-avatar {
 157     display: none;
 158   }
 159
 160   my-video-thumbnail {
 161     min-width: var(--rowThumbnailWidth);
 162     max-width: var(--rowThumbnailWidth);
 163     height: var(--rowThumbnailHeight);
 164     margin-right: 10px;
 165   }
 166
 167   .video-miniature-name {
 168     @include ellipsis-multiline($video-miniature-row-name-font-size, 2);
 169   }
 170
 171   .video-miniature-created-at-views,
 172   .video-miniature-account,
 173   .video-miniature-channel {
 174     font-size: $video-miniature-row-info-font-size;
 175   }
 176
 177   .video-actions {
 178     margin-top: -3px;
 179   }
 180 }
 181
 182 @include on-small-main-col {
 183   .video-miniature.display-as-row {
 184     --rowThumbnailWidth: #{$video-thumbnail-medium-width};
 185     --rowThumbnailHeight: #{$video-thumbnail-medium-height};
 186   }
 187 }
 188
 189 @include on-mobile-main-col {
 190   .video-miniature.display-as-row {
 191     --rowThumbnailWidth: #{$video-thumbnail-small-width};
 192     --rowThumbnailHeight: #{$video-thumbnail-small-height};
 193
 194     .video-miniature-name {
 195       font-size: $video-miniature-row-info-font-size;
 196     }
 197
 198     .video-miniature-created-at-views,
 199     .video-miniature-account,
 200     .video-miniature-channel {
 201       font-size: $video-miniature-row-mobile-info-font-size;
 202     }
 203   }
 204 }