Adjust contrast in StoryViewer

This commit is contained in:
Fedor Indutny 2024-08-05 13:32:40 -07:00 committed by GitHub
parent 610e441de9
commit 02b01d4323
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 25 additions and 2 deletions

View file

@ -127,6 +127,7 @@
padding-block: 4px; padding-block: 4px;
padding-inline: 0; padding-inline: 0;
margin-bottom: 24px; margin-bottom: 24px;
text-shadow: 0px 0px 48px 0px $color-black-alpha-80;
&__overlay { &__overlay {
@include button-reset; @include button-reset;
@ -397,7 +398,17 @@
&--bottom { &--bottom {
background: linear-gradient($color-transparent, $color-black-alpha-60); background: linear-gradient($color-transparent, $color-black-alpha-60);
bottom: 0; bottom: 0;
height: 256px; height: 140px;
}
&--bottom.StoryViewer__protection--has-caption {
background: linear-gradient($color-transparent, $color-black-alpha-80);
height: 280px;
}
&--whole {
top: 0;
bottom: 0;
background: linear-gradient($color-transparent, $color-black-alpha-40);
} }
} }

View file

@ -726,7 +726,19 @@ export function StoryViewer({
)} )}
</div> </div>
<div className="StoryViewer__protection StoryViewer__protection--bottom" /> <div
className={classNames(
'StoryViewer__protection',
'StoryViewer__protection--bottom',
{
'StoryViewer__protection--has-caption': caption != null,
}
)}
/>
{hasExpandedCaption && (
<div className="StoryViewer__protection StoryViewer__protection--whole" />
)}
{canNavigateRight && ( {canNavigateRight && (
<button <button