DukeInc/groupchat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: add glowing border to permalink-highlighted messages

Browse Source 
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) <noreply@anthropic.com>
This commit is contained in:
Jason Tudisco 2026-03-16 17:48:03 -06:00
parent 55c17b2999
commit 9634c275b3
1 changed files with 8 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
client/src/components/app.riot
View File

@ -172,16 +172,19 @@
} }
:global(.hash-highlight) { :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 { @keyframes hash-flash {
0%, 15% { 0%, 30% {
background: rgba(108, 92, 231, 0.2); background: rgba(108, 92, 231, 0.15);
border-radius: 8px; box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.5), 0 0 16px rgba(108, 92, 231, 0.25);
} }
100% { 100% {
background: transparent; background: transparent;
box-shadow: none;
} }
} }
</style> </style>
@ -606,7 +609,7 @@
if (el) { if (el) {
el.scrollIntoView({ behavior: 'smooth', block: 'center' }) el.scrollIntoView({ behavior: 'smooth', block: 'center' })
el.classList.add('hash-highlight') el.classList.add('hash-highlight')
setTimeout(() => el.classList.remove('hash-highlight'), 3000) setTimeout(() => el.classList.remove('hash-highlight'), 4000)
} }
}, },
} }