视觉系统主干落地：对齐 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:
kate522 committed
1 parent
5402768f23
commit
0b5b153265
47 files changed
+542
-325
No files matched your search
+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