fix: remove blue focus-within border from all Gradio wraps globally

Root cause: .wrap:focus-within sets box-shadow+border-color via
--input-shadow-focus / --input-border-color-focus on ALL components.

Fix:
- .wrap:focus-within -> box-shadow:none, border-color:primary globally
- .pill-input .wrap:focus-within -> restore blue glow for input only
- .block:focus-within -> outline/shadow/border reset
- Simplify .pill-input textarea:focus to just remove outline

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-06-02 18:28:51 +09:00
co-authored by Claude Sonnet 4.6
parent 6c01426e37
commit 9f1a43095e
+17 -6
View File
@@ -463,10 +463,23 @@ _JS = """
_CUSTOM_CSS = """
footer { display: none !important; }
/* Gradio 기본 focus 테두리 전역 제거 */
.gradio-container *:focus:not(button):not(a):not(select) { outline: none !important; }
.gradio-container .block:focus,
.gradio-container .block:focus-within { box-shadow: none !important; border-color: var(--border-color-primary) !important; }
/* Gradio .wrap:focus-within 전역 제거 (모든 컴포넌트 파란 테두리 원인) */
.wrap:focus-within {
box-shadow: none !important;
border-color: var(--border-color-primary) !important;
}
/* pill-input wrap에만 포커스 스타일 복원 */
.pill-input .wrap:focus-within {
border-color: #3b82f6 !important;
box-shadow: 0 0 0 3px rgba(59,130,246,.10) !important;
}
/* block, container 레벨 focus-within도 제거 */
.gradio-container .block:focus-within,
.gradio-container .block:focus {
box-shadow: none !important;
border-color: var(--border-color-primary) !important;
outline: none !important;
}
/* ── 전체 레이아웃 (D4-1) ── */
.app-layout {
@@ -553,9 +566,7 @@ footer { display: none !important; }
line-height: 1.5 !important;
}
.pill-input textarea:focus {
border-color: #3b82f6 !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(59,130,246,.12) !important;
}
.pill-send-btn { align-self: center !important; }
.pill-send-btn button {