From 92581855172a7ff7da338d9a34014ba3a7d6f663 Mon Sep 17 00:00:00 2001
From: l0ng-ai <24760907+l0ng-ai@users.noreply.github.com>
Date: Tue, 27 Oct 2026 20:43:51 +0800
Subject: [PATCH] fix(ui): Keep focus rings off text fields regardless of role

Search Everywhere's query input carries role="combobox", so the global
focus-ring rule drew an outline inside its frame. Text inputs are now
excluded from that rule, and the selector list uses :where() so its
specificity matches a bare :focus-visible and component focus styles
always take precedence.
---
 src/styles/global.css | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/styles/global.css b/src/styles/global.css
index ba8dff292..f359bf836 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -96,11 +96,13 @@ a:hover {
 
 /* Focus rings mark controls only, as in IDEA: lists, trees, tables, menus, popups and other
    focusable containers show focus through their selected row instead of a frame. Text fields
-   aren't listed: their frame shows focus, and an outline here draws a second box inside it. */
+   never get one, whatever their role (a search box is a combobox): their frame shows focus, and
+   an outline here draws a second box inside it. `:where` keeps this at the specificity of a bare
+   `:focus-visible`, so a component's own focus style always wins. */
 :focus-visible {
   outline: none;
 }
-:is(
+:where(
   button,
   a[href],
   input:is([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="button"], [type="submit"], [type="reset"]),
@@ -115,6 +117,13 @@ a:hover {
   [role="combobox"],
   [role="slider"],
   [role="spinbutton"]
+):not(
+  :where(
+    input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="button"], [type="submit"], [type="reset"]),
+    textarea,
+    [contenteditable="true"],
+    [contenteditable=""]
+  )
 ):focus-visible {
   outline: 2px solid var(--focus-ring);
   outline-offset: -2px;