style: 优化系列导航栏样式并对齐 DoIt 主题风格
continuous-integration/drone/push Build is passing

This commit is contained in:
seahi committed 2026-08-17 10:33:40 +08:00
1 parent 21cc8652ac
commit 627c9ef197
1 file changed
+48 -39
+48 -39
View File
@@ -188,100 +188,100 @@
</main> </main>
<style> <style>
/* ===== 系列导航 - 完全对齐 DoIt _series.scss + _details.scss ===== */
.series-nav { .series-nav {
margin: 0.8rem 0; margin: 0.8rem 0;
border-radius: 4px;
overflow: hidden;
} }
/* .series-title — 对应 DoIt .series-title */
.series-nav .series-title { .series-nav .series-title {
font-size: 1.15rem; font-size: 1.2rem;
font-weight: bold; font-weight: bold;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center;
line-height: 2em; line-height: 2em;
padding: 0 0.75rem; padding: 0 0.75rem;
background-color: rgba(0, 0, 0, 0.05); background: #e6e6e6;
cursor: pointer; cursor: pointer;
list-style: none; list-style: none;
user-select: none;
transition: background-color 0.3s;
}
.series-nav[open] .series-title {
background-color: rgba(0, 0, 0, 0.08);
} }
.series-nav .series-title::-webkit-details-marker { .series-nav .series-title::-webkit-details-marker {
display: none; display: none;
} }
/* .details-icon — 对应 DoIt .details .details-icon > svg */
.series-nav .details-icon { .series-nav .details-icon {
transition: transform 0.3s;
display: flex; display: flex;
align-items: center; align-items: center;
color: #4d4d4d;
} }
.series-nav[open] .details-icon { .series-nav .details-icon > :global(svg) {
transition: transform 0.2s ease;
}
.series-nav[open] .details-icon > :global(svg) {
transform: rotate(90deg); transform: rotate(90deg);
} }
.series-nav .series-title a, /* .series-content — 对应 DoIt .series-content */
.series-nav li a,
.series-nav .series-prev-next a {
color: var(--text-color);
text-decoration: none;
}
.series-nav .series-title a:hover,
.series-nav li a:hover,
.series-nav .series-prev-next a:hover {
color: var(--accent-color, #419b38);
}
.series-nav .series-content { .series-nav .series-content {
font-size: 1rem; font-size: 1rem;
background-color: rgba(0, 0, 0, 0.02); background-color: #f5f5f5;
} }
.series-nav .series-content > nav > ul { .series-nav .series-content > nav > ul {
margin: 0; margin: 0;
padding: 0.4rem 1rem 0.4rem 1.8rem; padding: 0.4rem 1rem 0.4rem 1.8rem;
list-style: none; }
.series-nav .series-content ul {
text-indent: -0.85rem; text-indent: -0.85rem;
}
.series-nav li {
padding: 0;
line-height: 1.8;
padding-left: 0.8rem; padding-left: 0.8rem;
list-style: none;
} }
.series-nav li a::before { /* "|" 竖线 — 对应 DoIt ul a:first-child::before */
.series-nav li a:first-child::before {
content: '|'; content: '|';
font-weight: bolder; font-weight: bolder;
margin-right: 0.5rem; margin-right: 0.5rem;
color: var(--text-color); color: #2d809a;
opacity: 0.6;
} }
/* 当前文章高亮 — 对应 DoIt span.active */
.series-nav li span.active { .series-nav li span.active {
font-weight: bolder; font-weight: bolder;
color: var(--text-color); color: #2d809a;
} }
.series-nav li span.active::before { .series-nav li span.active::before {
content: '|'; content: '|';
font-weight: bolder;
margin-right: 0.5rem; margin-right: 0.5rem;
color: #ef3982;
}
/* 链接 hover */
.series-nav .series-title a {
color: var(--text-color);
text-decoration: none;
}
.series-nav .series-title a:hover {
color: var(--accent-color, #419b38); color: var(--accent-color, #419b38);
} }
.series-nav li a:hover::before { .series-nav li a {
color: var(--text-color);
text-decoration: none;
}
.series-nav li a:hover {
color: var(--accent-color, #419b38); color: var(--accent-color, #419b38);
} }
/* 系列前后导航 — BlogFlare 自有功能 */
.series-nav .series-prev-next { .series-nav .series-prev-next {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
@@ -291,6 +291,15 @@
font-size: 0.9em; font-size: 0.9em;
} }
.series-nav .series-prev-next a {
color: var(--text-color);
text-decoration: none;
}
.series-nav .series-prev-next a:hover {
color: var(--accent-color, #419b38);
}
.series-nav .series-prev-next a:last-child { .series-nav .series-prev-next a:last-child {
text-align: right; text-align: right;
} }