kate522/wordpress-theme-aksrt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(visual): align tokens/cards/buttons/dark mode to Zibll

Browse Source 
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:
kate522
2026-07-10 23:07:21 +08:00
parent 4e4feac131
commit b821378a7d
7 changed files with 110 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/core/buttons.css
+25 -27
View File
@@ -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 === */
assets/css/core/tokens.css
+36 -48
View File
@@ -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;
}
assets/css/frontend/card-primitives.css
+19 -9
View File
@@ -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;
}
assets/css/frontend/home-modules/product-showcase.css
+8 -8
View File
@@ -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;
}
assets/css/frontend/home-modules/user-cards.css
+4 -6
View File
@@ -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 {
assets/css/frontend/nav/base.css
+6 -7
View File
@@ -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 已全局禁用，无需偏移规则 */
assets/css/frontend/post-card.css
+12 -8
View File
@@ -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 {