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

Add elevation to reader mobile overlay

Browse Source
This commit is contained in:
schroda
2024-12-23 02:54:12 +01:00
parent 2acc82289d
commit d3e8f713ab
3 changed files with 5 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/modules/reader/components/overlay/ReaderOverlayHeaderMobile.tsx
View File

@@ -79,6 +79,7 @@ const BaseReaderOverlayHeaderMobile = ({
pt: (theme) => `max(env(safe-area-inset-top), ${theme.spacing(2)})`, pt: (theme) => `max(env(safe-area-inset-top), ${theme.spacing(2)})`,
backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.95), backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.95),
pointerEvents: 'all', pointerEvents: 'all',
boxShadow: 2,
}} }}
> >
<Tooltip title={t('reader.button.exit')}> <Tooltip title={t('reader.button.exit')}>

1
src/modules/reader/components/overlay/navigation/mobile/ReaderBottomBarMobile.tsx
View File

@@ -66,6 +66,7 @@ const BaseReaderBottomBarMobile = ({
alignItems: 'center', alignItems: 'center',
backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.95), backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.95),
pb: `max(${scrollbarXSize}px, env(safe-area-inset-bottom))`, pb: `max(${scrollbarXSize}px, env(safe-area-inset-bottom))`,
boxShadow: 2,
}} }}
> >
<Stack <Stack

5
src/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx
View File

@@ -68,7 +68,7 @@ const BaseMobileReaderProgressBar = ({
<IconButton <IconButton
onClick={openPreviousChapter} onClick={openPreviousChapter}
disabled={!previousChapter} disabled={!previousChapter}
sx={{ backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.85) }} sx={{ backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.85), boxShadow: 2 }}
> >
{getOptionForDirection(<SkipPreviousIcon />, <SkipNextIcon />, direction)} {getOptionForDirection(<SkipPreviousIcon />, <SkipNextIcon />, direction)}
</IconButton> </IconButton>
@@ -119,6 +119,7 @@ const BaseMobileReaderProgressBar = ({
alignItems: 'stretch', alignItems: 'stretch',
backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.85), backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.85),
borderRadius: 100, borderRadius: 100,
boxShadow: 2,
}, },
}, },
progressBarRoot: { progressBarRoot: {
@@ -185,7 +186,7 @@ const BaseMobileReaderProgressBar = ({
<IconButton <IconButton
onClick={openNextChapter} onClick={openNextChapter}
disabled={!nextChapter} disabled={!nextChapter}
sx={{ backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.85) }} sx={{ backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.85), boxShadow: 2 }}
> >
{getOptionForDirection(<SkipNextIcon />, <SkipPreviousIcon />, direction)} {getOptionForDirection(<SkipNextIcon />, <SkipPreviousIcon />, direction)}
</IconButton> </IconButton>