76 أسطر
2.2 KiB
CSS
76 أسطر
2.2 KiB
CSS
.frame-panel {
|
|
@apply rounded-2xl border border-border/90 bg-card/90 backdrop-blur-xl;
|
|
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.theme-light .frame-panel {
|
|
box-shadow: 0 20px 45px rgba(31, 22, 12, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
|
|
}
|
|
|
|
.gold-edge {
|
|
box-shadow: inset 0 0 0 1px rgba(180, 180, 180, 0.28);
|
|
}
|
|
|
|
.ornament-grid {
|
|
background-image:
|
|
radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.08) 1px, transparent 0),
|
|
linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 24%);
|
|
background-size: 20px 20px, 100% 100%;
|
|
}
|
|
|
|
.theme-light .ornament-grid {
|
|
background-image:
|
|
radial-gradient(circle at 1px 1px, rgba(120, 120, 120, 0.08) 1px, transparent 0),
|
|
linear-gradient(180deg, rgba(170, 170, 170, 0.08), transparent 30%);
|
|
}
|
|
|
|
.page-enter {
|
|
animation: fadeUp 0.45s ease-out both;
|
|
}
|
|
|
|
.shimmer-empty {
|
|
background: linear-gradient(100deg, rgba(210, 210, 210, 0.08), rgba(210, 210, 210, 0.16), rgba(210, 210, 210, 0.08));
|
|
background-size: 220% 100%;
|
|
animation: shimmer 2s linear infinite;
|
|
}
|
|
|
|
.login-shell {
|
|
position: relative;
|
|
isolation: isolate;
|
|
}
|
|
|
|
.login-shell::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
radial-gradient(circle at 20% 20%, rgba(210, 210, 210, 0.35), transparent 40%),
|
|
radial-gradient(circle at 80% 80%, rgba(160, 160, 160, 0.25), transparent 50%);
|
|
opacity: 0.8;
|
|
z-index: -2;
|
|
}
|
|
|
|
.login-shell::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background-image: radial-gradient(circle at 1px 1px, rgba(210, 210, 210, 0.14) 1px, transparent 0);
|
|
background-size: 22px 22px;
|
|
opacity: 0.6;
|
|
z-index: -1;
|
|
}
|
|
|
|
.login-card {
|
|
@apply rounded-3xl border border-border/80 bg-card/85 backdrop-blur-2xl;
|
|
box-shadow: 0 30px 70px rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(200, 200, 200, 0.2);
|
|
}
|
|
|
|
.theme-light .login-card {
|
|
box-shadow: 0 24px 50px rgba(28, 18, 8, 0.12), inset 0 0 0 1px rgba(200, 200, 200, 0.3);
|
|
}
|
|
|
|
.gold-divider {
|
|
height: 1px;
|
|
background: linear-gradient(90deg, transparent, rgba(190, 190, 190, 0.6), transparent);
|
|
}
|