-@import '_variables';
-@import '_mixins';
-@import '_miniature';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use '_miniature' as *;
.miniature {
display: inline-block;
+ width: 100%;
- &.no-videos:not(.to-manage){
+ &.no-videos:not(.to-manage) {
a {
cursor: default !important;
}
display: none;
}
}
+}
- .miniature-thumbnail {
- @include miniature-thumbnail;
-
- .miniature-playlist-info-overlay {
- @include static-thumbnail-overlay;
-
- position: absolute;
- right: 0;
- bottom: 0;
- height: $video-thumbnail-height;
- padding: 0 10px;
- display: flex;
- align-items: center;
- font-size: 14px;
+.miniature-thumbnail {
+ @include miniature-thumbnail;
+
+ .miniature-playlist-info-overlay {
+ @include static-thumbnail-overlay;
+
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ height: 100%;
+ padding: 0 10px;
+ display: flex;
+ align-items: center;
+ font-size: 14px;
+ font-weight: $font-semibold;
+ }
+}
+
+.miniature-info {
+
+ .miniature-name {
+ @include miniature-name;
+ }
+
+ .by {
+ @include disable-default-a-behaviour;
+
+ display: block;
+ color: pvar(--greyForegroundColor);
+ }
+
+ .privacy-date {
+ margin-top: 5px;
+ font-size: 13px;
+
+ .video-info-privacy {
font-weight: $font-semibold;
+
+ &::after {
+ content: '-';
+ margin: 0 3px;
+ }
}
}
- .miniature-info {
- width: 200px;
- margin-top: 2px;
- line-height: normal;
+ .video-info-description {
+ margin-top: 10px;
+ color: pvar(--greyForegroundColor);
+ }
+}
- .miniature-name {
- @include miniature-name;
+.miniature:not(.display-as-row) {
- @include ellipsis-multiline(1.3em, 2);
+ .miniature-name {
+ margin-top: 10px;
+ margin-bottom: 5px;
+ }
- margin: 0;
- }
+ .miniature-thumbnail {
+ @include block-ratio($selector: '::ng-deep a');
- .by {
- @include disable-default-a-behaviour;
+ margin-top: 10px;
+ margin-bottom: 5px;
+ }
+}
- display: block;
- color: pvar(--greyForegroundColor);
- }
+.miniature.display-as-row {
+ --rowThumbnailWidth: #{$video-thumbnail-width};
+ --rowThumbnailHeight: #{$video-thumbnail-height};
- .privacy-date {
- margin-top: 5px;
+ display: flex;
- .video-info-privacy {
- font-size: 14px;
- font-weight: $font-semibold;
+ .miniature-name {
+ @include ellipsis-multiline($video-miniature-row-name-font-size, 2);
+ }
- &::after {
- content: '-';
- margin: 0 3px;
- }
- }
- }
+ .miniature-thumbnail {
+ @include margin-right(10px);
- .video-info-description {
- margin-top: 10px;
- color: pvar(--greyForegroundColor);
- }
+ width: var(--rowThumbnailWidth);
+ height: var(--rowThumbnailHeight);
+ }
+}
+
+@include on-small-main-col {
+ .miniature.display-as-row {
+ --rowThumbnailWidth: #{$video-thumbnail-medium-width};
+ --rowThumbnailHeight: #{$video-thumbnail-medium-height};
+ }
+}
+
+@include on-mobile-main-col {
+ .miniature.display-as-row {
+ --rowThumbnailWidth: #{$video-thumbnail-small-width};
+ --rowThumbnailHeight: #{$video-thumbnail-small-height};
}
}