diff --git a/app/globals.css b/app/globals.css index 1be628671..a344dd0de 100644 --- a/app/globals.css +++ b/app/globals.css @@ -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; }