<!DOCTYPE html> <html lang="%LANG_ISO_CODE%"> <head> <meta charset="utf-8" /> <meta httpEquiv="X-UA-Compatible" content="IE=edge" /> <!-- This viewport works for phones with notches. It's optimized for gestures by disabling global zoom. --> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1.00001, viewport-fit=cover" /> <title>%WEB_TITLE%</title> <style> /** * Extend the react-native-web reset: * https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/StyleSheet/initialRules.js */ html, body, #root { width: 100%; /* To smooth any scrolling behavior */ -webkit-overflow-scrolling: touch; margin: 0px; padding: 0px; /* Allows content to fill the viewport and go beyond the bottom */ min-height: 100%; } #root { flex-shrink: 0; flex-basis: auto; flex-grow: 1; display: flex; flex: 1; } html { /* Prevent text size change on orientation change https://gist.github.com/tfausak/2222823#file-ios-8-web-app-html-L138 */ -webkit-text-size-adjust: 100%; height: calc(100% + env(safe-area-inset-top)); scrollbar-gutter: stable both-edges; } /* Color theming */ :root { --text: black; --background: white; --backgroundLight: hsl(211, 20%, 95%); } html.colorMode--dark { --text: white; --background: hsl(211, 20%, 4%); --backgroundLight: hsl(211, 20%, 20%); color-scheme: dark; } @media (prefers-color-scheme: light) { html.colorMode--system { --text: black; --background: white; --backgroundLight: hsl(211, 20%, 95%); } } @media (prefers-color-scheme: dark) { html.colorMode--system { --text: white; --background: hsl(211, 20%, 4%); --backgroundLight: hsl(211, 20%, 20%); color-scheme: dark; } } /* Remove autofill styles on Webkit */ input:autofill, input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active{ -webkit-background-clip: text; -webkit-text-fill-color: var(--text); transition: background-color 5000s ease-in-out 0s; box-shadow: inset 0 0 20px 20px var(--background); background: var(--background); color: var(--text); } /* Force left-align date/time inputs on iOS mobile */ input::-webkit-date-and-time-value { text-align: left; } body { display: flex; /* Allows you to scroll below the viewport; default value is visible */ overflow-y: auto; overscroll-behavior-y: none; text-rendering: optimizeLegibility; background-color: var(--background); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -ms-overflow-style: scrollbar; font-synthesis-weight: none; } /* Remove default link styling */ a { color: inherit; } a[role="link"]:hover { text-decoration: underline; } a[role="link"][data-no-underline="1"]:hover { text-decoration: none; } /* Styling hacks */ *[data-word-wrap] { word-break: break-word; } *[data-stable-gutters] { scrollbar-gutter: stable both-edges; } /* ProseMirror */ .ProseMirror { font: 18px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; min-height: 140px; } .ProseMirror-dark { color: white; } .ProseMirror p { margin: 0; } .ProseMirror p.is-editor-empty:first-child::before { color: #8d8e96; content: attr(data-placeholder); float: left; height: 0; pointer-events: none; } .ProseMirror .mention { color: #0085ff; } .ProseMirror a, .ProseMirror .autolink { color: #0085ff; } /* OLLIE: TODO -- this is not accessible */ /* Remove focus state on inputs */ .ProseMirror-focused { outline: 0; } textarea:focus, input:focus { outline: 0; } .tippy-content .items { width: fit-content; } /* Tooltips */ [data-tooltip] { position: relative; z-index: 10; } [data-tooltip]::after { content: attr(data-tooltip); display: none; position: absolute; bottom: 0; left: 50%; transform: translateY(100%) translateY(8px) translateX(-50%); padding: 4px 10px; border-radius: 10px; background: var(--backgroundLight); color: var(--text); text-align: center; white-space: nowrap; font-size: 12px; z-index: 10; } [data-tooltip]::before { content: ''; display: none; position: absolute; border-bottom: 6px solid var(--backgroundLight); border-left: 6px solid transparent; border-right: 6px solid transparent; bottom: 0; left: 50%; transform: translateY(100%) translateY(2px) translateX(-50%); z-index: 10; } [data-tooltip]:hover::after, [data-tooltip]:hover::before { display:block; } </style> </head> <body> <!-- A generic no script element with a reload button and a message. Feel free to customize this however you'd like. --> <noscript> <form action="" style=" background-color: #fff; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; " > <div style=" font-size: 18px; font-family: Helvetica, sans-serif; line-height: 24px; margin: 10%; width: 80%; " > <p>Oh no! It looks like JavaScript is not enabled in your browser.</p> <p style="margin: 20px 0;"> <button type="submit" style=" background-color: #4630eb; border-radius: 100px; border: none; box-shadow: none; color: #fff; cursor: pointer; font-weight: bold; line-height: 20px; padding: 6px 16px; " > Reload </button> </p> </div> </form> </noscript> <!-- The root element for your Expo app. --> <div id="root"></div> </body> </html>