diff options
| author | Adam Soltys <[email protected]> | 2026-09-30 10:23:20 -0700 |
|---|---|---|
| committer | Adam Soltys <[email protected]> | 2026-09-30 10:23:20 -0700 |
| commit | 0076c591df9432e2bb5b2281afc1fb4106500297 (patch) | |
| tree | 7b9ef49079158af7e6e2545f1e847c4c2baeb428 /src/style.css | |
| parent | 505cd84813a80e0a69b2cc95aa93c68cf2856cb2 (diff) | |
| download | coinosv3-0076c591df9432e2bb5b2281afc1fb4106500297.tar.gz coinosv3-0076c591df9432e2bb5b2281afc1fb4106500297.zip | |
A picture or video on its way shows a bar with its percentage — shrinking, then uploading; the pencil reads "New post".
ui.mediaProgress { stage, pct } (a render per whole percent) drawn as a
labelled bar under the reply and post composers, instead of only the
paperclip turning into a spinner. Upload progress comes from
XMLHttpRequest upload events (fetch() has none) in uploadPublicMedia's
new onProgress; injected fetchers (tests) keep the fetch path.
upload-progress-test: 1.2 MB at 400 KB/s climbs 0→100 in steps.
video-compress-test: the bar counts the shrink, then the upload.
Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01Du1qT1wbkYwYK6zkGH79Rp
Diffstat (limited to 'src/style.css')
| -rw-r--r-- | src/style.css | 5 |
1 files changed, 5 insertions, 0 deletions
diff --git a/src/style.css b/src/style.css index 9bdaf3c..60d850c 100644 --- a/src/style.css +++ b/src/style.css @@ -256,6 +256,11 @@ coinos-text { white-space: pre-wrap; overflow-wrap: anywhere; overflow-y: auto; line-height: 1.4; cursor: text; } coinos-text:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); } +/* a picture or video on its way: shrinking, then uploading (mediaBar) */ +.media-progress { display: flex; flex-direction: column; gap: 4px; } +.media-progress-pct { font-variant-numeric: tabular-nums; } +.media-progress-track { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; } +.media-progress-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width .2s linear; } coinos-text[data-empty]::before { content: attr(placeholder); color: var(--muted); pointer-events: none; } .chat-compose coinos-text { flex: 1; min-width: 0; padding: 10px 13px; max-height: 120px; } .mono-input { font-family: var(--mono); } |