ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

nicer gradient

Browse Source
This commit is contained in:
Aria Moradi
2021-10-31 20:14:05 +03:30
parent aabedc5d08
commit e89497df33
1 changed files with 12 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/MangaCard.tsx
View File

@@ -29,11 +29,18 @@ const useStyles = makeStyles((theme) => ({
},
gradient: {
position: 'absolute',
top: 0,
bottom: 0,
width: '100%',
height: '100%',
background: 'linear-gradient(to bottom, transparent, #000000)',
opacity: 0.5,
height: '30%',
background: 'linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%)',
opacity: 1,
},
gradient2: {
position: 'absolute',
bottom: 0,
width: '100%',
height: '20%',
background: 'linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%)',
},
title: {
position: 'absolute',
@@ -110,6 +117,7 @@ const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref)
imgClassName={classes.image}
/>
<div className={classes.gradient} />
<div className={classes.gradient2} />
<Typography className={classes.title}>
{truncateText(title, 61)}
</Typography>