stringadmin
0fc180637c
通过 display:none 模式实现轻量 KeepAlive，电商页面首次访问后保持挂载， 切换到其他页面再切回时所有右侧面板状态（上传图片、生成进度、结果）完整保留。 同时清理项目中的临时文件和本地冗余图片。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
106 lines
2.4 KiB
CSS
106 lines
2.4 KiB
CSS
/* Shared primitives for new CSS. Keep legacy component debt in legacy-components.css. */
|
|
.ui-surface {
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: var(--radius-lg);
|
|
background: var(--surface-panel);
|
|
box-shadow: var(--shadow-panel);
|
|
}
|
|
|
|
.ui-muted {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.ui-focus-ring:focus-visible {
|
|
outline: 2px solid rgba(var(--accent-rgb), 0.48);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.page-loading-skeleton {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 200px;
|
|
padding: 32px;
|
|
}
|
|
|
|
.page-loading-skeleton__bar {
|
|
width: 40%;
|
|
height: 24px;
|
|
border-radius: 8px;
|
|
background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.1), rgba(255,255,255,0.04));
|
|
background-size: 220% 100%;
|
|
animation: skeleton-shimmer 1.4s ease infinite;
|
|
}
|
|
|
|
.page-loading-skeleton__row {
|
|
display: flex;
|
|
gap: 16px;
|
|
}
|
|
|
|
.page-loading-skeleton__card {
|
|
flex: 1;
|
|
height: 140px;
|
|
border-radius: 14px;
|
|
background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.1), rgba(255,255,255,0.04));
|
|
background-size: 220% 100%;
|
|
animation: skeleton-shimmer 1.4s ease infinite;
|
|
animation-delay: 0.15s;
|
|
}
|
|
|
|
.page-loading-skeleton__block {
|
|
width: 100%;
|
|
height: 200px;
|
|
border-radius: 14px;
|
|
background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.1), rgba(255,255,255,0.04));
|
|
background-size: 220% 100%;
|
|
animation: skeleton-shimmer 1.4s ease infinite;
|
|
animation-delay: 0.3s;
|
|
}
|
|
|
|
.page-transition-wrap {
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* Collapse when empty (e.g. KeepAlive pages rendered outside PageTransition) */
|
|
.page-transition-wrap:empty {
|
|
height: 0;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* page-motion--exit moved to page-transition.css */
|
|
|
|
.page-loading-center {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 200px;
|
|
gap: 12px;
|
|
}
|
|
|
|
.page-loading-center__text {
|
|
font: 400 13px/1 'PingFang SC', 'Microsoft YaHei UI', system-ui, sans-serif;
|
|
color: var(--text-muted, rgba(255,255,255,.45));
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.page-loading-spinner {
|
|
width: 32px;
|
|
height: 32px;
|
|
border: 3px solid var(--border-subtle, #e5e5e5);
|
|
border-top-color: var(--accent, #0d9488);
|
|
border-radius: 50%;
|
|
animation: page-spin 0.7s linear infinite;
|
|
}
|
|
|
|
@keyframes page-spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|