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

Update hover effect using more of Material-UI color pallete (#29)

Browse Source
This commit is contained in:
voltrare
2021-09-17 16:07:03 +08:00
committed by GitHub
parent 32c9bd76c7
commit bdbaf256a8
4 changed files with 20 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/anime/EpisodeCard.tsx
View File

@@ -46,12 +46,12 @@ const useStyles = makeStyles((theme) => ({
card: { card: {
margin: '10px', margin: '10px',
'&:hover': { '&:hover': {
backgroundColor: 'rgba(255, 255, 255, 0.2)', backgroundColor: theme.palette.action.hover,
transition: 'background-color 0ms ease', transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
}, },
'&:active': { '&:active': {
backgroundColor: 'rgba(255, 255, 255, 0.1)', backgroundColor: theme.palette.action.selected,
transition: 'background-color 100ms ease-out', transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
}, },
}, },
})); }));

8
src/components/anime/SourceCard.tsx
View File

@@ -41,6 +41,14 @@ const useStyles = makeStyles((theme) => ({
}, },
card: { card: {
margin: '10px', margin: '10px',
'&:hover': {
backgroundColor: theme.palette.action.hover,
transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
},
'&:active': {
backgroundColor: theme.palette.action.selected,
transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
},
}, },
})); }));

8
src/components/manga/ChapterCard.tsx
View File

@@ -46,12 +46,12 @@ const useStyles = makeStyles((theme) => ({
card: { card: {
margin: '10px', margin: '10px',
'&:hover': { '&:hover': {
backgroundColor: 'rgba(255, 255, 255, 0.2)', backgroundColor: theme.palette.action.hover,
transition: 'background-color 0ms ease', transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
}, },
'&:active': { '&:active': {
backgroundColor: 'rgba(255, 255, 255, 0.1)', backgroundColor: theme.palette.action.selected,
transition: 'background-color 100ms ease-out', transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
}, },
}, },
})); }));

8
src/components/manga/SourceCard.tsx
View File

@@ -46,12 +46,12 @@ const useStyles = makeStyles((theme) => ({
card: { card: {
margin: '10px', margin: '10px',
'&:hover': { '&:hover': {
backgroundColor: 'rgba(255, 255, 255, 0.2)', backgroundColor: theme.palette.action.hover,
transition: 'background-color 0ms ease', transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
}, },
'&:active': { '&:active': {
backgroundColor: 'rgba(255, 255, 255, 0.1)', backgroundColor: theme.palette.action.selected,
transition: 'background-color 100ms ease-out', transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
}, },
}, },
showMobile: { showMobile: {