From 9634c275b3c896834d87762b7c880ddf03365bfb Mon Sep 17 00:00:00 2001 From: Jason Tudisco Date: Mon, 16 Mar 2026 17:48:03 -0600 Subject: [PATCH] style: add glowing border to permalink-highlighted messages The linked message now gets a purple box-shadow glow and background highlight that lasts 4 seconds, making it much more obvious which message the user was linked to. Co-Authored-By: Claude Opus 4.6 (1M context) --- client/src/components/app.riot | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/client/src/components/app.riot b/client/src/components/app.riot index fd314b8..c00e796 100644 --- a/client/src/components/app.riot +++ b/client/src/components/app.riot @@ -172,16 +172,19 @@ } :global(.hash-highlight) { - animation: hash-flash 3s ease; + animation: hash-flash 4s ease; + border-radius: 8px; + box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.5), 0 0 12px rgba(108, 92, 231, 0.2); } @keyframes hash-flash { - 0%, 15% { - background: rgba(108, 92, 231, 0.2); - border-radius: 8px; + 0%, 30% { + background: rgba(108, 92, 231, 0.15); + box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.5), 0 0 16px rgba(108, 92, 231, 0.25); } 100% { background: transparent; + box-shadow: none; } } @@ -606,7 +609,7 @@ if (el) { el.scrollIntoView({ behavior: 'smooth', block: 'center' }) el.classList.add('hash-highlight') - setTimeout(() => el.classList.remove('hash-highlight'), 3000) + setTimeout(() => el.classList.remove('hash-highlight'), 4000) } }, }