diff options
| author | Adam Soltys <[email protected]> | 2026-09-12 09:52:06 -0700 |
|---|---|---|
| committer | Adam Soltys <[email protected]> | 2026-09-12 09:52:06 -0700 |
| commit | 1ca77a5999bc546f92ec7189acfba1dc8088a2a7 (patch) | |
| tree | 091d851c4375c8b254ec1ec14cd9373ee8b4efbe /src/style.css | |
| parent | f34b5a155e7cb63e15eff7e7ba9559292b31c5e1 (diff) | |
| download | coinosv3-1ca77a5999bc546f92ec7189acfba1dc8088a2a7.tar.gz coinosv3-1ca77a5999bc546f92ec7189acfba1dc8088a2a7.zip | |
Every answer to a post lives in one row beneath it.
Reply and zap have come down from the header to join boost, quote and the
heart, spread across the post's full width so each is a comfortable target
instead of five buttons huddled in a corner. Only the ellipsis stays up top.
Proper icons at a readable size, all the same weight: a speech bubble for
reply (a return arrow is what a keyboard does, not what a person does), the
repeat arrows for boost, quote marks, a heart, a bolt. Counts sit beside the
icon they count.
And the heart asks which feeling: tapping it opens the same six emoji the
chat sheet offers, and the one you pick is the one the post then shows —
NIP-25 takes any content, so there was never a reason to assume a heart.
Tapping your own reaction still takes it back.
Co-Authored-By: Claude Opus 5 (1M context) <[email protected]>
Claude-Session: https://claude.ai/code/session_019mrt228Upn9nNCwGixzSLx
Diffstat (limited to 'src/style.css')
| -rw-r--r-- | src/style.css | 17 |
1 files changed, 10 insertions, 7 deletions
diff --git a/src/style.css b/src/style.css index 4eceb98..9ea8b39 100644 --- a/src/style.css +++ b/src/style.css @@ -533,16 +533,19 @@ hr.divider { margin: 16px 0; } /* Profile note feed: inline images stay contained, links wrap. */ .note-img { display: block; max-width: 100%; max-height: 320px; border-radius: 10px; margin-top: 6px; object-fit: contain; } .note-img.clickable { cursor: zoom-in; } -/* The row under a post: like, boost, quote. Quiet until they carry a count - or you've used one, the way a timeline should read. */ -.note-acts { margin-top: 6px; } +/* The row under a post: reply, boost, quote, react, zap — spread across the + post's full width so each is a comfortable target, quiet until one carries + a count or you've used it. */ +.note-acts { margin-top: 8px; justify-content: space-between; gap: 4px; max-width: 340px; } .note-act { - background: none; border: 0; padding: 2px 0; margin: 0; font-size: 14px; line-height: 1; - color: var(--faint); display: inline-flex; align-items: center; gap: 5px; cursor: pointer; + background: none; border: 0; padding: 4px 6px; margin: 0; line-height: 1; + color: var(--faint); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; + border-radius: 8px; } -.note-act:hover { background: none; color: var(--ink); } +.note-act:hover { background: var(--surface2); color: var(--ink); } .note-act.on { color: #e0245e; } -.note-act.on[title="Boost"], .note-act.on[aria-label="Boost"] { color: var(--green); } +.note-act.on[aria-label="Boost"] { color: var(--green); } +.note-act-emoji { font-size: 17px; line-height: 1; } .note-act-n { font-size: 12px; font-weight: 600; color: var(--muted); } /* The attach button sits between Post and Cancel: a square the size of the buttons beside it, not the sliver a .btn-sm made of a 20px icon. */ |