blob: 39eaadb35ef64bc4fe90b96f1de90e40f089fa03 (
plain) (
tree)
|
|
@import '_variables';
@import '_mixins';
@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
@include channel-avatar($image-size);
margin: 0 $margin-size 0 $margin-size;
}
.search-result {
padding: 40px;
}
.results-header {
font-size: 16px;
padding-bottom: 20px;
margin-bottom: 30px;
border-bottom: 1px solid #DADADA;
.first-line {
display: flex;
flex-direction: row;
.results-counter {
flex-grow: 1;
.search-value {
font-weight: $font-semibold;
}
}
.results-filter-button {
cursor: pointer;
.icon.icon-filter {
@include icon(20px);
position: relative;
top: -1px;
margin-right: 5px;
background-image: url('../../assets/images/feather/filter.svg');
}
}
}
}
.entry {
display: flex;
margin-bottom: 40px;
}
.video-channel {
img {
@include build-channel-img-size($video-thumbnail-width);
}
}
.video-channel-info {
flex-grow: 1;
margin: 0 10px;
width: fit-content;
}
.video-channel-names {
@include disable-default-a-behaviour;
display: flex;
align-items: baseline;
color: pvar(--mainForegroundColor);
width: fit-content;
}
.video-channel-display-name {
font-weight: $font-semibold;
font-size: $video-miniature-row-name-font-size;
}
.video-channel-name {
font-size: $video-miniature-row-info-font-size;
color: pvar(--greyForegroundColor);
margin-left: 5px;
}
// Use the same breakpoints than in video-miniature
@include on-small-main-col {
.video-channel {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
.link-avatar {
grid-column: 1;
grid-row: 1 / -1;
}
img {
@include build-channel-img-size($video-thumbnail-medium-width);
}
}
.video-channel-info {
grid-column: 2;
grid-row: 1;
}
my-subscribe-button {
grid-column: 2;
grid-row: 2;
align-self: end;
}
}
@include on-mobile-main-col {
.video-channel img {
@include build-channel-img-size($video-thumbnail-small-width);
}
}
@media screen and (max-width: $mobile-view) {
.search-result {
padding: 20px 10px;
.results-header {
font-size: 15px !important;
}
}
.video-channel-display-name {
font-size: $video-miniature-row-mobile-name-font-size;
}
.video-channel-name {
font-size: $video-miniature-row-mobile-info-font-size;
}
}
|