mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
lenooby09.tech
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 #preload {
55 width: 100px;
56 position: fixed;
57 left: 50%;
58 top: 50%;
59 transform: translate(-50%, -50%);
60 }
61
62 /* Buttons and inputs have a font set by UA, so we'll have to reset that */
63 button, input, textarea {
64 font: inherit;
65 line-height: inherit;
66 }
67
68 /* Color theming */
69 /* Default will always be white */
70 :root {
71 --text: black;
72 --background: white;
73 --backgroundLight: hsl(211, 20%, 95%);
74 }
75 /* This gives us a black background when system is dark and we have not loaded the theme/color scheme values in JS */
76 @media (prefers-color-scheme: dark) {
77 :root {
78 --text: white;
79 --background: black;
80 --backgroundLight: hsl(211, 20%, 20%);
81 color-scheme: dark;
82 }
83 }
84
85 /* Overwrite those preferences with the selected theme */
86 html.theme--light {
87 --text: black;
88 --background: white;
89 --backgroundLight: hsl(211, 20%, 95%);
90 }
91 html.theme--dark {
92 --text: white;
93 --background: black;
94 --backgroundLight: hsl(211, 20%, 20%);
95 color-scheme: dark;
96 }
97 html.theme--dim {
98 --text: white;
99 --background: hsl(211, 20%, 4%);
100 --backgroundLight: hsl(211, 20%, 10%);
101 color-scheme: dark;
102 }
103
104 /* Remove autofill styles on Webkit */
105 input:autofill,
106 input:-webkit-autofill,
107 input:-webkit-autofill:hover,
108 input:-webkit-autofill:focus,
109 input:-webkit-autofill:active{
110 -webkit-background-clip: text;
111 -webkit-text-fill-color: var(--text);
112 transition: background-color 5000s ease-in-out 0s;
113 box-shadow: inset 0 0 20px 20px var(--background);
114 background: var(--background);
115 color: var(--text);
116 }
117 /* Force left-align date/time inputs on iOS mobile */
118 input::-webkit-date-and-time-value {
119 text-align: left;
120 }
121
122 body {
123 display: flex;
124 /* Allows you to scroll below the viewport; default value is visible */
125 overflow-y: auto;
126 overscroll-behavior-y: none;
127 text-rendering: optimizeLegibility;
128 background-color: var(--background);
129 -webkit-font-smoothing: antialiased;
130 -moz-osx-font-smoothing: grayscale;
131 -ms-overflow-style: scrollbar;
132 font-synthesis-weight: none;
133 }
134
135 /* Remove default link styling */
136 a {
137 color: inherit;
138 }
139 a[role="link"]:hover {
140 text-decoration: underline;
141 }
142 a[role="link"][data-no-underline="1"]:hover {
143 text-decoration: none;
144 }
145
146 /* Styling hacks */
147 *[data-word-wrap] {
148 word-break: break-word;
149 }
150 *[data-stable-gutters] {
151 scrollbar-gutter: stable both-edges;
152 }
153
154 /* ProseMirror */
155 .ProseMirror {
156 font: 18px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Liberation Sans", Helvetica, Arial, sans-serif;
157 min-height: 140px;
158 }
159 .ProseMirror-dark {
160 color: white;
161 }
162 .ProseMirror p {
163 margin: 0;
164 }
165 .ProseMirror p.is-editor-empty:first-child::before {
166 color: #8d8e96;
167 content: attr(data-placeholder);
168 float: left;
169 height: 0;
170 pointer-events: none;
171 }
172 .ProseMirror .mention {
173 color: #0085ff;
174 }
175 .ProseMirror a,
176 .ProseMirror .autolink {
177 color: #0085ff;
178 }
179 /* OLLIE: TODO -- this is not accessible */
180 /* Remove focus state on inputs */
181 .ProseMirror-focused {
182 outline: 0;
183 }
184 textarea:focus,
185 input:focus {
186 outline: 0;
187 }
188 .tippy-content .items {
189 width: fit-content;
190 }
191
192 /* Tooltips */
193 [data-tooltip] {
194 position: relative;
195 z-index: 10;
196 }
197 [data-tooltip]::after {
198 content: attr(data-tooltip);
199 display: none;
200 position: absolute;
201 bottom: 0;
202 left: 50%;
203 transform: translateY(100%) translateY(8px) translateX(-50%);
204 padding: 4px 10px;
205 border-radius: 10px;
206 background: var(--backgroundLight);
207 color: var(--text);
208 text-align: center;
209 white-space: nowrap;
210 font-size: 12px;
211 z-index: 10;
212 }
213 [data-tooltip]::before {
214 content: '';
215 display: none;
216 position: absolute;
217 border-bottom: 6px solid var(--backgroundLight);
218 border-left: 6px solid transparent;
219 border-right: 6px solid transparent;
220 bottom: 0;
221 left: 50%;
222 transform: translateY(100%) translateY(2px) translateX(-50%);
223 z-index: 10;
224 }
225 [data-tooltip]:hover::after,
226 [data-tooltip]:hover::before {
227 display:block;
228 }
229
230 /* NativeDropdown component */
231 .radix-dropdown-item:focus,
232 .nativeDropdown-item:focus {
233 outline: none;
234 }
235
236 /* Spinner component */
237 @keyframes rotate {
238 0% {
239 transform: rotate(0deg);
240 }
241 100% {
242 transform: rotate(360deg);
243 }
244 }
245 .rotate-500ms {
246 position: absolute;
247 inset:0;
248 animation: rotate 500ms linear infinite;
249 }
250
251 @keyframes avatarHoverFadeIn {
252 from { opacity: 0; }
253 to { opacity: 1; }
254 }
255
256 @keyframes avatarHoverFadeOut {
257 from { opacity: 1; }
258 to { opacity: 0; }
259 }
260
261 .force-no-clicks > *,
262 .force-no-clicks * {
263 pointer-events: none !important;
264 }
265 </style>
266 </head>
267
268 <body>
269 <!--
270 A generic no script element with a reload button and a message.
271 Feel free to customize this however you'd like.
272 -->
273 <noscript>
274 <form
275 action=""
276 style="
277 background-color: #fff;
278 position: fixed;
279 top: 0;
280 left: 0;
281 right: 0;
282 bottom: 0;
283 z-index: 9999;
284 "
285 >
286 <div
287 style="
288 font-size: 18px;
289 font-family: Helvetica, sans-serif;
290 line-height: 24px;
291 margin: 10%;
292 width: 80%;
293 "
294 >
295 <p lang="en">Oh no! It looks like JavaScript is not enabled in your browser.</p>
296 <p lang="en" style="margin: 20px 0;">
297 <button
298 type="submit"
299 style="
300 background-color: #4630eb;
301 border-radius: 100px;
302 border: none;
303 box-shadow: none;
304 color: #fff;
305 cursor: pointer;
306 font-weight: bold;
307 line-height: 20px;
308 padding: 6px 16px;
309 "
310 >
311 Reload
312 </button>
313 </p>
314 </div>
315 </form>
316 </noscript>
317
318 <!-- The root element for your Expo app. -->
319 <div id="root">
320 <div id="preload">
321 <!-- Bluesky SVG -->
322 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 320"><path fill="#0085ff" d="M180 142c-16.3-31.7-60.7-90.8-102-120C38.5-5.9 23.4-1 13.5 3.4 2.1 8.6 0 26.2 0 36.5c0 10.4 5.7 84.8 9.4 97.2 12.2 41 55.7 55 95.7 50.5-58.7 8.6-110.8 30-42.4 106.1 75.1 77.9 103-16.7 117.3-64.6 14.3 48 30.8 139 116 64.6 64-64.6 17.6-97.5-41.1-106.1 40 4.4 83.5-9.5 95.7-50.5 3.7-12.4 9.4-86.8 9.4-97.2 0-10.3-2-27.9-13.5-33C336.5-1 321.5-6 282 22c-41.3 29.2-85.7 88.3-102 120Z"/></svg>
323 </div>
324 </div>
325 </body>
326</html>