diff options
| author | Adam Soltys <[email protected]> | 2026-09-06 19:48:19 -0700 |
|---|---|---|
| committer | Adam Soltys <[email protected]> | 2026-09-06 19:48:19 -0700 |
| commit | ad496c0fb53706f221241dd48440c68d3333937d (patch) | |
| tree | 0adff8309cee22c52389010a9c9095a883c87f9b /src/style.css | |
| parent | 966ef24380bc25fb0f0a064358c802347cb965a3 (diff) | |
| download | coinosv3-ad496c0fb53706f221241dd48440c68d3333937d.tar.gz coinosv3-ad496c0fb53706f221241dd48440c68d3333937d.zip | |
Chat reactions render inside the bubble (Telegram-style), not floating below it.
Reactions were a sibling of the bubble (a separate row under it), so they hung outside the message. Moved the reaction pills inside .chat-bubble, tucked under the text, across all three renderers: community channel messages, DMs, and the read-only public /chat page. The pill background and the "your reaction" highlight border now derive from the bubble's own text colour (color-mix on currentColor), so they read correctly on both the plain bubble and the accent "me" bubble. Tapping a pill stops propagation so it toggles the reaction without also opening the message action sheet.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
Claude-Session: https://claude.ai/code/session_01MGzU12QrAA4G6BYGzGVdXz
Diffstat (limited to 'src/style.css')
| -rw-r--r-- | src/style.css | 12 |
1 files changed, 8 insertions, 4 deletions
diff --git a/src/style.css b/src/style.css index a99212d..6779579 100644 --- a/src/style.css +++ b/src/style.css @@ -469,13 +469,17 @@ hr.divider { margin: 16px 0; } display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-top: 1px solid var(--line); background: var(--surface2); flex: 0 0 auto; } -.chat-reacts { display: flex; gap: 5px; margin-top: 3px; flex-wrap: wrap; } +/* Reactions sit INSIDE the bubble, tucked under the text (Telegram-style). + The pill tint/border derive from the bubble's own text colour, so they read + correctly on both the plain bubble and the accent "me" bubble. */ +.chat-reacts { display: flex; gap: 5px; margin-top: 5px; flex-wrap: wrap; } .chat-react { - font-size: 12px; background: var(--paper); border: 1px solid var(--line); - border-radius: 9px; padding: 1px 7px; + font-size: 12px; border-radius: 10px; padding: 1px 7px; + background: color-mix(in srgb, currentColor 13%, transparent); + border: 1px solid transparent; } .chat-react.clickable { cursor: pointer; } -.chat-react.on { border-color: var(--accent); color: var(--accent); } +.chat-react.on { border-color: color-mix(in srgb, currentColor 55%, transparent); font-weight: 600; } .chat-compose { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); align-items: center; flex: 0 0 auto; |