Adjust contrast in StoryViewer
This commit is contained in:
parent
610e441de9
commit
02b01d4323
2 changed files with 25 additions and 2 deletions
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue