@import '_mixins';
@import '_miniature';
-$more-button-width: 41px;
+$more-button-width: 40px;
$more-margin-right: 15px;
.video-miniature {
display: inline-flex;
flex-direction: column;
- margin-bottom: $video-miniature-margin-bottom;
- height: 195px;
+ padding-bottom: $video-miniature-margin-bottom;
vertical-align: top;
.video-bottom {
.video-miniature-information {
width: $video-miniature-width - $more-button-width - $more-margin-right;
line-height: normal;
- font-size: 13px;
+
+ .avatar {
+ margin: 10px 10px 0 0;
+
+ img {
+ @include avatar(40px);
+ }
+ }
.video-miniature-name {
@include miniature-name;
- font-size: 110%;
+ }
+
+ .video-miniature-meta {
+ width: calc(100% + #{$more-button-width});
+ overflow: hidden;
}
.video-miniature-created-at-views {
display: block;
- font-size: 95%;
+ font-size: 13px;
}
.video-miniature-account,
@include ellipsis;
display: block;
- font-size: 95%;
+ font-size: 13px;
color: pvar(--greyForegroundColor);
&:hover {
&.fit-width {
width: 100%;
- height: unset;
- margin-bottom: $video-miniature-margin-bottom / 2;
.video-bottom {
width: 100% !important;
.video-miniature-information {
- width: calc(100% - 40px) !important;
+ width: calc(100% - #{$more-button-width}) !important;
}
}
&.display-as-row {
flex-direction: row;
- margin-bottom: 0;
+ padding-bottom: 0;
height: auto;
display: flex;
flex-grow: 1;