@mixin miniature-name {
@include ellipsis-multiline(1.1em, 2);
+ @include peertube-word-wrap(false);
- word-break: break-all;
- word-wrap: break-word;
transition: color 0.2s;
font-weight: $font-semibold;
color: pvar(--mainForegroundColor);
}
&.blur-filter {
+ @include padding-left(4px);
+
filter: blur(3px);
- padding-left: 4px;
}
}
@mixin miniature-thumbnail {
- @include disable-outline;
-
$play-overlay-transition: 0.2s ease;
$play-overlay-height: 26px;
$play-overlay-width: 18px;
+ @include disable-outline;
+
display: flex;
flex-direction: column;
position: relative;
opacity: 0;
background-color: rgba(0, 0, 0, 0.3);
- &, .icon {
+ &,
+ .icon {
transition: all $play-overlay-transition;
}
&.blur-filter {
filter: blur(20px);
- transform : scale(1.03);
+ transform: scale(1.03);
}
}
}
--gridVideosMiniatureMargins: #{pvar(--videosHorizontalMarginContent)};
@if $margin {
- margin-left: var(--gridVideosMiniatureMargins) !important;
- margin-right: var(--gridVideosMiniatureMargins) !important;
+ @include margin-left(var(--gridVideosMiniatureMargins) !important);
+ @include margin-right(var(--gridVideosMiniatureMargins) !important);
} @else {
- padding-left: var(--gridVideosMiniatureMargins) !important;
- padding-right: var(--gridVideosMiniatureMargins) !important;
+ @include padding-left(var(--gridVideosMiniatureMargins) !important);
+ @include padding-right(var(--gridVideosMiniatureMargins) !important);
}
@media screen and (max-width: $mobile-view) {
}
@mixin grid-videos-miniature-layout {
- @include grid-videos-miniature-margins;
-
@media screen and (min-width: $mobile-view) {
.videos,
.playlists {
column-gap: 30px;
grid-template-columns: repeat(
auto-fill,
- minmax(
- var(--miniatureMinWidth),
- 1fr
- )
+ minmax(var(--miniatureMinWidth), 1fr)
);
.video-wrapper,
}
}
}
+}
- @media screen and (max-width: $mobile-view) {
- .videos,
- .playlists {
- text-align: center;
- }
- }
+@mixin grid-videos-miniature-layout-with-margins {
+ @include grid-videos-miniature-margins;
+ @include grid-videos-miniature-layout;
}