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