2 @use '_variables' as *;
5 @mixin build-channel-img-size ($video-img-width) {
6 $image-size: min(130px, $video-img-width);
7 $margin-size: math.div(($video-img-width - $image-size), 2); // So we have the same width than the video miniature
9 @include actor-avatar-size($image-size);
11 margin: 0 $margin-size 0 $margin-size;
26 border-bottom: 1px solid #DADADA;
36 font-weight: $font-semibold;
40 .results-filter-button {
45 @include margin-right(5px);
49 background-image: url('../../assets/images/feather/filter.svg');
61 .video-channel my-actor-avatar {
62 @include build-channel-img-size($video-thumbnail-width);
71 .video-channel-names {
72 @include disable-default-a-behaviour;
75 align-items: baseline;
76 color: pvar(--mainForegroundColor);
80 .video-channel-display-name {
81 font-weight: $font-semibold;
82 font-size: $video-miniature-row-name-font-size;
86 @include margin-left(5px);
88 font-size: $video-miniature-row-info-font-size;
89 color: pvar(--greyForegroundColor);
92 // Use the same breakpoints than in video-miniature
93 @include on-small-main-col {
96 grid-template-columns: auto 1fr;
97 grid-template-rows: auto auto;
100 @include build-channel-img-size($video-thumbnail-medium-width);
107 .video-channel-info {
112 my-subscribe-button {
119 @include on-mobile-main-col {
120 .video-channel my-actor-avatar {
121 @include build-channel-img-size($video-thumbnail-small-width);
125 @media screen and (max-width: $mobile-view) {
130 font-size: 15px !important;
134 .video-channel-display-name {
135 font-size: $video-miniature-row-mobile-name-font-size;
138 .video-channel-name {
139 font-size: $video-miniature-row-mobile-info-font-size;