kate522
e1f176429b
- 评论项/表单/工具栏/筛选/分页/空状态 DOM 全部替换为 zibll 原始类名 （li.comment、comt-main、comt-meta、list-inline、dropup 工具栏、 theme-pagination/pagenav、post_ajax_loader 骨架等） - 移植 zibll main.css L9412–9751 桌面 + 移动端评论样式， 缺失基础组件（title-theme/dropdown-menu/line-form/tab-nav-theme 等） 以 #comments 作用域补齐 - 删除全部 aksrt-comment__* 旧类名与旧样式，无兼容层 - JS 选择器对齐 zibll DOM：片段整块替换 #postcomments、骨架加载、 跳页输入、prepend 插入、addComment onclick 剥离， 移除 WP comment-reply enqueue 避免双 moveForm - 表情资源替换为 zibll 全套 gif（内容逐字节一致，git 无差异） - REST 后端 (CommentActions) 不变 验证：php -l 全部通过；5 个改动 JS 语法校验通过； node --test tests/widget-system/post-visual-contract.test.cjs 12/12 通过
102 lines
1.6 KiB
CSS
102 lines
1.6 KiB
CSS
/* ========== 空状态 — 对齐 zibll empty state ========== */
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 60px 20px;
|
|
color: var(--color-ink-3, #777);
|
|
}
|
|
|
|
.empty-state__icon {
|
|
font-size: 56px;
|
|
color: var(--surface-3, #e8e8e8);
|
|
margin-bottom: 16px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.empty-state__icon i {
|
|
display: inline-block;
|
|
}
|
|
|
|
.empty-state__title {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: var(--color-ink-2, #4e5358);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.empty-state__desc {
|
|
font-size: 13px;
|
|
color: var(--color-ink-4, #999);
|
|
margin-bottom: 20px;
|
|
max-width: 320px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.empty-state__action {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
/* 空状态变体 */
|
|
.empty-state--sm {
|
|
padding: 30px 16px;
|
|
}
|
|
|
|
.empty-state--sm .empty-state__icon {
|
|
font-size: 40px;
|
|
}
|
|
|
|
.empty-state--sm .empty-state__title {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.empty-state--sm .empty-state__desc {
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* 搜索空状态 */
|
|
.search-empty {
|
|
text-align: center;
|
|
padding: 80px 20px;
|
|
}
|
|
|
|
.search-empty__icon {
|
|
font-size: 64px;
|
|
color: var(--surface-3, #e8e8e8);
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.search-empty__title {
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
color: var(--color-ink-2, #4e5358);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.search-empty__suggestions {
|
|
font-size: 13px;
|
|
color: var(--color-ink-4, #999);
|
|
}
|
|
|
|
.search-empty__suggestions a {
|
|
color: var(--color-primary, #f04494);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.search-empty__suggestions a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* 移动端 */
|
|
@media (max-width: 767px) {
|
|
.empty-state {
|
|
padding: 40px 16px;
|
|
}
|
|
|
|
.empty-state__icon {
|
|
font-size: 44px;
|
|
}
|
|
}
|