137 lines
2.5 KiB
SCSS
137 lines
2.5 KiB
SCSS
@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: math.div(($video-img-width - $image-size), 2); // So we have the same width than the video miniature
|
|
|
|
@include actor-avatar-size($image-size);
|
|
|
|
margin: 0 $margin-size 0 $margin-size;
|
|
}
|
|
|
|
.search-result {
|
|
padding: 40px;
|
|
}
|
|
|
|
.alert-danger {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.results-header {
|
|
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);
|
|
@include margin-right(5px);
|
|
|
|
position: relative;
|
|
top: -1px;
|
|
background-image: url('../../assets/images/feather/filter.svg');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.entry {
|
|
display: flex;
|
|
margin-bottom: 40px;
|
|
max-width: 800px;
|
|
}
|
|
|
|
.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 {
|
|
@include margin-left(5px);
|
|
|
|
font-size: $video-miniature-row-info-font-size;
|
|
color: pvar(--greyForegroundColor);
|
|
}
|
|
|
|
// 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;
|
|
|
|
my-actor-avatar {
|
|
@include build-channel-img-size($video-thumbnail-medium-width);
|
|
|
|
grid-column: 1;
|
|
grid-row: 1 / -1;
|
|
}
|
|
}
|
|
|
|
.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 my-actor-avatar {
|
|
@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;
|
|
}
|
|
}
|