74 lines
1.5 KiB
JavaScript
74 lines
1.5 KiB
JavaScript
// styles are inspired by `react-error-overlay`
|
|
|
|
var msgStyles = {
|
|
error: {
|
|
backgroundColor: "rgba(206, 17, 38, 0.1)",
|
|
color: "#fccfcf"
|
|
},
|
|
warning: {
|
|
backgroundColor: "rgba(251, 245, 180, 0.1)",
|
|
color: "#fbf5b4"
|
|
}
|
|
};
|
|
var iframeStyle = {
|
|
position: "fixed",
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
width: "100vw",
|
|
height: "100vh",
|
|
border: "none",
|
|
"z-index": 9999999999
|
|
};
|
|
var containerStyle = {
|
|
position: "fixed",
|
|
boxSizing: "border-box",
|
|
left: 0,
|
|
top: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
width: "100vw",
|
|
height: "100vh",
|
|
fontSize: "large",
|
|
padding: "2rem 2rem 4rem 2rem",
|
|
lineHeight: "1.2",
|
|
whiteSpace: "pre-wrap",
|
|
overflow: "auto",
|
|
backgroundColor: "rgba(0, 0, 0, 0.9)",
|
|
color: "white"
|
|
};
|
|
var headerStyle = {
|
|
color: "#e83b46",
|
|
fontSize: "2em",
|
|
whiteSpace: "pre-wrap",
|
|
fontFamily: "sans-serif",
|
|
margin: "0 2rem 2rem 0",
|
|
flex: "0 0 auto",
|
|
maxHeight: "50%",
|
|
overflow: "auto"
|
|
};
|
|
var dismissButtonStyle = {
|
|
color: "#ffffff",
|
|
lineHeight: "1rem",
|
|
fontSize: "1.5rem",
|
|
padding: "1rem",
|
|
cursor: "pointer",
|
|
position: "absolute",
|
|
right: 0,
|
|
top: 0,
|
|
backgroundColor: "transparent",
|
|
border: "none"
|
|
};
|
|
var msgTypeStyle = {
|
|
color: "#e83b46",
|
|
fontSize: "1.2em",
|
|
marginBottom: "1rem",
|
|
fontFamily: "sans-serif"
|
|
};
|
|
var msgTextStyle = {
|
|
lineHeight: "1.5",
|
|
fontSize: "1rem",
|
|
fontFamily: "Menlo, Consolas, monospace"
|
|
};
|
|
export { msgStyles, iframeStyle, containerStyle, headerStyle, dismissButtonStyle, msgTypeStyle, msgTextStyle }; |