styles.js 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. // styles are inspired by `react-error-overlay`
  2. var msgStyles = {
  3. error: {
  4. backgroundColor: "rgba(206, 17, 38, 0.1)",
  5. color: "#fccfcf"
  6. },
  7. warning: {
  8. backgroundColor: "rgba(251, 245, 180, 0.1)",
  9. color: "#fbf5b4"
  10. }
  11. };
  12. var iframeStyle = {
  13. position: "fixed",
  14. top: 0,
  15. left: 0,
  16. right: 0,
  17. bottom: 0,
  18. width: "100vw",
  19. height: "100vh",
  20. border: "none",
  21. "z-index": 9999999999
  22. };
  23. var containerStyle = {
  24. position: "fixed",
  25. boxSizing: "border-box",
  26. left: 0,
  27. top: 0,
  28. right: 0,
  29. bottom: 0,
  30. width: "100vw",
  31. height: "100vh",
  32. fontSize: "large",
  33. padding: "2rem 2rem 4rem 2rem",
  34. lineHeight: "1.2",
  35. whiteSpace: "pre-wrap",
  36. overflow: "auto",
  37. backgroundColor: "rgba(0, 0, 0, 0.9)",
  38. color: "white"
  39. };
  40. var headerStyle = {
  41. color: "#e83b46",
  42. fontSize: "2em",
  43. whiteSpace: "pre-wrap",
  44. fontFamily: "sans-serif",
  45. margin: "0 2rem 2rem 0",
  46. flex: "0 0 auto",
  47. maxHeight: "50%",
  48. overflow: "auto"
  49. };
  50. var dismissButtonStyle = {
  51. color: "#ffffff",
  52. lineHeight: "1rem",
  53. fontSize: "1.5rem",
  54. padding: "1rem",
  55. cursor: "pointer",
  56. position: "absolute",
  57. right: 0,
  58. top: 0,
  59. backgroundColor: "transparent",
  60. border: "none"
  61. };
  62. var msgTypeStyle = {
  63. color: "#e83b46",
  64. fontSize: "1.2em",
  65. marginBottom: "1rem",
  66. fontFamily: "sans-serif"
  67. };
  68. var msgTextStyle = {
  69. lineHeight: "1.5",
  70. fontSize: "1rem",
  71. fontFamily: "Menlo, Consolas, monospace"
  72. };
  73. export { msgStyles, iframeStyle, containerStyle, headerStyle, dismissButtonStyle, msgTypeStyle, msgTextStyle };