@r3l/app/lib/styles/baseStyles.js

Relevant App

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.GlobalStyle = void 0;

var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _core = require("@theme-ui/core");

var _react = require("@emotion/react");

var _fonts = require("./fonts");

var _ColorMode = require("./ColorMode");

var _templateObject;

// eslint-disable-next-line
var GlobalStyle = function GlobalStyle(props) {
  var _useColorMode = (0, _ColorMode.useColorMode)(),
      _useColorMode2 = (0, _slicedToArray2.default)(_useColorMode, 3),
      getColor = _useColorMode2[2];

  return (0, _core.jsx)(_react.Global, {
    styles: (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        * {\n          box-sizing: border-box;\n          border-width: 0px;\n        }\n\n        .grecaptcha-badge {\n          visibility: hidden;\n        }\n\n        html {\n          font-size: 100%;\n          display: flex;\n        }\n        body {\n        }\n\n        html,\n        body {\n          width: 100%;\n          margin: 0;\n          padding: 0;\n          background: ", ";\n          font-family: HelveticaNeue, Helvetica Neue, sans-serif;\n          position: relative;\n          line-height: 1.5;\n          flex: 1;\n          font-smooth: auto;\n          -webkit-font-smoothing: antialiased;\n          -moz-osx-font-smoothing: grayscale;\n        }\n\n        .markdown-body h1 {\n          ", "\n        }\n        .markdown-body h2 {\n          ", "\n        }\n        .markdown-body,\n        .markdown-body p,\n        .markdown-body li {\n          ", "\n        }\n\n        #app,\n        main {\n          flex: 1;\n          display: flex;\n          flex-direction: column;\n          min-height: 100%;\n          position: relative;\n          width: 100%;\n        }\n\n        a {\n          color: ", ";\n          overflow-wrap: anywhere;\n          text-decoration: none;\n          cursor: pointer;\n        }\n\n        .react-toast-notifications__container {\n          z-index: 11000 !important;\n          top: 64px !important;\n        }\n\n        .smartbanner-top.smartbanner-android {\n          z-index: 900 !important;\n          top: -80px !important;\n        }\n        .smartbanner-top.smartbanner-ios {\n          z-index: 900 !important;\n          top: -80px !important;\n        }\n\n        // Hamburger menu transition time\n        .bm-overlay,\n        .bm-menu-wrap {\n          top: 0;\n          transition-duration: 0.3s !important;\n        }\n\n        @media screen and (max-device-width: 746px) {\n          .BeaconContainer {\n            /*bottom: 30px !important; */\n            left: 0 !important;\n            top: 0 !important;\n            padding-bottom: 32px;\n          }\n          .c-BeaconCloseButton {\n            padding: 0;\n            margin: 0;\n            top: auto !important;\n            bottom: -32px !important;\n            height: 32px;\n            backgroundcolor: blue;\n            z-index: 1000 !important;\n          }\n          .BeaconFabButtonFrame {\n            left: 16px !important;\n            right: auto !important;\n            bottom: 16px !important;\n            z-index: 900 !important;\n          }\n        }\n      "])), getColor('white'), _fonts.header, _fonts.title, _fonts.commentText, getColor('blue'))
  });
};

exports.GlobalStyle = GlobalStyle;
//# sourceMappingURL=baseStyles.js.map