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:
@@ -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;
|
||||
}
|
||||
|
||||
/* ── 다크 모드 오버라이드 ── */
|
||||
|
||||
Reference in New Issue
Block a user