From fc1cf42a477d6a4f179cac5461373cbd52de7eb1 Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Fri, 9 Oct 2026 08:05:28 -0700 Subject: Chat: a one-tap ⚡ beside every bubble from someone else, in communities and DMs, vertically centred on the bubble — tap zaps the default amount (the strike starts at the bolt), hold sets the amount, without opening the message sheet first. Own messages, visitors and wallets that can't zap get none; Marmot groups have no zap yet and are left alone MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 5.5 --- src/style.css | 12 ++++++++++++ 1 file changed, 12 insertions(+) (limited to 'src/style.css') diff --git a/src/style.css b/src/style.css index 3b715ec..7a8d3c0 100644 --- a/src/style.css +++ b/src/style.css @@ -580,6 +580,18 @@ html:has(#app .chat-card), body:has(#app .chat-card) { overflow: hidden; } .zap-tally { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; font-weight: 650; color: #e6a800; white-space: nowrap; flex-shrink: 0; } .zap-tally.chat-react { font-size: 12px; padding: 1px 7px 1px 5px; } .zap-tally.clickable { cursor: pointer; } +/* the one-tap ⚡ beside someone else's chat bubble */ +.chat-line { display: flex; align-items: center; gap: 4px; } +.chat-row.dm.mine .chat-line { justify-content: flex-end; } +.chat-line > .chat-bubble { min-width: 0; } +.chat-zap { + flex-shrink: 0; width: 28px; height: 28px; padding: 0; border: none; border-radius: 50%; + display: flex; align-items: center; justify-content: center; + background: none; color: var(--muted); cursor: pointer; + -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; +} +.chat-zap:hover { color: #e6a800; background: var(--paper); } +.chat-zap svg { width: 17px; height: 17px; } /* A tap-local lightning strike, followed by a floating amount and embers. */ .zap-fx { position: fixed; inset: 0; z-index: 10000; pointer-events: none; overflow: hidden; contain: strict; } .zap-fx-impact { position: absolute; left: var(--zap-x); top: var(--zap-y); width: 0; height: 0; color: #ffc83d; } -- cgit v1.2.3