-@import '_variables';
-@import '_mixins';
-@import '_miniature';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use '_miniature' as *;
$more-button-width: 40px;
width: calc(100% - #{$more-button-width});
}
-.avatar {
- margin: 10px 10px 0 0;
-
- img:not(.channel) {
- @include avatar(40px);
- }
-
- img.channel {
- @include channel-avatar(40px);
- }
+my-actor-avatar {
+ @include margin(10px, 10px, 0, 0);
}
.video-miniature-created-at-views {
}
.video-info-blocked {
- color: red;
+ color: #ff0000;
.blocked-reason::before {
content: ' - ';
}
.video-info-nsfw {
- color: red;
+ color: #ff0000;
}
.video-actions {
}
}
-.video-miniature {
- &:hover ::ng-deep .video-thumbnail-actions-overlay,
- &:hover .video-actions ::ng-deep .dropdown-root {
+.video-miniature:hover {
+ ::ng-deep .video-thumbnail-actions-overlay,
+ .video-actions ::ng-deep .dropdown-root {
opacity: 1 !important;
}
}
width: 100%;
my-video-thumbnail {
- @include large-screen-ratio($selector: '::ng-deep .video-thumbnail');
+ @include block-ratio($selector: '::ng-deep .video-thumbnail');
}
.video-bottom {
display: flex;
width: 100%;
+ min-width: 1px;
}
-
.video-miniature-name {
margin-top: 10px;
margin-bottom: 5px;
.video-bottom {
display: flex;
+ min-width: 1px;
}
// We don't display avatar in row mode
- .avatar {
+ .channel-avatar {
display: none;
}
my-video-thumbnail {
+ @include margin-right(10px);
+
min-width: var(--rowThumbnailWidth);
max-width: var(--rowThumbnailWidth);
height: var(--rowThumbnailHeight);
- margin-right: 10px;
}
.video-miniature-name {
- @include ellipsis-multiline(1.3em, 2);
+ @include ellipsis-multiline($video-miniature-row-name-font-size, 2);
}
.video-miniature-created-at-views,
.video-miniature-account,
.video-miniature-channel {
- font-size: 14px;
+ font-size: $video-miniature-row-info-font-size;
}
.video-actions {
--rowThumbnailHeight: #{$video-thumbnail-small-height};
.video-miniature-name {
- font-size: 14px;
+ font-size: $video-miniature-row-info-font-size;
}
.video-miniature-created-at-views,
.video-miniature-account,
.video-miniature-channel {
- font-size: 12px;
+ font-size: $video-miniature-row-mobile-info-font-size;
}
}
}