185 lines
6.9 KiB
CSS
185 lines
6.9 KiB
CSS
@import "tailwindcss";
|
||
|
||
@theme {
|
||
--color-background: #050508;
|
||
--color-foreground: #ffffff;
|
||
|
||
--color-primary: #00f0ff;
|
||
--color-primary-foreground: #000000;
|
||
|
||
--color-secondary: #ff0099;
|
||
--color-secondary-foreground: #ffffff;
|
||
|
||
--color-accent: #bd00ff;
|
||
--color-accent-foreground: #ffffff;
|
||
|
||
--color-card: #12121a;
|
||
--color-card-foreground: #ffffff;
|
||
|
||
--color-muted: #1f1f2e;
|
||
--color-muted-foreground: #a1a1aa;
|
||
|
||
--color-border: #2a2a35;
|
||
|
||
--radius-lg: 0.75rem;
|
||
--radius-md: 0.5rem;
|
||
--radius-sm: 0.25rem;
|
||
|
||
--animate-pulse-slow: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||
}
|
||
|
||
@layer base {
|
||
body {
|
||
background-color: var(--color-background);
|
||
color: var(--color-foreground);
|
||
font-family: var(--font-sans);
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
}
|
||
|
||
@layer utilities {
|
||
.glass {
|
||
background-color: rgb(255 255 255 / 0.05);
|
||
backdrop-filter: blur(12px);
|
||
border: 1px solid rgb(255 255 255 / 0.1);
|
||
}
|
||
|
||
.glass-card {
|
||
background-color: rgb(26 26 36 / 0.8);
|
||
backdrop-filter: blur(4px);
|
||
border: 1px solid rgb(255 255 255 / 0.05);
|
||
}
|
||
|
||
.text-gradient {
|
||
background-clip: text;
|
||
-webkit-background-clip: text;
|
||
color: transparent;
|
||
background-image: linear-gradient(to right, var(--color-primary), var(--color-accent), var(--color-secondary));
|
||
}
|
||
|
||
.neon-shadow {
|
||
box-shadow: 0 0 10px rgba(0, 240, 255, 0.3), 0 0 20px rgba(0, 240, 255, 0.1);
|
||
}
|
||
|
||
.neon-text {
|
||
text-shadow: 0 0 5px rgba(0, 240, 255, 0.5);
|
||
}
|
||
|
||
/* 移动端防横向溢出：flex 子项可收缩、文本可截断 */
|
||
.mobile-safe {
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
/* 管理后台 · 深色主题（黑/深灰） */
|
||
.admin-dark-theme {
|
||
--color-background: #0f172a;
|
||
--color-foreground: #f1f5f9;
|
||
--color-card: rgba(30, 41, 59, 0.6);
|
||
--color-card-foreground: #f1f5f9;
|
||
--color-muted: rgba(51, 65, 85, 0.6);
|
||
--color-muted-foreground: #94a3b8;
|
||
--color-border: rgba(148, 163, 184, 0.2);
|
||
}
|
||
|
||
/* 管理后台 · 神射手亮色主题（淡色 + 悬浮感） */
|
||
.admin-light-theme {
|
||
--color-background: #faf8fc;
|
||
--color-foreground: #0f172a;
|
||
--color-card: rgba(255, 255, 255, 0.92);
|
||
--color-card-foreground: #0f172a;
|
||
--color-muted: #f5f3ff;
|
||
--color-muted-foreground: #64748b;
|
||
--color-border: #e2e8f0;
|
||
}
|
||
|
||
/* 神射手背景：极浅粉紫到白到淡蓝渐变，增强悬浮感 */
|
||
.admin-light-theme.admin-bg-archer {
|
||
background: linear-gradient(145deg, #faf5ff 0%, #ffffff 35%, #f8fafc 70%, #f0f9ff 100%) !important;
|
||
}
|
||
|
||
/* 神射手 · 统计卡片：纯白底、大圆角、柔和悬浮阴影（与参考图一致） */
|
||
.admin-light-theme .admin-card-stat {
|
||
background: #ffffff;
|
||
border-radius: 1rem;
|
||
border: 1px solid rgba(226, 232, 240, 0.9);
|
||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.03);
|
||
}
|
||
|
||
/* 神射手 · 主操作按钮：紫到青渐变、白字、大圆角、柔和阴影 */
|
||
.admin-light-theme .admin-btn-primary {
|
||
background: linear-gradient(to right, #8b5cf6, #06b6d4);
|
||
color: #fff;
|
||
border: none;
|
||
border-radius: 0.75rem;
|
||
box-shadow: 0 4px 14px rgba(139, 92, 246, 0.25), 0 2px 6px rgba(6, 182, 212, 0.15);
|
||
}
|
||
.admin-light-theme .admin-btn-primary:hover {
|
||
opacity: 0.95;
|
||
box-shadow: 0 6px 20px rgba(139, 92, 246, 0.3), 0 2px 8px rgba(6, 182, 212, 0.2);
|
||
}
|
||
|
||
/* 深色毛玻璃（默认） */
|
||
.admin-glass {
|
||
background: rgba(30, 41, 59, 0.5);
|
||
backdrop-filter: saturate(160%) blur(32px);
|
||
-webkit-backdrop-filter: saturate(160%) blur(32px);
|
||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
||
}
|
||
.admin-glass-panel {
|
||
background: rgba(30, 41, 59, 0.55);
|
||
backdrop-filter: saturate(160%) blur(40px);
|
||
-webkit-backdrop-filter: saturate(160%) blur(40px);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
/* 亮色主题：苹果毛玻璃 + 明显悬浮阴影 */
|
||
.admin-light-theme .admin-glass {
|
||
background: rgba(255, 255, 255, 0.85);
|
||
backdrop-filter: saturate(180%) blur(20px);
|
||
-webkit-backdrop-filter: saturate(180%) blur(20px);
|
||
border: 1px solid rgba(226, 232, 240, 0.9);
|
||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.03);
|
||
}
|
||
.admin-light-theme .admin-glass-panel {
|
||
background: rgba(255, 255, 255, 0.92);
|
||
backdrop-filter: saturate(180%) blur(24px);
|
||
-webkit-backdrop-filter: saturate(180%) blur(24px);
|
||
border: 1px solid rgba(226, 232, 240, 0.8);
|
||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 2px 12px rgba(0, 0, 0, 0.03);
|
||
}
|
||
/* 内容区卡片悬浮感（与参考图一致：柔和阴影） */
|
||
.admin-light-theme .admin-content-area .admin-glass,
|
||
.admin-light-theme .admin-content-area [class*="rounded-2xl"] {
|
||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.03);
|
||
}
|
||
|
||
/* 亮色主题下内容区文字覆盖 */
|
||
.admin-light-theme .admin-content-area .text-slate-100 { color: #0f172a; }
|
||
.admin-light-theme .admin-content-area .text-slate-200 { color: #1e293b; }
|
||
.admin-light-theme .admin-content-area .text-slate-300 { color: #475569; }
|
||
.admin-light-theme .admin-content-area .text-slate-400 { color: #64748b; }
|
||
.admin-light-theme .admin-content-area .text-slate-500 { color: #64748b; }
|
||
.admin-light-theme .admin-content-area .border-white\/10 { border-color: rgba(226, 232, 240, 0.8); }
|
||
.admin-light-theme .admin-content-area .border-white\/5 { border-color: rgba(226, 232, 240, 0.6); }
|
||
.admin-light-theme .admin-content-area .bg-slate-800\/50 { background-color: rgba(248, 250, 252, 0.9); }
|
||
.admin-light-theme .admin-content-area .border-slate-600\/50 { border-color: #e2e8f0; }
|
||
.admin-light-theme .admin-content-area .hover\:bg-slate-700\/30:hover { background-color: rgba(241, 245, 249, 0.8); }
|
||
.admin-light-theme .admin-content-area .hover\:bg-slate-700\/50:hover { background-color: rgba(241, 245, 249, 0.9); }
|
||
.admin-light-theme .admin-content-area .bg-slate-600\/40 { background-color: rgba(226, 232, 240, 0.8); }
|
||
.admin-light-theme .admin-content-area .text-slate-400.bg-slate-600\/40 { color: #475569; }
|
||
.admin-light-theme .admin-content-area .border-slate-600\/50 { border-color: #e2e8f0; }
|
||
.admin-light-theme .admin-content-area input.bg-slate-800\/50 { background-color: rgba(248, 250, 252, 0.9); }
|
||
.admin-light-theme .admin-content-area button.border-slate-600\/50 { border-color: #e2e8f0; }
|
||
/* 亮色主题下内容区：极浅灰底（与参考图一致） */
|
||
.admin-light-theme .admin-content-area {
|
||
background: #f5f5f8;
|
||
}
|
||
.admin-light-theme .admin-content-area .admin-glass { background: #ffffff; border-color: #e2e8f0; }
|
||
.admin-light-theme .admin-content-area .bg-slate-900\/50 { background-color: rgba(248, 250, 252, 0.95); }
|
||
.admin-light-theme .admin-content-area .bg-slate-800 { background-color: #f1f5f9; }
|
||
.admin-light-theme .admin-content-area .bg-slate-800\/80 { background-color: rgba(241, 245, 249, 0.95); }
|
||
}
|