视觉系统主干落地：对齐 design tokens 与核心组件样式向 Zibll 收敛
- tokens：收紧 surface 层级/边框/圆角/阴影/间距与暗黑基线 - 组件：按钮、卡片原语、导航、侧栏、分页、模态、浮动按钮 - 首页：hero 外壳、fixed 列表/宫格、tab、skeleton/error 及各运营模块卡片化 - 内容页：单篇封面/标题/正文/blockquote/相关/TOC/上一篇下一篇、评论区 - 社区：forum board/topic/compose 子控件与卡片体系 - 交易/认证：cart/orders/revenue/product/auth 表面块与模态浮层统一 - footer：页脚主体、社交/联系、移动端 tabbar/搜索覆盖
This commit is contained in:
@@ -124,11 +124,11 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 0.3em 1em;
|
||||
padding: 0.38em 1.1em;
|
||||
border-radius: 50px;
|
||||
border: none;
|
||||
background: rgba(136, 136, 136, 0.1);
|
||||
color: #888;
|
||||
border: 1px solid transparent;
|
||||
background: var(--surface-4, rgba(136, 136, 136, 0.1));
|
||||
color: var(--color-ink-3);
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
transition: all 0.15s ease;
|
||||
@@ -136,7 +136,8 @@
|
||||
|
||||
.action-btn:hover,
|
||||
.action:hover {
|
||||
border-color: var(--color-primary);
|
||||
border-color: rgba(240, 68, 148, 0.12);
|
||||
background: var(--color-primary-soft);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@@ -297,10 +298,11 @@ html.dark .post-drop-meta__item:hover {
|
||||
/* ===== Author Card — 对齐 zibll 卡片容器 ===== */
|
||||
.author-box {
|
||||
margin-bottom: 16px;
|
||||
padding: 15px;
|
||||
background: var(--main-bg-color, #fff);
|
||||
border-radius: var(--main-radius, 8px);
|
||||
box-shadow: 0 0 10px var(--main-shadow, rgba(116, 116, 116, 0.08));
|
||||
padding: 18px;
|
||||
background: var(--surface-1, #fff);
|
||||
border: 1px solid rgba(255, 255, 255, 0.55);
|
||||
border-radius: var(--radius-2xl, 16px);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.single-metabox {
|
||||
|
||||
@@ -1,16 +1,20 @@
|
||||
/* ========== Single Post ========== */
|
||||
.entry-header,
|
||||
.article-header {
|
||||
margin-bottom: 24px;
|
||||
margin-bottom: 28px;
|
||||
padding-bottom: 18px;
|
||||
border-bottom: 1px solid var(--color-line-soft);
|
||||
}
|
||||
|
||||
/* 标题 — 对齐 zibll: 22px, bold, line-height 1.4 */
|
||||
.entry-title,
|
||||
.article-title {
|
||||
font-size: 22px;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
margin: 0 0 16px;
|
||||
line-height: 1.4;
|
||||
margin: 0 0 18px;
|
||||
line-height: 1.35;
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--color-ink);
|
||||
}
|
||||
|
||||
.entry-meta {
|
||||
@@ -38,7 +42,7 @@
|
||||
/* 内容区 — 对齐 zibll: 16px, line-height 2 */
|
||||
.entry-content {
|
||||
font-size: 16px;
|
||||
line-height: 2;
|
||||
line-height: 1.95;
|
||||
color: var(--color-ink);
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
@@ -66,12 +70,12 @@
|
||||
}
|
||||
|
||||
.entry-content blockquote {
|
||||
margin: 0 0 20px;
|
||||
padding: 15px 20px;
|
||||
border-left: 4px solid var(--main-border-color, rgba(50, 50, 50, 0.06));
|
||||
background: var(--muted-border-color, rgba(0, 0, 0, 0.03));
|
||||
border-radius: 0;
|
||||
color: var(--muted-color, #777);
|
||||
margin: 0 0 24px;
|
||||
padding: 18px 20px;
|
||||
border-left: 4px solid var(--color-primary);
|
||||
background: var(--surface-4, rgba(0, 0, 0, 0.03));
|
||||
border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
|
||||
color: var(--color-ink-3);
|
||||
}
|
||||
|
||||
.entry-content img {
|
||||
@@ -205,6 +209,8 @@
|
||||
|
||||
.related-posts {
|
||||
margin-top: 48px;
|
||||
padding: 20px 0 0;
|
||||
border-top: 1px solid var(--color-line-soft);
|
||||
}
|
||||
|
||||
.related-posts__title {
|
||||
|
||||
@@ -7,8 +7,9 @@
|
||||
.single-cover {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 16px;
|
||||
border-radius: var(--radius-2xl, 16px);
|
||||
box-shadow: var(--shadow-sm);
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: var(--single-cover-scale, 35%);
|
||||
}
|
||||
|
||||
@@ -37,9 +38,9 @@
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 20px;
|
||||
padding: 24px;
|
||||
color: #fff;
|
||||
border-radius: 0 0 8px 8px;
|
||||
border-radius: 0 0 var(--radius-2xl, 16px) var(--radius-2xl, 16px);
|
||||
}
|
||||
|
||||
.single-cover__title,
|
||||
@@ -112,24 +113,26 @@
|
||||
|
||||
.single-cover__dots {
|
||||
position: absolute;
|
||||
bottom: 12px;
|
||||
right: 16px;
|
||||
bottom: 14px;
|
||||
right: 18px;
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
gap: 8px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.single-cover__dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
transition: background 0.3s ease;
|
||||
background: rgba(255, 255, 255, 0.45);
|
||||
border: 1px solid rgba(255, 255, 255, 0.32);
|
||||
transition: background 0.3s ease, transform 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.single-cover__dot.is-active {
|
||||
background: #fff;
|
||||
transform: scale(1.12);
|
||||
}
|
||||
|
||||
/* ===== 面包屑 ===== */
|
||||
|
||||
@@ -15,15 +15,18 @@
|
||||
|
||||
.post-nav-links a {
|
||||
display: block;
|
||||
padding: 16px;
|
||||
padding: 18px;
|
||||
border-radius: var(--radius-lg);
|
||||
border: 1px solid var(--color-line);
|
||||
background: var(--surface-2);
|
||||
transition: border-color 0.2s;
|
||||
border: 1px solid rgba(255, 255, 255, 0.55);
|
||||
box-shadow: var(--shadow-sm);
|
||||
background: var(--surface-1);
|
||||
transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
|
||||
}
|
||||
|
||||
.post-nav-links a:hover {
|
||||
border-color: var(--color-primary);
|
||||
border-color: rgba(240, 68, 148, 0.12);
|
||||
box-shadow: var(--shadow);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.post-nav-links .nav-subtitle {
|
||||
|
||||
@@ -43,9 +43,10 @@
|
||||
.related-box {
|
||||
margin-bottom: 16px;
|
||||
overflow: hidden;
|
||||
background: var(--main-bg-color, #fff);
|
||||
border-radius: var(--main-radius, 8px);
|
||||
box-shadow: 0 0 10px var(--main-shadow, rgba(116, 116, 116, 0.08));
|
||||
background: var(--surface-1, #fff);
|
||||
border: 1px solid rgba(255, 255, 255, 0.55);
|
||||
border-radius: var(--radius-2xl, 16px);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.related-box__header { padding-bottom: 0; }
|
||||
@@ -250,6 +251,10 @@ html.dark .article-end-separator span {
|
||||
top: 88px;
|
||||
padding: 18px 18px 14px;
|
||||
margin-bottom: 16px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.55);
|
||||
border-radius: var(--radius-2xl, 16px);
|
||||
box-shadow: var(--shadow-sm);
|
||||
background: var(--surface-1);
|
||||
}
|
||||
|
||||
.toc-widget .widget-title {
|
||||
@@ -327,8 +332,9 @@ html.dark .article-end-separator span {
|
||||
z-index: 80;
|
||||
width: min(86vw, 340px);
|
||||
padding: 18px 18px 28px;
|
||||
background: var(--surface-page);
|
||||
border-left: 1px solid var(--color-line);
|
||||
background: var(--surface-1);
|
||||
border-left: 1px solid rgba(255, 255, 255, 0.55);
|
||||
box-shadow: var(--shadow-drawer);
|
||||
transform: translateX(100%);
|
||||
transition: transform 0.25s ease;
|
||||
overflow-y: auto;
|
||||
|
||||
Reference in New Issue
Block a user