kate522
9375b1c30c
- assets/vendor 全量迁移: fontawesome5→assets/fontawesome5, css→assets/css, js→assets/js/runtime(避开 14 个同名自有文件), img 合并去重→assets/img, fonts→assets/fonts; 删除 assets/vendor - libs 五个与 widgets/third-party 字节相同的库不重复入库, loader paths 改指向 - 运行时切换: _win.uri=assets 根, loader baseUrl=/js/runtime, enlighter 注入 路径同步; PHP 7 个引用文件切换并改名 $zibll_*→$runtime_* - 去品牌: Qinver 头注释/品牌 console.log/演示链接清除, 默认文案中性化 - 功能标识符改名: zib__→aksrt__, zib_ajax→aksrt_ajax, window.zib→ window.aksrtLegacy, zibllblock/*→aksrtblock/*, .zib-widget→.aksrt-panel, .zib-slider→.aksrt-slider, zib_menu_options meta 键等 - 自有 CSS 改名: legacy-utilities/compat-vars/footer shell - admin SPA 重建; 契约测试同步(路径/断言/文件更名) - 例外保留: tests/visual 对照环境与 fixtures 前缀(外部 Zibll 产品引用) 验证: php -l 133 个改动文件通过; runtime 86 个 JS node --check 通过; 契约测试 68/70(2 个失败经 stash 对照确认为存量问题)
142 lines
2.3 KiB
CSS
142 lines
2.3 KiB
CSS
/* ========== 骨架屏加载 — 对齐 legacy skeleton loading ========== */
|
|
.skeleton {
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: var(--surface-2, #eee);
|
|
border-radius: var(--radius, 8px);
|
|
}
|
|
|
|
.skeleton::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: linear-gradient(
|
|
90deg,
|
|
transparent 0%,
|
|
rgba(255, 255, 255, 0.4) 50%,
|
|
transparent 100%
|
|
);
|
|
animation: skeleton-shimmer 1.5s infinite;
|
|
}
|
|
|
|
@keyframes skeleton-shimmer {
|
|
0% { transform: translateX(-100%); }
|
|
100% { transform: translateX(100%); }
|
|
}
|
|
|
|
/* 骨架屏变体 */
|
|
.skeleton-text {
|
|
height: 14px;
|
|
border-radius: 4px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.skeleton-text--title {
|
|
height: 20px;
|
|
width: 60%;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.skeleton-text--short {
|
|
width: 40%;
|
|
}
|
|
|
|
.skeleton-text--medium {
|
|
width: 70%;
|
|
}
|
|
|
|
.skeleton-avatar {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.skeleton-avatar--sm {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
|
|
.skeleton-avatar--lg {
|
|
width: 64px;
|
|
height: 64px;
|
|
}
|
|
|
|
.skeleton-thumb {
|
|
width: 100%;
|
|
aspect-ratio: 16 / 9;
|
|
border-radius: var(--radius, 8px);
|
|
}
|
|
|
|
.skeleton-thumb--square {
|
|
aspect-ratio: 1;
|
|
}
|
|
|
|
.skeleton-thumb--card {
|
|
aspect-ratio: 16 / 10;
|
|
border-radius: var(--radius, 8px) var(--radius, 8px) 0 0;
|
|
}
|
|
|
|
/* 卡片骨架屏 */
|
|
.skeleton-card {
|
|
background: var(--surface-1, #fff);
|
|
border-radius: var(--radius, 8px);
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.skeleton-card__thumb {
|
|
width: 100%;
|
|
aspect-ratio: 16 / 10;
|
|
}
|
|
|
|
.skeleton-card__body {
|
|
padding: 14px 16px;
|
|
}
|
|
|
|
.skeleton-card__meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
/* 评论骨架屏 */
|
|
.skeleton-comment {
|
|
display: flex;
|
|
gap: 12px;
|
|
padding: 16px 0;
|
|
border-bottom: 1px solid var(--color-line-soft, rgba(0, 0, 0, 0.03));
|
|
}
|
|
|
|
.skeleton-comment__body {
|
|
flex: 1;
|
|
}
|
|
|
|
.skeleton-comment__header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
/* 通用骨架屏容器 */
|
|
.skeleton-list .skeleton-item {
|
|
padding: 12px 0;
|
|
border-bottom: 1px solid var(--color-line-soft, rgba(0, 0, 0, 0.03));
|
|
}
|
|
|
|
.skeleton-list .skeleton-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* 减弱动画偏好 */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.skeleton::after {
|
|
animation: none;
|
|
}
|
|
}
|