284 lines
7.4 KiB
TypeScript
284 lines
7.4 KiB
TypeScript
import { Theme, createStyles } from "@material-ui/core";
|
|
import { isDarwinApp } from "../utilities/desktop";
|
|
import { isAppbarExpanded } from "../utilities/appbar";
|
|
|
|
export const styles = (theme: Theme) => createStyles({
|
|
root: {
|
|
width: '100%',
|
|
display: 'flex',
|
|
height: '100%'
|
|
},
|
|
pageLayoutConstraints: {
|
|
marginTop: 72,
|
|
flexGrow: 1,
|
|
padding: theme.spacing.unit * 3,
|
|
paddingLeft: theme.spacing.unit,
|
|
paddingRight: theme.spacing.unit,
|
|
[theme.breakpoints.up('md')]: {
|
|
marginLeft: 250,
|
|
marginTop: 88,
|
|
paddingLeft: theme.spacing.unit * 24,
|
|
paddingRight: theme.spacing.unit * 24
|
|
},
|
|
backgroundColor: theme.palette.background.default,
|
|
minHeight: isDarwinApp()? "100vh": 'auto',
|
|
},
|
|
pageLayoutMaxConstraints: {
|
|
marginTop: 72,
|
|
flexGrow: 1,
|
|
paddingTop: theme.spacing.unit * 2,
|
|
padding: theme.spacing.unit,
|
|
[theme.breakpoints.up('md')]: {
|
|
marginLeft: 250,
|
|
marginTop: 88,
|
|
padding: theme.spacing.unit * 3,
|
|
paddingLeft: theme.spacing.unit * 16,
|
|
paddingRight: theme.spacing.unit * 16,
|
|
},
|
|
[theme.breakpoints.up('lg')]: {
|
|
marginLeft: 250,
|
|
marginTop: 88,
|
|
padding: theme.spacing.unit * 3,
|
|
paddingLeft: theme.spacing.unit * 32,
|
|
paddingRight: theme.spacing.unit * 32,
|
|
},
|
|
[theme.breakpoints.up('xl')]: {
|
|
marginLeft: 250,
|
|
marginTop: 88,
|
|
padding: theme.spacing.unit * 3,
|
|
paddingLeft: theme.spacing.unit * 40,
|
|
paddingRight: theme.spacing.unit * 40,
|
|
},
|
|
backgroundColor: theme.palette.background.default,
|
|
minHeight: isDarwinApp()? "100vh": 'auto',
|
|
},
|
|
pageLayoutMinimalConstraints: {
|
|
flexGrow: 1,
|
|
[theme.breakpoints.up('md')]: {
|
|
marginLeft: 250,
|
|
},
|
|
backgroundColor: theme.palette.background.default,
|
|
minHeight: isDarwinApp()? "100vh": 'auto',
|
|
},
|
|
pageLayoutEmptyTextConstraints: {
|
|
paddingLeft: theme.spacing.unit * 2,
|
|
paddingRight: theme.spacing.unit * 2
|
|
},
|
|
pageHeroBackground: {
|
|
position: 'relative',
|
|
height: 'intrinsic',
|
|
backgroundColor: theme.palette.primary.dark,
|
|
width: '100%',
|
|
color: theme.palette.common.white,
|
|
zIndex: 1,
|
|
top: isAppbarExpanded()? 80: 64,
|
|
},
|
|
pageHeroBackgroundImage: {
|
|
position: 'absolute',
|
|
bottom: 0,
|
|
left: 0,
|
|
backgroundPosition: 'center',
|
|
backgroundRepeat: 'no-repeat',
|
|
backgroundSize: 'cover',
|
|
height: '100%',
|
|
width: '100%',
|
|
opacity: 0.35,
|
|
zIndex: -1,
|
|
filter: 'blur(2px)'
|
|
},
|
|
pageHeroContent: {
|
|
padding: 16,
|
|
paddingTop: 8,
|
|
textAlign: 'center',
|
|
width: '100%',
|
|
height: '100%',
|
|
[theme.breakpoints.up('md')]: {
|
|
paddingLeft: '5%',
|
|
paddingRight: '5%',
|
|
},
|
|
position: "relative",
|
|
zIndex: 1
|
|
},
|
|
pageHeroToolbar: {
|
|
position: "absolute",
|
|
right: theme.spacing.unit * 2,
|
|
marginTop: -16,
|
|
},
|
|
pageListConstraints: {
|
|
paddingLeft: theme.spacing.unit,
|
|
paddingRight: theme.spacing.unit,
|
|
[theme.breakpoints.up('sm')]: {
|
|
paddingLeft: theme.spacing.unit * 2,
|
|
paddingRight: theme.spacing.unit * 2
|
|
},
|
|
//backgroundColor: theme.palette.background.default
|
|
},
|
|
profileToolbar: {
|
|
zIndex: 2,
|
|
paddingTop: 8,
|
|
},
|
|
profileContent: {
|
|
padding: 16,
|
|
[theme.breakpoints.up('md')]: {
|
|
paddingLeft: '5%',
|
|
paddingRight: '5%',
|
|
paddingBottom: 48,
|
|
paddingTop: 24,
|
|
},
|
|
width: '100%',
|
|
height: '100%',
|
|
position: 'relative',
|
|
zIndex: 1,
|
|
display: 'flex',
|
|
paddingBottom: 24,
|
|
paddingTop: 24,
|
|
},
|
|
profileAvatar: {
|
|
width: 64,
|
|
height: 64,
|
|
[theme.breakpoints.up('md')]: {
|
|
width: 128,
|
|
height: 128,
|
|
},
|
|
backgroundColor: theme.palette.primary.main
|
|
},
|
|
profileUserBox: {
|
|
paddingLeft: theme.spacing.unit * 2
|
|
},
|
|
pageProfileAvatar: {
|
|
width: 128,
|
|
height: 128,
|
|
marginLeft: 'auto',
|
|
marginRight: 'auto',
|
|
marginBottom: theme.spacing.unit,
|
|
backgroundColor: theme.palette.primary.main
|
|
},
|
|
pageProfileNameEmoji: {
|
|
height: theme.typography.h4.fontSize,
|
|
fontWeight: theme.typography.fontWeightMedium,
|
|
},
|
|
pageProfileStatsDiv: {
|
|
display: 'inline-flex',
|
|
marginTop: theme.spacing.unit * 2,
|
|
marginBottom: theme.spacing.unit * 2,
|
|
},
|
|
pageProfileStat: {
|
|
marginLeft: theme.spacing.unit,
|
|
marginRight: theme.spacing.unit
|
|
},
|
|
pageProfileFollowButton: {
|
|
marginTop: theme.spacing.unit,
|
|
marginLeft: theme.spacing.unit,
|
|
marginRight: theme.spacing.unit,
|
|
zIndex: 3
|
|
},
|
|
pageContentLayoutConstraints: {
|
|
paddingLeft: theme.spacing.unit,
|
|
paddingRight: theme.spacing.unit,
|
|
paddingTop: theme.spacing.unit * 12,
|
|
paddingBottom: theme.spacing.unit * 2,
|
|
[theme.breakpoints.up('lg')]: {
|
|
paddingLeft: theme.spacing.unit * 32,
|
|
paddingRight: theme.spacing.unit * 32
|
|
},
|
|
//backgroundColor: theme.palette.background.default,
|
|
},
|
|
errorCard: {
|
|
padding: theme.spacing.unit * 4,
|
|
backgroundColor: theme.palette.error.main,
|
|
},
|
|
pageTopChipContainer: {
|
|
zIndex: 24,
|
|
position: "fixed",
|
|
width: '100%'
|
|
},
|
|
pageTopChips: {
|
|
textAlign: 'center',
|
|
[theme.breakpoints.up('md')]: {
|
|
marginRight: '55%'
|
|
},
|
|
[theme.breakpoints.up('xl')]: {
|
|
marginRight: '50%'
|
|
}
|
|
},
|
|
pageTopChip: {
|
|
boxShadow: theme.shadows[10]
|
|
},
|
|
clearAllButton: {
|
|
zIndex: 3,
|
|
position: 'absolute',
|
|
right: 24,
|
|
top: 100,
|
|
[theme.breakpoints.up('md')]: {
|
|
top: 116,
|
|
right: theme.spacing.unit * 24,
|
|
}
|
|
},
|
|
mobileOnly: {
|
|
[theme.breakpoints.up('sm')]: {
|
|
display: 'none'
|
|
}
|
|
},
|
|
desktopOnly: {
|
|
display: 'none',
|
|
[theme.breakpoints.up('sm')]: {
|
|
display: 'block'
|
|
}
|
|
},
|
|
pageLayoutFooter: {
|
|
'& a': {
|
|
color: theme.palette.primary.light
|
|
}
|
|
},
|
|
youHeadingAvatar: {
|
|
height: 88,
|
|
width: 88
|
|
},
|
|
youPaper: {
|
|
padding: theme.spacing.unit * 2,
|
|
},
|
|
youGrid: {
|
|
textAlign: "center",
|
|
'& *': {
|
|
marginLeft: "auto",
|
|
marginRight: "auto",
|
|
}
|
|
},
|
|
youGridAvatar: {
|
|
height: 128,
|
|
width: 128
|
|
},
|
|
youGridImage: {
|
|
width: 'auto',
|
|
height: 128
|
|
},
|
|
instanceHeaderPaper: {
|
|
height: 150,
|
|
backgroundPosition: "center",
|
|
backgroundRepeat: "no-repeat",
|
|
backgroundSize: "cover",
|
|
position: "relative",
|
|
backgroundColor: theme.palette.primary.dark,
|
|
borderTopLeftRadius: theme.shape.borderRadius,
|
|
borderTopRightRadius: theme.shape.borderRadius
|
|
},
|
|
instanceHeaderText: {
|
|
position: "absolute",
|
|
bottom: theme.spacing.unit,
|
|
left: theme.spacing.unit * 2,
|
|
'& *': {
|
|
color: theme.palette.common.white,
|
|
textShadow: `0 0 4px ${theme.palette.grey[700]}`,
|
|
fontWeight: 600,
|
|
},
|
|
},
|
|
instanceToolbar: {
|
|
position: "absolute",
|
|
top: theme.spacing.unit,
|
|
right: theme.spacing.unit,
|
|
color: theme.palette.common.white
|
|
},
|
|
pageGrow: {
|
|
flexGrow: 1
|
|
}
|
|
}); |