feat(ui): restyle core views with Material You

src/features/reader/overlay/mobile/ReaderOverlayHeaderMobile.tsx

@@ -35,6 +35,7 @@ import {
     useReaderStore,
 } from '@/features/reader/stores/ReaderStore.ts';
 import { copyToClipboard } from '@/lib/HelperFunctions.ts';
+import { MATERIAL_YOU_VISUALS } from '@/features/theme/services/MaterialYouVisualTokens.ts';
 
 const DEFAULT_MANGA = { ...FALLBACK_MANGA, title: '' };
 
@@ -61,9 +62,12 @@ const BaseReaderOverlayHeaderMobile = ({ isVisible, ref }: MobileHeaderProps & {
                     right: `${scrollbar.ySize}px`,
                     p: 2,
                     pt: (theme) => `max(env(safe-area-inset-top), ${theme.spacing(2)})`,
-                    backgroundColor: (theme) => theme.alpha(theme.palette.background.paper, 0.95),
+                    backgroundColor: (theme) =>
+                        theme.alpha(theme.palette.background.paper, MATERIAL_YOU_VISUALS.readerChromeOpacity),
+                    backdropFilter: 'blur(20px) saturate(1.15)',
                     pointerEvents: 'all',
-                    boxShadow: 2,
+                    borderBottom: '1px solid',
+                    borderColor: 'divider',
                 }}
             >
                 <ReaderExitButton />

src/features/reader/overlay/navigation/desktop/ReaderNavBarDesktop.tsx

@@ -34,6 +34,7 @@ import {
     useReaderSettingsStore,
     useReaderStore,
 } from '@/features/reader/stores/ReaderStore.ts';
+import { MATERIAL_YOU_VISUALS } from '@/features/theme/services/MaterialYouVisualTokens.ts';
 
 const useGetPreviousNavBarStaticValue = (isVisible: boolean, isStaticNav: boolean) => {
     const wasNavBarStaticRef = useRef(isStaticNav);
@@ -104,6 +105,12 @@ const BaseReaderNavBarDesktop = ({
             slotProps={{
                 paper: {
                     ref: (ref: HTMLDivElement | null) => setNavBarElement(ref),
+                    sx: {
+                        m: 1,
+                        height: 'calc(100% - 16px)',
+                        borderRadius: `${MATERIAL_YOU_VISUALS.detailRadius}px`,
+                        overflow: 'hidden',
+                    },
                 },
                 transition: {
                     unmountOnExit: true,
@@ -111,7 +118,7 @@ const BaseReaderNavBarDesktop = ({
             }}
         >
             <ReaderNavContainer sx={{ backgroundColor: 'background.paper', pointerEvents: 'all' }}>
-                <Stack sx={{ p: 2, gap: 2, backgroundColor: 'action.hover' }}>
+                <Stack sx={{ p: 2, gap: 2, backgroundColor: 'action.selected' }}>
                     <Stack sx={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
                         <ReaderExitButton />
                         <CustomTooltip title={t`Static navigation`}>

src/features/reader/overlay/navigation/mobile/ReaderBottomBarMobile.tsx

@@ -24,6 +24,7 @@ import { ReaderChapterList } from '@/features/reader/overlay/navigation/componen
 import { ReaderBottomBarMobileQuickSettings } from '@/features/reader/overlay/navigation/mobile/quick-settings/ReaderBottomBarMobileQuickSettings.tsx';
 import { useResizeObserver } from '@/base/hooks/useResizeObserver.tsx';
 import { useReaderChaptersStore, useReaderScrollbarStore } from '@/features/reader/stores/ReaderStore.ts';
+import { MATERIAL_YOU_VISUALS } from '@/features/theme/services/MaterialYouVisualTokens.ts';
 
 const BaseReaderBottomBarMobile = ({
     openSettings,
@@ -68,9 +69,13 @@ const BaseReaderBottomBarMobile = ({
                         ref={bottomBarRef}
                         sx={{
                             alignItems: 'center',
-                            backgroundColor: (theme) => theme.alpha(theme.palette.background.paper, 0.95),
+                            backgroundColor: (theme) =>
+                                theme.alpha(theme.palette.background.paper, MATERIAL_YOU_VISUALS.readerChromeOpacity),
+                            backdropFilter: 'blur(20px) saturate(1.15)',
                             pb: `max(${scrollbar.xSize}px, env(safe-area-inset-bottom))`,
-                            boxShadow: 2,
+                            borderTop: '1px solid',
+                            borderColor: 'divider',
+                            borderRadius: '28px 28px 0 0',
                             pointerEvents: 'all',
                         }}
                     >