+2 -2

.github/workflows/golang-test-lint.yml

··· 21 21 with: 22 22 go-version: '1.22' 23 23 - name: Dummy Static Files 24 24 - run: touch bskyweb/static/js/blah.js && touch bskyweb/static/media/blah.txt 24 24 + run: touch bskyweb/static/js/blah.js && touch bskyweb/static/css/blah.txt && touch bskyweb/static/media/blah.txt 25 25 - name: Check 26 26 run: cd bskyweb/ && make check 27 27 - name: Build (binary) ··· 38 38 with: 39 39 go-version: '1.22' 40 40 - name: Dummy Static Files 41 41 - run: touch bskyweb/static/js/blah.js && touch bskyweb/static/media/blah.txt 41 41 + run: touch bskyweb/static/js/blah.js && touch bskyweb/static/css/blah.txt && touch bskyweb/static/media/blah.txt 42 42 - name: Lint 43 43 run: cd bskyweb/ && make lint

+3 -1

.prettierignore

··· 1 1 - # Ignore everything except JS-ey code. 1 1 + # Ignore everything except JS-ey or CSS code. 2 2 # Based on https://stackoverflow.com/a/70715829/458193 3 3 * 4 4 !**/*.js ··· 6 6 !**/*.ts 7 7 !**/*.tsx 8 8 !*/ 9 9 + 10 10 + !**/*.css 9 11 10 12 # More specific ignores go below. 11 13 .expo

+1

Dockerfile.embedr

··· 40 40 41 41 # hack around issue with empty directory and go:embed 42 42 RUN touch bskyweb/static/js/empty.txt 43 43 + RUN touch bskyweb/static/css/empty.txt 43 44 RUN touch bskyweb/static/media/empty.txt 44 45 45 46 #

+1 -1

bskyembed/src/index.css

··· 4 4 5 5 .break-word { 6 6 word-break: break-word; 7 7 - } 7 7 + }

+4

bskyweb/.gitignore

