sundynix/sundynix-micro-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 炫酷的登录页

Browse Source
This commit is contained in:
Blizzard
2026-04-28 16:43:34 +08:00
parent 3cade8e7ef
commit ccb36fa59c
34 changed files with 2390 additions and 253 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/index.css
+55 -52
View File
@@ -3,34 +3,34 @@
@custom-variant dark (&:is(.dark *));
@theme {
--color-background: oklch(0.98 0.01 145);
--color-foreground: oklch(0.15 0.02 145);
--color-background: oklch(0.98 0.01 var(--theme-hue, 145));
--color-foreground: oklch(0.15 0.02 var(--theme-hue, 145));
--color-card: oklch(1 0 0);
--color-card-foreground: oklch(0.15 0.02 145);
--color-card-foreground: oklch(0.15 0.02 var(--theme-hue, 145));
--color-popover: oklch(1 0 0);
--color-popover-foreground: oklch(0.15 0.02 145);
--color-primary: oklch(0.55 0.12 145);
--color-popover-foreground: oklch(0.15 0.02 var(--theme-hue, 145));
--color-primary: oklch(var(--theme-l, 0.55) var(--theme-c, 0.12) var(--theme-hue, 145));
--color-primary-foreground: oklch(1 0 0);
--color-secondary: oklch(0.96 0.01 145);
--color-secondary-foreground: oklch(0.35 0.08 145);
--color-muted: oklch(0.96 0.01 145);
--color-muted-foreground: oklch(0.55 0.02 145);
--color-accent: oklch(0.96 0.01 145);
--color-accent-foreground: oklch(0.35 0.08 145);
--color-secondary: oklch(0.96 0.01 var(--theme-hue, 145));
--color-secondary-foreground: oklch(0.35 0.08 var(--theme-hue, 145));
--color-muted: oklch(0.96 0.01 var(--theme-hue, 145));
--color-muted-foreground: oklch(0.55 0.02 var(--theme-hue, 145));
--color-accent: oklch(0.96 0.01 var(--theme-hue, 145));
--color-accent-foreground: oklch(0.35 0.08 var(--theme-hue, 145));
--color-destructive: oklch(0.58 0.18 25);
--color-destructive-foreground: oklch(1 0 0);
--color-border: oklch(0.92 0.01 145);
--color-input: oklch(0.92 0.01 145);
--color-ring: oklch(0.55 0.12 145);
--color-border: oklch(0.92 0.01 var(--theme-hue, 145));
--color-input: oklch(0.92 0.01 var(--theme-hue, 145));
--color-ring: oklch(var(--theme-l, 0.55) var(--theme-c, 0.12) var(--theme-hue, 145));
--color-sidebar-background: oklch(0.985 0.005 100 / 0.8);
--color-sidebar-foreground: oklch(0.30 0.02 140);
--color-sidebar-primary: oklch(0.55 0.12 145);
--color-sidebar-background: oklch(0.985 0.005 var(--theme-hue, 145) / 0.8);
--color-sidebar-foreground: oklch(0.30 0.02 var(--theme-hue, 145));
--color-sidebar-primary: oklch(var(--theme-l, 0.55) var(--theme-c, 0.12) var(--theme-hue, 145));
--color-sidebar-primary-foreground: oklch(0.99 0 0);
--color-sidebar-accent: oklch(0.95 0.02 135);
--color-sidebar-accent-foreground: oklch(0.35 0.08 145);
--color-sidebar-border: oklch(0.90 0.01 110 / 0.3);
--color-sidebar-ring: oklch(0.55 0.12 145);
--color-sidebar-accent: oklch(0.95 0.02 var(--theme-hue, 145));
--color-sidebar-accent-foreground: oklch(0.35 0.08 var(--theme-hue, 145));
--color-sidebar-border: oklch(0.90 0.01 var(--theme-hue, 145) / 0.3);
--color-sidebar-ring: oklch(var(--theme-l, 0.55) var(--theme-c, 0.12) var(--theme-hue, 145));
--radius-lg: 1.5rem;
--radius-md: 1rem;
@@ -41,34 +41,34 @@
}
:root.dark {
--color-background: oklch(0.18 0.02 145);
--color-foreground: oklch(0.96 0.01 130);
--color-card: oklch(0.22 0.02 145);
--color-card-foreground: oklch(0.96 0.01 130);
--color-popover: oklch(0.22 0.02 145);
--color-popover-foreground: oklch(0.96 0.01 130);
--color-primary: oklch(0.65 0.15 145);
--color-primary-foreground: oklch(0.12 0.02 145);
--color-secondary: oklch(0.28 0.03 145);
--color-secondary-foreground: oklch(0.92 0.02 145);
--color-muted: oklch(0.25 0.02 145);
--color-muted-foreground: oklch(0.70 0.02 145);
--color-accent: oklch(0.28 0.03 145);
--color-accent-foreground: oklch(0.92 0.02 145);
--color-background: oklch(0.18 0.02 var(--theme-hue, 145));
--color-foreground: oklch(0.96 0.01 var(--theme-hue, 145));
--color-card: oklch(0.22 0.02 var(--theme-hue, 145));
--color-card-foreground: oklch(0.96 0.01 var(--theme-hue, 145));
--color-popover: oklch(0.22 0.02 var(--theme-hue, 145));
--color-popover-foreground: oklch(0.96 0.01 var(--theme-hue, 145));
--color-primary: oklch(var(--theme-l-dark, 0.65) var(--theme-c-dark, 0.15) var(--theme-hue, 145));
--color-primary-foreground: oklch(0.12 0.02 var(--theme-hue, 145));
--color-secondary: oklch(0.28 0.03 var(--theme-hue, 145));
--color-secondary-foreground: oklch(0.92 0.02 var(--theme-hue, 145));
--color-muted: oklch(0.25 0.02 var(--theme-hue, 145));
--color-muted-foreground: oklch(0.70 0.02 var(--theme-hue, 145));
--color-accent: oklch(0.28 0.03 var(--theme-hue, 145));
--color-accent-foreground: oklch(0.92 0.02 var(--theme-hue, 145));
--color-destructive: oklch(0.58 0.18 25);
--color-destructive-foreground: oklch(0.99 0 0);
--color-border: oklch(0.32 0.03 145);
--color-input: oklch(0.32 0.03 145);
--color-ring: oklch(0.65 0.15 145);
--color-border: oklch(0.32 0.03 var(--theme-hue, 145));
--color-input: oklch(0.32 0.03 var(--theme-hue, 145));
--color-ring: oklch(var(--theme-l-dark, 0.65) var(--theme-c-dark, 0.15) var(--theme-hue, 145));
--color-sidebar-background: oklch(0.16 0.02 145 / 0.8);
--color-sidebar-foreground: oklch(0.85 0.02 145);
--color-sidebar-primary: oklch(0.65 0.15 145);
--color-sidebar-primary-foreground: oklch(0.12 0.02 145);
--color-sidebar-accent: oklch(0.28 0.03 145);
--color-sidebar-accent-foreground: oklch(0.92 0.02 145);
--color-sidebar-border: oklch(0.32 0.03 145 / 0.3);
--color-sidebar-ring: oklch(0.65 0.15 145);
--color-sidebar-background: oklch(0.16 0.02 var(--theme-hue, 145) / 0.8);
--color-sidebar-foreground: oklch(0.85 0.02 var(--theme-hue, 145));
--color-sidebar-primary: oklch(var(--theme-l-dark, 0.65) var(--theme-c-dark, 0.15) var(--theme-hue, 145));
--color-sidebar-primary-foreground: oklch(0.12 0.02 var(--theme-hue, 145));
--color-sidebar-accent: oklch(0.28 0.03 var(--theme-hue, 145));
--color-sidebar-accent-foreground: oklch(0.92 0.02 var(--theme-hue, 145));
--color-sidebar-border: oklch(0.32 0.03 var(--theme-hue, 145) / 0.3);
--color-sidebar-ring: oklch(var(--theme-l-dark, 0.65) var(--theme-c-dark, 0.15) var(--theme-hue, 145));
}
* {
@@ -88,15 +88,15 @@ body {
line-height: 1.6;
letter-spacing: -0.015em;
background-image:
radial-gradient(circle at 15% 50%, oklch(0.55 0.12 145 / 0.05), transparent 25%),
radial-gradient(circle at 85% 30%, oklch(0.65 0.15 170 / 0.06), transparent 25%);
radial-gradient(circle at 15% 50%, oklch(0.55 0.12 var(--theme-hue, 145) / 0.05), transparent 25%),
radial-gradient(circle at 85% 30%, oklch(0.65 0.15 var(--theme-hue, 145) / 0.06), transparent 25%);
background-attachment: fixed;
}
:root.dark body {
background-image:
radial-gradient(circle at 15% 50%, oklch(0.55 0.12 145 / 0.15), transparent 25%),
radial-gradient(circle at 85% 30%, oklch(0.65 0.15 170 / 0.15), transparent 25%);
radial-gradient(circle at 15% 50%, oklch(0.55 0.12 var(--theme-hue, 145) / 0.15), transparent 25%),
radial-gradient(circle at 85% 30%, oklch(0.65 0.15 var(--theme-hue, 145) / 0.15), transparent 25%);
}
/* Scrollbar */
@@ -142,5 +142,8 @@ input:focus, textarea:focus, select:focus { @apply transition-shadow duration-15
.glass-card:hover { @apply shadow-soft-lg -translate-y-1 bg-card/90 border-white/80 dark:border-white/20; }
/* Skeleton */
.skeleton { @apply bg-muted animate-pulse rounded;
}
.skeleton { @apply bg-muted animate-pulse rounded; }
/* Scrollbar hide */
.scrollbar-none { scrollbar-width: none; -ms-overflow-style: none; }
.scrollbar-none::-webkit-scrollbar { display: none; }