284 lines
7.3 KiB
TypeScript
284 lines
7.3 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: 200,
|
|
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
|
|
}
|
|
});
|