doc: add styles in MovieInfo stylesheet

2022-09-03 13:04:05 -07:00
parent 2a9f5fe56d
commit f59649d811
1 changed files with 75 additions and 0 deletions
@@ -0,0 +1,75 @@
+import { makeStyles } from '@mui/styles';
+
+export default makeStyles((theme) => ({
+    containerSpaceAround: {
+        display: 'flex',
+        justifyContent: 'space-around',
+        margin: '10px 0 !important',
+        [theme.breakpoints.down('sm')]: {
+            flexDirection: 'column',
+            flexWrap: 'wrap',
+        },
+    },
+    poster: {
+        borderRadius: '20px',
+        boxShadow: '0.5em 1em 1em rgb(64, 64, 70)',
+        width: '80%',
+        [theme.breakpoints.down('md')]: {
+            margin: '0 auto !imporatant',
+            width: '50%',
+        },
+        [theme.breakpoints.down('sm')]: {
+            margin: '0 auto !imporatant',
+            width: '100%',
+            height: '350px',
+            marginBottom: '30px',
+        },
+    },
+    genresContainer: {
+        margin: '10px 0 !imaportant',
+        display: 'flex',
+        justifyContent: 'space-around',
+        flexWrap: 'wrap',
+    },
+    genreImage: {
+        filter: theme.palette.mode === 'dark' && 'invert(1)',
+        marginRight: '10px',
+    },
+    links: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        textDecoration: 'none',
+        [theme.breakpoints.down('sm')]: {
+            padding: '0.5rem 1rem',
+        },
+    },
+    castImage: {
+        width: '100%',
+        maxWidth: '7em',
+        height: '8em',
+        objectFit: 'cover',
+        borderRadius: '10px',
+    },
+    buttonContainer: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        width: '100%',
+        [theme.breakpoints.down('sm')]: {
+            flexDirection: 'column',
+        },
+    },
+    modal: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    video: {
+        width: '50%',
+        height: '50%',
+        [theme.breakpoints.down('sm')]: {
+            width: '90%',
+            height: '90%',
+        },
+    },
+}));