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 === */