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:
+25
-27
@@ -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 === */
|
||||
|
||||
+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