Files
wordpress-theme-aksrt/assets/css/routes/user-home.css
T
kate522andClaude Fable 5 16d67c8a87 fix(user-home): hide the old panel content while the tab skeleton loads
翻页 / 切 tab 是整页替换语义(author.js 最终就是 panel.innerHTML = html),
但加载态只做了骨架的显示,旧卡片与旧页码仍留在屏上,于是先看到
「第 1 页卡片 + 脚下一摞骨架」,等接口返回才换页。

加载期收起 .aksrt-user-home__post-list 的直接子级 .posts-item 与旧翻页控件,
让骨架独占内容区;对齐参考主题 post_ajax() 的 beforeSend(replace 时
$item.remove() + find(pag).remove())。显隐仍走纯类切换,不写 inline display。

两点刻意的收窄:
- 只收直接子级 .posts-item 而非后代:骨架内层同样带 .posts-item,
  后代选择器会把骨架自己也藏掉,占位就永远出不来。
- 旧页码用 :has(.post_ajax_loader) 限定:关注 / 评论面板没有骨架,
  无条件隐藏会让它们加载时只剩一片空白。

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-10-04 13:58:09 +08:00

616 lines
16 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
/**
* AKSRT User Home / Author Page — 公开用户主页 & 作者归档页样式
*
* 原主题风格作者页布局
* 在 /user/{nicename}/ 和 /author/{nicename}/ 加载
*/
/* ============================================================
* Author Hero — 统一的作者头区(与 legacy author-header 对齐)
* ============================================================ */
.aksrt-author-hero {
position: relative;
overflow: hidden;
border-radius: var(--radius-2xl, 16px);
background: var(--surface-1);
border: none;
box-shadow: var(--shadow-sm);
margin-bottom: 20px;
}
.aksrt-author-hero__cover {
position: relative;
padding-bottom: calc(20% + 80px);
overflow: hidden;
}
.aksrt-author-hero__cover-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.aksrt-author-hero__cover-mask {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 80px;
background: linear-gradient(to top, rgba(0, 0, 0, 0.35), transparent);
pointer-events: none;
}
/* Cover meta pills — legacy .single-metabox.cover-meta parity:
* 单个胶囊容器贴封面右上角,内含 人气值 / 点赞 计数值。 */
.aksrt-author-hero__cover-metas {
position: absolute;
right: 1em;
top: 1.6em;
z-index: 2;
display: inline-flex;
flex-wrap: wrap;
align-items: center;
padding: 2px 6px;
border-radius: 100px;
background: rgba(0, 0, 0, 0.3);
color: rgba(255, 255, 255, 0.8);
font-size: 14px;
}
.aksrt-author-hero__cover-meta {
display: inline-flex;
align-items: center;
margin: 0 6px;
font-size: 13px;
}
.aksrt-author-hero__cover-meta .fa,
.aksrt-author-hero__cover-meta .icon {
margin-right: 3px;
}
.aksrt-author-hero__body {
display: flex;
align-items: flex-start;
gap: 20px;
padding: 18px 28px 24px;
margin-top: -60px;
position: relative;
z-index: 1;
}
.aksrt-author-hero__avatar {
flex-shrink: 0;
}
.aksrt-author-hero__avatar img {
width: 120px;
height: 120px;
border-radius: var(--radius);
border: 4px solid var(--surface-1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
object-fit: cover;
transition: transform 0.2s ease;
}
.aksrt-author-hero__avatar img:hover {
transform: scale(1.03);
}
.aksrt-author-hero__info {
flex: 1;
min-width: 0;
padding-top: 65px;
}
.aksrt-author-hero__name {
margin: 0 0 6px;
font-size: 1.35rem;
font-weight: 700;
color: var(--color-ink);
line-height: 1.3;
}
.aksrt-author-hero__desc {
margin: 0 0 10px;
font-size: 13px;
color: var(--color-ink-3);
line-height: 1.5;
max-width: 520px;
}
/* Counts live in the tab bar, not a hero body stats row (legacy parity). */
.aksrt-author-hero__actions {
flex-shrink: 0;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 10px;
padding-top: 68px;
}
.aksrt-author-hero__follow-btn {
display: inline-flex;
align-items: center;
gap: 8px;
}
.aksrt-author-hero__follow-btn[aria-disabled="true"] {
opacity: 0.72;
cursor: not-allowed;
}
.aksrt-author-hero__message-btn {
position: relative;
}
.aksrt-author-hero__action-badge {
position: absolute;
top: -5px;
right: -5px;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 16px;
height: 16px;
margin: 0;
padding: 0 4px;
border-radius: 999px;
background: var(--color-error, #ef4444);
color: #fff;
font-size: 11px;
font-weight: 700;
line-height: 1;
}
/* No-cover variant */
.aksrt-author-hero--no-cover {
border: 1px solid var(--color-line-soft);
}
.aksrt-author-hero--no-cover .aksrt-author-hero__body {
margin-top: 0;
padding-top: 24px;
}
.aksrt-author-hero--no-cover .aksrt-author-hero__info {
padding-top: 0;
}
.aksrt-author-hero--no-cover .aksrt-author-hero__actions {
padding-top: 0;
}
/* Author hero responsive */
@media (max-width: 767px) {
.aksrt-author-hero__body {
flex-direction: column;
align-items: center;
text-align: center;
padding: 12px 16px 20px;
}
.aksrt-author-hero__info {
padding-top: 0;
}
.aksrt-author-hero__desc {
max-width: 100%;
}
.aksrt-author-hero__actions {
padding-top: 0;
justify-content: center;
}
}
@media (max-width: 480px) {
.aksrt-author-hero__cover {
padding-bottom: calc(20% + 60px);
}
.aksrt-author-hero__cover-metas {
font-size: 13px;
}
.aksrt-author-hero__cover-meta {
margin: 0 4px;
}
.aksrt-author-hero__body {
margin-top: -40px;
gap: 14px;
}
.aksrt-author-hero__avatar img {
width: 90px;
height: 90px;
}
.aksrt-author-hero__name {
font-size: 1.15rem;
}
}
.aksrt-user-home .aksrt-user-home__layout {
align-items: start;
}
.aksrt-user-home .aksrt-user-home__aside {
display: flex;
flex-direction: column;
gap: 18px;
}
.aksrt-user-home .aksrt-user-home__contacts .profile-social-links {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.aksrt-user-home .user-home-balance-card {
padding: 28px;
border-radius: var(--radius-lg, 12px);
background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(15, 23, 42, 0.04));
border: 1px solid var(--color-line-soft, rgba(0, 0, 0, 0.06));
}
.aksrt-user-home .user-home-balance-card__label {
margin: 0 0 10px;
color: var(--color-ink-4);
font-size: 13px;
font-weight: 600;
}
.aksrt-user-home .user-home-balance-card__value {
font-size: clamp(28px, 4vw, 40px);
font-weight: 800;
line-height: 1;
color: var(--color-ink);
}
.aksrt-user-home .user-home-balance-card__hint {
margin: 14px 0 18px;
color: var(--color-ink-3);
}
/* 内容区卡片 — Zibll .author-tab.zib-widget parity(padding 15px / radius 8px) */
.aksrt-user-home .dashboard--public {
max-width: none;
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 栏 — Zibll .author-tab .tab-nav-theme parity:纯文字导航、
* 激活项加粗 + 主题色 + 20px 短横线,计数为小号内联文字。 */
.aksrt-user-home .dashboard--public .dashboard-tabs {
display: flex;
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 {
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(--focus-color, var(--color-primary, #f04494));
background: transparent;
}
.aksrt-user-home .dashboard--public .dashboard-tabs button.is-active {
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: 5px;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 2px;
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;
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: inherit;
background: transparent;
}
/* 面板内容 */
.aksrt-user-home .dashboard--public .dashboard-panel {
animation: panel-fade-in 0.25s ease;
}
/* Public author posts/favorites 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 .aksrt-user-home__post-list[data-view="list"] .posts-item {
background: transparent;
box-shadow: none;
}
/* 宽屏双列:无侧边栏全文宽时文章卡片并排两列,视觉同 zibll site-layout-1
* (zibll 用 inline-flex+calc(50%),对标记空白敏感,此处用等几何的 grid) */
@media (min-width: 992px) {
.aksrt-user-home .aksrt-user-home__post-list[data-view="list"] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
align-items: start;
margin-right: 0;
margin-left: 0;
}
.aksrt-user-home .aksrt-user-home__post-list[data-view="list"] > .posts-item {
width: auto; /* 覆盖 vendored site-layout-1 的 width: calc(50% - 16px),让卡片填满网格单元 */
margin: 0 !important; /* 抵消 vendored .posts-row > * 的 8px !important 边距 */
}
/* 骨架是网格容器自己的直接子节点:不显式跨列,它就会被当成一张卡片,
只分到一半宽度,整摞骨架全挤在单列里(翻页 / 切 tab 的占位因此变形)。
跨满全部列,并在加载态把 loader 自身变成与真实卡片同款的双列网格,
骨架行才会与卡片同宽、同轴、同列数。display 只随 is-loading 打开,
未加载时容器仍是 display:none,不会被提前撑开。 */
.aksrt-user-home .aksrt-user-home__post-list[data-view="list"] > .post_ajax_loader {
grid-column: 1 / -1;
}
.aksrt-user-home .dashboard-panel.is-loading .aksrt-user-home__post-list[data-view="list"] > .post_ajax_loader {
display: grid;
gap: 16px;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
}
/* 骨架跟随网格走:容器 margin 已归零、卡片边距已清零,
不能再叠加 .posts-row > .post_ajax_loader 内层的 8px 补偿;
宽高沿用真实卡片的网格单元,所以 vendored site-layout-1 的
calc(50% - 16px) 与剩余边距也要一并清零。 */
.aksrt-user-home .aksrt-user-home__post-list[data-view="list"] > .post_ajax_loader .posts-item {
margin-right: 0;
margin-left: 0;
margin-top: 0;
margin-bottom: 0;
width: auto;
}
}
@media (max-width: 767px) {
.aksrt-user-home .aksrt-user-home__post-list[data-view="list"] .posts-item {
padding: 10px 0;
}
}
@keyframes panel-fade-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
/* ==================== 焦点状态(无障碍)==================== */
.aksrt-user-home .dashboard--public .dashboard-tabs button:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* ==================== 空状态增强 ==================== */
.aksrt-user-home .profile-empty {
padding: 48px 20px;
}
.aksrt-user-home .profile-empty__icon {
width: 56px;
height: 56px;
margin-bottom: 14px;
}
/* ==================== 响应式 ==================== */
@media (max-width: 640px) {
.aksrt-user-home .dashboard--public {
padding: 15px;
}
.aksrt-user-home .dashboard--public .dashboard-tabs {
overflow-x: auto;
flex-wrap: nowrap;
scrollbar-width: none;
-ms-overflow-style: none;
}
.aksrt-user-home .dashboard--public .dashboard-tabs::-webkit-scrollbar {
display: none;
}
.aksrt-user-home .dashboard--public .dashboard-tabs button {
flex-shrink: 0;
white-space: nowrap;
}
}
/* User-home follow tab — Zibll parity
* 子切换复刻 zibll inc/functions/zib-author.php:407-410(list-inline splitters
* 居中文字链接,激活 focus-color);列表项为 .author-minicard inline-block
* 三列卡片流(卡片规则、640px 单列均在 vendored main.css),容器居中对齐
* zibll pane 的 text-center。 */
.aksrt-user-home .uh-follow__subtabs {
display: flex;
justify-content: center;
gap: 4px;
margin: 10px 0 16px;
padding: 0;
padding-bottom: 12px;
border-bottom: 1px solid var(--main-border-color, rgba(50, 50, 50, 0.06));
list-style: none;
}
.aksrt-user-home .uh-follow__subtab {
display: inline-flex;
align-items: baseline;
gap: 4px;
padding: 4px 12px;
font-size: 14px;
font-family: inherit;
background: none;
border: 0;
color: inherit;
text-decoration: none;
cursor: pointer;
transition: color .2s;
}
.aksrt-user-home .uh-follow__subtab:hover {
color: var(--focus-color, var(--color-primary, #f04494));
}
.aksrt-user-home .uh-follow__subtab-count {
font-size: 12px;
opacity: .8;
}
.aksrt-user-home .uh-follow__list {
text-align: center;
}
.aksrt-user-home .uh-follow__pagination {
margin-top: 16px;
text-align: center;
}
/* Full-width public home (legacy author: no commerce sidebar) */
.aksrt-user-home .content-layout--no-sidebar .content-layout__primary {
width: 100%;
max-width: 100%;
}
.aksrt-user-home .dashboard-tabs__count.opacity8 {
opacity: 0.8;
}
.aksrt-author-hero__identity {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin-top: .15rem;
}
.aksrt-author-hero__identity .aksrt-ip-geo-badge {
display: inline-flex;
align-items: center;
height: 26px;
box-sizing: border-box;
margin: 0;
padding: 0 8px;
border-radius: 999px;
font-size: 12px;
line-height: 26px;
}
.aksrt-author-hero__identity .aksrt-medal-entry,
.aksrt-author-hero__identity .badg { height: 26px; box-sizing: border-box; margin: 0; padding: 0 8px; border-radius: 999px; font-size: 12px; line-height: 26px; }
.aksrt-profile-details-modal { position: fixed; inset: 0; z-index: 10001; display: grid; place-items: center; padding: 20px; }
.aksrt-profile-details-modal[hidden] { display: none !important; }
.aksrt-profile-details-modal__backdrop { position: absolute; inset: 0; background: rgba(10, 15, 22, .52); }
.aksrt-profile-details-modal__dialog { position: relative; width: min(100%, 420px); padding: 24px; border-radius: 16px; background: var(--color-card, #fff); box-shadow: 0 24px 64px rgba(0,0,0,.24); }
.aksrt-profile-details-modal__dialog h2 { margin: 0 28px 16px 0; font-size: 18px; }
.aksrt-profile-details-modal__dialog dl { display: grid; gap: 12px; margin: 0; }
.aksrt-profile-details-modal__dialog dl div { display: grid; grid-template-columns: 84px 1fr; gap: 12px; }
.aksrt-profile-details-modal__dialog dt { color: var(--color-muted, #6b7280); }
.aksrt-profile-details-modal__dialog dd { margin: 0; overflow-wrap: anywhere; }
.aksrt-profile-details-modal__close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; font-size: 24px; cursor: pointer; }
/* Button-driven panel pagination + fragments (no URL state) */
.aksrt-user-home .profile-pagination button.page-numbers {
font: inherit;
cursor: pointer;
}
.aksrt-user-home .profile-pagination button.page-numbers:hover {
color: var(--color-primary);
border-color: var(--color-primary);
background: var(--color-primary-soft);
}
.aksrt-user-home .dashboard-panel.is-loading {
pointer-events: none;
}
/* 面板翻页的加载态由列表骨架承担(与文章列表 .post_ajax_loader 同一契约)。 */
.aksrt-user-home .dashboard-panel .post_ajax_loader {
display: none;
}
/* 加载期收起旧页内容:翻页 / 切 tab 是整页替换语义(author.js 最终就是
panel.innerHTML = html),骨架必须独占内容区,而不是追加在旧卡片下方 ——
否则先看到「第 1 页卡片 + 脚下一摞骨架」,等接口返回才换页。
对齐参考主题 post_ajax() 的 beforeSend:replace 时 $item.remove() +
find(pag).remove()。收 display 而非删节点,仍守住「不写 inline display」契约。
只收 .aksrt-user-home__post-list 的**直接子级** .posts-item:骨架内层同样带
.posts-item,写成后代选择器会连骨架自己一起隐藏掉。 */
.aksrt-user-home .dashboard-panel.is-loading .aksrt-user-home__post-list > .posts-item {
display: none;
}
/* 旧翻页控件同属被替换的旧页内容,且高亮的是旧页码,加载期一并收起。
用 :has() 限定「这个面板真有骨架」:关注 / 评论面板没有 .post_ajax_loader,
无条件隐藏会让它们加载时只剩一片空白。 */
.aksrt-user-home .dashboard-panel.is-loading:has(.post_ajax_loader) .profile-pagination {
display: none;
}
.aksrt-user-home .dashboard-panel.is-loading .post_ajax_loader {
display: block;
animation: aksrtFadeIn 0.2s ease both;
}
@media (prefers-reduced-motion: reduce) {
.aksrt-user-home .dashboard-panel .post_ajax_loader .placeholder {
animation: none;
}
}