4 @mixin build-channel-img-size ($video-img-width) {
5 $image-size: min(130px, $video-img-width);
6 $margin-size: ($video-img-width - $image-size) / 2; // So we have the same width than the video miniature
8 @include channel-avatar($image-size);
10 margin: 0 $margin-size 0 $margin-size;
21 border-bottom: 1px solid #DADADA;
31 font-weight: $font-semibold;
35 .results-filter-button {
44 background-image: url('../../assets/images/feather/filter.svg');
58 @include build-channel-img-size($video-thumbnail-width);
68 .video-channel-names {
69 @include disable-default-a-behaviour;
72 align-items: baseline;
73 color: pvar(--mainForegroundColor);
77 .video-channel-display-name {
78 font-weight: $font-semibold;
79 font-size: $video-miniature-row-name-font-size;
83 font-size: $video-miniature-row-info-font-size;
84 color: pvar(--greyForegroundColor);
88 // Use the same breakpoints than in video-miniature
89 @include on-small-main-col {
92 grid-template-columns: auto 1fr;
93 grid-template-rows: auto auto;
101 @include build-channel-img-size($video-thumbnail-medium-width);
105 .video-channel-info {
110 my-subscribe-button {
117 @include on-mobile-main-col {
119 @include build-channel-img-size($video-thumbnail-small-width);
123 @media screen and (max-width: $mobile-view) {
128 font-size: 15px !important;
132 .video-channel-display-name {
133 font-size: $video-miniature-row-mobile-name-font-size;
136 .video-channel-name {
137 font-size: $video-miniature-row-mobile-info-font-size;