-@import '_variables';
-@import '_mixins';
-@import '_miniature';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use '_miniature' as *;
.miniature {
display: inline-block;
.miniature-name {
@include miniature-name;
-
- margin-top: 10px;
- margin-bottom: 5px;
}
.by {
margin-top: 5px;
font-size: 13px;
- .video-info-privacy {
+ .privacy {
font-weight: $font-semibold;
&::after {
}
}
- .video-info-description {
+ .description {
+ @include peertube-word-wrap;
+
margin-top: 10px;
color: pvar(--greyForegroundColor);
}
}
.miniature:not(.display-as-row) {
+
+ .miniature-name {
+ margin-top: 10px;
+ margin-bottom: 5px;
+ }
+
.miniature-thumbnail {
+ @include block-ratio($selector: '::ng-deep a');
+
margin-top: 10px;
margin-bottom: 5px;
}
display: flex;
+ .miniature-name {
+ @include ellipsis-multiline($video-miniature-row-name-font-size, 2);
+ }
+
.miniature-thumbnail {
- width: var(--rowThumbnailWidth);
+ @include margin-right(10px);
+
+ min-width: var(--rowThumbnailWidth);
+ max-width: var(--rowThumbnailWidth);
height: var(--rowThumbnailHeight);
- margin-right: 10px;
}
}