ui(collapsible): fix header hover tone inversion under sticky parent
Collapsible 헤더 button 의 hover bg 를 zinc-900/60 → zinc-800/50 으로 교체. 문제: hover 톤이 부모의 bg 불투명도에 의존해서 방향이 뒤집힘. - 비-sticky 부모 bg-zinc-900/40 + hover bg-zinc-900/60 → hover 영역이 더 불투명 (어두워짐) = highlight. OK. - OrderbookPanel sticky 부모 bg-zinc-900/80 + hover bg-zinc-900/60 → hover 영역이 덜 불투명(더 옅어짐) = hover 가 "뒤로 가는" 인상. 톤 역전. 원인: 둘 다 같은 zinc-900 색이라 hover 가 불투명도 차이만으로 highlight 를 표시. 부모 opacity 가 hover opacity 보다 높으면 신호가 뒤집힘. 해결: hover 를 zinc-800 (zinc-900 보다 한 단계 밝은 색) 으로 옮김. 색 자체가 밝아 /50 opacity 라도 두 부모 케이스 모두에서 highlight 방향이 유지됨. 사이드바 list-row hover 톤(RelatedStocks bg-zinc-800/40 · PeerList bg-zinc-800/50)과도 통일 — 클릭 가능 요소의 hover 톤이 앱 전반에서 동일 색족. 검증: tsc/next lint 통과.
This commit is contained in:
@@ -54,7 +54,14 @@ export function Collapsible({
|
|||||||
type="button"
|
type="button"
|
||||||
onClick={toggle}
|
onClick={toggle}
|
||||||
aria-expanded={open}
|
aria-expanded={open}
|
||||||
className="flex w-full items-baseline justify-between gap-2 px-4 py-3 text-left transition hover:bg-zinc-900/60"
|
// hover 톤은 zinc-800/50 — zinc-900 보다 한 단계 밝은 색으로 잡아 부모의
|
||||||
|
// bg 불투명도와 무관하게 항상 highlight 방향으로 시각 신호. zinc-900/60
|
||||||
|
// 였을 땐 비-sticky 부모(/40) 에선 더 어두워져 highlight 가 됐지만,
|
||||||
|
// OrderbookPanel sticky 부모(/80) 에선 오히려 더 옅어져 hover 가 "뒤로
|
||||||
|
// 가는" 인상이 되는 톤 역전 발생. zinc-800 으로 한 단계 색을 올리면
|
||||||
|
// /50 opacity 라도 색 자체가 밝아 두 부모 모두에서 highlight 로 읽힘.
|
||||||
|
// 사이드바 list-row hover 톤(RelatedStocks/PeerList)과도 통일.
|
||||||
|
className="flex w-full items-baseline justify-between gap-2 px-4 py-3 text-left transition hover:bg-zinc-800/50"
|
||||||
>
|
>
|
||||||
<span className="flex min-w-0 items-center gap-2 text-sm font-medium text-zinc-200">
|
<span className="flex min-w-0 items-center gap-2 text-sm font-medium text-zinc-200">
|
||||||
<span
|
<span
|
||||||
|
|||||||
Reference in New Issue
Block a user