freefire/jiang13-bbs
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 9 Wiki Activity

polish(ui): 侧栏可点块悬停/聚焦统一为主题色淡底

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
姜十三
2026-09-16 18:19:53 +08:00
parent ad5e0f5d9a
commit cfc6c1403b
5 changed files with 62 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
frontend/app/globals.css
View File

@@ -2155,7 +2155,7 @@ a.j13-mention-token:hover {
}
}
/* 侧栏导航项 */
/* 侧栏导航项：无选中态的悬停/聚焦与榜单、公告一致，用主题色淡底 */
.j13-raillink {
display: flex;
align-items: center;
@@ -2168,11 +2168,14 @@ a.j13-mention-token:hover {
color: var(--ink-2);
transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.j13-raillink:hover {
background: var(--panel-2);
.j13-raillink:hover,
.j13-raillink:focus-visible {
background: var(--accent-soft);
color: var(--ink);
}
.j13-raillink[aria-current="page"] {
.j13-raillink[aria-current="page"],
.j13-raillink[aria-current="page"]:hover,
.j13-raillink[aria-current="page"]:focus-visible {
background: var(--nav-active-bg);
border-color: var(--nav-active-line);
color: var(--nav-active-ink);
@@ -2407,6 +2410,18 @@ a.j13-mention-token:hover {
.j13-rank:focus-visible {
background: var(--accent-soft);
}
.j13-rank-title {
display: block;
color: var(--ink);
font-size: 13px;
font-weight: 500;
line-height: 1.375;
transition: color 0.16s ease;
}
.j13-rank:hover .j13-rank-title,
.j13-rank:focus-visible .j13-rank-title {
color: var(--accent);
}
.j13-rank .j13-rank-no {
width: 18px;
padding-top: 2px;
@@ -2465,11 +2480,15 @@ a.j13-mention-token:hover {
white-space: nowrap;
transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.j13-chip:hover {
border-color: var(--line-2);
color: var(--ink);
.j13-chip:hover,
.j13-chip:focus-visible {
background: var(--accent-soft);
border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
color: var(--accent);
}
.j13-chip[aria-current="page"] {
.j13-chip[aria-current="page"],
.j13-chip[aria-current="page"]:hover,
.j13-chip[aria-current="page"]:focus-visible {
background: var(--nav-active-bg);
border-color: var(--nav-active-line);
color: var(--nav-active-ink);
@@ -2494,6 +2513,35 @@ a.j13-mention-token:hover {
.j13-rail-scroll::-webkit-scrollbar-track {
background: transparent;
}
/* 文章目录项：悬停/聚焦与侧栏其他可点块统一为主题色淡底 */
.j13-toc-link {
display: block;
padding: 6px 4px 6px 12px;
margin-left: -1px;
font-size: 12.5px;
line-height: 1.375;
color: var(--ink-2);
border-left: 2px solid transparent;
border-radius: 0 8px 8px 0;
transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}
.j13-toc-link.is-h3 {
padding-left: 20px;
}
.j13-toc-link:hover,
.j13-toc-link:focus-visible {
color: var(--accent);
background: var(--accent-soft);
}
.j13-toc-link.is-active,
.j13-toc-link.is-active:hover,
.j13-toc-link.is-active:focus-visible {
color: var(--accent);
font-weight: 600;
border-left-color: var(--accent);
background: var(--accent-soft);
}
}
/* ============================================================

5
frontend/app/post/[id]/page.tsx
View File

@@ -290,10 +290,7 @@ function RelatedPosts({
<Link href={`/post/${p.id}`} className="j13-rank" data-tip={p.title}>
<span className="j13-rank-no">{i + 1}</span>
<span className="min-w-0 flex-1">
<span
className="block text-[13px] leading-snug line-clamp-2"
style={{ color: "var(--ink)" }}
>
<span className="j13-rank-title line-clamp-2">
{p.title}
</span>
<span className="mt-1 flex items-center gap-2.5 meta text-[11.5px]">

9
frontend/components/PostToc.tsx
View File

@@ -73,14 +73,7 @@ export default function PostToc({ items }: { items: TocItem[] }) {
data-toc-id={it.id}
href={`#${it.id}`}
onClick={jump(it.id)}
className="block py-1.5 pr-1 text-[12.5px] leading-snug transition-colors"
style={{
paddingLeft: it.level === 3 ? 20 : 12,
marginLeft: -1,
borderLeft: `2px solid ${isActive ? "var(--accent)" : "transparent"}`,
color: isActive ? "var(--accent)" : "var(--ink-2)",
fontWeight: isActive ? 600 : 400,
}}
className={`j13-toc-link${it.level === 3 ? " is-h3" : ""}${isActive ? " is-active" : ""}`}
>
{it.text}
</a>

7
frontend/components/home/BoardPanels.tsx
View File

@@ -162,13 +162,10 @@ function BoardHot({ posts }: { posts: PostListItem[] }) {
<ol className="j13-ranklist">
{posts.map((p, i) => (
<li key={p.id}>
<Link href={`/post/${p.id}`} className="j13-rank group" data-tip={p.title}>
<Link href={`/post/${p.id}`} className="j13-rank" data-tip={p.title}>
<span className="j13-rank-no">{i + 1}</span>
<span className="min-w-0 flex-1">
<span
className="block truncate text-[13px] font-medium leading-snug transition-colors group-hover:text-[var(--accent)]"
style={{ color: "var(--ink)" }}
>
<span className="j13-rank-title truncate">
{p.title}
</span>
<span className="mt-1 flex items-center gap-2.5 meta text-[11.5px]">

7
frontend/components/home/CommunityPanels.tsx
View File

@@ -150,13 +150,10 @@ function HotRanking({ posts }: { posts: PostListItem[] }) {
<ol className="j13-ranklist">
{posts.map((p, i) => (
<li key={p.id}>
<Link href={`/post/${p.id}`} className="j13-rank group" data-tip={p.title}>
<Link href={`/post/${p.id}`} className="j13-rank" data-tip={p.title}>
<span className="j13-rank-no">{i + 1}</span>
<span className="min-w-0 flex-1">
<span
className="block truncate text-[13px] font-medium leading-snug transition-colors group-hover:text-[var(--accent)]"
style={{ color: "var(--ink)" }}
>
<span className="j13-rank-title truncate">
{p.title}
</span>
<span className="mt-1 flex items-center gap-2.5 meta text-[11.5px]">