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>
<style>
/* ===== 系列导航 - 完全对齐 DoIt _series.scss + _details.scss ===== */
.series-nav {
margin: 0.8rem 0;
border-radius: 4px;
overflow: hidden;
}
/* .series-title — 对应 DoIt .series-title */
.series-nav .series-title {
font-size: 1.15rem;
font-size: 1.2rem;
font-weight: bold;
display: flex;
justify-content: space-between;
align-items: center;
line-height: 2em;
padding: 0 0.75rem;
background-color: rgba(0, 0, 0, 0.05);
background: #e6e6e6;
cursor: pointer;
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 {
display: none;
}
/* .details-icon — 对应 DoIt .details .details-icon > svg */
.series-nav .details-icon {
transition: transform 0.3s;
display: flex;
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);
}
.series-nav .series-title a,
.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-content — 对应 DoIt .series-content */
.series-nav .series-content {
font-size: 1rem;
background-color: rgba(0, 0, 0, 0.02);
background-color: #f5f5f5;
}
.series-nav .series-content > nav > ul {
margin: 0;
padding: 0.4rem 1rem 0.4rem 1.8rem;
list-style: none;
}
.series-nav .series-content ul {
text-indent: -0.85rem;
}
.series-nav li {
padding: 0;
line-height: 1.8;
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: '|';
font-weight: bolder;
margin-right: 0.5rem;
color: var(--text-color);
opacity: 0.6;
color: #2d809a;
}
/* 当前文章高亮 — 对应 DoIt span.active */
.series-nav li span.active {
font-weight: bolder;
color: var(--text-color);
color: #2d809a;
}
.series-nav li span.active::before {
content: '|';
font-weight: bolder;
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);
}
.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);
}
/* 系列前后导航 — BlogFlare 自有功能 */
.series-nav .series-prev-next {
display: grid;
grid-template-columns: 1fr 1fr;
@@ -291,6 +291,15 @@
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 {
text-align: right;
}