X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fsass%2Finclude%2F_miniature.scss;h=42626344455de909c8f5f2b7a44d9ac8174e34dd;hb=d794137057fc5fcea10ddd29f82e79ee2412fea4;hp=326d4677a5905d8f3d3cf59ebd9ddb62a489bcdb;hpb=900f7820814b95b07ef0bcac04036a95abfbe060;p=github%2FChocobozzz%2FPeerTube.git diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss index 326d4677a..426263444 100644 --- a/client/src/sass/include/_miniature.scss +++ b/client/src/sass/include/_miniature.scss @@ -136,7 +136,7 @@ $play-overlay-width: 18px; align-items: center; img { - @include avatar(28px); + @include channel-avatar(28px); margin-right: 8px; } @@ -178,32 +178,20 @@ $play-overlay-width: 18px; // 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: $not-expanded-horizontal-margins !important; - margin-right: $not-expanded-horizontal-margins !important; + margin-left: var(--fluidVideosMiniatureMargins) !important; + margin-right: var(--fluidVideosMiniatureMargins) !important; } @else { - padding-left: $not-expanded-horizontal-margins !important; - padding-right: $not-expanded-horizontal-margins !important; + padding-left: var(--fluidVideosMiniatureMargins) !important; + padding-right: var(--fluidVideosMiniatureMargins) !important; } @media screen and (max-width: $mobile-view) { - width: auto; + --fluidVideosMiniatureMargins: $min-margin; - @if $margin { - margin: $min-margin !important; - } @else { - padding: $min-margin !important; - } - } - - @media screen and (min-width: #{breakpoint(fhd)}) { - @if $margin { - margin-left: 6vw !important; - margin-right: 6vw !important; - } @else { - padding-left: 6vw !important; - padding-right: 6vw !important; - } + width: auto; } }