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-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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in a new issue