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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
|
import { deepOrange, deepPurple, pink, green } from '@material-ui/core/colors';
const styles = theme => ({
profileList: {
padding: 0,
'& li': {
paddingLeft: 0
}
},
avatar: {
margin: 10,
},
orangeAvatar: {
backgroundColor: deepOrange[500],
},
purpleAvatar: {
backgroundColor: deepPurple[500],
},
pinkAvatar: {
backgroundColor: pink[500],
},
greenAvatar: {
backgroundColor: green[500],
},
divider: {
margin: `${theme.spacing(3)}px 0`,
},
albumRoot: {
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'space-around',
overflow: 'hidden',
backgroundColor: theme.palette.background.paper,
},
gridList: {
width: 500,
height: 'auto',
},
icon: {
color: 'rgba(255, 255, 255, 0.54)',
},
img: {
maxWidth: 'none'
},
root: theme.mixins.gutters({
paddingTop: 16,
paddingBottom: 16,
marginTop: theme.spacing(3),
}),
progressRoot: {
marginBottom: 30,
},
styledPaper: {
backgroundColor: theme.palette.secondary.main,
padding: 20,
'& $title, & $subtitle': {
color: theme.palette.common.white
}
},
progress: {
marginTop: 20,
background: theme.palette.secondary.dark,
'& div': {
background: theme.palette.primary.light,
}
},
chip: {
marginTop: 20,
background: theme.palette.primary.light,
'& div': {
background: green[500],
color: theme.palette.common.white
}
},
colList: {
'& li': {
padding: '10px 0'
},
'& $avatar': {
margin: 0
}
},
title: {},
subtitle: {},
rootAlbum: {
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'space-around',
overflow: 'hidden',
},
image: {
position: 'relative',
height: 'auto',
boxShadow: theme.shadows[6],
borderRadius: 2,
overflow: 'hidden',
marginBottom: 30,
width: '100% !important', // Overrides inline-style
'&:hover, &$focusVisible': {
zIndex: 1,
'& $imageBackdrop': {
opacity: 0.6,
},
'& $imageMarked': {
opacity: 0,
},
'& $imageTitle': {
border: '4px solid currentColor',
},
},
},
imageButton: {
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: theme.palette.common.white,
},
imageBackdrop: {
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
backgroundColor: theme.palette.common.black,
opacity: 0.4,
transition: theme.transitions.create('opacity'),
},
imageTitle: {
position: 'relative',
padding: `${theme.spacing(2)}px ${theme.spacing(4)}px ${theme.spacing(1) + 6}px`,
},
imageMarked: {
height: 3,
width: 18,
backgroundColor: theme.palette.common.white,
position: 'absolute',
bottom: -2,
left: 'calc(50% - 9px)',
transition: theme.transitions.create('opacity'),
},
focusVisible: {},
gridListAlbum: {
height: 'auto',
background: theme.palette.common.black
},
subheader: {
width: '100%',
},
});
export default styles;
|
