fix: remove excessive blue focus borders from containers

Restrict :focus-visible outline to only button/a/select.
Remove outline from textarea/input (uses border instead).
Suppress div, .block, .wrap, #main-chatbot focus outlines.
Override Gradio default .block:focus-within box-shadow globally.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-06-02 17:48:46 +09:00
co-authored by Claude Sonnet 4.6
parent 2d8e83581c
commit b89bca605a
+29 -4
View File
@@ -463,6 +463,11 @@ _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; }
/* ── 전체 레이아웃 (D4-1) ── */
.app-layout {
min-height: calc(100vh - 60px) !important;
@@ -660,11 +665,31 @@ footer { display: none !important; }
.youlbot-sidebar.collapsed { width: 0 !important; min-width: 0 !important; max-width: 0 !important; padding: 0 !important; }
}
/* ── 접근성 ── */
:focus-visible {
outline: 3px solid #3b82f6 !important;
/* ── 접근성: 포커스 테두리를 인터랙티브 요소에만 적용 ── */
button:focus-visible,
a:focus-visible,
select:focus-visible {
outline: 2px solid #3b82f6 !important;
outline-offset: 2px !important;
border-radius: 4px;
border-radius: 6px;
}
/* textarea/input은 border로 포커스 표시하므로 outline 제거 */
textarea:focus-visible,
input:focus-visible {
outline: none !important;
}
/* 컨테이너 div에 생기는 파란 테두리 제거 */
div:focus-visible,
div:focus,
.block:focus,
.block:focus-within,
.wrap:focus,
.wrap:focus-within,
#main-chatbot:focus,
#main-chatbot:focus-within {
outline: none !important;
box-shadow: none !important;
border-color: transparent !important;
}
/* ── 다크 모드 오버라이드 ── */