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-actor-avatar {
  16   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   }
  99
 100   .video-miniature-name {
 101     margin-top: 10px;
 102     margin-bottom: 5px;
 103   }
 104
 105   .video-miniature-created-at-views {
 106     display: block;
 107   }
 108
 109   .video-actions {
 110     margin-top: 3px;
 111   }
 112
 113   @media screen and (max-width: $small-view) {
 114     width: 100%;
 115     margin-bottom: 25px;
 116
 117     .video-miniature-information {
 118       margin: 0 10px;
 119
 120       width: 100%;
 121       text-align: left;
 122     }
 123
 124     .video-actions {
 125       margin: 0;
 126       top: -3px;
 127
 128       ::ng-deep .dropdown-root {
 129         opacity: 1 !important;
 130       }
 131     }
 132
 133     ::ng-deep .video-thumbnail {
 134       border-radius: 0;
 135     }
 136   }
 137 }
 138
 139 .video-miniature.display-as-row {
 140   --rowThumbnailWidth: #{$video-thumbnail-width};
 141   --rowThumbnailHeight: #{$video-thumbnail-height};
 142
 143   display: flex;
 144   flex-direction: row;
 145
 146   .video-bottom {
 147     display: flex;
 148   }
 149
 150   // We don't display avatar in row mode
 151   .channel-avatar {
 152     display: none;
 153   }
 154
 155   my-video-thumbnail {
 156     min-width: var(--rowThumbnailWidth);
 157     max-width: var(--rowThumbnailWidth);
 158     height: var(--rowThumbnailHeight);
 159     margin-right: 10px;
 160   }
 161
 162   .video-miniature-name {
 163     @include ellipsis-multiline($video-miniature-row-name-font-size, 2);
 164   }
 165
 166   .video-miniature-created-at-views,
 167   .video-miniature-account,
 168   .video-miniature-channel {
 169     font-size: $video-miniature-row-info-font-size;
 170   }
 171
 172   .video-actions {
 173     margin-top: -3px;
 174   }
 175 }
 176
 177 @include on-small-main-col {
 178   .video-miniature.display-as-row {
 179     --rowThumbnailWidth: #{$video-thumbnail-medium-width};
 180     --rowThumbnailHeight: #{$video-thumbnail-medium-height};
 181   }
 182 }
 183
 184 @include on-mobile-main-col {
 185   .video-miniature.display-as-row {
 186     --rowThumbnailWidth: #{$video-thumbnail-small-width};
 187     --rowThumbnailHeight: #{$video-thumbnail-small-height};
 188
 189     .video-miniature-name {
 190       font-size: $video-miniature-row-info-font-size;
 191     }
 192
 193     .video-miniature-created-at-views,
 194     .video-miniature-account,
 195     .video-miniature-channel {
 196       font-size: $video-miniature-row-mobile-info-font-size;
 197     }
 198   }
 199 }