src-advisory/SRCmail
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: improve settings search highlight

Browse Source
This commit is contained in:
Linus Rath
2026-05-06 18:58:06 +02:00
parent 2dc8537780
commit 70c1ddd48c
3 changed files with 64 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/globals.css
+26 -4
View File
@@ -766,9 +766,31 @@ body {
cursor: col-resize;
}
/* Brief flash applied to a setting row when the user clicks a sub-result in
the settings search. The page removes the class after ~2s. */
/* Smooth halo applied to a setting row when the user clicks a sub-result in
the settings search. The element bg + a 10px box-shadow fill the row plus
a 10px ring of the same tint, then a 2px outline sits exactly at the outer
edge. Uses the primary theme color so it adapts to light/dark. */
@keyframes settings-search-pulse {
0% {
background-color: color-mix(in srgb, var(--color-primary) 0%, transparent);
box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primary) 0%, transparent);
outline-color: color-mix(in srgb, var(--color-primary) 0%, transparent);
}
30% {
background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
box-shadow: 0 0 0 10px color-mix(in srgb, var(--color-primary) 12%, transparent);
outline-color: color-mix(in srgb, var(--color-primary) 60%, transparent);
}
100% {
background-color: color-mix(in srgb, var(--color-primary) 0%, transparent);
box-shadow: 0 0 0 10px color-mix(in srgb, var(--color-primary) 0%, transparent);
outline-color: color-mix(in srgb, var(--color-primary) 0%, transparent);
}
}
.settings-search-highlight {
background-color: color-mix(in srgb, var(--color-primary) 18%, transparent);
box-shadow: 0 0 0 2px var(--color-primary);
outline: 2px solid transparent;
outline-offset: 10px;
border-radius: 8px;
animation: settings-search-pulse 1.6s ease-in-out forwards;
}