视觉系统主干落地：对齐 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:
@@ -14,7 +14,7 @@
|
||||
.btn-ghost,
|
||||
.btn-danger {
|
||||
--btn-h: 34px;
|
||||
--btn-px: 12px;
|
||||
--btn-px: 14px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -22,7 +22,7 @@
|
||||
height: var(--btn-h);
|
||||
padding: 0 var(--btn-px);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: normal;
|
||||
font-weight: 500;
|
||||
line-height: 1.44;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-btn);
|
||||
@@ -30,10 +30,13 @@
|
||||
white-space: nowrap;
|
||||
user-select: none;
|
||||
text-decoration: none;
|
||||
box-shadow: none;
|
||||
transition: opacity var(--dur-fast) var(--ease),
|
||||
background var(--dur-fast) var(--ease),
|
||||
border-color var(--dur-fast) var(--ease),
|
||||
color var(--dur-fast) var(--ease);
|
||||
color var(--dur-fast) var(--ease),
|
||||
box-shadow var(--dur-fast) var(--ease),
|
||||
transform var(--dur-fast) var(--ease);
|
||||
}
|
||||
|
||||
/* 尺寸变体 */
|
||||
@@ -42,12 +45,15 @@
|
||||
|
||||
/* === Default (gray background, like zibll .but default) === */
|
||||
.btn {
|
||||
background: rgba(136, 136, 136, 0.1);
|
||||
color: #888;
|
||||
background: var(--surface-4, rgba(136, 136, 136, 0.1));
|
||||
color: var(--color-ink-3);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
opacity: 0.8;
|
||||
opacity: 1;
|
||||
background: var(--surface-2);
|
||||
color: var(--color-ink-2);
|
||||
}
|
||||
|
||||
/* === Primary === */
|
||||
@@ -55,11 +61,16 @@
|
||||
background: var(--color-primary);
|
||||
color: var(--color-on-primary);
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 8px 18px rgba(240, 68, 148, 0.22);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
opacity: 0.8;
|
||||
opacity: 1;
|
||||
color: var(--color-on-primary);
|
||||
background: var(--color-primary-hover);
|
||||
border-color: var(--color-primary-hover);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 12px 24px rgba(240, 68, 148, 0.28);
|
||||
}
|
||||
|
||||
.btn-primary:active {
|
||||
@@ -69,7 +80,7 @@
|
||||
|
||||
/* === Outline === */
|
||||
.btn-outline {
|
||||
background: transparent;
|
||||
background: var(--surface-1);
|
||||
color: var(--color-ink-2);
|
||||
border-color: var(--color-line);
|
||||
}
|
||||
@@ -89,7 +100,7 @@
|
||||
}
|
||||
|
||||
.btn-ghost:hover {
|
||||
background: rgba(136, 136, 136, 0.1);
|
||||
background: var(--surface-4, rgba(136, 136, 136, 0.1));
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
+38
-27
@@ -24,12 +24,14 @@
|
||||
/* ===== Surface — 对齐 zibll --body-bg-color / --main-bg-color / --muted-bg-color ===== */
|
||||
--surface-page: #f5f6f7; /* zibll --body-bg-color */
|
||||
--surface-1: #FFFFFF; /* zibll --main-bg-color */
|
||||
--surface-2: #eeeeee; /* zibll --muted-bg-color */
|
||||
--surface-3: #e8e8e8; /* 输入框 / code */
|
||||
--surface-2: #f0f2f5; /* 更接近 zibll 柔灰底 */
|
||||
--surface-3: #e9ecef; /* 输入框 / code / 次级面 */
|
||||
--surface-4: #f8f8f8; /* 分页 / 标签 / hover 薄层 */
|
||||
|
||||
/* ===== Borders — 对齐 zibll --main-border-color ===== */
|
||||
--color-line: rgba(50, 50, 50, 0.06);
|
||||
--color-line-soft: rgba(0, 0, 0, 0.03);
|
||||
--color-line: rgba(50, 50, 50, 0.08);
|
||||
--color-line-soft: rgba(0, 0, 0, 0.05);
|
||||
--color-line-stronger: rgba(50, 50, 50, 0.12);
|
||||
|
||||
/* ===== State colors ===== */
|
||||
--color-success: #10B981;
|
||||
@@ -79,27 +81,31 @@
|
||||
--space-12: 96px;
|
||||
|
||||
/* ===== Radius — 对齐 zibll --main-radius: 8px ===== */
|
||||
--radius-xs: 3px;
|
||||
--radius-sm: 4px;
|
||||
--radius: 8px;
|
||||
--radius-lg: 8px;
|
||||
--radius-lg: 10px;
|
||||
--radius-xl: 12px;
|
||||
--radius-2xl: 16px;
|
||||
--radius-pill: 100px;
|
||||
--radius-avatar: 50%;
|
||||
|
||||
/* ===== Shadows — 对齐 zibll --main-shadow: rgba(116,116,116,0.08) ===== */
|
||||
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.03);
|
||||
--shadow-sm: 0 0 10px rgba(116, 116, 116, 0.08);
|
||||
--shadow: 0 0 10px rgba(116, 116, 116, 0.08);
|
||||
--shadow-lg: 0 0 10px rgba(116, 116, 116, 0.12);
|
||||
--shadow-drawer: 0 8px 40px rgba(0, 0, 0, 0.20);
|
||||
--shadow: 0 6px 24px rgba(18, 18, 18, 0.06);
|
||||
--shadow-lg: 0 12px 32px rgba(18, 18, 18, 0.10);
|
||||
--shadow-drawer: 0 18px 60px rgba(0, 0, 0, 0.20);
|
||||
|
||||
/* ===== Layout — 对齐 zibll --mian-max-width: 1200px ===== */
|
||||
--nav-height: 60px;
|
||||
--container: 1200px;
|
||||
--container-wide: 1440px;
|
||||
--container-read: 720px;
|
||||
--container-page: 860px;
|
||||
--sidebar-width: 311px;
|
||||
--content-gap: 48px;
|
||||
--container-read: 760px;
|
||||
--container-page: 880px;
|
||||
--sidebar-width: 300px;
|
||||
--content-gap: 24px;
|
||||
--section-gap: 24px;
|
||||
--sidebar-bp: 992px;
|
||||
|
||||
/* ===== Motion ===== */
|
||||
@@ -132,7 +138,9 @@
|
||||
/* ===== Card density — 对齐 zibll .box-body { padding: 15px } ===== */
|
||||
--card-padding: 15px;
|
||||
--card-padding-sm: 10px;
|
||||
--card-padding-lg: 20px;
|
||||
--card-gap: 16px;
|
||||
--card-gap-lg: 20px;
|
||||
|
||||
/* ===== Skeleton loader ===== */
|
||||
--skeleton-base: var(--surface-2);
|
||||
@@ -318,18 +326,20 @@ body.dark-theme body.dialog-open {
|
||||
* Dark Theme — 对齐 zibll .dark-theme (#292a2d 范围)
|
||||
* ============================================================ */
|
||||
html.dark {
|
||||
--color-ink: #f8fafc;
|
||||
--color-ink-2: #e5eef7;
|
||||
--color-ink-3: #b4b6bb;
|
||||
--color-ink-4: #888a8f;
|
||||
--color-ink: #f5f5f5;
|
||||
--color-ink-2: #d7d9dd;
|
||||
--color-ink-3: #b0b3b8;
|
||||
--color-ink-4: #8b8e93;
|
||||
|
||||
--surface-page: #292a2d;
|
||||
--surface-1: #323335;
|
||||
--surface-2: #2d2e31;
|
||||
--surface-3: #3a3b3e;
|
||||
--surface-page: #1f2023;
|
||||
--surface-1: #2a2b2f;
|
||||
--surface-2: #32343a;
|
||||
--surface-3: #3a3c42;
|
||||
--surface-4: #26282d;
|
||||
|
||||
--color-line: rgba(114, 114, 114, 0.1);
|
||||
--color-line-soft: rgba(184, 184, 184, 0.02);
|
||||
--color-line: rgba(255, 255, 255, 0.08);
|
||||
--color-line-soft: rgba(255, 255, 255, 0.04);
|
||||
--color-line-stronger: rgba(255, 255, 255, 0.12);
|
||||
|
||||
--color-primary-soft: rgba(240, 68, 148, 0.16);
|
||||
--color-primary-softer: rgba(240, 68, 148, 0.08);
|
||||
@@ -349,12 +359,13 @@ html.dark {
|
||||
--surface-hover: var(--surface-2);
|
||||
--surface-secondary: var(--surface-2);
|
||||
|
||||
--shadow-xl: 0 0 10px rgba(24, 24, 24, 0.15);
|
||||
--shadow-xl: 0 18px 48px rgba(0, 0, 0, 0.42);
|
||||
|
||||
--shadow-sm: 0 0 10px rgba(24, 24, 24, 0.1);
|
||||
--shadow: 0 0 10px rgba(24, 24, 24, 0.1);
|
||||
--shadow-lg: 0 0 10px rgba(24, 24, 24, 0.15);
|
||||
--shadow-drawer: 0 8px 40px rgba(0, 0, 0, 0.55);
|
||||
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.18);
|
||||
--shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.20);
|
||||
--shadow: 0 10px 30px rgba(0, 0, 0, 0.24);
|
||||
--shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.32);
|
||||
--shadow-drawer: 0 20px 60px rgba(0, 0, 0, 0.60);
|
||||
|
||||
--blur-bg: rgba(50, 51, 53, 0.80);
|
||||
--float-btn-bg: rgba(70, 70, 70, 0.40);
|
||||
|
||||
Reference in New Issue
Block a user