152 lines
5.4 KiB
CSS
152 lines
5.4 KiB
CSS
@import "tailwindcss";
|
||
@import "tw-animate-css";
|
||
/* 移除Google字体CDN，使用系统字体栈，中国大陆可正常访问 */
|
||
|
||
@custom-variant dark (&:is(.dark *));
|
||
|
||
@theme inline {
|
||
--radius-sm: calc(var(--radius) - 4px);
|
||
--radius-md: calc(var(--radius) - 2px);
|
||
--radius-lg: var(--radius);
|
||
--radius-xl: calc(var(--radius) + 4px);
|
||
--color-background: var(--background);
|
||
--color-foreground: var(--foreground);
|
||
--color-card: var(--card);
|
||
--color-card-foreground: var(--card-foreground);
|
||
--color-popover: var(--popover);
|
||
--color-popover-foreground: var(--popover-foreground);
|
||
--color-primary: var(--primary);
|
||
--color-primary-foreground: var(--primary-foreground);
|
||
--color-secondary: var(--secondary);
|
||
--color-secondary-foreground: var(--secondary-foreground);
|
||
--color-muted: var(--muted);
|
||
--color-muted-foreground: var(--muted-foreground);
|
||
--color-accent: var(--accent);
|
||
--color-accent-foreground: var(--accent-foreground);
|
||
--color-destructive: var(--destructive);
|
||
--color-border: var(--border);
|
||
--color-input: var(--input);
|
||
--color-ring: var(--ring);
|
||
--color-chart-1: var(--chart-1);
|
||
--color-chart-2: var(--chart-2);
|
||
--color-chart-3: var(--chart-3);
|
||
--color-chart-4: var(--chart-4);
|
||
--color-chart-5: var(--chart-5);
|
||
--color-sidebar: var(--sidebar);
|
||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||
--color-sidebar-primary: var(--sidebar-primary);
|
||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||
--color-sidebar-accent: var(--sidebar-accent);
|
||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||
--color-sidebar-border: var(--sidebar-border);
|
||
--color-sidebar-ring: var(--sidebar-ring);
|
||
}
|
||
|
||
:root {
|
||
--radius: 0.625rem;
|
||
/* NAC Dark Elegant Theme */
|
||
--background: oklch(0.10 0.015 250);
|
||
--foreground: oklch(0.95 0.005 250);
|
||
--card: oklch(0.14 0.018 250);
|
||
--card-foreground: oklch(0.95 0.005 250);
|
||
--popover: oklch(0.14 0.018 250);
|
||
--popover-foreground: oklch(0.95 0.005 250);
|
||
--primary: oklch(0.65 0.18 200);
|
||
--primary-foreground: oklch(0.10 0.015 250);
|
||
--secondary: oklch(0.18 0.020 250);
|
||
--secondary-foreground: oklch(0.85 0.010 250);
|
||
--muted: oklch(0.18 0.020 250);
|
||
--muted-foreground: oklch(0.60 0.015 250);
|
||
--accent: oklch(0.20 0.025 250);
|
||
--accent-foreground: oklch(0.90 0.010 250);
|
||
--destructive: oklch(0.60 0.22 25);
|
||
--destructive-foreground: oklch(0.98 0 0);
|
||
--border: oklch(0.22 0.020 250);
|
||
--input: oklch(0.18 0.020 250);
|
||
--ring: oklch(0.65 0.18 200);
|
||
--chart-1: oklch(0.65 0.18 200);
|
||
--chart-2: oklch(0.70 0.15 160);
|
||
--chart-3: oklch(0.75 0.12 280);
|
||
--chart-4: oklch(0.65 0.20 50);
|
||
--chart-5: oklch(0.60 0.22 25);
|
||
--sidebar: oklch(0.12 0.018 250);
|
||
--sidebar-foreground: oklch(0.90 0.008 250);
|
||
--sidebar-primary: oklch(0.65 0.18 200);
|
||
--sidebar-primary-foreground: oklch(0.10 0.015 250);
|
||
--sidebar-accent: oklch(0.18 0.022 250);
|
||
--sidebar-accent-foreground: oklch(0.90 0.008 250);
|
||
--sidebar-border: oklch(0.20 0.018 250);
|
||
--sidebar-ring: oklch(0.65 0.18 200);
|
||
}
|
||
|
||
@layer base {
|
||
* {
|
||
@apply border-border outline-ring/50;
|
||
}
|
||
body {
|
||
@apply bg-background text-foreground antialiased;
|
||
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
|
||
"Microsoft YaHei", "WenQuanYi Micro Hei", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||
}
|
||
code, pre, .font-mono {
|
||
font-family: "JetBrains Mono", "Fira Code", "Cascadia Code", Consolas, "Courier New", monospace;
|
||
}
|
||
button:not(:disabled),
|
||
[role="button"]:not([aria-disabled="true"]),
|
||
[type="button"]:not(:disabled),
|
||
[type="submit"]:not(:disabled),
|
||
a[href],
|
||
select:not(:disabled),
|
||
input[type="checkbox"]:not(:disabled),
|
||
input[type="radio"]:not(:disabled) {
|
||
@apply cursor-pointer;
|
||
}
|
||
}
|
||
|
||
@layer components {
|
||
.container {
|
||
width: 100%;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
padding-left: 1rem;
|
||
padding-right: 1rem;
|
||
}
|
||
.flex {
|
||
min-height: 0;
|
||
min-width: 0;
|
||
}
|
||
@media (min-width: 640px) {
|
||
.container { padding-left: 1.5rem; padding-right: 1.5rem; }
|
||
}
|
||
@media (min-width: 1024px) {
|
||
.container { padding-left: 2rem; padding-right: 2rem; max-width: 1400px; }
|
||
}
|
||
|
||
/* NAC Brand Gradient */
|
||
.nac-gradient {
|
||
background: linear-gradient(135deg, oklch(0.65 0.18 200), oklch(0.55 0.20 230));
|
||
}
|
||
.nac-gradient-text {
|
||
background: linear-gradient(135deg, oklch(0.75 0.18 200), oklch(0.70 0.15 160));
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
|
||
/* Status badges */
|
||
.status-active { @apply bg-emerald-500/15 text-emerald-400 border border-emerald-500/30; }
|
||
.status-inactive { @apply bg-slate-500/15 text-slate-400 border border-slate-500/30; }
|
||
.status-pending { @apply bg-amber-500/15 text-amber-400 border border-amber-500/30; }
|
||
.status-error { @apply bg-red-500/15 text-red-400 border border-red-500/30; }
|
||
.status-deprecated { @apply bg-orange-500/15 text-orange-400 border border-orange-500/30; }
|
||
.risk-low { @apply bg-emerald-500/15 text-emerald-400 border border-emerald-500/30; }
|
||
.risk-medium { @apply bg-amber-500/15 text-amber-400 border border-amber-500/30; }
|
||
.risk-high { @apply bg-red-500/15 text-red-400 border border-red-500/30; }
|
||
}
|
||
|
||
/* Scrollbar */
|
||
::-webkit-scrollbar { width: 6px; height: 6px; }
|
||
::-webkit-scrollbar-track { background: transparent; }
|
||
::-webkit-scrollbar-thumb { background: oklch(0.30 0.020 250); border-radius: 3px; }
|
||
::-webkit-scrollbar-thumb:hover { background: oklch(0.40 0.020 250); }
|