··· 10 10 static/js/*.map 11 11 static/js/*.js.LICENSE.txt 12 12 static/js/empty.txt 13 13 + static/css/*.css 14 14 + static/css/*.map 15 15 + static/css/*.css.LICENSE.txt 16 16 + static/css/empty.txt 13 17 static/media/*.png 14 18 static/media/empty.txt 15 19 templates/scripts.html

bskyweb/static/css/.gitkeep

This is a binary file and will not be displayed.

-381

bskyweb/templates/base.html

··· 32 32 <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-BlackItalic.27b9f0ad06fd13a7b9da.otf"> 33 33 --> 34 34 35 35 - <style> 36 36 - @font-face { 37 37 - font-family: "Inter-Regular"; 38 38 - src: local("Inter-Regular"), url(/static/media/Inter-Regular.1f5ed03b6dd9fd1f9982.otf) format("font/otf"); 39 39 - font-weight: 400; 40 40 - font-style: normal; 41 41 - font-display: swap; 42 42 - } 43 43 - @font-face { 44 44 - font-family: "Inter-Italic"; 45 45 - src: local("Inter-Italic"), url(/static/media/Inter-Italic.95778eb0c75dc956257e.otf) format("font/otf"); 46 46 - font-weight: 400; 47 47 - font-style: italic; 48 48 - font-display: swap; 49 49 - } 50 50 - /* 51 51 - @font-face { 52 52 - font-family: "Inter-Medium"; 53 53 - src: local("Inter-Medium"), url(/static/media/Inter-Medium.296aa2d65964269836b3.otf) format("font/otf"); 54 54 - font-weight: 500; 55 55 - font-style: normal; 56 56 - font-display: swap; 57 57 - } 58 58 - @font-face { 59 59 - font-family: "Inter-MediumItalic"; 60 60 - src: local("Inter-MediumItalic"), url(/static/media/Inter-MediumItalic.0e57e17a6311368e2114.otf) format("font/otf"); 61 61 - font-weight: 500; 62 62 - font-style: italic; 63 63 - font-display: swap; 64 64 - } 65 65 - */ 66 66 - @font-face { 67 67 - font-family: "Inter-SemiBold"; 68 68 - src: local("Inter-SemiBold"), url(/static/media/Inter-SemiBold.2277990330981b8409bb.otf) format("font/otf"); 69 69 - font-weight: 600; 70 70 - font-style: normal; 71 71 - font-display: swap; 72 72 - } 73 73 - @font-face { 74 74 - font-family: "Inter-SemiBoldItalic"; 75 75 - src: local("Inter-SemiBoldItalic"), url(/static/media/Inter-SemiBoldItalic.f62fea3df3a521d6c8a7.otf) format("font/otf"); 76 76 - font-weight: 600; 77 77 - font-style: italic; 78 78 - font-display: swap; 79 79 - } 80 80 - /* 81 81 - @font-face { 82 82 - font-family: "Inter-Bold"; 83 83 - src: local("Inter-Bold"), url(/static/media/Inter-Bold.8d330503e1d034ad68de.otf) format("font/otf"); 84 84 - font-weight: 700; 85 85 - font-style: normal; 86 86 - font-display: swap; 87 87 - } 88 88 - @font-face { 89 89 - font-family: "Inter-BoldItalic"; 90 90 - src: local("Inter-BoldItalic"), url(/static/media/Inter-BoldItalic.bb17e63f9baa0d861a20.otf) format("font/otf"); 91 91 - font-weight: 700; 92 92 - font-style: italic; 93 93 - font-display: swap; 94 94 - } 95 95 - */ 96 96 - @font-face { 97 97 - font-family: "Inter-ExtraBold"; 98 98 - src: local("Inter-ExtraBold"), url(/static/media/Inter-ExtraBold.ff2581a193bf6b7e0b06.otf) format("font/otf"); 99 99 - font-weight: 800; 100 100 - font-style: normal; 101 101 - font-display: swap; 102 102 - } 103 103 - @font-face { 104 104 - font-family: "Inter-ExtraBoldItalic"; 105 105 - src: local("Inter-ExtraBoldItalic"), url(/static/media/Inter-ExtraBoldItalic.0e50b40728d24d40fdf4.otf) format("font/otf"); 106 106 - font-weight: 800; 107 107 - font-style: italic; 108 108 - font-display: swap; 109 109 - } 110 110 - /* 111 111 - @font-face { 112 112 - font-family: "Inter-Black"; 113 113 - src: local("Inter-Black"), url(/static/media/Inter-Black.66e9a87f1c921e844ed4.otf) format("font/otf"); 114 114 - font-weight: 900; 115 115 - font-style: normal; 116 116 - font-display: swap; 117 117 - } 118 118 - @font-face { 119 119 - font-family: "Inter-BlackItalic"; 120 120 - src: local("Inter-BlackItalic"), url(/static/media/Inter-BlackItalic.27b9f0ad06fd13a7b9da.otf) format("font/otf"); 121 121 - font-weight: 900; 122 122 - font-style: italic; 123 123 - font-display: swap; 124 124 - } 125 125 - */ 126 126 - 127 127 - /** 128 128 - * Extend the react-native-web reset: 129 129 - * https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/StyleSheet/initialRules.js 130 130 - */ 131 131 - html, 132 132 - body, 133 133 - #root { 134 134 - width: 100%; 135 135 - /* To smooth any scrolling behavior */ 136 136 - -webkit-overflow-scrolling: touch; 137 137 - margin: 0px; 138 138 - padding: 0px; 139 139 - /* Allows content to fill the viewport and go beyond the bottom */ 140 140 - min-height: 100%; 141 141 - } 142 142 - #root { 143 143 - flex-shrink: 0; 144 144 - flex-basis: auto; 145 145 - flex-grow: 1; 146 146 - display: flex; 147 147 - flex: 1; 148 148 - } 149 149 - 150 150 - html { 151 151 - /* Prevent text size change on orientation change https://gist.github.com/tfausak/2222823#file-ios-8-web-app-html-L138 */ 152 152 - -webkit-text-size-adjust: 100%; 153 153 - height: calc(100% + env(safe-area-inset-top)); 154 154 - scrollbar-gutter: stable both-edges; 155 155 - } 156 156 - html, body { 157 157 - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Liberation Sans", Helvetica, Arial, sans-serif; 158 158 - } 159 159 - 160 160 - #preload { 161 161 - width: 100px; 162 162 - position: fixed; 163 163 - left: 50%; 164 164 - top: 50%; 165 165 - transform: translate(-50%, -50%); 166 166 - } 167 167 - 168 168 - /* Buttons and inputs have a font set by UA, so we'll have to reset that */ 169 169 - button, input, textarea { 170 170 - font: inherit; 171 171 - line-height: inherit; 172 172 - } 173 173 - 174 174 - /* Color theming */ 175 175 - /* Default will always be white */ 176 176 - :root { 177 177 - --text: black; 178 178 - --background: white; 179 179 - --backgroundLight: hsl(211, 20%, 95%); 180 180 - } 181 181 - /* This gives us a black background when system is dark and we have not loaded the theme/color scheme values in JS */ 182 182 - @media (prefers-color-scheme: dark) { 183 183 - :root { 184 184 - --text: white; 185 185 - --background: black; 186 186 - --backgroundLight: hsl(211, 20%, 20%); 187 187 - color-scheme: dark; 188 188 - } 189 189 - } 190 190 - 191 191 - /* Overwrite those preferences with the selected theme */ 192 192 - html.theme--light { 193 193 - --text: black; 194 194 - --background: white; 195 195 - --backgroundLight: hsl(211, 20%, 95%); 196 196 - } 197 197 - html.theme--dark { 198 198 - --text: white; 199 199 - --background: black; 200 200 - --backgroundLight: hsl(211, 20%, 20%); 201 201 - color-scheme: dark; 202 202 - } 203 203 - html.theme--dim { 204 204 - --text: white; 205 205 - --background: hsl(211, 20%, 4%); 206 206 - --backgroundLight: hsl(211, 20%, 10%); 207 207 - color-scheme: dark; 208 208 - } 209 209 - 210 210 - /* Remove autofill styles on Webkit */ 211 211 - input:autofill, 212 212 - input:-webkit-autofill, 213 213 - input:-webkit-autofill:hover, 214 214 - input:-webkit-autofill:focus, 215 215 - input:-webkit-autofill:active{ 216 216 - -webkit-background-clip: text; 217 217 - -webkit-text-fill-color: var(--text); 218 218 - transition: background-color 5000s ease-in-out 0s; 219 219 - box-shadow: inset 0 0 20px 20px var(--background); 220 220 - background: var(--background); 221 221 - color: var(--text); 222 222 - } 223 223 - /* Force left-align date/time inputs on iOS mobile */ 224 224 - input::-webkit-date-and-time-value { 225 225 - text-align: left; 226 226 - } 227 227 - 228 228 - body { 229 229 - display: flex; 230 230 - /* Allows you to scroll below the viewport; default value is visible */ 231 231 - overflow-y: auto; 232 232 - overscroll-behavior-y: none; 233 233 - text-rendering: optimizeLegibility; 234 234 - background-color: var(--background); 235 235 - -webkit-font-smoothing: antialiased; 236 236 - -moz-osx-font-smoothing: grayscale; 237 237 - -ms-overflow-style: scrollbar; 238 238 - font-synthesis-weight: none; 239 239 - } 240 240 - 241 241 - /* Remove default link styling */ 242 242 - a { 243 243 - color: inherit; 244 244 - } 245 245 - a[role="link"]:hover { 246 246 - text-decoration: underline; 247 247 - } 248 248 - a[role="link"][data-no-underline="1"]:hover { 249 249 - text-decoration: none; 250 250 - } 251 251 - 252 252 - /* Styling hacks */ 253 253 - *[data-word-wrap] { 254 254 - word-break: break-word; 255 255 - } 256 256 - *[data-stable-gutters] { 257 257 - scrollbar-gutter: stable both-edges; 258 258 - } 259 259 - 260 260 - /* ProseMirror */ 261 261 - .ProseMirror { 262 262 - min-height: 140px; 263 263 - } 264 264 - .ProseMirror-dark { 265 265 - color: white; 266 266 - } 267 267 - .ProseMirror p { 268 268 - margin: 0; 269 269 - } 270 270 - .ProseMirror p.is-editor-empty:first-child::before { 271 271 - color: #8d8e96; 272 272 - content: attr(data-placeholder); 273 273 - float: left; 274 274 - height: 0; 275 275 - pointer-events: none; 276 276 - } 277 277 - .ProseMirror .mention { 278 278 - color: #0085ff; 279 279 - } 280 280 - .ProseMirror a, 281 281 - .ProseMirror .autolink { 282 282 - color: #0085ff; 283 283 - } 284 284 - /* OLLIE: TODO -- this is not accessible */ 285 285 - /* Remove focus state on inputs */ 286 286 - .ProseMirror-focused { 287 287 - outline: 0; 288 288 - } 289 289 - textarea:focus, 290 290 - input:focus { 291 291 - outline: 0; 292 292 - } 293 293 - .tippy-content .items { 294 294 - width: fit-content; 295 295 - } 296 296 - 297 297 - /* Tooltips */ 298 298 - [data-tooltip] { 299 299 - position: relative; 300 300 - z-index: 10; 301 301 - } 302 302 - [data-tooltip]::after { 303 303 - content: attr(data-tooltip); 304 304 - display: none; 305 305 - position: absolute; 306 306 - bottom: 0; 307 307 - left: 50%; 308 308 - transform: translateY(100%) translateY(8px) translateX(-50%); 309 309 - padding: 4px 10px; 310 310 - border-radius: 10px; 311 311 - background: var(--backgroundLight); 312 312 - color: var(--text); 313 313 - text-align: center; 314 314 - white-space: nowrap; 315 315 - font-size: 12px; 316 316 - z-index: 10; 317 317 - } 318 318 - [data-tooltip]::before { 319 319 - content: ''; 320 320 - display: none; 321 321 - position: absolute; 322 322 - border-bottom: 6px solid var(--backgroundLight); 323 323 - border-left: 6px solid transparent; 324 324 - border-right: 6px solid transparent; 325 325 - bottom: 0; 326 326 - left: 50%; 327 327 - transform: translateY(100%) translateY(2px) translateX(-50%); 328 328 - z-index: 10; 329 329 - } 330 330 - [data-tooltip]:hover::after, 331 331 - [data-tooltip]:hover::before { 332 332 - display:block; 333 333 - } 334 334 - 335 335 - /* NativeDropdown component */ 336 336 - .radix-dropdown-item:focus, 337 337 - .nativeDropdown-item:focus { 338 338 - outline: none; 339 339 - } 340 340 - 341 341 - /* Spinner component */ 342 342 - @keyframes rotate { 343 343 - 0% { 344 344 - transform: rotate(0deg); 345 345 - } 346 346 - 100% { 347 347 - transform: rotate(360deg); 348 348 - } 349 349 - } 350 350 - .rotate-500ms { 351 351 - position: absolute; 352 352 - inset:0; 353 353 - animation: rotate 500ms linear infinite; 354 354 - } 355 355 - 356 356 - @keyframes avatarHoverFadeIn { 357 357 - from { opacity: 0; } 358 358 - to { opacity: 1; } 359 359 - } 360 360 - 361 361 - @keyframes avatarHoverFadeOut { 362 362 - from { opacity: 1; } 363 363 - to { opacity: 0; } 364 364 - } 365 365 - 366 366 - .force-no-clicks > *, 367 367 - .force-no-clicks * { 368 368 - pointer-events: none !important; 369 369 - } 370 370 - 371 371 - input[type=range][orient=vertical] { 372 372 - writing-mode: vertical-lr; 373 373 - direction: rtl; 374 374 - appearance: slider-vertical; 375 375 - width: 16px; 376 376 - vertical-align: bottom; 377 377 - -webkit-appearance: none; 378 378 - appearance: none; 379 379 - background: transparent; 380 380 - cursor: pointer; 381 381 - } 382 382 - 383 383 - input[type="range"][orient=vertical]::-webkit-slider-runnable-track { 384 384 - background: white; 385 385 - height: 100%; 386 386 - width: 4px; 387 387 - border-radius: 4px; 388 388 - } 389 389 - 390 390 - input[type="range"][orient=vertical]::-moz-range-track { 391 391 - background: white; 392 392 - height: 100%; 393 393 - width: 4px; 394 394 - border-radius: 4px; 395 395 - } 396 396 - 397 397 - input[type="range"]::-webkit-slider-thumb { 398 398 - -webkit-appearance: none; 399 399 - appearance: none; 400 400 - border-radius: 50%; 401 401 - background-color: white; 402 402 - height: 16px; 403 403 - width: 16px; 404 404 - margin-left: -6px; 405 405 - } 406 406 - 407 407 - input[type="range"][orient=vertical]::-moz-range-thumb { 408 408 - border: none; 409 409 - border-radius: 50%; 410 410 - background-color: white; 411 411 - height: 16px; 412 412 - width: 16px; 413 413 - margin-left: -6px; 414 414 - } 415 415 - </style> 416 35 {% include "scripts.html" %} 417 36 <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png"> 418 37 <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">

+1 -1

package.json

··· 15 15 "web": "expo start --web", 16 16 "use-build-number": "./scripts/useBuildNumberEnv.sh", 17 17 "use-build-number-with-bump": "./scripts/useBuildNumberEnvWithBump.sh", 18 18 - "build-web": "expo export:web && node ./scripts/post-web-build.js && cp -v ./web-build/static/js/*.* ./bskyweb/static/js/ && cp -v ./web-build/static/media/* ./bskyweb/static/media/", 18 18 + "build-web": "expo export:web && node ./scripts/post-web-build.js", 19 19 "build-all": "yarn intl:build && yarn use-build-number-with-bump eas build --platform all", 20 20 "build-ios": "yarn use-build-number-with-bump eas build -p ios", 21 21 "build-android": "yarn use-build-number-with-bump eas build -p android",

+24 -1

scripts/post-web-build.js

··· 20 20 const outputFile = entrypoints 21 21 .map(name => { 22 22 const file = path.basename(name) 23 23 - return `<script defer="defer" src="/static/js/${file}"></script>` 23 23 + const ext = path.extname(file) 24 24 + 25 25 + if (ext === '.js') { 26 26 + return `<script defer="defer" src="/static/js/${file}"></script>` 27 27 + } 28 28 + if (ext === '.css') { 29 29 + return `<link rel="stylesheet" href="/static/css/${file}">` 30 30 + } 31 31 + 32 32 + return '' 24 33 }) 25 34 .join('\n') 26 35 fs.writeFileSync(templateFile, outputFile) 36 36 + 37 37 + function copyFiles(sourceDir, targetDir) { 38 38 + const files = fs.readdirSync(path.join(projectRoot, sourceDir)) 39 39 + files.forEach(file => { 40 40 + const sourcePath = path.join(projectRoot, sourceDir, file) 41 41 + const targetPath = path.join(projectRoot, targetDir, file) 42 42 + fs.copyFileSync(sourcePath, targetPath) 43 43 + console.log(`Copied ${sourcePath} to ${targetPath}`) 44 44 + }) 45 45 + } 46 46 + 47 47 + copyFiles('web-build/static/js', 'bskyweb/static/js') 48 48 + copyFiles('web-build/static/css', 'bskyweb/static/css') 49 49 + copyFiles('web-build/static/media', 'bskyweb/static/media')

