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 = """
|
_CUSTOM_CSS = """
|
||||||
footer { display: none !important; }
|
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) ── */
|
/* ── 전체 레이아웃 (D4-1) ── */
|
||||||
.app-layout {
|
.app-layout {
|
||||||
min-height: calc(100vh - 60px) !important;
|
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; }
|
.youlbot-sidebar.collapsed { width: 0 !important; min-width: 0 !important; max-width: 0 !important; padding: 0 !important; }
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── 접근성 ── */
|
/* ── 접근성: 포커스 테두리를 인터랙티브 요소에만 적용 ── */
|
||||||
:focus-visible {
|
button:focus-visible,
|
||||||
outline: 3px solid #3b82f6 !important;
|
a:focus-visible,
|
||||||
|
select:focus-visible {
|
||||||
|
outline: 2px solid #3b82f6 !important;
|
||||||
outline-offset: 2px !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