fix(visual): align tokens/cards/buttons/dark mode to Zibll
P0 dark hex to #292a2d/#323335/#f8fafc; .btn opacity hover without pink elevation; post/user/product cards shadow-first without pink borders.
This commit is contained in:
+36
-48
@@ -24,13 +24,13 @@
|
||||
/* ===== 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: #f0f2f5; /* 更接近 zibll 柔灰底 */
|
||||
--surface-2: #eeeeee; /* zibll --muted-bg-color #eee */
|
||||
--surface-3: #e9ecef; /* 输入框 / code / 次级面 */
|
||||
--surface-4: #f8f8f8; /* 分页 / 标签 / hover 薄层 */
|
||||
|
||||
/* ===== Borders — 对齐 zibll --main-border-color ===== */
|
||||
--color-line: rgba(50, 50, 50, 0.08);
|
||||
--color-line-soft: rgba(0, 0, 0, 0.05);
|
||||
--color-line: rgba(50, 50, 50, 0.06);
|
||||
--color-line-soft: rgba(0, 0, 0, 0.03);
|
||||
--color-line-stronger: rgba(50, 50, 50, 0.12);
|
||||
|
||||
/* ===== State colors ===== */
|
||||
@@ -84,7 +84,7 @@
|
||||
--radius-xs: 3px;
|
||||
--radius-sm: 4px;
|
||||
--radius: 8px;
|
||||
--radius-lg: 10px;
|
||||
--radius-lg: 8px; /* zibll main-radius — was 10px */
|
||||
--radius-xl: 12px;
|
||||
--radius-2xl: 16px;
|
||||
--radius-pill: 100px;
|
||||
@@ -93,7 +93,7 @@
|
||||
/* ===== 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 6px 24px rgba(18, 18, 18, 0.06);
|
||||
--shadow: 0 0 10px rgba(116, 116, 116, 0.12);
|
||||
--shadow-lg: 0 12px 32px rgba(18, 18, 18, 0.10);
|
||||
--shadow-drawer: 0 18px 60px rgba(0, 0, 0, 0.20);
|
||||
|
||||
@@ -294,8 +294,8 @@ body.dialog-open .float-right .float-btn {
|
||||
|
||||
html.dark body.modal-open,
|
||||
html.dark body.dialog-open,
|
||||
body.dark-theme body.modal-open,
|
||||
body.dark-theme body.dialog-open {
|
||||
body.dark-theme.modal-open,
|
||||
body.dark-theme.dialog-open {
|
||||
--blur-bg: #37383a;
|
||||
--header-bg: #37383a;
|
||||
}
|
||||
@@ -323,22 +323,24 @@ body.dark-theme body.dialog-open {
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* Dark Theme — 对齐 zibll .dark-theme (#292a2d 范围)
|
||||
* Dark Theme — 对齐 zibll .dark-theme 精确 hex
|
||||
* body.dark-theme 与 html.dark 同权（zibll 用 body class）
|
||||
* ============================================================ */
|
||||
html.dark {
|
||||
--color-ink: #f5f5f5;
|
||||
--color-ink-2: #d7d9dd;
|
||||
--color-ink-3: #b0b3b8;
|
||||
--color-ink-4: #8b8e93;
|
||||
html.dark,
|
||||
body.dark-theme {
|
||||
--color-ink: #f8fafc; /* zibll --key-color */
|
||||
--color-ink-2: #e5eef7; /* zibll --main-color */
|
||||
--color-ink-3: #b4b6bb; /* zibll --muted-color */
|
||||
--color-ink-4: #888a8f; /* zibll --muted-2-color */
|
||||
|
||||
--surface-page: #1f2023;
|
||||
--surface-1: #2a2b2f;
|
||||
--surface-2: #32343a;
|
||||
--surface-page: #292a2d; /* zibll --body-bg-color */
|
||||
--surface-1: #323335; /* zibll --main-bg-color */
|
||||
--surface-2: #2d2e31; /* zibll --muted-bg-color */
|
||||
--surface-3: #3a3c42;
|
||||
--surface-4: #26282d;
|
||||
|
||||
--color-line: rgba(255, 255, 255, 0.08);
|
||||
--color-line-soft: rgba(255, 255, 255, 0.04);
|
||||
--color-line: rgba(114, 114, 114, 0.1);
|
||||
--color-line-soft: rgba(184, 184, 184, 0.02);
|
||||
--color-line-stronger: rgba(255, 255, 255, 0.12);
|
||||
|
||||
--color-primary-soft: rgba(240, 68, 148, 0.16);
|
||||
@@ -359,11 +361,10 @@ html.dark {
|
||||
--surface-hover: var(--surface-2);
|
||||
--surface-secondary: var(--surface-2);
|
||||
|
||||
--shadow-xl: 0 18px 48px rgba(0, 0, 0, 0.42);
|
||||
|
||||
--shadow-xl: 0 0 10px rgba(24, 24, 24, 0.18);
|
||||
--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-sm: 0 0 10px rgba(24, 24, 24, 0.1); /* zibll --main-shadow dark */
|
||||
--shadow: 0 0 10px rgba(24, 24, 24, 0.14);
|
||||
--shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.32);
|
||||
--shadow-drawer: 0 20px 60px rgba(0, 0, 0, 0.60);
|
||||
|
||||
@@ -392,49 +393,36 @@ html.dark {
|
||||
}
|
||||
|
||||
/* Dark mode component refinements */
|
||||
html.dark .site-nav {
|
||||
html.dark .site-nav,
|
||||
body.dark-theme .site-nav {
|
||||
border-bottom-color: var(--color-line);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
html.dark .footer-tabbar {
|
||||
html.dark .footer-tabbar,
|
||||
body.dark-theme .footer-tabbar {
|
||||
background: rgba(50, 51, 53, 0.80);
|
||||
box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.20);
|
||||
}
|
||||
|
||||
html.dark .n-drawer,
|
||||
html.dark .n-modal,
|
||||
html.dark .n-dialog {
|
||||
background: var(--surface-1);
|
||||
}
|
||||
|
||||
html.dark .post-card,
|
||||
html.dark .widget,
|
||||
html.dark .aksrt-theme-box,
|
||||
html.dark .theme-box {
|
||||
border-color: var(--color-line);
|
||||
}
|
||||
|
||||
/* body.dark-theme — zibll compatibility alias for html.dark */
|
||||
body.dark-theme .site-nav {
|
||||
border-bottom-color: var(--color-line);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
body.dark-theme .footer-tabbar {
|
||||
background: rgba(50, 51, 53, 0.80);
|
||||
box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.20);
|
||||
}
|
||||
|
||||
html.dark .n-dialog,
|
||||
body.dark-theme .n-drawer,
|
||||
body.dark-theme .n-modal,
|
||||
body.dark-theme .n-dialog {
|
||||
background: var(--surface-1);
|
||||
}
|
||||
|
||||
html.dark .post-card,
|
||||
html.dark .widget,
|
||||
html.dark .aksrt-theme-box,
|
||||
html.dark .theme-box,
|
||||
html.dark .posts-item,
|
||||
body.dark-theme .post-card,
|
||||
body.dark-theme .widget,
|
||||
body.dark-theme .aksrt-theme-box,
|
||||
body.dark-theme .theme-box {
|
||||
border-color: var(--color-line);
|
||||
body.dark-theme .theme-box,
|
||||
body.dark-theme .posts-item {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user