+1

src/App.web.tsx

··· 1 1 import 'lib/sentry' // must be near top 2 2 import 'view/icons' 3 3 + import './style.css' 3 4 4 5 import React, {useEffect, useState} from 'react' 5 6 import {KeyboardProvider} from 'react-native-keyboard-controller'

+403

src/style.css

··· 1 1 + @font-face { 2 2 + font-family: 'Inter-Regular'; 3 3 + src: local('Inter-Regular'), 4 4 + url(/static/media/Inter-Regular.1f5ed03b6dd9fd1f9982.otf) format('font/otf'); 5 5 + font-weight: 400; 6 6 + font-style: normal; 7 7 + font-display: swap; 8 8 + } 9 9 + @font-face { 10 10 + font-family: 'Inter-Italic'; 11 11 + src: local('Inter-Italic'), 12 12 + url(/static/media/Inter-Italic.95778eb0c75dc956257e.otf) format('font/otf'); 13 13 + font-weight: 400; 14 14 + font-style: italic; 15 15 + font-display: swap; 16 16 + } 17 17 + /* 18 18 + @font-face { 19 19 + font-family: "Inter-Medium"; 20 20 + src: local("Inter-Medium"), url(/static/media/Inter-Medium.296aa2d65964269836b3.otf) format("font/otf"); 21 21 + font-weight: 500; 22 22 + font-style: normal; 23 23 + font-display: swap; 24 24 + } 25 25 + @font-face { 26 26 + font-family: "Inter-MediumItalic"; 27 27 + src: local("Inter-MediumItalic"), url(/static/media/Inter-MediumItalic.0e57e17a6311368e2114.otf) format("font/otf"); 28 28 + font-weight: 500; 29 29 + font-style: italic; 30 30 + font-display: swap; 31 31 + } 32 32 + */ 33 33 + @font-face { 34 34 + font-family: 'Inter-SemiBold'; 35 35 + src: local('Inter-SemiBold'), 36 36 + url(/static/media/Inter-SemiBold.2277990330981b8409bb.otf) 37 37 + format('font/otf'); 38 38 + font-weight: 600; 39 39 + font-style: normal; 40 40 + font-display: swap; 41 41 + } 42 42 + @font-face { 43 43 + font-family: 'Inter-SemiBoldItalic'; 44 44 + src: local('Inter-SemiBoldItalic'), 45 45 + url(/static/media/Inter-SemiBoldItalic.f62fea3df3a521d6c8a7.otf) 46 46 + format('font/otf'); 47 47 + font-weight: 600; 48 48 + font-style: italic; 49 49 + font-display: swap; 50 50 + } 51 51 + /* 52 52 + @font-face { 53 53 + font-family: "Inter-Bold"; 54 54 + src: local("Inter-Bold"), url(/static/media/Inter-Bold.8d330503e1d034ad68de.otf) format("font/otf"); 55 55 + font-weight: 700; 56 56 + font-style: normal; 57 57 + font-display: swap; 58 58 + } 59 59 + @font-face { 60 60 + font-family: "Inter-BoldItalic"; 61 61 + src: local("Inter-BoldItalic"), url(/static/media/Inter-BoldItalic.bb17e63f9baa0d861a20.otf) format("font/otf"); 62 62 + font-weight: 700; 63 63 + font-style: italic; 64 64 + font-display: swap; 65 65 + } 66 66 + */ 67 67 + @font-face { 68 68 + font-family: 'Inter-ExtraBold'; 69 69 + src: local('Inter-ExtraBold'), 70 70 + url(/static/media/Inter-ExtraBold.ff2581a193bf6b7e0b06.otf) 71 71 + format('font/otf'); 72 72 + font-weight: 800; 73 73 + font-style: normal; 74 74 + font-display: swap; 75 75 + } 76 76 + @font-face { 77 77 + font-family: 'Inter-ExtraBoldItalic'; 78 78 + src: local('Inter-ExtraBoldItalic'), 79 79 + url(/static/media/Inter-ExtraBoldItalic.0e50b40728d24d40fdf4.otf) 80 80 + format('font/otf'); 81 81 + font-weight: 800; 82 82 + font-style: italic; 83 83 + font-display: swap; 84 84 + } 85 85 + /* 86 86 + @font-face { 87 87 + font-family: "Inter-Black"; 88 88 + src: local("Inter-Black"), url(/static/media/Inter-Black.66e9a87f1c921e844ed4.otf) format("font/otf"); 89 89 + font-weight: 900; 90 90 + font-style: normal; 91 91 + font-display: swap; 92 92 + } 93 93 + @font-face { 94 94 + font-family: "Inter-BlackItalic"; 95 95 + src: local("Inter-BlackItalic"), url(/static/media/Inter-BlackItalic.27b9f0ad06fd13a7b9da.otf) format("font/otf"); 96 96 + font-weight: 900; 97 97 + font-style: italic; 98 98 + font-display: swap; 99 99 + } 100 100 + */ 101 101 + 102 102 + /** 103 103 + * Extend the react-native-web reset: 104 104 + * https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/StyleSheet/initialRules.js 105 105 + */ 106 106 + html, 107 107 + body, 108 108 + #root { 109 109 + width: 100%; 110 110 + /* To smooth any scrolling behavior */ 111 111 + -webkit-overflow-scrolling: touch; 112 112 + margin: 0px; 113 113 + padding: 0px; 114 114 + /* Allows content to fill the viewport and go beyond the bottom */ 115 115 + min-height: 100%; 116 116 + } 117 117 + #root { 118 118 + flex-shrink: 0; 119 119 + flex-basis: auto; 120 120 + flex-grow: 1; 121 121 + display: flex; 122 122 + flex: 1; 123 123 + } 124 124 + 125 125 + html { 126 126 + /* Prevent text size change on orientation change https://gist.github.com/tfausak/2222823#file-ios-8-web-app-html-L138 */ 127 127 + -webkit-text-size-adjust: 100%; 128 128 + height: calc(100% + env(safe-area-inset-top)); 129 129 + scrollbar-gutter: stable both-edges; 130 130 + } 131 131 + html, 132 132 + body { 133 133 + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 134 134 + 'Liberation Sans', Helvetica, Arial, sans-serif; 135 135 + } 136 136 + 137 137 + #preload { 138 138 + width: 100px; 139 139 + position: fixed; 140 140 + left: 50%; 141 141 + top: 50%; 142 142 + transform: translate(-50%, -50%); 143 143 + } 144 144 + 145 145 + /* Buttons and inputs have a font set by UA, so we'll have to reset that */ 146 146 + button, 147 147 + input, 148 148 + textarea { 149 149 + font: inherit; 150 150 + line-height: inherit; 151 151 + } 152 152 + 153 153 + /* Color theming */ 154 154 + /* Default will always be white */ 155 155 + :root { 156 156 + --text: black; 157 157 + --background: white; 158 158 + --backgroundLight: hsl(211, 20%, 95%); 159 159 + } 160 160 + /* This gives us a black background when system is dark and we have not loaded the theme/color scheme values in JS */ 161 161 + @media (prefers-color-scheme: dark) { 162 162 + :root { 163 163 + --text: white; 164 164 + --background: black; 165 165 + --backgroundLight: hsl(211, 20%, 20%); 166 166 + color-scheme: dark; 167 167 + } 168 168 + } 169 169 + 170 170 + /* Overwrite those preferences with the selected theme */ 171 171 + html.theme--light { 172 172 + --text: black; 173 173 + --background: white; 174 174 + --backgroundLight: hsl(211, 20%, 95%); 175 175 + } 176 176 + html.theme--dark { 177 177 + --text: white; 178 178 + --background: black; 179 179 + --backgroundLight: hsl(211, 20%, 20%); 180 180 + color-scheme: dark; 181 181 + } 182 182 + html.theme--dim { 183 183 + --text: white; 184 184 + --background: hsl(211, 20%, 4%); 185 185 + --backgroundLight: hsl(211, 20%, 10%); 186 186 + color-scheme: dark; 187 187 + } 188 188 + 189 189 + /* Remove autofill styles on Webkit */ 190 190 + input:autofill, 191 191 + input:-webkit-autofill, 192 192 + input:-webkit-autofill:hover, 193 193 + input:-webkit-autofill:focus, 194 194 + input:-webkit-autofill:active { 195 195 + -webkit-background-clip: text; 196 196 + -webkit-text-fill-color: var(--text); 197 197 + transition: background-color 5000s ease-in-out 0s; 198 198 + box-shadow: inset 0 0 20px 20px var(--background); 199 199 + background: var(--background); 200 200 + color: var(--text); 201 201 + } 202 202 + /* Force left-align date/time inputs on iOS mobile */ 203 203 + input::-webkit-date-and-time-value { 204 204 + text-align: left; 205 205 + } 206 206 + 207 207 + body { 208 208 + display: flex; 209 209 + /* Allows you to scroll below the viewport; default value is visible */ 210 210 + overflow-y: auto; 211 211 + overscroll-behavior-y: none; 212 212 + text-rendering: optimizeLegibility; 213 213 + background-color: var(--background); 214 214 + -webkit-font-smoothing: antialiased; 215 215 + -moz-osx-font-smoothing: grayscale; 216 216 + -ms-overflow-style: scrollbar; 217 217 + font-synthesis-weight: none; 218 218 + } 219 219 + 220 220 + /* Remove default link styling */ 221 221 + a { 222 222 + color: inherit; 223 223 + } 224 224 + a[role='link']:hover { 225 225 + text-decoration: underline; 226 226 + } 227 227 + a[role='link'][data-no-underline='1']:hover { 228 228 + text-decoration: none; 229 229 + } 230 230 + 231 231 + /* Styling hacks */ 232 232 + *[data-word-wrap] { 233 233 + word-break: break-word; 234 234 + } 235 235 + *[data-stable-gutters] { 236 236 + scrollbar-gutter: stable both-edges; 237 237 + } 238 238 + 239 239 + /* ProseMirror */ 240 240 + .ProseMirror { 241 241 + font: 18px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 242 242 + 'Liberation Sans', Helvetica, Arial, sans-serif; 243 243 + min-height: 140px; 244 244 + } 245 245 + .ProseMirror-dark { 246 246 + color: white; 247 247 + } 248 248 + .ProseMirror p { 249 249 + margin: 0; 250 250 + } 251 251 + .ProseMirror p.is-editor-empty:first-child::before { 252 252 + color: #8d8e96; 253 253 + content: attr(data-placeholder); 254 254 + float: left; 255 255 + height: 0; 256 256 + pointer-events: none; 257 257 + } 258 258 + .ProseMirror .mention { 259 259 + color: #0085ff; 260 260 + } 261 261 + .ProseMirror a, 262 262 + .ProseMirror .autolink { 263 263 + color: #0085ff; 264 264 + } 265 265 + /* OLLIE: TODO -- this is not accessible */ 266 266 + /* Remove focus state on inputs */ 267 267 + .ProseMirror-focused { 268 268 + outline: 0; 269 269 + } 270 270 + textarea:focus, 271 271 + input:focus { 272 272 + outline: 0; 273 273 + } 274 274 + .tippy-content .items { 275 275 + width: fit-content; 276 276 + } 277 277 + 278 278 + /* Tooltips */ 279 279 + [data-tooltip] { 280 280 + position: relative; 281 281 + z-index: 10; 282 282 + } 283 283 + [data-tooltip]::after { 284 284 + content: attr(data-tooltip); 285 285 + display: none; 286 286 + position: absolute; 287 287 + bottom: 0; 288 288 + left: 50%; 289 289 + transform: translateY(100%) translateY(8px) translateX(-50%); 290 290 + padding: 4px 10px; 291 291 + border-radius: 10px; 292 292 + background: var(--backgroundLight); 293 293 + color: var(--text); 294 294 + text-align: center; 295 295 + white-space: nowrap; 296 296 + font-size: 12px; 297 297 + z-index: 10; 298 298 + } 299 299 + [data-tooltip]::before { 300 300 + content: ''; 301 301 + display: none; 302 302 + position: absolute; 303 303 + border-bottom: 6px solid var(--backgroundLight); 304 304 + border-left: 6px solid transparent; 305 305 + border-right: 6px solid transparent; 306 306 + bottom: 0; 307 307 + left: 50%; 308 308 + transform: translateY(100%) translateY(2px) translateX(-50%); 309 309 + z-index: 10; 310 310 + } 311 311 + [data-tooltip]:hover::after, 312 312 + [data-tooltip]:hover::before { 313 313 + display: block; 314 314 + } 315 315 + 316 316 + /* NativeDropdown component */ 317 317 + .radix-dropdown-item:focus, 318 318 + .nativeDropdown-item:focus { 319 319 + outline: none; 320 320 + } 321 321 + 322 322 + /* Spinner component */ 323 323 + @keyframes rotate { 324 324 + 0% { 325 325 + transform: rotate(0deg); 326 326 + } 327 327 + 100% { 328 328 + transform: rotate(360deg); 329 329 + } 330 330 + } 331 331 + .rotate-500ms { 332 332 + position: absolute; 333 333 + inset: 0; 334 334 + animation: rotate 500ms linear infinite; 335 335 + } 336 336 + 337 337 + @keyframes avatarHoverFadeIn { 338 338 + from { 339 339 + opacity: 0; 340 340 + } 341 341 + to { 342 342 + opacity: 1; 343 343 + } 344 344 + } 345 345 + 346 346 + @keyframes avatarHoverFadeOut { 347 347 + from { 348 348 + opacity: 1; 349 349 + } 350 350 + to { 351 351 + opacity: 0; 352 352 + } 353 353 + } 354 354 + 355 355 + .force-no-clicks > *, 356 356 + .force-no-clicks * { 357 357 + pointer-events: none !important; 358 358 + } 359 359 + 360 360 + input[type='range'][orient='vertical'] { 361 361 + writing-mode: vertical-lr; 362 362 + direction: rtl; 363 363 + appearance: slider-vertical; 364 364 + width: 16px; 365 365 + vertical-align: bottom; 366 366 + -webkit-appearance: none; 367 367 + appearance: none; 368 368 + background: transparent; 369 369 + cursor: pointer; 370 370 + } 371 371 + 372 372 + input[type='range'][orient='vertical']::-webkit-slider-runnable-track { 373 373 + background: white; 374 374 + height: 100%; 375 375 + width: 4px; 376 376 + border-radius: 4px; 377 377 + } 378 378 + 379 379 + input[type='range'][orient='vertical']::-moz-range-track { 380 380 + background: white; 381 381 + height: 100%; 382 382 + width: 4px; 383 383 + border-radius: 4px; 384 384 + } 385 385 + 386 386 + input[type='range']::-webkit-slider-thumb { 387 387 + -webkit-appearance: none; 388 388 + appearance: none; 389 389 + border-radius: 50%; 390 390 + background-color: white; 391 391 + height: 16px; 392 392 + width: 16px; 393 393 + margin-left: -6px; 394 394 + } 395 395 + 396 396 + input[type='range'][orient='vertical']::-moz-range-thumb { 397 397 + border: none; 398 398 + border-radius: 50%; 399 399 + background-color: white; 400 400 + height: 16px; 401 401 + width: 16px; 402 402 + margin-left: -6px; 403 403 + }

