}
.icon {
- width: 0;
- height: 0;
-
- position: absolute;
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%) scale(0.5);
-
- border-top: ($play-overlay-height / 2) solid transparent;
- border-bottom: ($play-overlay-height / 2) solid transparent;
-
- border-left: $play-overlay-width solid rgba(255, 255, 255, 0.95);
+ @include play-icon($play-overlay-width, $play-overlay-height);
}
}
margin-bottom: 15px;
display: flex;
justify-content: space-between;
- border-top: 1px solid $separator-border-color;
+
+ &:not(h2) {
+ border-top: 1px solid $separator-border-color;
+ }
a {
&:hover, &:focus:not(.focus-visible), &:active {
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};