lenooby09.tech
mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
samuel.fm
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta charset="utf-8">
5 <meta name="theme-color">
6 <!--
7 This viewport works for phones with notches.
8 It's optimized for gestures by disabling global zoom.
9 -->
10 <meta
11 name="viewport"
12 content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1.00001, viewport-fit=cover"
13 />
14 <!--
15 Preconnect to essential domains
16 -->
17 <link rel="preconnect" href="https://bsky.social">
18 <link rel="preconnect" href="https://bsky.network">
19 <title>%WEB_TITLE%</title>
20 <style>
21 /**
22 * Extend the react-native-web reset:
23 * https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/StyleSheet/initialRules.js
24 */
25 html,
26 body,
27 #root {
28 width: 100%;
29 /* To smooth any scrolling behavior */
30 -webkit-overflow-scrolling: touch;
31 margin: 0px;
32 padding: 0px;
33 /* Allows content to fill the viewport and go beyond the bottom */
34 min-height: 100%;
35 }
36 #root {
37 flex-shrink: 0;
38 flex-basis: auto;
39 flex-grow: 1;
40 display: flex;
41 flex: 1;
42 }
43
44 html {
45 /* Prevent text size change on orientation change https://gist.github.com/tfausak/2222823#file-ios-8-web-app-html-L138 */
46 -webkit-text-size-adjust: 100%;
47 height: calc(100% + env(safe-area-inset-top));
48 scrollbar-gutter: stable both-edges;
49 }
50 html, body {
51 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Liberation Sans", Helvetica, Arial, sans-serif;
52 }
53
54 /* Buttons and inputs have a font set by UA, so we'll have to reset that */
55 button, input, textarea {
56 font: inherit;
57 line-height: inherit;
58 }
59
60 /* Color theming */
61 /* Default will always be white */
62 :root {
63 --text: black;
64 --background: white;
65 --backgroundLight: hsl(211, 20%, 95%);
66 }
67 /* This gives us a black background when system is dark and we have not loaded the theme/color scheme values in JS */
68 @media (prefers-color-scheme: dark) {
69 :root {
70 --text: white;
71 --background: black;
72 --backgroundLight: hsl(211, 20%, 20%);
73 color-scheme: dark;
74 }
75 }
76
77 /* Overwrite those preferences with the selected theme */
78 html.theme--light {
79 --text: black;
80 --background: white;
81 --backgroundLight: hsl(211, 20%, 95%);
82 }
83 html.theme--dark {
84 --text: white;
85 --background: black;
86 --backgroundLight: hsl(211, 20%, 20%);
87 color-scheme: dark;
88 }
89 html.theme--dim {
90 --text: white;
91 --background: hsl(211, 20%, 4%);
92 --backgroundLight: hsl(211, 20%, 10%);
93 color-scheme: dark;
94 }
95
96 /* Remove autofill styles on Webkit */
97 input:autofill,
98 input:-webkit-autofill,
99 input:-webkit-autofill:hover,
100 input:-webkit-autofill:focus,
101 input:-webkit-autofill:active{
102 -webkit-background-clip: text;
103 -webkit-text-fill-color: var(--text);
104 transition: background-color 5000s ease-in-out 0s;
105 box-shadow: inset 0 0 20px 20px var(--background);
106 background: var(--background);
107 color: var(--text);
108 }
109 /* Force left-align date/time inputs on iOS mobile */
110 input::-webkit-date-and-time-value {
111 text-align: left;
112 }
113
114 body {
115 display: flex;
116 /* Allows you to scroll below the viewport; default value is visible */
117 overflow-y: auto;
118 overscroll-behavior-y: none;
119 text-rendering: optimizeLegibility;
120 background-color: var(--background);
121 -webkit-font-smoothing: antialiased;
122 -moz-osx-font-smoothing: grayscale;
123 -ms-overflow-style: scrollbar;
124 font-synthesis-weight: none;
125 }
126
127 /* Remove default link styling */
128 a {
129 color: inherit;
130 }
131 a[role="link"]:hover {
132 text-decoration: underline;
133 }
134 a[role="link"][data-no-underline="1"]:hover {
135 text-decoration: none;
136 }
137
138 /* Styling hacks */
139 *[data-word-wrap] {
140 word-break: break-word;
141 }
142 *[data-stable-gutters] {
143 scrollbar-gutter: stable both-edges;
144 }
145
146 /* ProseMirror */
147 .ProseMirror {
148 font: 18px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Liberation Sans", Helvetica, Arial, sans-serif;
149 min-height: 140px;
150 }
151 .ProseMirror-dark {
152 color: white;
153 }
154 .ProseMirror p {
155 margin: 0;
156 }
157 .ProseMirror p.is-editor-empty:first-child::before {
158 color: #8d8e96;
159 content: attr(data-placeholder);
160 float: left;
161 height: 0;
162 pointer-events: none;
163 }
164 .ProseMirror .mention {
165 color: #0085ff;
166 }
167 .ProseMirror a,
168 .ProseMirror .autolink {
169 color: #0085ff;
170 }
171 /* OLLIE: TODO -- this is not accessible */
172 /* Remove focus state on inputs */
173 .ProseMirror-focused {
174 outline: 0;
175 }
176 textarea:focus,
177 input:focus {
178 outline: 0;
179 }
180 .tippy-content .items {
181 width: fit-content;
182 }
183
184 /* Tooltips */
185 [data-tooltip] {
186 position: relative;
187 z-index: 10;
188 }
189 [data-tooltip]::after {
190 content: attr(data-tooltip);
191 display: none;
192 position: absolute;
193 bottom: 0;
194 left: 50%;
195 transform: translateY(100%) translateY(8px) translateX(-50%);
196 padding: 4px 10px;
197 border-radius: 10px;
198 background: var(--backgroundLight);
199 color: var(--text);
200 text-align: center;
201 white-space: nowrap;
202 font-size: 12px;
203 z-index: 10;
204 }
205 [data-tooltip]::before {
206 content: '';
207 display: none;
208 position: absolute;
209 border-bottom: 6px solid var(--backgroundLight);
210 border-left: 6px solid transparent;
211 border-right: 6px solid transparent;
212 bottom: 0;
213 left: 50%;
214 transform: translateY(100%) translateY(2px) translateX(-50%);
215 z-index: 10;
216 }
217 [data-tooltip]:hover::after,
218 [data-tooltip]:hover::before {
219 display:block;
220 }
221
222 /* NativeDropdown component */
223 .radix-dropdown-item:focus,
224 .nativeDropdown-item:focus {
225 outline: none;
226 }
227
228 /* Spinner component */
229 @keyframes rotate {
230 0% {
231 transform: rotate(0deg);
232 }
233 100% {
234 transform: rotate(360deg);
235 }
236 }
237 .rotate-500ms {
238 position: absolute;
239 inset:0;
240 animation: rotate 500ms linear infinite;
241 }
242 </style>
243 </head>
244
245 <body>
246 <!--
247 A generic no script element with a reload button and a message.
248 Feel free to customize this however you'd like.
249 -->
250 <noscript>
251 <form
252 action=""
253 style="
254 background-color: #fff;
255 position: fixed;
256 top: 0;
257 left: 0;
258 right: 0;
259 bottom: 0;
260 z-index: 9999;
261 "
262 >
263 <div
264 style="
265 font-size: 18px;
266 font-family: Helvetica, sans-serif;
267 line-height: 24px;
268 margin: 10%;
269 width: 80%;
270 "
271 >
272 <p lang="en">Oh no! It looks like JavaScript is not enabled in your browser.</p>
273 <p lang="en" style="margin: 20px 0;">
274 <button
275 type="submit"
276 style="
277 background-color: #4630eb;
278 border-radius: 100px;
279 border: none;
280 box-shadow: none;
281 color: #fff;
282 cursor: pointer;
283 font-weight: bold;
284 line-height: 20px;
285 padding: 6px 16px;
286 "
287 >
288 Reload
289 </button>
290 </p>
291 </div>
292 </form>
293 </noscript>
294 <!-- The root element for your Expo app. -->
295 <div id="root"></div>
296 </body>
297</html>