From b821378a7d3dbd7539f4c5f8e552952d797acdfe Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 10 Jul 2026 23:07:21 +0800 Subject: [PATCH] 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. --- assets/css/core/buttons.css | 52 ++++++------ assets/css/core/tokens.css | 84 ++++++++----------- assets/css/frontend/card-primitives.css | 28 +++++-- .../home-modules/product-showcase.css | 16 ++-- .../css/frontend/home-modules/user-cards.css | 10 +-- assets/css/frontend/nav/base.css | 13 ++- assets/css/frontend/post-card.css | 20 +++-- 7 files changed, 110 insertions(+), 113 deletions(-) diff --git a/assets/css/core/buttons.css b/assets/css/core/buttons.css index 944df1ce..c0cd3c2c 100644 --- a/assets/css/core/buttons.css +++ b/assets/css/core/buttons.css @@ -22,7 +22,7 @@ height: var(--btn-h); padding: 0 var(--btn-px); font-size: var(--text-sm); - font-weight: 500; + font-weight: normal; /* zibll .but: normal — was 500 */ line-height: 1.44; border: 1px solid transparent; border-radius: var(--radius-btn); @@ -31,12 +31,11 @@ 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), - box-shadow var(--dur-fast) var(--ease), - transform var(--dur-fast) var(--ease); + transition: opacity 0.15s ease, + background 0.15s ease, + border-color 0.15s ease, + color 0.15s ease, + box-shadow 0.15s ease; } /* 尺寸变体 */ @@ -45,32 +44,31 @@ /* === Default (gray background, like zibll .but default) === */ .btn { - background: var(--surface-4, rgba(136, 136, 136, 0.1)); - color: var(--color-ink-3); + background: rgba(136, 136, 136, 0.1); + color: #888; border-color: transparent; } .btn:hover { - opacity: 1; - background: var(--surface-2); - color: var(--color-ink-2); + opacity: 0.8; + color: #888; } -/* === Primary === */ +/* === Primary — solid theme, opacity hover (no translateY / heavy glow) === */ .btn-primary { 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); + box-shadow: none; } .btn-primary:hover { - opacity: 1; + opacity: 0.8; 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); + background: var(--color-primary); + border-color: var(--color-primary); + transform: none; + box-shadow: none; } .btn-primary:active { @@ -80,16 +78,16 @@ /* === Outline === */ .btn-outline { - background: var(--surface-1); + background: transparent; color: var(--color-ink-2); - border-color: var(--color-line); + border-color: var(--color-ink-2); } .btn-outline:hover { - background: var(--color-primary-soft); - border-color: var(--color-primary); - color: var(--color-primary); - opacity: 1; + opacity: 0.8; + background: transparent; + border-color: var(--color-ink-2); + color: var(--color-ink-2); } /* === Ghost === */ @@ -100,8 +98,8 @@ } .btn-ghost:hover { - background: var(--surface-4, rgba(136, 136, 136, 0.1)); - opacity: 1; + background: rgba(136, 136, 136, 0.1); + opacity: 0.8; } /* === Danger === */ diff --git a/assets/css/core/tokens.css b/assets/css/core/tokens.css index 0b42a68f..34964f6e 100644 --- a/assets/css/core/tokens.css +++ b/assets/css/core/tokens.css @@ -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; } diff --git a/assets/css/frontend/card-primitives.css b/assets/css/frontend/card-primitives.css index 380ff138..9f9948b6 100644 --- a/assets/css/frontend/card-primitives.css +++ b/assets/css/frontend/card-primitives.css @@ -12,16 +12,15 @@ * 对齐 zibll .theme-box + .box-bg * ============================================================ */ .aksrt-theme-box { - border: 1px solid rgba(255, 255, 255, 0.55); - border-radius: var(--radius-lg); + border: none; + border-radius: var(--radius, 8px); background: var(--surface-1); box-shadow: var(--shadow-sm); - transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease); + transition: box-shadow 0.2s ease; } .aksrt-theme-box:hover { box-shadow: var(--shadow); - border-color: rgba(240, 68, 148, 0.10); } /* ============================================================ @@ -76,16 +75,15 @@ * ============================================================ */ .theme-box { background: var(--surface-1); - border: 1px solid rgba(255, 255, 255, 0.55); - border-radius: var(--radius-lg); + border: none; + border-radius: var(--radius, 8px); box-shadow: var(--shadow-sm); margin-bottom: 20px; - transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease); + transition: box-shadow 0.2s ease; } .theme-box:hover { box-shadow: var(--shadow); - border-color: rgba(240, 68, 148, 0.10); } .box-bg { @@ -129,7 +127,7 @@ html.dark .theme-box, body.dark-theme .theme-box, html.dark .box-bg, body.dark-theme .box-bg { - border-color: var(--color-line); + border-color: transparent; box-shadow: var(--shadow-sm); } @@ -164,3 +162,15 @@ body.dark-theme .theme-box:hover { box-shadow: none !important; transform: none !important; } + +/* ============================================================ + * .zib-widget — zibll sidebar/widget surface + * ============================================================ */ +.zib-widget { + clear: both; + background-color: var(--surface-1); + padding: var(--card-padding); + box-shadow: var(--shadow-sm); + border-radius: var(--radius, 8px); + margin-bottom: 20px; +} diff --git a/assets/css/frontend/home-modules/product-showcase.css b/assets/css/frontend/home-modules/product-showcase.css index 6a9017af..6fe0b42c 100644 --- a/assets/css/frontend/home-modules/product-showcase.css +++ b/assets/css/frontend/home-modules/product-showcase.css @@ -10,33 +10,33 @@ .aksrt-product-card { background: var(--surface-1, #fff); - border-radius: var(--radius-lg, 10px); - border: 1px solid rgba(255, 255, 255, 0.55); + border-radius: var(--radius, 8px); + border: none; box-shadow: var(--shadow-sm); overflow: hidden; text-decoration: none; color: inherit; - transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s; + transition: box-shadow 0.2s ease; } .aksrt-product-card:hover { box-shadow: var(--shadow); - border-color: rgba(240, 68, 148, 0.12); - transform: translateY(-2px); } .aksrt-product-card__image img { width: 100%; - aspect-ratio: 4/3; + aspect-ratio: 1 / 1; object-fit: cover; + border-radius: var(--radius, 8px) var(--radius, 8px) 0 0; + display: block; } .aksrt-product-card__body { - padding: 16px; + padding: 15px; } .aksrt-product-card__title { - font-size: 15px; + font-size: 16px; font-weight: 600; margin: 0 0 6px; } diff --git a/assets/css/frontend/home-modules/user-cards.css b/assets/css/frontend/home-modules/user-cards.css index 2dde27a4..89165e85 100644 --- a/assets/css/frontend/home-modules/user-cards.css +++ b/assets/css/frontend/home-modules/user-cards.css @@ -10,18 +10,16 @@ flex-direction: column; align-items: center; text-align: center; - padding: 24px 18px; - border-radius: var(--radius-lg); - border: 1px solid rgba(255, 255, 255, 0.55); + padding: 20px 15px; + border-radius: var(--radius, 8px); + border: none; background: var(--surface-1); box-shadow: var(--shadow-sm); - transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; + transition: box-shadow 0.2s ease; } .home-module__user-card:hover { - border-color: rgba(240, 68, 148, 0.12); box-shadow: var(--shadow); - transform: translateY(-2px); } .home-module__user-link { diff --git a/assets/css/frontend/nav/base.css b/assets/css/frontend/nav/base.css index 504860bc..74935e51 100644 --- a/assets/css/frontend/nav/base.css +++ b/assets/css/frontend/nav/base.css @@ -1,11 +1,10 @@ /* ============================================================ - * AKSRT Navigation — Editorial v3.4 + * AKSRT Navigation — Zibll-aligned * - * - 高度 60px (--nav-h) - * - 字体使用 --font-ui (Inter / 思源黑体) - * - 主色蓝调，hover 改为 primary-soft 浅底 - * - 永远实心：白底深字 + 1px 分隔线，滚动后追加 box-shadow - * - 移动端：≤768 显示汉堡菜单 + * - 高度 60px (--nav-height) + * - 毛玻璃 blur-bg（saturate(5) blur(20px)） + * - 透明叠 slider → 滚动后恢复实底 + * - 滚动隐藏（scroll-down-hide 等价） * ============================================================ */ .site-nav { @@ -77,7 +76,7 @@ body.dark-theme .site-nav--blur.is-scrolled { /* 滚动后追加阴影 — 对齐 zibll .body-scroll .header */ .site-nav.is-scrolled { - box-shadow: var(--shadow-sm); + box-shadow: 0 4px 10px var(--main-shadow, var(--shadow-sm)); } /* WordPress Admin Bar 已全局禁用，无需偏移规则 */ diff --git a/assets/css/frontend/post-card.css b/assets/css/frontend/post-card.css index 30888b1e..bc59954c 100644 --- a/assets/css/frontend/post-card.css +++ b/assets/css/frontend/post-card.css @@ -28,20 +28,24 @@ .posts-item { padding: 20px; margin: 15px 0; - background: var(--main-bg-color, #fff); - border: 1px solid rgba(255, 255, 255, 0.55); + background: var(--main-bg-color, var(--surface-1, #fff)); + border: none; overflow: hidden; - transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease; - box-shadow: var(--shadow-sm); - border-radius: var(--radius-lg, 10px); + transition: box-shadow 0.2s ease; + box-shadow: 0 0 10px var(--main-shadow, var(--shadow-sm)); + border-radius: var(--main-radius, var(--radius, 8px)); } /* ============================================================ - * 卡片模式 .posts-item.card — 对齐 zibll line 7733 + * hover — 对齐 zibll（仅阴影略强，无粉边 / 无抬升） * ============================================================ */ .posts-item:hover { - box-shadow: var(--shadow); - border-color: rgba(240, 68, 148, 0.10); + box-shadow: 0 0 10px rgba(116, 116, 116, 0.14); +} + +html.dark .posts-item:hover, +body.dark-theme .posts-item:hover { + box-shadow: 0 0 10px rgba(24, 24, 24, 0.18); } .posts-item.card {