diff --git a/assets/css/common/floating.css b/assets/css/common/floating.css index 561ca3a8..52f41130 100644 --- a/assets/css/common/floating.css +++ b/assets/css/common/floating.css @@ -30,10 +30,12 @@ justify-content: center; width: 40px; height: 40px; - background: var(--color-surface); - border: 1px solid var(--color-line); + background: var(--blur-bg); + border: 1px solid rgba(255, 255, 255, 0.55); border-radius: var(--radius-full); - box-shadow: var(--shadow-md); + box-shadow: var(--shadow-sm); + backdrop-filter: saturate(2) blur(12px); + -webkit-backdrop-filter: saturate(2) blur(12px); cursor: pointer; color: var(--color-ink-4); transition: diff --git a/assets/css/core/buttons.css b/assets/css/core/buttons.css index 4a3182f0..944df1ce 100644 --- a/assets/css/core/buttons.css +++ b/assets/css/core/buttons.css @@ -14,7 +14,7 @@ .btn-ghost, .btn-danger { --btn-h: 34px; - --btn-px: 12px; + --btn-px: 14px; display: inline-flex; align-items: center; justify-content: center; @@ -22,7 +22,7 @@ height: var(--btn-h); padding: 0 var(--btn-px); font-size: var(--text-sm); - font-weight: normal; + font-weight: 500; line-height: 1.44; border: 1px solid transparent; border-radius: var(--radius-btn); @@ -30,10 +30,13 @@ white-space: nowrap; 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); + color var(--dur-fast) var(--ease), + box-shadow var(--dur-fast) var(--ease), + transform var(--dur-fast) var(--ease); } /* 尺寸变体 */ @@ -42,12 +45,15 @@ /* === Default (gray background, like zibll .but default) === */ .btn { - background: rgba(136, 136, 136, 0.1); - color: #888; + background: var(--surface-4, rgba(136, 136, 136, 0.1)); + color: var(--color-ink-3); + border-color: transparent; } .btn:hover { - opacity: 0.8; + opacity: 1; + background: var(--surface-2); + color: var(--color-ink-2); } /* === Primary === */ @@ -55,11 +61,16 @@ 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); } .btn-primary:hover { - opacity: 0.8; + opacity: 1; 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); } .btn-primary:active { @@ -69,7 +80,7 @@ /* === Outline === */ .btn-outline { - background: transparent; + background: var(--surface-1); color: var(--color-ink-2); border-color: var(--color-line); } @@ -89,7 +100,7 @@ } .btn-ghost:hover { - background: rgba(136, 136, 136, 0.1); + background: var(--surface-4, rgba(136, 136, 136, 0.1)); opacity: 1; } diff --git a/assets/css/core/tokens.css b/assets/css/core/tokens.css index 065f8b86..0b42a68f 100644 --- a/assets/css/core/tokens.css +++ b/assets/css/core/tokens.css @@ -24,12 +24,14 @@ /* ===== 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: #eeeeee; /* zibll --muted-bg-color */ - --surface-3: #e8e8e8; /* 输入框 / code */ + --surface-2: #f0f2f5; /* 更接近 zibll 柔灰底 */ + --surface-3: #e9ecef; /* 输入框 / code / 次级面 */ + --surface-4: #f8f8f8; /* 分页 / 标签 / hover 薄层 */ /* ===== Borders — 对齐 zibll --main-border-color ===== */ - --color-line: rgba(50, 50, 50, 0.06); - --color-line-soft: rgba(0, 0, 0, 0.03); + --color-line: rgba(50, 50, 50, 0.08); + --color-line-soft: rgba(0, 0, 0, 0.05); + --color-line-stronger: rgba(50, 50, 50, 0.12); /* ===== State colors ===== */ --color-success: #10B981; @@ -79,27 +81,31 @@ --space-12: 96px; /* ===== Radius — 对齐 zibll --main-radius: 8px ===== */ + --radius-xs: 3px; --radius-sm: 4px; --radius: 8px; - --radius-lg: 8px; + --radius-lg: 10px; --radius-xl: 12px; + --radius-2xl: 16px; --radius-pill: 100px; --radius-avatar: 50%; /* ===== 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 0 10px rgba(116, 116, 116, 0.08); - --shadow-lg: 0 0 10px rgba(116, 116, 116, 0.12); - --shadow-drawer: 0 8px 40px rgba(0, 0, 0, 0.20); + --shadow: 0 6px 24px rgba(18, 18, 18, 0.06); + --shadow-lg: 0 12px 32px rgba(18, 18, 18, 0.10); + --shadow-drawer: 0 18px 60px rgba(0, 0, 0, 0.20); /* ===== Layout — 对齐 zibll --mian-max-width: 1200px ===== */ --nav-height: 60px; --container: 1200px; --container-wide: 1440px; - --container-read: 720px; - --container-page: 860px; - --sidebar-width: 311px; - --content-gap: 48px; + --container-read: 760px; + --container-page: 880px; + --sidebar-width: 300px; + --content-gap: 24px; + --section-gap: 24px; --sidebar-bp: 992px; /* ===== Motion ===== */ @@ -132,7 +138,9 @@ /* ===== Card density — 对齐 zibll .box-body { padding: 15px } ===== */ --card-padding: 15px; --card-padding-sm: 10px; + --card-padding-lg: 20px; --card-gap: 16px; + --card-gap-lg: 20px; /* ===== Skeleton loader ===== */ --skeleton-base: var(--surface-2); @@ -318,18 +326,20 @@ body.dark-theme body.dialog-open { * Dark Theme — 对齐 zibll .dark-theme (#292a2d 范围) * ============================================================ */ html.dark { - --color-ink: #f8fafc; - --color-ink-2: #e5eef7; - --color-ink-3: #b4b6bb; - --color-ink-4: #888a8f; + --color-ink: #f5f5f5; + --color-ink-2: #d7d9dd; + --color-ink-3: #b0b3b8; + --color-ink-4: #8b8e93; - --surface-page: #292a2d; - --surface-1: #323335; - --surface-2: #2d2e31; - --surface-3: #3a3b3e; + --surface-page: #1f2023; + --surface-1: #2a2b2f; + --surface-2: #32343a; + --surface-3: #3a3c42; + --surface-4: #26282d; - --color-line: rgba(114, 114, 114, 0.1); - --color-line-soft: rgba(184, 184, 184, 0.02); + --color-line: rgba(255, 255, 255, 0.08); + --color-line-soft: rgba(255, 255, 255, 0.04); + --color-line-stronger: rgba(255, 255, 255, 0.12); --color-primary-soft: rgba(240, 68, 148, 0.16); --color-primary-softer: rgba(240, 68, 148, 0.08); @@ -349,12 +359,13 @@ html.dark { --surface-hover: var(--surface-2); --surface-secondary: var(--surface-2); - --shadow-xl: 0 0 10px rgba(24, 24, 24, 0.15); + --shadow-xl: 0 18px 48px rgba(0, 0, 0, 0.42); - --shadow-sm: 0 0 10px rgba(24, 24, 24, 0.1); - --shadow: 0 0 10px rgba(24, 24, 24, 0.1); - --shadow-lg: 0 0 10px rgba(24, 24, 24, 0.15); - --shadow-drawer: 0 8px 40px rgba(0, 0, 0, 0.55); + --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-lg: 0 14px 36px rgba(0, 0, 0, 0.32); + --shadow-drawer: 0 20px 60px rgba(0, 0, 0, 0.60); --blur-bg: rgba(50, 51, 53, 0.80); --float-btn-bg: rgba(70, 70, 70, 0.40); diff --git a/assets/css/frontend/card-primitives.css b/assets/css/frontend/card-primitives.css index 92cb32c1..380ff138 100644 --- a/assets/css/frontend/card-primitives.css +++ b/assets/css/frontend/card-primitives.css @@ -12,15 +12,16 @@ * 对齐 zibll .theme-box + .box-bg * ============================================================ */ .aksrt-theme-box { - border: none; - border-radius: var(--radius); + border: 1px solid rgba(255, 255, 255, 0.55); + border-radius: var(--radius-lg); background: var(--surface-1); box-shadow: var(--shadow-sm); - transition: box-shadow var(--dur) var(--ease); + transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease); } .aksrt-theme-box:hover { box-shadow: var(--shadow); + border-color: rgba(240, 68, 148, 0.10); } /* ============================================================ @@ -75,15 +76,16 @@ * ============================================================ */ .theme-box { background: var(--surface-1); - border: none; - border-radius: var(--radius); + border: 1px solid rgba(255, 255, 255, 0.55); + border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); margin-bottom: 20px; - transition: box-shadow var(--dur) var(--ease); + transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease); } .theme-box:hover { box-shadow: var(--shadow); + border-color: rgba(240, 68, 148, 0.10); } .box-bg { @@ -127,6 +129,7 @@ html.dark .theme-box, body.dark-theme .theme-box, html.dark .box-bg, body.dark-theme .box-bg { + border-color: var(--color-line); box-shadow: var(--shadow-sm); } diff --git a/assets/css/frontend/comments.css b/assets/css/frontend/comments.css index a99081e4..aa79b68b 100644 --- a/assets/css/frontend/comments.css +++ b/assets/css/frontend/comments.css @@ -58,9 +58,11 @@ display: flex; align-items: center; gap: 12px; - padding: 16px; - border-radius: 8px; - background: var(--surface-3); + padding: 16px 18px; + border-radius: var(--radius-lg, 10px); + background: var(--surface-1); + border: 1px solid rgba(255, 255, 255, 0.55); + box-shadow: var(--shadow-sm); font-size: 14px; color: var(--color-ink-4); } @@ -132,13 +134,13 @@ .comment-form__textarea { width: 100%; - min-height: 80px; + min-height: 96px; resize: vertical; - border-radius: 8px; + border-radius: 10px; border: 1px solid var(--color-line); - padding: 5px 5px 4px 5px; + padding: 12px 14px; font-size: 14px; - background: var(--main-bg-color, var(--surface-1)); + background: var(--surface-4, var(--main-bg-color, var(--surface-1))); color: var(--color-ink); transition: border-color 0.2s ease, box-shadow 0.2s ease; } @@ -146,7 +148,7 @@ .comment-form__textarea:focus { outline: none; border-color: var(--color-primary); - box-shadow: none; + box-shadow: 0 0 0 3px var(--color-primary-soft); } .comment-form__actions { @@ -249,9 +251,10 @@ } .comment-list .children .comment { - padding: 10px; - background: var(--main-shadow, rgba(0, 0, 0, 0.03)); - border-radius: var(--radius); + padding: 14px 16px; + background: var(--surface-4, rgba(0, 0, 0, 0.03)); + border: 1px solid var(--color-line-soft); + border-radius: var(--radius-lg); } /* 深层嵌套缩进递减 */ diff --git a/assets/css/frontend/footer/part-1.css b/assets/css/frontend/footer/part-1.css index 0ebc8088..f086819c 100644 --- a/assets/css/frontend/footer/part-1.css +++ b/assets/css/frontend/footer/part-1.css @@ -17,7 +17,8 @@ .site-footer { margin-top: auto; background: var(--footer-bg, var(--surface-1)); - padding: 30px; + border-top: 1px solid rgba(255, 255, 255, 0.55); + padding: 34px 30px 30px; } .site-footer__inner { @@ -94,9 +95,11 @@ width: 36px; height: 36px; border-radius: 50%; - background: var(--surface-3); + background: var(--surface-4); + border: 1px solid rgba(255, 255, 255, 0.55); + box-shadow: var(--shadow-sm); color: var(--color-ink-3); - transition: background 0.2s, color 0.2s, transform 0.2s; + transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s; } .social-row a:hover { @@ -207,13 +210,15 @@ width: 36px; height: 36px; border-radius: 50%; - background: var(--surface-2, rgba(0,0,0,.05)); + background: var(--surface-4, rgba(0,0,0,.05)); + border: 1px solid rgba(255, 255, 255, 0.55); + box-shadow: var(--shadow-sm); color: var(--color-ink-3, #888); font-size: 16px; position: relative; cursor: pointer; text-decoration: none; - transition: background .2s, color .2s; + transition: background .2s, color .2s, box-shadow .2s; } .site-footer__contact-item:hover, .site-footer__contact-item:focus { @@ -228,8 +233,9 @@ transform: translateX(-50%); padding: 8px; background: var(--surface-1, #fff); - border-radius: 8px; - box-shadow: 0 4px 16px rgba(0,0,0,.15); + border: 1px solid rgba(255, 255, 255, 0.55); + border-radius: 12px; + box-shadow: var(--shadow-lg); z-index: 10; white-space: nowrap; } diff --git a/assets/css/frontend/footer/part-2.css b/assets/css/frontend/footer/part-2.css index 97523579..6fea835a 100644 --- a/assets/css/frontend/footer/part-2.css +++ b/assets/css/frontend/footer/part-2.css @@ -264,8 +264,9 @@ body.dark-theme #float-theme-toggle .float-btn__icon-sun { .tabbar-add-panel__sheet { border-radius: 20px; - background: var(--surface-page); - box-shadow: 0 18px 50px rgba(15, 23, 42, 0.18); + background: var(--surface-1); + border: 1px solid rgba(255, 255, 255, 0.55); + box-shadow: var(--shadow-drawer); overflow: hidden; } diff --git a/assets/css/frontend/footer/part-3.css b/assets/css/frontend/footer/part-3.css index d8d0ed4a..05f5273c 100644 --- a/assets/css/frontend/footer/part-3.css +++ b/assets/css/frontend/footer/part-3.css @@ -29,7 +29,7 @@ .tabbar-search-overlay__dialog { width: 100%; min-height: 100%; - background: var(--surface-page); + background: var(--surface-1); padding: 18px 16px calc(24px + env(safe-area-inset-bottom, 0px)); } @@ -56,7 +56,9 @@ align-items: center; padding: 14px 14px 14px 12px; border-radius: 18px; - background: var(--surface-2); + border: 1px solid rgba(255, 255, 255, 0.55); + box-shadow: var(--shadow-sm); + background: var(--surface-4); } .tabbar-search-overlay__icon { @@ -141,10 +143,11 @@ justify-content: space-between; gap: 12px; width: 100%; - border: 0; + border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 16px; padding: 12px 14px; - background: var(--surface-2); + background: var(--surface-4); + box-shadow: var(--shadow-sm); color: var(--color-ink-3); text-decoration: none; text-align: left; diff --git a/assets/css/frontend/forum/board.css b/assets/css/frontend/forum/board.css index 68c1be79..2e45c759 100644 --- a/assets/css/frontend/forum/board.css +++ b/assets/css/frontend/forum/board.css @@ -1,10 +1,11 @@ /* Forum home-shell refinement */ .aksrt-forum-board__hero { margin-bottom: 20px; - padding: 20px; - border-radius: 16px; - background: linear-gradient(180deg, rgba(59,130,246,0.06), rgba(255,255,255,0.96)); - border: 1px solid var(--color-line-soft, rgba(0,0,0,0.06)); + padding: 24px; + border-radius: var(--radius-2xl, 16px); + background: linear-gradient(180deg, rgba(240,68,148,0.05), rgba(255,255,255,0.96)); + border: 1px solid rgba(255, 255, 255, 0.55); + box-shadow: var(--shadow-sm); } .aksrt-forum-board__summary { @@ -64,10 +65,11 @@ justify-content: space-between; gap: 16px; margin-bottom: 24px; - padding: 20px; + padding: 22px; background: var(--surface-1, #fff); - border-radius: 12px; - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); + border: 1px solid rgba(255, 255, 255, 0.55); + border-radius: var(--radius-2xl, 16px); + box-shadow: var(--shadow-sm); } .aksrt-forum-board__title { @@ -154,8 +156,9 @@ .aksrt-forum-board__governance-card { padding: 18px; background: var(--surface-1, #fff); - border-radius: 12px; - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); + border: 1px solid rgba(255, 255, 255, 0.55); + border-radius: var(--radius-lg, 10px); + box-shadow: var(--shadow-sm); } .aksrt-forum-board__section-title { @@ -288,9 +291,10 @@ display: flex; align-items: center; gap: 12px; - padding: 14px 16px; + padding: 16px 18px; background: var(--surface-1, #fff); - transition: background 0.15s; + border-bottom: 1px solid var(--color-line-soft); + transition: background 0.15s, box-shadow 0.15s; } .aksrt-forum-topic-item:first-child { @@ -302,7 +306,7 @@ } .aksrt-forum-topic-item:hover { - background: var(--surface-1, #f8f9fa); + background: var(--surface-4, #f8f9fa); } .aksrt-forum-topic-item.is-sticky { diff --git a/assets/css/frontend/forum/compose.css b/assets/css/frontend/forum/compose.css index e72686ab..18e360e4 100644 --- a/assets/css/frontend/forum/compose.css +++ b/assets/css/frontend/forum/compose.css @@ -57,9 +57,9 @@ /* §7.4 — Sidebar panels */ .aksrt-forum-compose__panel { background: var(--surface-1, #fff); - border: 1px solid var(--color-line, #eceff4); - border-radius: 10px; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); + border: 1px solid rgba(255, 255, 255, 0.55); + border-radius: var(--radius-lg, 10px); + box-shadow: var(--shadow-sm); } .aksrt-forum-compose__panel-title { @@ -108,8 +108,9 @@ .aksrt-forum-compose__main { padding: 24px; background: var(--surface-1, #fff); - border-radius: 12px; - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); + border: 1px solid rgba(255, 255, 255, 0.55); + border-radius: var(--radius-2xl, 16px); + box-shadow: var(--shadow-sm); } .aksrt-forum-compose__field { @@ -290,12 +291,12 @@ right: 0; z-index: 100; background: var(--surface-1, #fff); - border: 1px solid var(--color-line, #d9d9d9); + border: 1px solid rgba(255, 255, 255, 0.55); border-top: none; - border-radius: 0 0 8px 8px; + border-radius: 0 0 12px 12px; max-height: 200px; overflow-y: auto; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + box-shadow: var(--shadow-lg); } .aksrt-remote-select__option { @@ -315,11 +316,11 @@ flex-wrap: wrap; align-items: center; gap: 6px; - padding: 6px 8px; + padding: 8px 10px; border: 1px solid var(--color-line, #d9d9d9); - border-radius: 8px; - background: var(--surface-1, #fff); - min-height: 38px; + border-radius: 12px; + background: var(--surface-4, #fff); + min-height: 42px; } .aksrt-tag-input__tokens { @@ -371,12 +372,12 @@ right: 0; z-index: 100; background: var(--surface-1, #fff); - border: 1px solid var(--color-line, #d9d9d9); + border: 1px solid rgba(255, 255, 255, 0.55); border-top: none; - border-radius: 0 0 8px 8px; + border-radius: 0 0 12px 12px; max-height: 160px; overflow-y: auto; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + box-shadow: var(--shadow-lg); } .aksrt-tag-input__suggestion { @@ -396,9 +397,10 @@ .aksrt-forum-compose__vote { margin-bottom: 20px; padding: 18px; - border: 1px solid var(--color-line, #eceff4); - border-radius: 12px; + border: 1px solid rgba(255, 255, 255, 0.55); + border-radius: var(--radius-2xl, 16px); background: var(--surface-1, #f8f9fa); + box-shadow: var(--shadow-sm); } .aksrt-forum-compose__vote-head { @@ -624,27 +626,29 @@ width: 120px; height: 80px; object-fit: cover; - border-radius: 8px; - border: 1px solid var(--color-line, #d9d9d9); + border-radius: 12px; + border: 1px solid rgba(255, 255, 255, 0.55); + box-shadow: var(--shadow-sm); } .aksrt-forum-compose__cover-btn { display: inline-flex; align-items: center; gap: 6px; - padding: 8px 16px; + padding: 10px 18px; border: 1px dashed var(--color-line, #d9d9d9); - border-radius: 8px; - background: var(--surface-1, #fff); + border-radius: 12px; + background: var(--surface-4, #fff); color: var(--color-ink-3, #8a909c); cursor: pointer; font-size: 14px; - transition: border-color 0.15s, color 0.15s; + transition: border-color 0.15s, color 0.15s, background 0.15s; } .aksrt-forum-compose__cover-btn:hover { border-color: var(--color-primary); color: var(--color-primary); + background: var(--color-primary-soft); } .aksrt-forum-compose__field input[type="url"] { diff --git a/assets/css/frontend/forum/topic.css b/assets/css/frontend/forum/topic.css index c8799f7b..7b62b933 100644 --- a/assets/css/frontend/forum/topic.css +++ b/assets/css/frontend/forum/topic.css @@ -23,9 +23,9 @@ .aksrt-forum-topic__sidebar-card { padding: 18px; background: var(--surface-1, #fff); - border: 1px solid var(--color-line-soft, rgba(0,0,0,0.06)); - border-radius: 14px; - box-shadow: 0 1px 4px rgba(0,0,0,0.04); + border: 1px solid rgba(255, 255, 255, 0.55); + border-radius: var(--radius-lg, 10px); + box-shadow: var(--shadow-sm); } .aksrt-forum-topic__sidebar-card h2 { @@ -204,10 +204,11 @@ } .aksrt-forum-topic__content { - padding: 20px; + padding: 22px; background: var(--surface-1, #fff); - border-radius: 12px; - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); + border: 1px solid rgba(255, 255, 255, 0.55); + border-radius: var(--radius-2xl, 16px); + box-shadow: var(--shadow-sm); margin-bottom: 24px; line-height: 1.8; font-size: 15px; @@ -223,8 +224,9 @@ margin-bottom: 24px; padding: 20px; background: var(--surface-1, #fff); - border-radius: 12px; - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); + border: 1px solid rgba(255, 255, 255, 0.55); + border-radius: var(--radius-2xl, 16px); + box-shadow: var(--shadow-sm); } .aksrt-forum-topic__vote-head, @@ -338,8 +340,9 @@ .aksrt-forum-topic__reply-form { padding: 20px; background: var(--surface-1, #fff); - border-radius: 12px; - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); + border: 1px solid rgba(255, 255, 255, 0.55); + border-radius: var(--radius-2xl, 16px); + box-shadow: var(--shadow-sm); } .aksrt-forum-topic__reply-form h2, diff --git a/assets/css/frontend/header-components/base.css b/assets/css/frontend/header-components/base.css index 36d09f1d..de1e6bee 100644 --- a/assets/css/frontend/header-components/base.css +++ b/assets/css/frontend/header-components/base.css @@ -17,7 +17,10 @@ * ============================================================ */ .aksrt-slider-wrapper { position: relative; - margin-bottom: 20px; + margin-bottom: 24px; + border-radius: var(--radius-2xl, 16px); + overflow: hidden; + box-shadow: var(--shadow); } .new-swiper { @@ -151,7 +154,7 @@ position: relative; isolation: isolate; /* 创建独立堆叠上下文,内部 z-index 不外泄 */ width: 100%; - margin-bottom: 20px; + margin-bottom: 24px; } /* ============================================================ diff --git a/assets/css/frontend/home-modules/base.css b/assets/css/frontend/home-modules/base.css index 1a3a6882..3018ada0 100644 --- a/assets/css/frontend/home-modules/base.css +++ b/assets/css/frontend/home-modules/base.css @@ -12,8 +12,8 @@ .home-modules { display: flex; flex-direction: column; - gap: var(--space-9, 48px); - padding-bottom: var(--space-9, 48px); + gap: var(--space-8, 40px); + padding-bottom: var(--space-8, 40px); } .home-modules--fullbleed { @@ -47,12 +47,12 @@ /* ============ 公共 header ============ */ .home-module__header { display: flex; - align-items: baseline; + align-items: center; justify-content: space-between; gap: var(--space-3, 12px); margin-bottom: var(--space-5, 20px); padding-bottom: var(--space-3, 12px); - border-bottom: 1px solid var(--color-line); + border-bottom: 1px solid var(--color-line-soft); } .home-module__title { diff --git a/assets/css/frontend/home-modules/button-group.css b/assets/css/frontend/home-modules/button-group.css index 2a704e77..035a5607 100644 --- a/assets/css/frontend/home-modules/button-group.css +++ b/assets/css/frontend/home-modules/button-group.css @@ -16,31 +16,32 @@ align-items: center; gap: 6px; padding: 10px 24px; - border-radius: var(--radius-md, 8px); + border-radius: var(--radius-btn, 4px); font-size: 14px; font-weight: 500; text-decoration: none; - transition: opacity 0.2s, transform 0.2s; + transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s, background 0.2s; } .aksrt-btn:hover { - opacity: 0.85; + opacity: 1; transform: translateY(-1px); } .aksrt-btn--primary { background: var(--color-primary); color: #fff; + box-shadow: 0 8px 18px rgba(240, 68, 148, 0.22); } .aksrt-btn--outline { - background: transparent; + background: var(--surface-1); color: var(--color-primary); border: 1px solid var(--color-primary); } .aksrt-btn--ghost { - background: transparent; + background: var(--surface-4); color: var(--color-ink); } diff --git a/assets/css/frontend/home-modules/data-grid.css b/assets/css/frontend/home-modules/data-grid.css index 4f77deee..b2051219 100644 --- a/assets/css/frontend/home-modules/data-grid.css +++ b/assets/css/frontend/home-modules/data-grid.css @@ -12,8 +12,16 @@ .aksrt-data-cell { padding: 24px 16px; background: var(--surface-1, #fff); - border-radius: var(--radius-md, 8px); - border: 1px solid var(--color-line, #e8e8e8); + border-radius: var(--radius-lg, 10px); + border: 1px solid rgba(255, 255, 255, 0.55); + box-shadow: var(--shadow-sm); + transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s; +} + +.aksrt-data-cell:hover { + box-shadow: var(--shadow); + border-color: rgba(240, 68, 148, 0.12); + transform: translateY(-2px); } .aksrt-data-cell i { diff --git a/assets/css/frontend/home-modules/faq.css b/assets/css/frontend/home-modules/faq.css index b41693b9..b40c93c5 100644 --- a/assets/css/frontend/home-modules/faq.css +++ b/assets/css/frontend/home-modules/faq.css @@ -10,9 +10,11 @@ .aksrt-faq-item { break-inside: avoid; margin-bottom: 12px; - border: 1px solid var(--color-line, #e8e8e8); - border-radius: var(--radius-md, 8px); + border: 1px solid rgba(255, 255, 255, 0.55); + border-radius: var(--radius-lg, 10px); + box-shadow: var(--shadow-sm); overflow: hidden; + background: var(--surface-1, #fff); } .aksrt-faq-item__question { @@ -22,6 +24,12 @@ cursor: pointer; background: var(--surface-1, #fff); list-style: none; + transition: color .18s ease, background .18s ease; +} + +.aksrt-faq-item__question:hover { + color: var(--color-primary); + background: var(--surface-4); } .aksrt-faq-item__question::-webkit-details-marker { diff --git a/assets/css/frontend/home-modules/friend-links.css b/assets/css/frontend/home-modules/friend-links.css index 6e57bf90..5ad68bd4 100644 --- a/assets/css/frontend/home-modules/friend-links.css +++ b/assets/css/frontend/home-modules/friend-links.css @@ -13,16 +13,18 @@ align-items: center; gap: var(--space-3, 12px); padding: 12px; - border-radius: var(--radius); - border: 1px solid var(--color-line); + border-radius: var(--radius-lg, 10px); + border: 1px solid rgba(255, 255, 255, 0.55); + box-shadow: var(--shadow-sm); background: var(--surface-1); color: var(--color-ink); text-decoration: none; - transition: border-color .18s ease, transform .18s ease; + transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .home-module__friend-card:hover { - border-color: var(--color-primary); + border-color: rgba(240, 68, 148, 0.12); + box-shadow: var(--shadow); transform: translateY(-1px); } diff --git a/assets/css/frontend/home-modules/highlight-cards.css b/assets/css/frontend/home-modules/highlight-cards.css index 21818ffc..cd17a3e0 100644 --- a/assets/css/frontend/home-modules/highlight-cards.css +++ b/assets/css/frontend/home-modules/highlight-cards.css @@ -11,16 +11,18 @@ .aksrt-highlight-card { padding: 24px; background: var(--surface-1, #fff); - border-radius: var(--radius-md, 8px); - border: 1px solid var(--color-line, #e8e8e8); + border-radius: var(--radius-lg, 10px); + border: 1px solid rgba(255, 255, 255, 0.55); + box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; - transition: box-shadow 0.2s, transform 0.2s; + transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s; } .aksrt-highlight-card:hover { - box-shadow: none; - transform: none; + box-shadow: var(--shadow); + border-color: rgba(240, 68, 148, 0.12); + transform: translateY(-2px); } .aksrt-highlight-card__image { diff --git a/assets/css/frontend/home-modules/html-module.css b/assets/css/frontend/home-modules/html-module.css index fcf5a000..b4116f3a 100644 --- a/assets/css/frontend/home-modules/html-module.css +++ b/assets/css/frontend/home-modules/html-module.css @@ -2,6 +2,11 @@ .home-module--html .home-module__html-body { color: var(--color-ink); font-size: 15px; - line-height: 1.7; + line-height: 1.75; + padding: 20px 22px; + background: var(--surface-1); + border: 1px solid rgba(255, 255, 255, 0.55); + border-radius: var(--radius-2xl, 16px); + box-shadow: var(--shadow-sm); } diff --git a/assets/css/frontend/home-modules/partner-marquee.css b/assets/css/frontend/home-modules/partner-marquee.css index f18cf509..0585f22e 100644 --- a/assets/css/frontend/home-modules/partner-marquee.css +++ b/assets/css/frontend/home-modules/partner-marquee.css @@ -21,7 +21,11 @@ display: flex; align-items: center; justify-content: center; - padding: 8px 16px; + padding: 10px 18px; + border-radius: var(--radius-lg, 10px); + background: var(--surface-1); + border: 1px solid rgba(255, 255, 255, 0.55); + box-shadow: var(--shadow-sm); } .aksrt-marquee__item img { diff --git a/assets/css/frontend/home-modules/product-showcase.css b/assets/css/frontend/home-modules/product-showcase.css index 60c974eb..6a9017af 100644 --- a/assets/css/frontend/home-modules/product-showcase.css +++ b/assets/css/frontend/home-modules/product-showcase.css @@ -10,17 +10,19 @@ .aksrt-product-card { background: var(--surface-1, #fff); - border-radius: var(--radius-md, 8px); - border: 1px solid var(--color-line, #e8e8e8); + border-radius: var(--radius-lg, 10px); + border: 1px solid rgba(255, 255, 255, 0.55); + box-shadow: var(--shadow-sm); overflow: hidden; text-decoration: none; color: inherit; - transition: box-shadow 0.2s, transform 0.2s; + transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s; } .aksrt-product-card:hover { - box-shadow: none; - transform: none; + box-shadow: var(--shadow); + border-color: rgba(240, 68, 148, 0.12); + transform: translateY(-2px); } .aksrt-product-card__image img { diff --git a/assets/css/frontend/home-modules/ranking.css b/assets/css/frontend/home-modules/ranking.css index a33019a1..38d2457b 100644 --- a/assets/css/frontend/home-modules/ranking.css +++ b/assets/css/frontend/home-modules/ranking.css @@ -14,8 +14,16 @@ gap: var(--space-3, 12px); padding: 12px 14px; background: var(--surface-1); - border: 1px solid var(--color-line); - border-radius: var(--radius); + border: 1px solid rgba(255, 255, 255, 0.55); + border-radius: var(--radius-lg, 10px); + box-shadow: var(--shadow-sm); + transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease; +} + +.home-module__ranking-item:hover { + box-shadow: var(--shadow); + border-color: rgba(240, 68, 148, 0.12); + transform: translateY(-1px); } .home-module__ranking-num { diff --git a/assets/css/frontend/home-modules/tabs.css b/assets/css/frontend/home-modules/tabs.css index 4af252d7..3f22d00d 100644 --- a/assets/css/frontend/home-modules/tabs.css +++ b/assets/css/frontend/home-modules/tabs.css @@ -8,31 +8,34 @@ .home-module__tabs { display: flex; flex-wrap: wrap; - gap: var(--space-1, 4px); - border-bottom: 1px solid var(--color-line); + gap: var(--space-2, 8px); + border-bottom: 1px solid var(--color-line-soft); margin-top: var(--space-3, 12px); + padding-bottom: 12px; width: 100%; } .home-module__tab { background: transparent; border: 0; - padding: 8px 16px; + padding: 9px 18px; font: 500 14px/1 var(--font-ui); - color: var(--color-ink-2); + color: var(--color-ink-3); cursor: pointer; - border-radius: 8px 8px 0 0; - border-bottom: 2px solid transparent; - transition: color .18s ease, border-color .18s ease; + border-radius: 999px; + border-bottom: 0; + transition: color .18s ease, border-color .18s ease, background .18s ease; } .home-module__tab:hover { color: var(--color-ink); + background: var(--surface-4); } .home-module__tab.is-active { color: var(--color-primary); - border-bottom-color: var(--color-primary); + background: var(--color-primary-soft); + box-shadow: inset 0 0 0 1px rgba(240, 68, 148, 0.08); } .home-module__tab-panel { diff --git a/assets/css/frontend/home-modules/tag-cloud.css b/assets/css/frontend/home-modules/tag-cloud.css index 8f204418..424e4849 100644 --- a/assets/css/frontend/home-modules/tag-cloud.css +++ b/assets/css/frontend/home-modules/tag-cloud.css @@ -14,16 +14,17 @@ gap: 6px; padding: 6px 12px; border-radius: var(--radius-pill); - background: var(--surface-2); + background: var(--surface-4); color: var(--color-ink-2); font: 500 13px/1 var(--font-ui); text-decoration: none; - transition: background .18s ease, color .18s ease; + transition: background .18s ease, color .18s ease, box-shadow .18s ease; } .home-module__tag:hover { - background: var(--color-primary); - color: var(--color-on-primary); + background: var(--color-primary-soft); + color: var(--color-primary); + box-shadow: inset 0 0 0 1px rgba(240, 68, 148, 0.08); } .home-module__tag-count { diff --git a/assets/css/frontend/home-modules/user-cards.css b/assets/css/frontend/home-modules/user-cards.css index 35ac1504..2dde27a4 100644 --- a/assets/css/frontend/home-modules/user-cards.css +++ b/assets/css/frontend/home-modules/user-cards.css @@ -10,16 +10,18 @@ flex-direction: column; align-items: center; text-align: center; - padding: 20px 16px; - border-radius: var(--radius); - border: 1px solid var(--color-line); + padding: 24px 18px; + border-radius: var(--radius-lg); + border: 1px solid rgba(255, 255, 255, 0.55); background: var(--surface-1); - transition: border-color .18s ease, transform .18s ease; + box-shadow: var(--shadow-sm); + transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .home-module__user-card:hover { - border-color: var(--color-line); - transform: none; + 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/homepage-fixed/ajax-tab-error-state.css b/assets/css/frontend/homepage-fixed/ajax-tab-error-state.css index 71c3502d..fa9f7e2e 100644 --- a/assets/css/frontend/homepage-fixed/ajax-tab-error-state.css +++ b/assets/css/frontend/homepage-fixed/ajax-tab-error-state.css @@ -4,6 +4,10 @@ text-align: center; color: var(--color-ink-4, #999); font-size: 14px; + background: var(--surface-1); + border: 1px solid rgba(255, 255, 255, 0.55); + border-radius: var(--radius-lg, 10px); + box-shadow: var(--shadow-sm); } .aksrt-homepage__tab-retry { @@ -11,19 +15,20 @@ align-items: center; gap: 6px; margin-top: 12px; - padding: 6px 14px; + padding: 8px 16px; border: 1px solid var(--color-line); - border-radius: var(--radius, 8px); - background: var(--surface-1, #fff); + border-radius: var(--radius-btn, 4px); + background: var(--surface-4, #fff); color: var(--color-ink-3, #777); font-size: 13px; cursor: pointer; - transition: color 0.2s, border-color 0.2s; + transition: color 0.2s, border-color 0.2s, background 0.2s; } .aksrt-homepage__tab-retry:hover { color: var(--color-primary, var(--color-primary)); border-color: var(--color-primary, var(--color-primary)); + background: var(--color-primary-soft); } /* ================================================================ diff --git a/assets/css/frontend/homepage-fixed/ajax-tab-skeleton-placeholder.css b/assets/css/frontend/homepage-fixed/ajax-tab-skeleton-placeholder.css index 7a6e577d..5dc3ec37 100644 --- a/assets/css/frontend/homepage-fixed/ajax-tab-skeleton-placeholder.css +++ b/assets/css/frontend/homepage-fixed/ajax-tab-skeleton-placeholder.css @@ -11,7 +11,9 @@ gap: 16px; padding: 20px; background: var(--surface-1, #fff); - border-radius: var(--radius, 8px); + border: 1px solid rgba(255, 255, 255, 0.55); + border-radius: var(--radius-lg, 10px); + box-shadow: var(--shadow-sm); animation: aksrt-skeleton-pulse 1.5s ease-in-out infinite; } diff --git a/assets/css/frontend/homepage-fixed/base-1.css b/assets/css/frontend/homepage-fixed/base-1.css index 63c24c3e..dc111c85 100644 --- a/assets/css/frontend/homepage-fixed/base-1.css +++ b/assets/css/frontend/homepage-fixed/base-1.css @@ -176,17 +176,18 @@ .aksrt-homepage .widget-fluid.widget_aksrt_category_recommend { padding: 15px; background: var(--surface-1, #fff); - border-radius: var(--radius, 8px); - box-shadow: 0 0 10px var(--shadow, rgba(116, 116, 116, 0.08)); + border: 1px solid rgba(255, 255, 255, 0.55); + border-radius: var(--radius-lg, 10px); + box-shadow: var(--shadow-sm); } .aksrt-homepage__content-zone .widget-card, .aksrt-homepage__aside .widget { background: var(--surface-1, #fff); padding: 15px; - border: none; - border-radius: var(--radius, 8px); - box-shadow: 0 0 10px var(--shadow, rgba(116, 116, 116, 0.08)); + border: 1px solid rgba(255, 255, 255, 0.55); + border-radius: var(--radius-lg, 10px); + box-shadow: var(--shadow-sm); } /* ================================================================ @@ -289,8 +290,9 @@ margin-bottom: 14px; padding: 10px 16px; background: rgba(255, 255, 255, 0.92); - border-radius: 12px; - box-shadow: 0 10px 28px rgba(24, 24, 24, 0.08); + border: 1px solid rgba(255, 255, 255, 0.55); + border-radius: var(--radius-2xl, 16px); + box-shadow: var(--shadow); backdrop-filter: saturate(1.6) blur(20px); -webkit-backdrop-filter: saturate(1.6) blur(20px); } diff --git a/assets/css/frontend/homepage-fixed/base-2.css b/assets/css/frontend/homepage-fixed/base-2.css index 1bb7211a..9d1eba4c 100644 --- a/assets/css/frontend/homepage-fixed/base-2.css +++ b/assets/css/frontend/homepage-fixed/base-2.css @@ -89,11 +89,11 @@ gap: 16px; min-width: 0; background: var(--surface-1, #fff); - border: none; - border-radius: var(--radius, 8px); - box-shadow: 0 0 10px var(--shadow, rgba(116, 116, 116, 0.08)); + border: 1px solid rgba(255, 255, 255, 0.55); + border-radius: var(--radius-lg, 10px); + box-shadow: var(--shadow-sm); overflow: hidden; - transition: box-shadow 0.2s, transform 0.2s; + transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s; } .aksrt-homepage__posts > .posts-item.list:last-child { @@ -101,7 +101,8 @@ } .aksrt-homepage__posts > .posts-item.list:hover { - box-shadow: 0 4px 16px rgba(116, 116, 116, 0.16); + box-shadow: var(--shadow); + border-color: rgba(240, 68, 148, 0.10); transform: translateY(-1px); } @@ -348,15 +349,16 @@ html.dark .aksrt-homepage__posts > .posts-item.list:hover { display: flex; flex-direction: column; background: var(--surface-1, #fff); - border: none; - border-radius: var(--radius, 8px); - box-shadow: none; + border: 1px solid rgba(255, 255, 255, 0.55); + border-radius: var(--radius-lg, 10px); + box-shadow: var(--shadow-sm); overflow: hidden; - transition: box-shadow 0.3s, transform 0.2s; + transition: box-shadow 0.3s, transform 0.2s, border-color 0.2s; } .aksrt-homepage__posts[data-view="card"] > .posts-item:hover { - box-shadow: 0 0 10px var(--shadow, rgba(116, 116, 116, 0.08)); + box-shadow: var(--shadow); + border-color: rgba(240, 68, 148, 0.10); } .aksrt-homepage__posts[data-view="card"] > .posts-item.style2 { @@ -398,3 +400,54 @@ html.dark .aksrt-homepage__posts > .posts-item.list:hover { width: 100%; height: 100%; object-fit: cover; + transition: transform 0.3s; +} + +.aksrt-homepage__posts[data-view="card"] > .posts-item:hover .item-thumbnail img { + transform: scale(1.02); +} + +.aksrt-homepage__posts[data-view="card"] > .posts-item.mult-thumb .thumb-items { + display: none; +} + +.aksrt-homepage__posts[data-view="card"] > .posts-item.mult-thumb .item-thumbnail { + display: block; +} + +.aksrt-homepage__posts[data-view="card"] > .posts-item.style3 .item-thumbnail, +.aksrt-homepage__posts[data-view="card"] > .posts-item.style3 .item-thumbnail img { + border-radius: var(--radius, 8px) var(--radius, 8px) 0 0; +} + +.aksrt-homepage__posts[data-view="card"] > .posts-item .item-body { + width: 100%; + margin: 10px 0 0; + padding: 0; + gap: 6px; +} + +.aksrt-homepage__posts[data-view="card"] > .posts-item.style3 .item-body { + margin: 0; + padding: 10px; +} + +.aksrt-homepage__posts[data-view="card"] > .posts-item .item-heading { + font-size: 14px; + font-weight: 500; + line-height: 1.4; + min-height: 2.8em; + -webkit-line-clamp: 2; +} + +.aksrt-homepage__posts[data-view="card"] > .posts-item .item-excerpt { + display: none; +} + +.aksrt-homepage__posts[data-view="card"] > .posts-item .item-meta { + font-size: 12px; +} + +.aksrt-homepage__posts[data-view="card"] > .posts-item .meta-right { + display: none; +} diff --git a/assets/css/frontend/homepage-fixed/base-3.css b/assets/css/frontend/homepage-fixed/base-3.css index 5e2fb9d7..608b7fcb 100644 --- a/assets/css/frontend/homepage-fixed/base-3.css +++ b/assets/css/frontend/homepage-fixed/base-3.css @@ -100,13 +100,13 @@ .aksrt-homepage .navigation.pagination .page-numbers, .aksrt-homepage .pagination .page-numbers { - min-width: 31px; - height: auto; - padding: 6px 9px 5px; + min-width: 34px; + height: 34px; + padding: 0 10px; margin: 3px; - border: 0; - border-radius: 3px; - background: var(--surface-2, #eee); + border: 1px solid transparent; + border-radius: var(--radius-xs, 3px); + background: var(--surface-4, #eee); color: var(--color-ink-3, #777); font-size: 13px; line-height: 1.4; @@ -114,7 +114,9 @@ .aksrt-homepage .navigation.pagination .page-numbers:hover, .aksrt-homepage .pagination .page-numbers:hover { - opacity: 0.7; + opacity: 1; + background: var(--color-primary-soft); + color: var(--color-primary); } .aksrt-homepage .navigation.pagination .current, diff --git a/assets/css/frontend/nav/base.css b/assets/css/frontend/nav/base.css index 357f4dd6..504860bc 100644 --- a/assets/css/frontend/nav/base.css +++ b/assets/css/frontend/nav/base.css @@ -14,6 +14,7 @@ z-index: 1000; min-height: var(--nav-height, 60px); background-color: var(--blur-bg); + border-bottom: 1px solid rgba(255, 255, 255, 0.45); backdrop-filter: saturate(5) blur(20px); -webkit-backdrop-filter: saturate(5) blur(20px); transition: background-color 0.25s ease, @@ -76,7 +77,7 @@ body.dark-theme .site-nav--blur.is-scrolled { /* 滚动后追加阴影 — 对齐 zibll .body-scroll .header */ .site-nav.is-scrolled { - box-shadow: 0 4px 10px var(--main-shadow, rgba(116, 116, 116, 0.08)); + box-shadow: var(--shadow-sm); } /* WordPress Admin Bar 已全局禁用,无需偏移规则 */ @@ -87,7 +88,7 @@ body.dark-theme .site-nav--blur.is-scrolled { .site-nav__inner { max-width: var(--nav-max-width, var(--container)); margin: 0 auto; - padding: 0 20px; + padding: 0 16px; display: flex; flex-direction: column; gap: 0; @@ -221,8 +222,9 @@ ul.nav-desktop { ul.nav-desktop a, .nav-desktop--fallback a { color: var(--color-ink-3); + font-size: 14px; font-weight: 500; - padding: 0 10px; /* 对齐 zibll:仅水平 padding,垂直居中靠 flex 行高 */ + padding: 0 12px; /* 对齐 zibll:仅水平 padding,垂直居中靠 flex 行高 */ border-radius: 4px; transition: color var(--dur-fast, 0.15s) var(--ease), background var(--dur-fast, 0.15s) var(--ease); @@ -288,14 +290,14 @@ ul.nav-desktop .sub-menu { top: 100%; left: 0; z-index: 998; /* 保留较高 z-index(zibll 用 99,AKSRT 栈更深,避免被覆盖) */ - min-width: 120px; + min-width: 140px; list-style: none; - margin: 4px 0 0; - padding: 10px 5px; + margin: 8px 0 0; + padding: 8px 6px; background: var(--main-bg-color, #fff); - border: 1px solid var(--main-border-color, rgba(50, 50, 50, 0.06)); - border-radius: var(--main-radius, 8px); - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + border: 1px solid rgba(255, 255, 255, 0.55); + border-radius: var(--radius-lg, 10px); + box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(6px); diff --git a/assets/css/frontend/overlay-primitives.css b/assets/css/frontend/overlay-primitives.css index 6c2c90e7..43238793 100644 --- a/assets/css/frontend/overlay-primitives.css +++ b/assets/css/frontend/overlay-primitives.css @@ -30,13 +30,13 @@ } .site-nav--glass.is-scrolled { - box-shadow: 0 4px 10px rgba(20, 28, 48, 0.06); + box-shadow: var(--shadow-sm); border-bottom-color: var(--color-line-soft); } html.dark .site-nav--glass.is-scrolled, html.dark .site-nav--glass.is-scrolled { - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); + box-shadow: var(--shadow-sm); } /* ============================================================ @@ -47,12 +47,12 @@ html.dark .site-nav--glass.is-scrolled { -webkit-backdrop-filter: saturate(5) blur(20px); backdrop-filter: saturate(5) blur(20px); background: var(--blur-bg); - box-shadow: 0 -4px 5px rgba(20, 28, 48, 0.06); + box-shadow: 0 -8px 24px rgba(20, 28, 48, 0.08); } html.dark .footer-tabbar--glass, html.dark .footer-tabbar--glass { - box-shadow: 0 -4px 5px rgba(0, 0, 0, 0.25); + box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.32); } /* ============================================================ diff --git a/assets/css/frontend/pagination.css b/assets/css/frontend/pagination.css index a673d6e5..d4db3e70 100644 --- a/assets/css/frontend/pagination.css +++ b/assets/css/frontend/pagination.css @@ -17,8 +17,8 @@ display: flex; align-items: center; justify-content: center; - gap: 4px; - padding: 20px 0; + gap: 6px; + padding: 24px 0; flex-wrap: wrap; } @@ -33,14 +33,15 @@ display: inline-flex; align-items: center; justify-content: center; - min-width: 31px; - padding: 6px 9px 5px; + min-width: 34px; + min-height: 34px; + padding: 6px 10px; font-size: 13px; line-height: 1.4; color: var(--muted-color, var(--color-ink-3)); - background: var(--main-border-color, rgba(50, 50, 50, 0.06)); - border: none; - border-radius: 3px; + background: var(--surface-4, var(--main-border-color, rgba(50, 50, 50, 0.06))); + border: 1px solid transparent; + border-radius: var(--radius-xs, 3px); text-decoration: none; transition: all 0.2s; user-select: none; @@ -50,7 +51,9 @@ .aksrt-pagination a:hover, .navigation.pagination a:hover, .pagenav.ajax-pag a:hover { - opacity: 0.7; + opacity: 1; + color: var(--color-primary); + background: var(--color-primary-soft); } .pagination .current, diff --git a/assets/css/frontend/post-card.css b/assets/css/frontend/post-card.css index 00d9e483..30888b1e 100644 --- a/assets/css/frontend/post-card.css +++ b/assets/css/frontend/post-card.css @@ -29,22 +29,28 @@ padding: 20px; margin: 15px 0; background: var(--main-bg-color, #fff); + border: 1px solid rgba(255, 255, 255, 0.55); overflow: hidden; - transition: 0.2s; - box-shadow: 0 0 10px var(--main-shadow, rgba(116, 116, 116, 0.08)); - border-radius: var(--main-radius, 8px); + transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease; + box-shadow: var(--shadow-sm); + border-radius: var(--radius-lg, 10px); } /* ============================================================ * 卡片模式 .posts-item.card — 对齐 zibll line 7733 * ============================================================ */ +.posts-item:hover { + box-shadow: var(--shadow); + border-color: rgba(240, 68, 148, 0.10); +} + .posts-item.card { width: calc(33.333% - 16px); display: inline-block; margin: 8px; padding: 10px; vertical-align: top; - transition: 0.3s; + transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease; font-size: 1rem; /* 重置容器 font-size: 0 */ } diff --git a/assets/css/frontend/sidebar.css b/assets/css/frontend/sidebar.css index 04330043..664444a4 100644 --- a/assets/css/frontend/sidebar.css +++ b/assets/css/frontend/sidebar.css @@ -6,26 +6,28 @@ .sidebar-inner { position: sticky; - top: calc(var(--nav-height, 60px) + 16px); + top: calc(var(--nav-height, 60px) + 20px); } /* Widget 通用 */ .widget { background: var(--surface-1, #fff); - border-radius: var(--radius, 8px); - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); - margin-bottom: 16px; + border-radius: var(--radius-lg, 10px); + box-shadow: var(--shadow-sm); + border: 1px solid rgba(255, 255, 255, 0.55); + margin-bottom: 20px; overflow: hidden; } .widget-title { - font-size: 15px; + font-size: 16px; + font-weight: 700; color: var(--color-ink, #333); - padding-bottom: 8px; - margin-bottom: 10px; + padding-bottom: 10px; + margin-bottom: 12px; display: flex; align-items: center; - gap: 6px; + gap: 8px; } .widget-title i { @@ -34,7 +36,7 @@ } .widget-content { - padding: 15px; + padding: var(--card-padding-lg, 20px); } .widget-content--flush { diff --git a/assets/css/frontend/single-post/author-actions.css b/assets/css/frontend/single-post/author-actions.css index 1cf33304..b78af364 100644 --- a/assets/css/frontend/single-post/author-actions.css +++ b/assets/css/frontend/single-post/author-actions.css @@ -124,11 +124,11 @@ display: inline-flex; align-items: center; gap: 6px; - padding: 0.3em 1em; + padding: 0.38em 1.1em; border-radius: 50px; - border: none; - background: rgba(136, 136, 136, 0.1); - color: #888; + border: 1px solid transparent; + background: var(--surface-4, rgba(136, 136, 136, 0.1)); + color: var(--color-ink-3); cursor: pointer; font-size: 14px; transition: all 0.15s ease; @@ -136,7 +136,8 @@ .action-btn:hover, .action:hover { - border-color: var(--color-primary); + border-color: rgba(240, 68, 148, 0.12); + background: var(--color-primary-soft); color: var(--color-primary); } @@ -297,10 +298,11 @@ html.dark .post-drop-meta__item:hover { /* ===== Author Card — 对齐 zibll 卡片容器 ===== */ .author-box { margin-bottom: 16px; - padding: 15px; - background: var(--main-bg-color, #fff); - border-radius: var(--main-radius, 8px); - box-shadow: 0 0 10px var(--main-shadow, rgba(116, 116, 116, 0.08)); + padding: 18px; + background: var(--surface-1, #fff); + border: 1px solid rgba(255, 255, 255, 0.55); + border-radius: var(--radius-2xl, 16px); + box-shadow: var(--shadow-sm); } .single-metabox { diff --git a/assets/css/frontend/single-post/content.css b/assets/css/frontend/single-post/content.css index 780a879d..f2bf2e1a 100644 --- a/assets/css/frontend/single-post/content.css +++ b/assets/css/frontend/single-post/content.css @@ -1,16 +1,20 @@ /* ========== Single Post ========== */ .entry-header, .article-header { - margin-bottom: 24px; + margin-bottom: 28px; + padding-bottom: 18px; + border-bottom: 1px solid var(--color-line-soft); } /* 标题 — 对齐 zibll: 22px, bold, line-height 1.4 */ .entry-title, .article-title { - font-size: 22px; + font-size: 28px; font-weight: 700; - margin: 0 0 16px; - line-height: 1.4; + margin: 0 0 18px; + line-height: 1.35; + letter-spacing: -0.01em; + color: var(--color-ink); } .entry-meta { @@ -38,7 +42,7 @@ /* 内容区 — 对齐 zibll: 16px, line-height 2 */ .entry-content { font-size: 16px; - line-height: 2; + line-height: 1.95; color: var(--color-ink); overflow-wrap: break-word; word-wrap: break-word; @@ -66,12 +70,12 @@ } .entry-content blockquote { - margin: 0 0 20px; - padding: 15px 20px; - border-left: 4px solid var(--main-border-color, rgba(50, 50, 50, 0.06)); - background: var(--muted-border-color, rgba(0, 0, 0, 0.03)); - border-radius: 0; - color: var(--muted-color, #777); + margin: 0 0 24px; + padding: 18px 20px; + border-left: 4px solid var(--color-primary); + background: var(--surface-4, rgba(0, 0, 0, 0.03)); + border-radius: 0 var(--radius-lg) var(--radius-lg) 0; + color: var(--color-ink-3); } .entry-content img { @@ -205,6 +209,8 @@ .related-posts { margin-top: 48px; + padding: 20px 0 0; + border-top: 1px solid var(--color-line-soft); } .related-posts__title { diff --git a/assets/css/frontend/single-post/cover.css b/assets/css/frontend/single-post/cover.css index 577e0a66..2e9e6183 100644 --- a/assets/css/frontend/single-post/cover.css +++ b/assets/css/frontend/single-post/cover.css @@ -7,8 +7,9 @@ .single-cover { position: relative; overflow: hidden; - border-radius: 8px; - margin-bottom: 16px; + border-radius: var(--radius-2xl, 16px); + box-shadow: var(--shadow-sm); + margin-bottom: 20px; padding-bottom: var(--single-cover-scale, 35%); } @@ -37,9 +38,9 @@ bottom: 0; left: 0; right: 0; - padding: 20px; + padding: 24px; color: #fff; - border-radius: 0 0 8px 8px; + border-radius: 0 0 var(--radius-2xl, 16px) var(--radius-2xl, 16px); } .single-cover__title, @@ -112,24 +113,26 @@ .single-cover__dots { position: absolute; - bottom: 12px; - right: 16px; + bottom: 14px; + right: 18px; display: flex; - gap: 6px; + gap: 8px; z-index: 2; } .single-cover__dot { - width: 8px; - height: 8px; + width: 9px; + height: 9px; border-radius: 50%; - background: rgba(255, 255, 255, 0.5); - transition: background 0.3s ease; + background: rgba(255, 255, 255, 0.45); + border: 1px solid rgba(255, 255, 255, 0.32); + transition: background 0.3s ease, transform 0.3s ease; cursor: pointer; } .single-cover__dot.is-active { background: #fff; + transform: scale(1.12); } /* ===== 面包屑 ===== */ diff --git a/assets/css/frontend/single-post/navigation.css b/assets/css/frontend/single-post/navigation.css index 6de42565..2006353b 100644 --- a/assets/css/frontend/single-post/navigation.css +++ b/assets/css/frontend/single-post/navigation.css @@ -15,15 +15,18 @@ .post-nav-links a { display: block; - padding: 16px; + padding: 18px; border-radius: var(--radius-lg); - border: 1px solid var(--color-line); - background: var(--surface-2); - transition: border-color 0.2s; + border: 1px solid rgba(255, 255, 255, 0.55); + box-shadow: var(--shadow-sm); + background: var(--surface-1); + transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; } .post-nav-links a:hover { - border-color: var(--color-primary); + border-color: rgba(240, 68, 148, 0.12); + box-shadow: var(--shadow); + transform: translateY(-2px); } .post-nav-links .nav-subtitle { diff --git a/assets/css/frontend/single-post/related-toc.css b/assets/css/frontend/single-post/related-toc.css index d9485473..2f2bf225 100644 --- a/assets/css/frontend/single-post/related-toc.css +++ b/assets/css/frontend/single-post/related-toc.css @@ -43,9 +43,10 @@ .related-box { margin-bottom: 16px; overflow: hidden; - background: var(--main-bg-color, #fff); - border-radius: var(--main-radius, 8px); - box-shadow: 0 0 10px var(--main-shadow, rgba(116, 116, 116, 0.08)); + background: var(--surface-1, #fff); + border: 1px solid rgba(255, 255, 255, 0.55); + border-radius: var(--radius-2xl, 16px); + box-shadow: var(--shadow-sm); } .related-box__header { padding-bottom: 0; } @@ -250,6 +251,10 @@ html.dark .article-end-separator span { top: 88px; padding: 18px 18px 14px; margin-bottom: 16px; + border: 1px solid rgba(255, 255, 255, 0.55); + border-radius: var(--radius-2xl, 16px); + box-shadow: var(--shadow-sm); + background: var(--surface-1); } .toc-widget .widget-title { @@ -327,8 +332,9 @@ html.dark .article-end-separator span { z-index: 80; width: min(86vw, 340px); padding: 18px 18px 28px; - background: var(--surface-page); - border-left: 1px solid var(--color-line); + background: var(--surface-1); + border-left: 1px solid rgba(255, 255, 255, 0.55); + box-shadow: var(--shadow-drawer); transform: translateX(100%); transition: transform 0.25s ease; overflow-y: auto; diff --git a/assets/css/routes/auth.css b/assets/css/routes/auth.css index f86eb796..c3133012 100644 --- a/assets/css/routes/auth.css +++ b/assets/css/routes/auth.css @@ -20,7 +20,8 @@ width: 100%; max-width: 440px; background: var(--surface-1); - border-radius: var(--radius); + border: 1px solid rgba(255, 255, 255, 0.55); + border-radius: var(--radius-2xl, 16px); padding: 32px; box-shadow: var(--shadow-sm); } @@ -85,9 +86,9 @@ padding: 0 14px 0 40px; font-size: 14px; color: var(--color-ink); - background: var(--surface-page); - border: 1px solid transparent; - border-radius: var(--radius); + background: var(--surface-4); + border: 1px solid var(--color-line); + border-radius: 12px; transition: border-color 0.15s, box-shadow 0.15s; } @@ -230,17 +231,19 @@ align-items: center; justify-content: center; border-radius: 50%; - border: 1px solid var(--color-line); - background: var(--surface-1); + border: 1px solid rgba(255, 255, 255, 0.55); + background: var(--surface-4); + box-shadow: var(--shadow-sm); color: var(--color-ink); font-size: 18px; text-decoration: none; - transition: border-color 0.2s, color 0.2s; + transition: border-color 0.2s, color 0.2s, box-shadow 0.2s, background 0.2s; } .aksrt-oauth-btn:hover { border-color: var(--color-primary); color: var(--color-primary); + background: var(--color-primary-soft); } /* 成功提示 */ @@ -253,27 +256,29 @@ /* 认证 Tab 切换 */ .aksrt-auth-tabs { display: flex; - gap: 0; + gap: 8px; margin-bottom: 20px; - border-bottom: 2px solid var(--color-line); + padding-bottom: 12px; + border-bottom: 1px solid var(--color-line-soft); } .aksrt-auth-tab { flex: 1; padding: 10px 0; border: none; - background: none; + border-radius: 999px; + background: transparent; font-size: 14px; cursor: pointer; color: var(--color-ink-3); - border-bottom: 2px solid transparent; - margin-bottom: -2px; + border-bottom: 0; + margin-bottom: 0; transition: all 0.2s; } .aksrt-auth-tab.is-active { color: var(--color-primary); - border-bottom-color: var(--color-primary); + background: var(--color-primary-soft); font-weight: 600; } diff --git a/assets/css/routes/cart.css b/assets/css/routes/cart.css index 5cad1d5c..602195af 100644 --- a/assets/css/routes/cart.css +++ b/assets/css/routes/cart.css @@ -61,8 +61,9 @@ .aksrt-cart-page__panel { background: var(--surface-1, #fff); - border: 1px solid var(--color-line, #e3e8ef); - border-radius: var(--radius-lg, 18px); + border: 1px solid rgba(255, 255, 255, 0.55); + box-shadow: var(--shadow-sm); + border-radius: var(--radius-2xl, 16px); padding: 20px; } @@ -85,9 +86,10 @@ align-items: center; gap: 14px; padding: 16px; - border: 1px solid var(--color-line, #ecf0f5); - border-radius: var(--radius); - background: var(--surface-2, #f8fafc); + border: 1px solid rgba(255, 255, 255, 0.55); + border-radius: var(--radius-lg, 10px); + background: var(--surface-4, #f8fafc); + box-shadow: var(--shadow-sm); } .aksrt-cart-page__item-image { @@ -144,8 +146,8 @@ gap: 10px; padding: 14px; border: 1px solid var(--color-line, #dde3eb); - border-radius: var(--radius); - background: var(--surface-1, #fff); + border-radius: var(--radius-lg); + background: var(--surface-4, #fff); } .aksrt-cart-page__option-body { @@ -335,18 +337,21 @@ .aksrt-modal__overlay { position: absolute; inset: 0; - background: rgba(0, 0, 0, 0.45); + background: rgba(18, 18, 18, 0.48); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); } .aksrt-modal__dialog { position: relative; background: var(--surface-1, #fff); - border-radius: 16px; + border: 1px solid rgba(255, 255, 255, 0.58); + border-radius: var(--radius-2xl, 16px); width: 90%; max-width: 520px; max-height: 85vh; overflow-y: auto; - box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15); + box-shadow: var(--shadow-drawer); } .aksrt-modal__header { diff --git a/assets/css/routes/orders.css b/assets/css/routes/orders.css index 1f36e273..be9b3d63 100644 --- a/assets/css/routes/orders.css +++ b/assets/css/routes/orders.css @@ -31,7 +31,7 @@ padding: 6px 16px; border-radius: var(--radius-pill); border: 1px solid var(--color-line); - background: var(--surface-1); + background: var(--surface-4); font-size: 13px; font-weight: 500; text-decoration: none; @@ -54,14 +54,16 @@ .aksrt-orders-page__item { background: var(--surface-1); - border: 1px solid var(--color-line); - border-radius: var(--radius-lg); + border: 1px solid rgba(255, 255, 255, 0.55); + border-radius: var(--radius-2xl, 16px); + box-shadow: var(--shadow-sm); overflow: hidden; - transition: box-shadow var(--dur-fast) var(--ease); + transition: box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .aksrt-orders-page__item:hover { box-shadow: var(--shadow); + border-color: rgba(240, 68, 148, 0.10); } .aksrt-orders-page__item-main { diff --git a/assets/css/routes/product.css b/assets/css/routes/product.css index 8b2b1376..e99edf34 100644 --- a/assets/css/routes/product.css +++ b/assets/css/routes/product.css @@ -34,8 +34,9 @@ .aksrt-product-page__panel, .aksrt-product-editor__panel { background: var(--surface-1); - border: 1px solid var(--color-line); - border-radius: var(--radius-lg); + border: 1px solid rgba(255, 255, 255, 0.55); + box-shadow: var(--shadow-sm); + border-radius: var(--radius-2xl, 16px); padding: 20px; } @@ -123,7 +124,7 @@ gap: 6px; padding: 8px 12px; border-radius: 999px; - background: var(--surface-2); + background: var(--surface-4); color: var(--color-ink-3); font-size: 12px; font-weight: 500; @@ -144,7 +145,7 @@ align-items: center; border-radius: var(--radius-pill); padding: 6px 12px; - background: var(--surface-2); + background: var(--surface-4); color: var(--color-ink-2); font-size: 12px; font-weight: 500; @@ -185,8 +186,8 @@ .aksrt-product-page__detail-block { padding: 14px; border: 1px solid var(--color-line); - border-radius: var(--radius); - background: var(--surface-2); + border-radius: var(--radius-lg); + background: var(--surface-4); } .aksrt-product-page__meta dt { @@ -379,8 +380,9 @@ html.dark .aksrt-product-page__content img { .aksrt-product-page__sku-selector { margin: 16px 0; padding: 16px; - background: var(--surface-2); - border-radius: var(--radius); + background: var(--surface-4); + border: 1px solid var(--color-line); + border-radius: var(--radius-lg); } .aksrt-product-page__spec-group { diff --git a/assets/css/routes/profile/modals.css b/assets/css/routes/profile/modals.css index e9926eb5..9a04f1e1 100644 --- a/assets/css/routes/profile/modals.css +++ b/assets/css/routes/profile/modals.css @@ -13,9 +13,9 @@ .aksrt-modal__overlay { position: absolute; inset: 0; - background: rgba(0, 0, 0, 0.45); - backdrop-filter: blur(4px); - -webkit-backdrop-filter: blur(4px); + background: rgba(18, 18, 18, 0.48); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); animation: modalFadeIn 0.2s ease forwards; } .aksrt-modal__box { @@ -25,8 +25,9 @@ max-height: 90vh; overflow-y: auto; background: var(--surface-1); - border-radius: var(--radius); - box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.08); + border: 1px solid rgba(255, 255, 255, 0.58); + border-radius: var(--radius-2xl, 16px); + box-shadow: var(--shadow-drawer); animation: modalSlideUp 0.28s cubic-bezier(0.22, 1, 0.36, 1) forwards; } @keyframes modalFadeIn { from { opacity: 0 } to { opacity: 1 } } @@ -107,8 +108,8 @@ font-size: 14px; line-height: 1.5; color: var(--color-ink); - background: var(--surface-2); - border: 1.5px solid var(--color-line); + background: var(--surface-4, var(--surface-2)); + border: 1px solid var(--color-line); border-radius: 8px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; diff --git a/assets/css/routes/revenue.css b/assets/css/routes/revenue.css index c1b26185..31d9a76f 100644 --- a/assets/css/routes/revenue.css +++ b/assets/css/routes/revenue.css @@ -32,8 +32,9 @@ gap: 16px; padding: 20px; background: var(--surface-1); - border-radius: var(--radius-lg); - border: 1px solid var(--color-line); + border-radius: var(--radius-2xl, 16px); + border: 1px solid rgba(255, 255, 255, 0.55); + box-shadow: var(--shadow-sm); } .aksrt-revenue-page__stat-icon { @@ -94,10 +95,10 @@ .aksrt-revenue-page__list { display: flex; flex-direction: column; - gap: 1px; - background: var(--color-line); - border-radius: var(--radius-lg); - overflow: hidden; + gap: 8px; + background: transparent; + border-radius: 0; + overflow: visible; } .aksrt-revenue-page__item { @@ -106,6 +107,9 @@ gap: 12px; padding: 14px 16px; background: var(--surface-1); + border: 1px solid rgba(255, 255, 255, 0.55); + border-radius: var(--radius-lg, 10px); + box-shadow: var(--shadow-sm); } .aksrt-revenue-page__item-icon { @@ -156,16 +160,16 @@ height: 32px; line-height: 32px; text-align: center; - border-radius: var(--radius); + border-radius: var(--radius-sm); font-size: 13px; - background: var(--surface-2); + background: var(--surface-4); color: var(--color-ink-3); text-decoration: none; transition: background 0.15s, color 0.15s; } .aksrt-revenue-page__page-chip:hover { - background: var(--color-primary-1); + background: var(--color-primary-soft); color: var(--color-primary); } diff --git a/assets/css/routes/user-home.css b/assets/css/routes/user-home.css index e94a78b4..963798b5 100644 --- a/assets/css/routes/user-home.css +++ b/assets/css/routes/user-home.css @@ -11,9 +11,10 @@ .aksrt-author-hero { position: relative; overflow: hidden; - border-radius: var(--radius-lg); + border-radius: var(--radius-2xl, 16px); background: var(--surface-1); - border: 1px solid var(--color-line-soft); + border: 1px solid rgba(255, 255, 255, 0.55); + box-shadow: var(--shadow-sm); margin-bottom: 20px; } @@ -508,10 +509,10 @@ .aksrt-user-home .dashboard--public { max-width: none; background: var(--surface-1); - border-radius: var(--radius-lg, 10px); + border-radius: var(--radius-2xl, 16px); padding: 24px; - box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04); - border: 1px solid var(--color-line-soft, transparent); + box-shadow: var(--shadow-sm); + border: 1px solid rgba(255, 255, 255, 0.55); } /* Tab 栏增强 */