Spaces:
Running
Running
File size: 2,013 Bytes
3299552 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
import { GlobalStyles as MuiGlobalStyles } from '@mui/material';
import { fadeIn } from './animations'; // Import the missing fadeIn animation
const GlobalStyles = () => (
<MuiGlobalStyles
styles={(theme) => ({
html: {
scrollBehavior: 'smooth',
},
body: {
margin: 0,
padding: 0,
transition: 'all 0.3s ease',
backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary,
fontFamily: theme.typography.fontFamily,
lineHeight: '1.6',
'&.dark-mode': {
backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary,
},
'&.light-mode': {
backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary,
},
},
a: {
color: theme.palette.primary.main,
textDecoration: 'none',
transition: 'color 0.3s ease',
'&:hover': {
textDecoration: 'underline',
color: theme.palette.primary.dark,
},
},
'h1, h2, h3, h4, h5, h6': {
fontWeight: 700,
marginTop: theme.spacing(3),
marginBottom: theme.spacing(2),
},
'::selection': {
backgroundColor: theme.palette.primary.main,
color: theme.palette.primary.contrastText,
},
'.spiritual-highlight': {
position: 'relative',
'&::after': {
content: '""',
position: 'absolute',
bottom: -2,
left: 0,
width: '100%',
height: 2,
background: `linear-gradient(90deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,
transform: 'scaleX(0)',
transition: 'transform 0.3s ease',
},
'&:hover::after': {
transform: 'scaleX(1)',
},
},
'.page-transition': {
animation: `${fadeIn} 0.5s ease forwards`,
},
})}
/>
);
export default GlobalStyles; |