style: navbar 选中态去黑——书架/设计册改纸按压色+ink 内描边环(黑只属于文字与 logo;章节选中仍=章色与章头统一)

This commit is contained in:
cqh963852 committed 2026-10-08 16:01:37 +08:00
1 parent cf611dd9be
commit 3c9aaf5faf
1 file changed
+4 -3
+4 -3
View File
@@ -1,5 +1,6 @@
/** 教程站页面骨架:站头导航跨页常驻(view-transition-name 共享元素,页间不闪烁)。
* 选中项背景色=该章色(与章头 title 横幅统一);书架/设计册选中为 ink。 */
* 选中语义:章节项=该章色(与章头横幅统一);书架/设计册=纸按压色+ink 内描边环。
* 黑色只属于文字与 logo——hover 与选中都不借黑。 */
import '@stack/design-system'
import type { ReactNode } from 'react'
import type { ChapterId } from '@stack/design-system'
@@ -56,7 +57,7 @@ export function Page({
key={n.href}
href={n.href}
className={`rounded-lg px-2.5 py-1 text-[12.5px] font-bold no-underline transition-colors ${
on ? (n.id ? 'text-ink' : 'bg-ink text-paper') : 'text-body hover:bg-paper-deep'
on ? (n.id ? 'text-ink' : 'bg-paper-deep text-ink shadow-[inset_0_0_0_2px_var(--color-ink)]') : 'text-body hover:bg-paper-deep'
}`}
style={on && n.id ? { background: CHAPTERS[n.id].color } : undefined}
>
@@ -75,7 +76,7 @@ export function Page({
key={n.href}
href={n.href}
className={`rounded-lg px-2.5 py-1 text-[12.5px] font-bold no-underline transition-colors ${
on ? 'bg-ink text-paper' : 'text-body hover:bg-paper-deep'
on ? 'bg-paper-deep text-ink shadow-[inset_0_0_0_2px_var(--color-ink)]' : 'text-body hover:bg-paper-deep'
}`}
>
{n.label}