-382

web/index.html

··· 36 36 <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Black.66e9a87f1c921e844ed4.otf"> 37 37 <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-BlackItalic.27b9f0ad06fd13a7b9da.otf"> 38 38 --> 39 39 - 40 40 - <style> 41 41 - @font-face { 42 42 - font-family: "Inter-Regular"; 43 43 - src: local("Inter-Regular"), url(/static/media/Inter-Regular.1f5ed03b6dd9fd1f9982.otf) format("font/otf"); 44 44 - font-weight: 400; 45 45 - font-style: normal; 46 46 - font-display: swap; 47 47 - } 48 48 - @font-face { 49 49 - font-family: "Inter-Italic"; 50 50 - src: local("Inter-Italic"), url(/static/media/Inter-Italic.95778eb0c75dc956257e.otf) format("font/otf"); 51 51 - font-weight: 400; 52 52 - font-style: italic; 53 53 - font-display: swap; 54 54 - } 55 55 - /* 56 56 - @font-face { 57 57 - font-family: "Inter-Medium"; 58 58 - src: local("Inter-Medium"), url(/static/media/Inter-Medium.296aa2d65964269836b3.otf) format("font/otf"); 59 59 - font-weight: 500; 60 60 - font-style: normal; 61 61 - font-display: swap; 62 62 - } 63 63 - @font-face { 64 64 - font-family: "Inter-MediumItalic"; 65 65 - src: local("Inter-MediumItalic"), url(/static/media/Inter-MediumItalic.0e57e17a6311368e2114.otf) format("font/otf"); 66 66 - font-weight: 500; 67 67 - font-style: italic; 68 68 - font-display: swap; 69 69 - } 70 70 - */ 71 71 - @font-face { 72 72 - font-family: "Inter-SemiBold"; 73 73 - src: local("Inter-SemiBold"), url(/static/media/Inter-SemiBold.2277990330981b8409bb.otf) format("font/otf"); 74 74 - font-weight: 600; 75 75 - font-style: normal; 76 76 - font-display: swap; 77 77 - } 78 78 - @font-face { 79 79 - font-family: "Inter-SemiBoldItalic"; 80 80 - src: local("Inter-SemiBoldItalic"), url(/static/media/Inter-SemiBoldItalic.f62fea3df3a521d6c8a7.otf) format("font/otf"); 81 81 - font-weight: 600; 82 82 - font-style: italic; 83 83 - font-display: swap; 84 84 - } 85 85 - /* 86 86 - @font-face { 87 87 - font-family: "Inter-Bold"; 88 88 - src: local("Inter-Bold"), url(/static/media/Inter-Bold.8d330503e1d034ad68de.otf) format("font/otf"); 89 89 - font-weight: 700; 90 90 - font-style: normal; 91 91 - font-display: swap; 92 92 - } 93 93 - @font-face { 94 94 - font-family: "Inter-BoldItalic"; 95 95 - src: local("Inter-BoldItalic"), url(/static/media/Inter-BoldItalic.bb17e63f9baa0d861a20.otf) format("font/otf"); 96 96 - font-weight: 700; 97 97 - font-style: italic; 98 98 - font-display: swap; 99 99 - } 100 100 - */ 101 101 - @font-face { 102 102 - font-family: "Inter-ExtraBold"; 103 103 - src: local("Inter-ExtraBold"), url(/static/media/Inter-ExtraBold.ff2581a193bf6b7e0b06.otf) format("font/otf"); 104 104 - font-weight: 800; 105 105 - font-style: normal; 106 106 - font-display: swap; 107 107 - } 108 108 - @font-face { 109 109 - font-family: "Inter-ExtraBoldItalic"; 110 110 - src: local("Inter-ExtraBoldItalic"), url(/static/media/Inter-ExtraBoldItalic.0e50b40728d24d40fdf4.otf) format("font/otf"); 111 111 - font-weight: 800; 112 112 - font-style: italic; 113 113 - font-display: swap; 114 114 - } 115 115 - /* 116 116 - @font-face { 117 117 - font-family: "Inter-Black"; 118 118 - src: local("Inter-Black"), url(/static/media/Inter-Black.66e9a87f1c921e844ed4.otf) format("font/otf"); 119 119 - font-weight: 900; 120 120 - font-style: normal; 121 121 - font-display: swap; 122 122 - } 123 123 - @font-face { 124 124 - font-family: "Inter-BlackItalic"; 125 125 - src: local("Inter-BlackItalic"), url(/static/media/Inter-BlackItalic.27b9f0ad06fd13a7b9da.otf) format("font/otf"); 126 126 - font-weight: 900; 127 127 - font-style: italic; 128 128 - font-display: swap; 129 129 - } 130 130 - */ 131 131 - 132 132 - /** 133 133 - * Extend the react-native-web reset: 134 134 - * https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/StyleSheet/initialRules.js 135 135 - */ 136 136 - html, 137 137 - body, 138 138 - #root { 139 139 - width: 100%; 140 140 - /* To smooth any scrolling behavior */ 141 141 - -webkit-overflow-scrolling: touch; 142 142 - margin: 0px; 143 143 - padding: 0px; 144 144 - /* Allows content to fill the viewport and go beyond the bottom */ 145 145 - min-height: 100%; 146 146 - } 147 147 - #root { 148 148 - flex-shrink: 0; 149 149 - flex-basis: auto; 150 150 - flex-grow: 1; 151 151 - display: flex; 152 152 - flex: 1; 153 153 - } 154 154 - 155 155 - html { 156 156 - /* Prevent text size change on orientation change https://gist.github.com/tfausak/2222823#file-ios-8-web-app-html-L138 */ 157 157 - -webkit-text-size-adjust: 100%; 158 158 - height: calc(100% + env(safe-area-inset-top)); 159 159 - scrollbar-gutter: stable both-edges; 160 160 - } 161 161 - html, body { 162 162 - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Liberation Sans", Helvetica, Arial, sans-serif; 163 163 - } 164 164 - 165 165 - #preload { 166 166 - width: 100px; 167 167 - position: fixed; 168 168 - left: 50%; 169 169 - top: 50%; 170 170 - transform: translate(-50%, -50%); 171 171 - } 172 172 - 173 173 - /* Buttons and inputs have a font set by UA, so we'll have to reset that */ 174 174 - button, input, textarea { 175 175 - font: inherit; 176 176 - line-height: inherit; 177 177 - } 178 178 - 179 179 - /* Color theming */ 180 180 - /* Default will always be white */ 181 181 - :root { 182 182 - --text: black; 183 183 - --background: white; 184 184 - --backgroundLight: hsl(211, 20%, 95%); 185 185 - } 186 186 - /* This gives us a black background when system is dark and we have not loaded the theme/color scheme values in JS */ 187 187 - @media (prefers-color-scheme: dark) { 188 188 - :root { 189 189 - --text: white; 190 190 - --background: black; 191 191 - --backgroundLight: hsl(211, 20%, 20%); 192 192 - color-scheme: dark; 193 193 - } 194 194 - } 195 195 - 196 196 - /* Overwrite those preferences with the selected theme */ 197 197 - html.theme--light { 198 198 - --text: black; 199 199 - --background: white; 200 200 - --backgroundLight: hsl(211, 20%, 95%); 201 201 - } 202 202 - html.theme--dark { 203 203 - --text: white; 204 204 - --background: black; 205 205 - --backgroundLight: hsl(211, 20%, 20%); 206 206 - color-scheme: dark; 207 207 - } 208 208 - html.theme--dim { 209 209 - --text: white; 210 210 - --background: hsl(211, 20%, 4%); 211 211 - --backgroundLight: hsl(211, 20%, 10%); 212 212 - color-scheme: dark; 213 213 - } 214 214 - 215 215 - /* Remove autofill styles on Webkit */ 216 216 - input:autofill, 217 217 - input:-webkit-autofill, 218 218 - input:-webkit-autofill:hover, 219 219 - input:-webkit-autofill:focus, 220 220 - input:-webkit-autofill:active{ 221 221 - -webkit-background-clip: text; 222 222 - -webkit-text-fill-color: var(--text); 223 223 - transition: background-color 5000s ease-in-out 0s; 224 224 - box-shadow: inset 0 0 20px 20px var(--background); 225 225 - background: var(--background); 226 226 - color: var(--text); 227 227 - } 228 228 - /* Force left-align date/time inputs on iOS mobile */ 229 229 - input::-webkit-date-and-time-value { 230 230 - text-align: left; 231 231 - } 232 232 - 233 233 - body { 234 234 - display: flex; 235 235 - /* Allows you to scroll below the viewport; default value is visible */ 236 236 - overflow-y: auto; 237 237 - overscroll-behavior-y: none; 238 238 - text-rendering: optimizeLegibility; 239 239 - background-color: var(--background); 240 240 - -webkit-font-smoothing: antialiased; 241 241 - -moz-osx-font-smoothing: grayscale; 242 242 - -ms-overflow-style: scrollbar; 243 243 - font-synthesis-weight: none; 244 244 - } 245 245 - 246 246 - /* Remove default link styling */ 247 247 - a { 248 248 - color: inherit; 249 249 - } 250 250 - a[role="link"]:hover { 251 251 - text-decoration: underline; 252 252 - } 253 253 - a[role="link"][data-no-underline="1"]:hover { 254 254 - text-decoration: none; 255 255 - } 256 256 - 257 257 - /* Styling hacks */ 258 258 - *[data-word-wrap] { 259 259 - word-break: break-word; 260 260 - } 261 261 - *[data-stable-gutters] { 262 262 - scrollbar-gutter: stable both-edges; 263 263 - } 264 264 - 265 265 - /* ProseMirror */ 266 266 - .ProseMirror { 267 267 - min-height: 140px; 268 268 - } 269 269 - .ProseMirror-dark { 270 270 - color: white; 271 271 - } 272 272 - .ProseMirror p { 273 273 - margin: 0; 274 274 - } 275 275 - .ProseMirror p.is-editor-empty:first-child::before { 276 276 - color: #8d8e96; 277 277 - content: attr(data-placeholder); 278 278 - float: left; 279 279 - height: 0; 280 280 - pointer-events: none; 281 281 - } 282 282 - .ProseMirror .mention { 283 283 - color: #0085ff; 284 284 - } 285 285 - .ProseMirror a, 286 286 - .ProseMirror .autolink { 287 287 - color: #0085ff; 288 288 - } 289 289 - /* OLLIE: TODO -- this is not accessible */ 290 290 - /* Remove focus state on inputs */ 291 291 - .ProseMirror-focused { 292 292 - outline: 0; 293 293 - } 294 294 - textarea:focus, 295 295 - input:focus { 296 296 - outline: 0; 297 297 - } 298 298 - .tippy-content .items { 299 299 - width: fit-content; 300 300 - } 301 301 - 302 302 - /* Tooltips */ 303 303 - [data-tooltip] { 304 304 - position: relative; 305 305 - z-index: 10; 306 306 - } 307 307 - [data-tooltip]::after { 308 308 - content: attr(data-tooltip); 309 309 - display: none; 310 310 - position: absolute; 311 311 - bottom: 0; 312 312 - left: 50%; 313 313 - transform: translateY(100%) translateY(8px) translateX(-50%); 314 314 - padding: 4px 10px; 315 315 - border-radius: 10px; 316 316 - background: var(--backgroundLight); 317 317 - color: var(--text); 318 318 - text-align: center; 319 319 - white-space: nowrap; 320 320 - font-size: 12px; 321 321 - z-index: 10; 322 322 - } 323 323 - [data-tooltip]::before { 324 324 - content: ''; 325 325 - display: none; 326 326 - position: absolute; 327 327 - border-bottom: 6px solid var(--backgroundLight); 328 328 - border-left: 6px solid transparent; 329 329 - border-right: 6px solid transparent; 330 330 - bottom: 0; 331 331 - left: 50%; 332 332 - transform: translateY(100%) translateY(2px) translateX(-50%); 333 333 - z-index: 10; 334 334 - } 335 335 - [data-tooltip]:hover::after, 336 336 - [data-tooltip]:hover::before { 337 337 - display:block; 338 338 - } 339 339 - 340 340 - /* NativeDropdown component */ 341 341 - .radix-dropdown-item:focus, 342 342 - .nativeDropdown-item:focus { 343 343 - outline: none; 344 344 - } 345 345 - 346 346 - /* Spinner component */ 347 347 - @keyframes rotate { 348 348 - 0% { 349 349 - transform: rotate(0deg); 350 350 - } 351 351 - 100% { 352 352 - transform: rotate(360deg); 353 353 - } 354 354 - } 355 355 - .rotate-500ms { 356 356 - position: absolute; 357 357 - inset:0; 358 358 - animation: rotate 500ms linear infinite; 359 359 - } 360 360 - 361 361 - @keyframes avatarHoverFadeIn { 362 362 - from { opacity: 0; } 363 363 - to { opacity: 1; } 364 364 - } 365 365 - 366 366 - @keyframes avatarHoverFadeOut { 367 367 - from { opacity: 1; } 368 368 - to { opacity: 0; } 369 369 - } 370 370 - 371 371 - .force-no-clicks > *, 372 372 - .force-no-clicks * { 373 373 - pointer-events: none !important; 374 374 - } 375 375 - 376 376 - input[type=range][orient=vertical] { 377 377 - writing-mode: vertical-lr; 378 378 - direction: rtl; 379 379 - appearance: slider-vertical; 380 380 - width: 16px; 381 381 - vertical-align: bottom; 382 382 - -webkit-appearance: none; 383 383 - appearance: none; 384 384 - background: transparent; 385 385 - cursor: pointer; 386 386 - } 387 387 - 388 388 - input[type="range"][orient=vertical]::-webkit-slider-runnable-track { 389 389 - background: white; 390 390 - height: 100%; 391 391 - width: 4px; 392 392 - border-radius: 4px; 393 393 - } 394 394 - 395 395 - input[type="range"][orient=vertical]::-moz-range-track { 396 396 - background: white; 397 397 - height: 100%; 398 398 - width: 4px; 399 399 - border-radius: 4px; 400 400 - } 401 401 - 402 402 - input[type="range"]::-webkit-slider-thumb { 403 403 - -webkit-appearance: none; 404 404 - appearance: none; 405 405 - border-radius: 50%; 406 406 - background-color: white; 407 407 - height: 16px; 408 408 - width: 16px; 409 409 - margin-left: -6px; 410 410 - } 411 411 - 412 412 - input[type="range"][orient=vertical]::-moz-range-thumb { 413 413 - border: none; 414 414 - border-radius: 50%; 415 415 - background-color: white; 416 416 - height: 16px; 417 417 - width: 16px; 418 418 - margin-left: -6px; 419 419 - } 420 420 - </style> 421 39 </head> 422 40 423 41 <body>