File size: 1,978 Bytes
2d85080
 
 
 
 
 
 
 
2f65818
 
 
 
2d85080
 
2f65818
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2d85080
 
 
 
 
 
2f65818
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
import {
	Divider,
	DividerProps,
	ListItemButton,
	ListItemButtonProps,
	Paper,
	PaperProps,
} from "@mui/material";
import { styled } from "@mui/material/styles";

export const SectionBox = styled(Paper)<PaperProps>(({ theme }) => ({
	display: "flex",
	flexDirection: "column",
	gap: 10,
	padding: 15,
	paddingTop: 30,
	paddingBottom: 30,
	marginBottom: 20,
	background: `linear-gradient(to bottom right, ${theme.palette.primary.main} 0%, ${theme.palette.secondary.main} 100%)`,
}));

export const HighlightBox = styled(Paper)<PaperProps>(({ theme }) => ({
	display: "flex",
	alignItems: "center",
	justifyContent: "center",
	padding: 10,
	borderBottom: `3px solid transparent`,
	borderImage: `linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%)`,
	borderImageSlice: 1,
}));

export const RainbowBox = styled("div")(({ theme }) => ({
	border: `1px solid transparent`,
	borderImage: `linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%)`,
	borderImageSlice: 1,
}));

export const RainbowListItemButton = styled(ListItemButton)<ListItemButtonProps>(({ theme }) => ({
	border: `1px solid transparent`,
	borderImage: `linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%)`,
	borderImageSlice: 1,
}));

export const DividerBox = styled(Divider)<DividerProps>(({ theme }) => ({
	marginTop: 20,
	marginBottom: 20,
	background: "transparent",
	border: "none",
}));

export const MarkerBox = styled("span")(({ theme }) => ({
	padding: 2,
	background: `linear-gradient(to bottom right, ${theme.palette.primary.main} 0%, ${theme.palette.secondary.main} 100%)`,
}));

export const OutlinedBox = styled("span")(({ theme }) => ({
	...theme.typography.body1,
	padding: theme.spacing(0.25),
	border: `1px solid ${theme.palette.grey[800]}`,
	borderRadius: theme.shape.borderRadius,
	transition: theme.transitions.create(["border-color", "box-shadow"]),
}));