-@import '_variables';
-@import '_mixins';
+@use 'sass:math';
+@use '_variables' as *;
+@use '_mixins' as *;
@mixin build-channel-img-size ($video-img-width) {
$image-size: min(130px, $video-img-width);
- $margin-size: ($video-img-width - $image-size) / 2; // So we have the same width than the video miniature
+ $margin-size: math.div(($video-img-width - $image-size), 2); // So we have the same width than the video miniature
- @include channel-avatar($image-size);
+ @include actor-avatar-size($image-size);
margin: 0 $margin-size 0 $margin-size;
}
padding: 40px;
}
+.alert-danger {
+ margin-top: 10px;
+}
+
.results-header {
font-size: 16px;
padding-bottom: 20px;
.icon.icon-filter {
@include icon(20px);
+ @include margin-right(5px);
position: relative;
top: -1px;
- margin-right: 5px;
background-image: url('../../assets/images/feather/filter.svg');
}
}
max-width: 800px;
}
-.video-channel {
- img {
- @include build-channel-img-size($video-thumbnail-width);
- }
+.video-channel my-actor-avatar {
+ @include build-channel-img-size($video-thumbnail-width);
}
.video-channel-info {
}
.video-channel-name {
+ @include margin-left(5px);
+
font-size: $video-miniature-row-info-font-size;
color: pvar(--greyForegroundColor);
- margin-left: 5px;
}
// Use the same breakpoints than in video-miniature
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
- .link-avatar {
+ my-actor-avatar {
+ @include build-channel-img-size($video-thumbnail-medium-width);
+
grid-column: 1;
grid-row: 1 / -1;
}
-
- img {
- @include build-channel-img-size($video-thumbnail-medium-width);
- }
}
.video-channel-info {
}
@include on-mobile-main-col {
- .video-channel img {
+ .video-channel my-actor-avatar {
@include build-channel-img-size($video-thumbnail-small-width);
}
}