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-inline: 0;
margin-bottom: 24px;
text-shadow: 0px 0px 48px 0px $color-black-alpha-80;
&__overlay {
@include button-reset;
@ -397,7 +398,17 @@
&--bottom {
background: linear-gradient($color-transparent, $color-black-alpha-60);
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 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 && (
<button