335 lines
8.9 KiB
CSS
335 lines
8.9 KiB
CSS
:root {
|
||
--hy-theme-bg: #fbf8ff;
|
||
--hy-theme-surface: rgba(255, 255, 255, 0.96);
|
||
--hy-theme-surface-soft: #fdfaff;
|
||
--hy-theme-text: #282333;
|
||
--hy-theme-muted: #8d879a;
|
||
--hy-theme-line: #f0e8fb;
|
||
--hy-theme-primary: #dbc8ff;
|
||
--hy-theme-primary-strong: #c5a6f6;
|
||
--hy-theme-primary-deep: #7d57c7;
|
||
--hy-theme-primary-soft: #f4ebff;
|
||
--hy-theme-accent: #cfb8fb;
|
||
--hy-theme-success: #31c6a8;
|
||
--hy-theme-danger: #d95d72;
|
||
--hy-theme-shadow: 0 10px 24px rgba(132, 90, 212, 0.075);
|
||
--hy-theme-button: #7d57c7;
|
||
--hy-theme-button-disabled: #eadffc;
|
||
--hy-theme-button-disabled-text: #9a8faa;
|
||
--hy-theme-button-shadow: 0 8px 18px rgba(125, 87, 199, 0.18);
|
||
--hy-theme-button-disabled-shadow: none;
|
||
--hy-theme-focus-ring: rgba(197, 166, 246, 0.18);
|
||
--hy-theme-role-shadow: 0 6px 16px rgba(91, 62, 142, 0.08);
|
||
--hy-theme-modal-shadow: 0 22px 54px rgba(40, 25, 72, 0.26);
|
||
--hy-theme-checkout-shadow: 0 -10px 28px rgba(40, 25, 72, 0.12);
|
||
--hy-theme-radius-tiny: 3px;
|
||
--hy-theme-radius-icon: 11px;
|
||
--hy-theme-radius-small: 12px;
|
||
--hy-theme-radius-control: 14px;
|
||
--hy-theme-radius-card: 16px;
|
||
--hy-theme-radius-language: 17px;
|
||
--hy-theme-radius-modal: 22px;
|
||
--hy-theme-radius-pill: 999px;
|
||
--hy-theme-radius-circle: 50%;
|
||
--hy-theme-hero: linear-gradient(
|
||
151deg,
|
||
#f0e6ff 0%,
|
||
#fffbff 58%,
|
||
rgba(251, 248, 255, 0.88) 100%
|
||
);
|
||
}
|
||
|
||
:root[data-hy-app-code='yumi'] {
|
||
--hy-theme-bg: #f5faf6;
|
||
--hy-theme-surface: rgba(255, 255, 255, 0.86);
|
||
--hy-theme-surface-soft: rgba(248, 253, 250, 0.78);
|
||
--hy-theme-text: #1d1d1f;
|
||
--hy-theme-muted: #6e746f;
|
||
--hy-theme-line: rgba(52, 199, 89, 0.18);
|
||
--hy-theme-primary: #34c759;
|
||
--hy-theme-primary-strong: #28a84d;
|
||
--hy-theme-primary-deep: #1f7a3d;
|
||
--hy-theme-primary-soft: rgba(52, 199, 89, 0.13);
|
||
--hy-theme-accent: #8fd8a8;
|
||
--hy-theme-success: #34c759;
|
||
--hy-theme-shadow: 0 18px 44px rgba(24, 95, 50, 0.08);
|
||
--hy-theme-button: #248a45;
|
||
--hy-theme-button-disabled: rgba(52, 199, 89, 0.2);
|
||
--hy-theme-button-disabled-text: rgba(31, 122, 61, 0.58);
|
||
--hy-theme-button-shadow: 0 12px 28px rgba(36, 138, 69, 0.2);
|
||
--hy-theme-focus-ring: rgba(52, 199, 89, 0.18);
|
||
--hy-theme-role-shadow: 0 10px 24px rgba(24, 95, 50, 0.1);
|
||
--hy-theme-modal-shadow: 0 24px 70px rgba(16, 76, 40, 0.18);
|
||
--hy-theme-checkout-shadow: 0 -14px 34px rgba(16, 76, 40, 0.1);
|
||
--hy-theme-radius-tiny: 4px;
|
||
--hy-theme-radius-icon: 13px;
|
||
--hy-theme-radius-small: 14px;
|
||
--hy-theme-radius-control: 16px;
|
||
--hy-theme-radius-card: 22px;
|
||
--hy-theme-radius-language: 999px;
|
||
--hy-theme-radius-modal: 28px;
|
||
--hy-theme-radius-pill: 999px;
|
||
--hy-theme-radius-circle: 50%;
|
||
--hy-theme-hero: linear-gradient(180deg, #fbfffc 0%, #eef9f2 100%);
|
||
}
|
||
|
||
:root[data-hy-app-code='aslan'] {
|
||
--hy-theme-bg: #fffdf3;
|
||
--hy-theme-surface: rgba(255, 255, 255, 0.98);
|
||
--hy-theme-surface-soft: #fffbf0;
|
||
--hy-theme-line: #efdc9f;
|
||
--hy-theme-primary: #ffe071;
|
||
--hy-theme-primary-strong: #f1bd2d;
|
||
--hy-theme-primary-deep: #8a5a00;
|
||
--hy-theme-primary-soft: #fff2bd;
|
||
--hy-theme-accent: #f6c43c;
|
||
--hy-theme-success: #2aa875;
|
||
--hy-theme-shadow: 0 10px 24px rgba(138, 90, 0, 0.08);
|
||
--hy-theme-button: #9b6500;
|
||
--hy-theme-button-disabled: #f0dfa9;
|
||
--hy-theme-button-disabled-text: #8f7b4c;
|
||
--hy-theme-button-shadow: 0 8px 18px rgba(138, 90, 0, 0.18);
|
||
--hy-theme-focus-ring: rgba(155, 101, 0, 0.18);
|
||
--hy-theme-role-shadow: 0 6px 16px rgba(138, 90, 0, 0.08);
|
||
--hy-theme-modal-shadow: 0 22px 54px rgba(92, 60, 0, 0.22);
|
||
--hy-theme-checkout-shadow: 0 -10px 28px rgba(92, 60, 0, 0.1);
|
||
--hy-theme-radius-tiny: 0;
|
||
--hy-theme-radius-icon: 0;
|
||
--hy-theme-radius-small: 0;
|
||
--hy-theme-radius-control: 0;
|
||
--hy-theme-radius-card: 0;
|
||
--hy-theme-radius-language: 0;
|
||
--hy-theme-radius-modal: 0;
|
||
--hy-theme-radius-pill: 0;
|
||
--hy-theme-radius-circle: 0;
|
||
}
|
||
|
||
.hy-loading {
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 90;
|
||
display: none;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 10px;
|
||
width: 100vw;
|
||
min-height: 100vh;
|
||
background: rgba(10, 7, 18, 0.48);
|
||
color: var(--hy-theme-muted);
|
||
text-align: center;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
.hy-loading.active,
|
||
.hy-loading.is-active {
|
||
display: flex;
|
||
}
|
||
|
||
.hy-loading__mascot {
|
||
width: 72px;
|
||
height: 72px;
|
||
background: url('./png/loading-cat.webp') center / contain no-repeat;
|
||
animation: hy-loading-float 1.6s ease-in-out infinite;
|
||
}
|
||
|
||
.hy-loading__spinner {
|
||
width: 24px;
|
||
height: 24px;
|
||
border: 2px solid rgba(125, 87, 199, 0.18);
|
||
border-top-color: var(--hy-theme-button);
|
||
border-radius: 50%;
|
||
animation: hy-loading-spin 0.86s linear infinite;
|
||
}
|
||
|
||
.hy-loading__text {
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
line-height: 16px;
|
||
}
|
||
|
||
@keyframes hy-loading-float {
|
||
0%,
|
||
100% {
|
||
transform: translateY(0);
|
||
}
|
||
50% {
|
||
transform: translateY(-6px);
|
||
}
|
||
}
|
||
|
||
@keyframes hy-loading-spin {
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.hy-loading__mascot,
|
||
.hy-loading__spinner {
|
||
animation: none;
|
||
}
|
||
}
|
||
|
||
/* 通用骨架屏：加载中给文本/块级占位元素加 .hy-skeleton 变成流光占位条，数据到达后移除该类恢复真实内容。
|
||
底色取主题软色变量，lalu/yumi/aslan 三套主题自动跟随；圆形占位（头像等）叠加 .hy-skeleton--circle。 */
|
||
.hy-skeleton {
|
||
position: relative;
|
||
display: inline-block;
|
||
overflow: hidden;
|
||
min-width: 3.2em;
|
||
min-height: 1em;
|
||
border-radius: var(--hy-skeleton-radius, 6px);
|
||
background: linear-gradient(
|
||
90deg,
|
||
var(--hy-theme-primary-soft) 25%,
|
||
var(--hy-theme-line) 37%,
|
||
var(--hy-theme-primary-soft) 63%
|
||
);
|
||
background-size: 400% 100%;
|
||
color: transparent !important;
|
||
animation: hy-skeleton-shimmer 1.4s ease infinite;
|
||
pointer-events: none;
|
||
user-select: none;
|
||
}
|
||
|
||
.hy-skeleton--circle {
|
||
--hy-skeleton-radius: 50%;
|
||
}
|
||
|
||
/* 占位期间隐藏子节点（图标等），避免真实内容在流光条上透出。 */
|
||
.hy-skeleton > * {
|
||
visibility: hidden;
|
||
}
|
||
|
||
@keyframes hy-skeleton-shimmer {
|
||
0% {
|
||
background-position: 100% 50%;
|
||
}
|
||
100% {
|
||
background-position: 0 50%;
|
||
}
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.hy-skeleton {
|
||
animation: none;
|
||
}
|
||
}
|
||
|
||
/* 页面级骨架屏（common/skeleton.js）：整页覆盖一层模拟页面结构的占位层，
|
||
数据就绪后整层淡出移除。块级元素复用上面的 .hy-skeleton 流光条。 */
|
||
.hy-page-skeleton {
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 80;
|
||
display: none;
|
||
overflow: hidden;
|
||
padding: calc(14px + env(safe-area-inset-top)) 16px 30px;
|
||
background: var(--hy-theme-bg);
|
||
opacity: 1;
|
||
transition: opacity 0.2s ease;
|
||
}
|
||
|
||
.hy-page-skeleton.is-active {
|
||
display: block;
|
||
}
|
||
|
||
.hy-page-skeleton.is-leaving {
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* 骨架层中央叠加拉鲁猫 loading 图 + 转圈，视觉复用 .hy-loading__mascot / .hy-loading__spinner。 */
|
||
.hy-page-skeleton__mascot-wrap {
|
||
position: absolute;
|
||
inset: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 10px;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.hy-page-skeleton__header {
|
||
display: grid;
|
||
grid-template-columns: 36px minmax(0, 1fr) 36px;
|
||
align-items: center;
|
||
justify-items: center;
|
||
height: 58px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.hy-page-skeleton__header .hy-skeleton:nth-child(2) {
|
||
width: 42%;
|
||
height: 20px;
|
||
}
|
||
|
||
.hy-page-skeleton__card {
|
||
margin-bottom: 12px;
|
||
padding: 14px;
|
||
border: 1px solid var(--hy-theme-line);
|
||
border-radius: var(--hy-theme-radius-card);
|
||
background: var(--hy-theme-surface);
|
||
}
|
||
|
||
.hy-page-skeleton__profile {
|
||
display: grid;
|
||
grid-template-columns: 76px minmax(0, 1fr);
|
||
gap: 12px;
|
||
align-items: center;
|
||
min-height: 112px;
|
||
}
|
||
|
||
.hy-page-skeleton__lines {
|
||
display: grid;
|
||
gap: 10px;
|
||
}
|
||
|
||
.hy-page-skeleton__lines .hy-skeleton:first-child {
|
||
width: 56%;
|
||
height: 18px;
|
||
}
|
||
|
||
.hy-page-skeleton__lines .hy-skeleton:last-child {
|
||
width: 38%;
|
||
height: 13px;
|
||
}
|
||
|
||
.hy-page-skeleton__grid {
|
||
display: grid;
|
||
gap: 12px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.hy-page-skeleton__cell {
|
||
display: grid;
|
||
justify-items: start;
|
||
gap: 9px;
|
||
padding: 16px 13px;
|
||
border: 1px solid var(--hy-theme-line);
|
||
border-radius: var(--hy-theme-radius-card);
|
||
background: var(--hy-theme-surface);
|
||
}
|
||
|
||
.hy-page-skeleton__cell--center {
|
||
justify-items: center;
|
||
}
|
||
|
||
.hy-page-skeleton__cell .hy-skeleton {
|
||
height: 13px;
|
||
}
|
||
|
||
.hy-page-skeleton__cell .hy-skeleton--circle {
|
||
width: 46px;
|
||
height: 46px;
|
||
min-width: 46px;
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.hy-page-skeleton {
|
||
transition: none;
|
||
}
|
||
}
|