eleven / messenger Public

web: search highlight — dashed ring instead of a background fill (#902)

Follow-up to #896: the background-tint highlight was nearly invisible
on "me" bubbles, whose background is often the same hue as --accent.
Draw a dashed outline around the bubble instead, offset onto the
neutral page background, so it reads clearly regardless of the
bubble's own color.

Co-authored-by: Claude <noreply@anthropic.com>

James Adam 3 months ago 414bdeb008de7bc4ca3c34ca220c807f9c3a8a6c parent 631cc06

1 file changed, +5 −2

web/static/style.css +5 −2

diff --git a/web/static/style.css b/web/static/style.css

index 07f46fc..d7d459b 100644

--- a/web/static/style.css

+++ b/web/static/style.css

@@ -1232,8 +1232,11 @@ input:focus, textarea:focus { outline: 2px solid var(--accent); border-color: tr

25% { background: color-mix(in srgb, var(--accent) 16%, transparent); }

}

/* sticky highlight for the current search result, until another is picked or

- search ends (unlike .flash, this doesn't fade on its own) */

-.msg.search-active { background: color-mix(in srgb, var(--accent) 16%, transparent); border-radius: var(--radius); }

+ search ends (unlike .flash, this doesn't fade on its own). A dashed ring

+ OUTSIDE the bubble, on the page background — not a fill on the bubble

+ itself — so it stays visible on "me" bubbles, whose background is often

+ the same hue as --accent (a fill there nearly disappears). */

+.msg.search-active .bubble { outline: 2px dashed var(--accent); outline-offset: 3px; }

/* ---- reply-thread view (apps/chat.js): tap a quote or a "N Replies" tally and

the thread lifts over the transcript, iMessage-style — the root pinned on