starred/webmail
1
0
Fork 0
mirror of https://github.com/bulwarkmail/webmail.git synced 2026-11-01 08:12:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: keep a setting row's shape and divider when the settings search highlights it

Browse Source
This commit is contained in:
Linus Rath
2026-10-28 20:00:41 +01:00
parent 785c19fe8c
commit 1c8579fdbc
1 changed files with 19 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/globals.css
+19 -11
View File
@@ -941,31 +941,39 @@ optgroup {
}
/* 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. */
the settings search. It is drawn by a pseudo-element behind the row's
content, so the row keeps its own shape and divider. It stays inside the
row's padding box vertically (never over the dividers above and below) and
reaches 10px past it sideways so the text isn't flush with its 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);
border-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);
border-color: color-mix(in srgb, var(--color-primary) 40%, 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);
border-color: color-mix(in srgb, var(--color-primary) 0%, transparent);
}
}
.settings-search-highlight {
outline: 2px solid transparent;
outline-offset: 10px;
position: relative;
isolation: isolate;
}
.settings-search-highlight::before {
content: "";
position: absolute;
inset: 0 -10px;
z-index: -1;
border: 1px solid transparent;
border-radius: 8px;
pointer-events: none;
animation: settings-search-pulse 1.6s ease-in-out forwards;
}