align-items: center;
img {
- @include avatar(28px);
+ @include channel-avatar(28px);
margin-right: 8px;
}
}
}
-@mixin fluid-videos-miniature-layout {
- margin-left: $not-expanded-horizontal-margins !important;
- margin-right: $not-expanded-horizontal-margins !important;
+// Use margin by default, or padding if $margin is false
+@mixin fluid-videos-miniature-margins ($margin: true, $min-margin: 0) {
+ --fluidVideosMiniatureMargins: #{pvar(--horizontalMarginContent)};
+
+ @if $margin {
+ margin-left: var(--fluidVideosMiniatureMargins) !important;
+ margin-right: var(--fluidVideosMiniatureMargins) !important;
+ } @else {
+ padding-left: var(--fluidVideosMiniatureMargins) !important;
+ padding-right: var(--fluidVideosMiniatureMargins) !important;
+ }
@media screen and (max-width: $mobile-view) {
+ --fluidVideosMiniatureMargins: $min-margin;
+
width: auto;
- margin: 0 !important;
+ }
+}
+@mixin fluid-videos-miniature-layout {
+ @include fluid-videos-miniature-margins;
+
+ @media screen and (max-width: $mobile-view) {
.videos {
text-align: center;
}
}
- @media screen and (min-width: #{breakpoint(fhd)}) {
- margin-left: 6vw !important;
- margin-right: 6vw !important;
- }
-
@media screen and (min-width: $mobile-view) {
-
.videos {
--miniature-min-width: #{$video-thumbnail-width - 15px};
--miniature-max-width: #{$video-thumbnail-width};