diff --git a/assets/css/routes/user-home.css b/assets/css/routes/user-home.css index 31e5397b..87e10e4b 100644 --- a/assets/css/routes/user-home.css +++ b/assets/css/routes/user-home.css @@ -317,81 +317,85 @@ color: var(--color-ink-3); } -/* 内容区卡片 — 覆盖全局 .dashboard max-width,与头部卡片等宽 */ +/* 内容区卡片 — Zibll .author-tab.zib-widget parity(padding 15px / radius 8px) */ .aksrt-user-home .dashboard--public { max-width: none; - background: var(--surface-1); - border-radius: var(--radius-2xl, 16px); - padding: 24px; - box-shadow: var(--shadow-sm); + background: var(--main-bg-color, #fff); + border-radius: var(--main-radius, 8px); + padding: 15px; + box-shadow: 0 0 10px var(--main-shadow, rgba(116, 116, 116, 0.08)); border: none; } -/* Tab 栏增强 */ +/* Tab 栏 — Zibll .author-tab .tab-nav-theme parity:纯文字导航、 + * 激活项加粗 + 主题色 + 20px 短横线,计数为小号内联文字。 */ .aksrt-user-home .dashboard--public .dashboard-tabs { display: flex; - gap: 4px; - margin-bottom: 20px; - padding-bottom: 12px; - border-bottom: 2px solid var(--color-line-soft, rgba(0,0,0,0.06)); + gap: 0; + margin: 0 -10px 12px; + padding-bottom: 6px; + border-bottom: 1px solid var(--main-border-color, rgba(50, 50, 50, 0.06)); + background: var(--main-bg-color, #fff); } .aksrt-user-home .dashboard--public .dashboard-tabs button { - padding: 8px 16px; - border-radius: 8px; - font-size: 14px; - font-weight: 500; - color: var(--color-ink-3); - background: transparent; - border: none; - cursor: pointer; - transition: all 0.2s ease; position: relative; + padding: 0 10px 8px; + border: none; + border-bottom: none; + border-radius: 0; + margin-bottom: 0; + font-size: 16px; + font-weight: 400; + line-height: 1.4; + color: var(--muted-2-color, #999); + background: transparent; + cursor: pointer; + transition: color 0.2s ease; } .aksrt-user-home .dashboard--public .dashboard-tabs button:hover { - color: var(--color-ink); - background: var(--surface-2); + color: var(--focus-color, var(--color-primary, #f04494)); + background: transparent; } .aksrt-user-home .dashboard--public .dashboard-tabs button.is-active { - color: var(--color-primary); - background: var(--color-primary-soft); - font-weight: 600; + color: var(--focus-color, var(--color-primary, #f04494)); + background: transparent; + border-bottom-color: transparent; + font-weight: 700; } .aksrt-user-home .dashboard--public .dashboard-tabs button.is-active::after { content: ''; position: absolute; - bottom: -14px; - left: 50%; - transform: translateX(-50%); - width: 24px; + bottom: 5px; + left: 0; + width: 20px; height: 2px; - background: var(--color-primary); - border-radius: 1px; + background: var(--theme-color, var(--color-primary, #f04494)); + border-radius: 5px; + box-shadow: 1px 1px 3px -1px var(--theme-color, var(--color-primary, #f04494)); } .aksrt-user-home .dashboard--public .dashboard-tabs__count { - display: inline-flex; - align-items: center; - justify-content: center; - min-width: 18px; - height: 18px; - padding: 0 5px; - margin-left: 5px; - font-size: 11px; - font-weight: 600; - line-height: 1; - color: var(--color-ink-4); - background: var(--surface-3); - border-radius: 100px; - font-variant-numeric: tabular-nums; + display: inline; + min-width: 0; + height: auto; + padding: 0; + margin-left: 3px; + font-size: 0.9em; + font-weight: inherit; + font-variant-numeric: inherit; + line-height: inherit; + color: inherit; + background: transparent; + border-radius: 0; } .aksrt-user-home .dashboard--public .dashboard-tabs button.is-active .dashboard-tabs__count { - color: var(--color-primary); - background: var(--color-primary-soft); + color: inherit; + background: transparent; } /* 面板内容 */ @@ -399,15 +403,23 @@ animation: panel-fade-in 0.25s ease; } -/* Public author posts follow Zibll's single-column author-tab list - * (zibll css/main.css: .author-tab .posts-item / .author-tab .no_margin:first-of-type). */ +/* Public author posts follow Zibll's author-tab list + * (zibll css/main.css: .author-tab .posts-item + the ≥992px no-sidebar + * two-column rule .site-layout-1 .posts-item:not(.card)). */ .aksrt-user-home #panel-posts .aksrt-user-home__post-list .posts-item { background: transparent; box-shadow: none; } -.aksrt-user-home #panel-posts .aksrt-user-home__post-list .no_margin:first-of-type { - margin-top: 0; +/* 宽屏双列:无侧边栏全文宽时文章卡片并排两列,同 zibll site-layout-1 */ +@media (min-width: 992px) { + .aksrt-user-home #panel-posts .aksrt-user-home__post-list .posts-item { + display: inline-flex; + width: calc(50% - 16px); + margin: 8px; + border-radius: var(--main-radius, 8px); + vertical-align: top; + } } @media (max-width: 767px) { @@ -442,7 +454,7 @@ @media (max-width: 640px) { .aksrt-user-home .dashboard--public { - padding: 16px; + padding: 15px; } .aksrt-user-home .dashboard--public .dashboard-tabs { diff --git a/tests/widget-system/post-visual-contract.test.cjs b/tests/widget-system/post-visual-contract.test.cjs index 657b2e0b..7aab439e 100644 --- a/tests/widget-system/post-visual-contract.test.cjs +++ b/tests/widget-system/post-visual-contract.test.cjs @@ -322,9 +322,8 @@ test('profile routes load versioned leaf styles and keep dialogs hidden initiall assert.match(userCenterJs, /function closeModal\(m\)[\s\S]*?m\.hidden = true;/); assert.match(userHomeCss, /\.aksrt-profile-details-modal\[hidden\]\s*\{\s*display:\s*none\s*!important;\s*\}/); assert.match(userHomeCss, /\.aksrt-user-home #panel-posts \.aksrt-user-home__post-list \.posts-item\s*\{[^}]*background:\s*transparent;[^}]*box-shadow:\s*none;/); - assert.match(userHomeCss, /\.aksrt-user-home #panel-posts \.aksrt-user-home__post-list \.no_margin:first-of-type\s*\{[^}]*margin-top:\s*0;/); + assert.match(userHomeCss, /@media \(min-width: 992px\)\s*\{[\s\S]*?\.aksrt-user-home #panel-posts \.aksrt-user-home__post-list \.posts-item\s*\{[^}]*display:\s*inline-flex;[^}]*width:\s*calc\(50% - 16px\);[^}]*vertical-align:\s*top;/); assert.match(userHomeCss, /@media \(max-width: 767px\)\s*\{[\s\S]*?\.aksrt-user-home #panel-posts \.aksrt-user-home__post-list \.posts-item\s*\{[^}]*padding:\s*10px 0;/); - assert.doesNotMatch(userHomeCss, /#panel-posts[^{]*\{[^}]*calc\(50% - 16px\)/); assert.match(profileLayoutCss, /\.aksrt-cover-menu__panel\[hidden\]\s*\{\s*display:\s*none\s*!important;\s*\}/); assert.match(profileLayoutCss, /#aksrt-bg-file-input\[hidden\],[\s\S]*?#aksrt-avatar-file-input\[hidden\][\s\S]*?display:\s*none\s*!important;/); assert.match(settingsSecurity, /data-modal="email-modal"[\s\S]*?<\/button>\s*<\/div>\s*