524 lines
15 KiB
CSS
524 lines
15 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
/* ===== Theme 1: Ocean Deep (深蓝专业) — Default ===== */
|
|
:root {
|
|
--background: 220 13% 5%;
|
|
--foreground: 210 40% 98%;
|
|
--card: 220 13% 7%;
|
|
--card-foreground: 210 40% 98%;
|
|
--popover: 220 13% 7%;
|
|
--popover-foreground: 210 40% 98%;
|
|
--primary: 217 91% 60%;
|
|
--primary-foreground: 0 0% 100%;
|
|
--secondary: 220 13% 14%;
|
|
--secondary-foreground: 210 40% 98%;
|
|
--muted: 220 13% 14%;
|
|
--muted-foreground: 215 20% 55%;
|
|
--accent: 220 13% 14%;
|
|
--accent-foreground: 210 40% 98%;
|
|
--destructive: 0 62% 50%;
|
|
--destructive-foreground: 0 0% 100%;
|
|
--border: 220 13% 18%;
|
|
--input: 220 13% 14%;
|
|
--ring: 217 91% 60%;
|
|
--radius: 0.625rem;
|
|
--sidebar-background: 220 13% 7%;
|
|
--sidebar-foreground: 210 40% 90%;
|
|
--sidebar-primary: 217 91% 60%;
|
|
--sidebar-primary-foreground: 0 0% 100%;
|
|
--sidebar-accent: 220 13% 14%;
|
|
--sidebar-accent-foreground: 210 40% 98%;
|
|
--sidebar-border: 220 13% 18%;
|
|
--sidebar-ring: 217 91% 60%;
|
|
--dg-bg-primary: #0d1117;
|
|
--dg-bg-secondary: #161b22;
|
|
--dg-bg-tertiary: #21262d;
|
|
--dg-bg-hover: #30363d;
|
|
--dg-border: #30363d;
|
|
--dg-border-light: #21262d;
|
|
--dg-text-primary: #f0f6fc;
|
|
--dg-text-secondary: #8b949e;
|
|
--dg-text-muted: #6e7681;
|
|
--dg-blue: #58a6ff;
|
|
--dg-green: #3fb950;
|
|
--dg-red: #f85149;
|
|
--dg-orange: #f0883e;
|
|
--dg-purple: #8957e5;
|
|
--dg-cyan: #39c5cf;
|
|
--dg-yellow: #d29922;
|
|
--dg-card-hover-border: rgba(88, 166, 255, 0.5);
|
|
--dg-gradient-start: #2563eb;
|
|
--dg-gradient-end: #9333ea;
|
|
--dg-gradient-text-start: #60a5fa;
|
|
--dg-gradient-text-end: #c084fc;
|
|
--dg-input-focus-ring: rgba(96, 165, 250, 0.2);
|
|
}
|
|
|
|
[data-theme="ocean-deep"] {
|
|
--background: 220 13% 5%;
|
|
--foreground: 210 40% 98%;
|
|
--card: 220 13% 7%;
|
|
--card-foreground: 210 40% 98%;
|
|
--popover: 220 13% 7%;
|
|
--popover-foreground: 210 40% 98%;
|
|
--primary: 217 91% 60%;
|
|
--primary-foreground: 0 0% 100%;
|
|
--secondary: 220 13% 14%;
|
|
--secondary-foreground: 210 40% 98%;
|
|
--muted: 220 13% 14%;
|
|
--muted-foreground: 215 20% 55%;
|
|
--accent: 220 13% 14%;
|
|
--accent-foreground: 210 40% 98%;
|
|
--destructive: 0 62% 50%;
|
|
--destructive-foreground: 0 0% 100%;
|
|
--border: 220 13% 18%;
|
|
--input: 220 13% 14%;
|
|
--ring: 217 91% 60%;
|
|
--radius: 0.625rem;
|
|
--sidebar-background: 220 13% 7%;
|
|
--sidebar-foreground: 210 40% 90%;
|
|
--sidebar-primary: 217 91% 60%;
|
|
--sidebar-primary-foreground: 0 0% 100%;
|
|
--sidebar-accent: 220 13% 14%;
|
|
--sidebar-accent-foreground: 210 40% 98%;
|
|
--sidebar-border: 220 13% 18%;
|
|
--sidebar-ring: 217 91% 60%;
|
|
--dg-bg-primary: #0d1117;
|
|
--dg-bg-secondary: #161b22;
|
|
--dg-bg-tertiary: #21262d;
|
|
--dg-bg-hover: #30363d;
|
|
--dg-border: #30363d;
|
|
--dg-border-light: #21262d;
|
|
--dg-text-primary: #f0f6fc;
|
|
--dg-text-secondary: #8b949e;
|
|
--dg-text-muted: #6e7681;
|
|
--dg-blue: #58a6ff;
|
|
--dg-green: #3fb950;
|
|
--dg-red: #f85149;
|
|
--dg-orange: #f0883e;
|
|
--dg-purple: #8957e5;
|
|
--dg-cyan: #39c5cf;
|
|
--dg-yellow: #d29922;
|
|
--dg-card-hover-border: rgba(88, 166, 255, 0.5);
|
|
--dg-gradient-start: #2563eb;
|
|
--dg-gradient-end: #9333ea;
|
|
--dg-gradient-text-start: #60a5fa;
|
|
--dg-gradient-text-end: #c084fc;
|
|
--dg-input-focus-ring: rgba(96, 165, 250, 0.2);
|
|
}
|
|
|
|
/* ===== Theme 2: Light Professional (浅色商务) ===== */
|
|
[data-theme="light-professional"],
|
|
[data-theme="light"] {
|
|
--background: 0 0% 100%;
|
|
--foreground: 220 14% 10%;
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 220 14% 10%;
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 220 14% 10%;
|
|
--primary: 217 91% 60%;
|
|
--primary-foreground: 0 0% 100%;
|
|
--secondary: 220 14% 96%;
|
|
--secondary-foreground: 220 14% 10%;
|
|
--muted: 220 14% 96%;
|
|
--muted-foreground: 220 10% 46%;
|
|
--accent: 220 14% 96%;
|
|
--accent-foreground: 220 14% 10%;
|
|
--destructive: 0 72% 51%;
|
|
--destructive-foreground: 0 0% 100%;
|
|
--border: 220 13% 91%;
|
|
--input: 220 13% 91%;
|
|
--ring: 217 91% 60%;
|
|
--radius: 0.625rem;
|
|
--sidebar-background: 0 0% 98%;
|
|
--sidebar-foreground: 220 14% 20%;
|
|
--sidebar-primary: 217 91% 60%;
|
|
--sidebar-primary-foreground: 0 0% 100%;
|
|
--sidebar-accent: 220 14% 94%;
|
|
--sidebar-accent-foreground: 220 14% 10%;
|
|
--sidebar-border: 220 13% 91%;
|
|
--sidebar-ring: 217 91% 60%;
|
|
--dg-bg-primary: #ffffff;
|
|
--dg-bg-secondary: #f8f9fb;
|
|
--dg-bg-tertiary: #f0f1f5;
|
|
--dg-bg-hover: #e8eaef;
|
|
--dg-border: #e2e5eb;
|
|
--dg-border-light: #eaecf0;
|
|
--dg-text-primary: #1a1d23;
|
|
--dg-text-secondary: #5c6370;
|
|
--dg-text-muted: #9ca3af;
|
|
--dg-blue: #2563eb;
|
|
--dg-green: #16a34a;
|
|
--dg-red: #dc2626;
|
|
--dg-orange: #ea580c;
|
|
--dg-purple: #7c3aed;
|
|
--dg-cyan: #0891b2;
|
|
--dg-yellow: #ca8a04;
|
|
--dg-card-hover-border: rgba(37, 99, 235, 0.3);
|
|
--dg-gradient-start: #2563eb;
|
|
--dg-gradient-end: #7c3aed;
|
|
--dg-gradient-text-start: #1d4ed8;
|
|
--dg-gradient-text-end: #6d28d9;
|
|
--dg-input-focus-ring: rgba(37, 99, 235, 0.15);
|
|
}
|
|
|
|
/* ===== Theme 3: Midnight Purple (午夜紫韵) ===== */
|
|
[data-theme="midnight-purple"] {
|
|
--background: 264 56% 4%;
|
|
--foreground: 280 100% 98%;
|
|
--card: 264 48% 8%;
|
|
--card-foreground: 280 100% 98%;
|
|
--popover: 264 48% 8%;
|
|
--popover-foreground: 280 100% 98%;
|
|
--primary: 270 91% 65%;
|
|
--primary-foreground: 0 0% 100%;
|
|
--secondary: 264 40% 20%;
|
|
--secondary-foreground: 280 100% 98%;
|
|
--muted: 264 40% 20%;
|
|
--muted-foreground: 280 30% 60%;
|
|
--accent: 264 40% 20%;
|
|
--accent-foreground: 280 100% 98%;
|
|
--destructive: 348 100% 72%;
|
|
--destructive-foreground: 264 56% 4%;
|
|
--border: 264 40% 20%;
|
|
--input: 264 40% 20%;
|
|
--ring: 270 91% 65%;
|
|
--radius: 0.625rem;
|
|
--sidebar-background: 264 48% 6%;
|
|
--sidebar-foreground: 280 100% 92%;
|
|
--sidebar-primary: 270 91% 65%;
|
|
--sidebar-primary-foreground: 0 0% 100%;
|
|
--sidebar-accent: 264 40% 20%;
|
|
--sidebar-accent-foreground: 280 100% 98%;
|
|
--sidebar-border: 264 40% 20%;
|
|
--sidebar-ring: 270 91% 65%;
|
|
--dg-bg-primary: #0a0612;
|
|
--dg-bg-secondary: #130c21;
|
|
--dg-bg-tertiary: #1c1330;
|
|
--dg-bg-hover: #2d1f4a;
|
|
--dg-border: #2d1f4a;
|
|
--dg-border-light: #1c1330;
|
|
--dg-text-primary: #faf5ff;
|
|
--dg-text-secondary: #b794c7;
|
|
--dg-text-muted: #7c5a8a;
|
|
--dg-blue: #818cf8;
|
|
--dg-green: #34d399;
|
|
--dg-red: #fb7185;
|
|
--dg-orange: #fb923c;
|
|
--dg-purple: #c084fc;
|
|
--dg-cyan: #22d3ee;
|
|
--dg-yellow: #facc15;
|
|
--dg-card-hover-border: rgba(192, 132, 252, 0.5);
|
|
--dg-gradient-start: #9333ea;
|
|
--dg-gradient-end: #c084fc;
|
|
--dg-gradient-text-start: #a855f7;
|
|
--dg-gradient-text-end: #c084fc;
|
|
--dg-input-focus-ring: rgba(192, 132, 252, 0.2);
|
|
}
|
|
|
|
/* ===== Theme 4: Pine Green (松绿自然) ===== */
|
|
[data-theme="pine-green"] {
|
|
--background: 150 25% 5%;
|
|
--foreground: 140 60% 97%;
|
|
--card: 150 25% 9%;
|
|
--card-foreground: 140 60% 97%;
|
|
--popover: 150 25% 9%;
|
|
--popover-foreground: 140 60% 97%;
|
|
--primary: 142 71% 45%;
|
|
--primary-foreground: 150 25% 5%;
|
|
--secondary: 150 20% 18%;
|
|
--secondary-foreground: 140 60% 97%;
|
|
--muted: 150 20% 18%;
|
|
--muted-foreground: 150 20% 55%;
|
|
--accent: 150 20% 18%;
|
|
--accent-foreground: 140 60% 97%;
|
|
--destructive: 0 90% 72%;
|
|
--destructive-foreground: 150 25% 5%;
|
|
--border: 150 20% 18%;
|
|
--input: 150 20% 18%;
|
|
--ring: 142 71% 45%;
|
|
--radius: 0.625rem;
|
|
--sidebar-background: 150 25% 7%;
|
|
--sidebar-foreground: 140 40% 88%;
|
|
--sidebar-primary: 142 71% 45%;
|
|
--sidebar-primary-foreground: 150 25% 5%;
|
|
--sidebar-accent: 150 20% 18%;
|
|
--sidebar-accent-foreground: 140 60% 97%;
|
|
--sidebar-border: 150 20% 18%;
|
|
--sidebar-ring: 142 71% 45%;
|
|
--dg-bg-primary: #0a1210;
|
|
--dg-bg-secondary: #111f1a;
|
|
--dg-bg-tertiary: #192c24;
|
|
--dg-bg-hover: #253d32;
|
|
--dg-border: #253d32;
|
|
--dg-border-light: #192c24;
|
|
--dg-text-primary: #f0fdf4;
|
|
--dg-text-secondary: #86b8a0;
|
|
--dg-text-muted: #5a7c6b;
|
|
--dg-blue: #38bdf8;
|
|
--dg-green: #4ade80;
|
|
--dg-red: #f87171;
|
|
--dg-orange: #fb923c;
|
|
--dg-purple: #c084fc;
|
|
--dg-cyan: #2dd4bf;
|
|
--dg-yellow: #facc15;
|
|
--dg-card-hover-border: rgba(74, 222, 128, 0.5);
|
|
--dg-gradient-start: #059669;
|
|
--dg-gradient-end: #10b981;
|
|
--dg-gradient-text-start: #059669;
|
|
--dg-gradient-text-end: #34d399;
|
|
--dg-input-focus-ring: rgba(74, 222, 128, 0.2);
|
|
}
|
|
|
|
/* ===== Theme 5: Orange Vitality (橙光活力) ===== */
|
|
[data-theme="orange-vitality"] {
|
|
--background: 30 35% 5%;
|
|
--foreground: 30 100% 97%;
|
|
--card: 30 30% 9%;
|
|
--card-foreground: 30 100% 97%;
|
|
--popover: 30 30% 9%;
|
|
--popover-foreground: 30 100% 97%;
|
|
--primary: 25 95% 53%;
|
|
--primary-foreground: 0 0% 100%;
|
|
--secondary: 30 25% 18%;
|
|
--secondary-foreground: 30 100% 97%;
|
|
--muted: 30 25% 18%;
|
|
--muted-foreground: 30 25% 55%;
|
|
--accent: 30 25% 18%;
|
|
--accent-foreground: 30 100% 97%;
|
|
--destructive: 0 80% 70%;
|
|
--destructive-foreground: 30 35% 5%;
|
|
--border: 30 25% 18%;
|
|
--input: 30 25% 18%;
|
|
--ring: 25 95% 53%;
|
|
--radius: 0.625rem;
|
|
--sidebar-background: 30 30% 7%;
|
|
--sidebar-foreground: 30 80% 88%;
|
|
--sidebar-primary: 25 95% 53%;
|
|
--sidebar-primary-foreground: 0 0% 100%;
|
|
--sidebar-accent: 30 25% 18%;
|
|
--sidebar-accent-foreground: 30 100% 97%;
|
|
--sidebar-border: 30 25% 18%;
|
|
--sidebar-ring: 25 95% 53%;
|
|
--dg-bg-primary: #110d08;
|
|
--dg-bg-secondary: #1d1610;
|
|
--dg-bg-tertiary: #2b1f16;
|
|
--dg-bg-hover: #3d2d20;
|
|
--dg-border: #3d2d20;
|
|
--dg-border-light: #2b1f16;
|
|
--dg-text-primary: #fef7ed;
|
|
--dg-text-secondary: #d4a574;
|
|
--dg-text-muted: #9c7a54;
|
|
--dg-blue: #60a5fa;
|
|
--dg-green: #4ade80;
|
|
--dg-red: #f87171;
|
|
--dg-orange: #fb923c;
|
|
--dg-purple: #a78bfa;
|
|
--dg-cyan: #2dd4bf;
|
|
--dg-yellow: #fcd34d;
|
|
--dg-card-hover-border: rgba(251, 146, 60, 0.5);
|
|
--dg-gradient-start: #ea580c;
|
|
--dg-gradient-end: #f59e0b;
|
|
--dg-gradient-text-start: #f97316;
|
|
--dg-gradient-text-end: #fbbf24;
|
|
--dg-input-focus-ring: rgba(251, 146, 60, 0.2);
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
body {
|
|
@apply bg-[var(--dg-bg-primary)] text-[var(--dg-text-primary)] antialiased;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans SC', sans-serif;
|
|
transition: background-color 0.3s ease, color 0.3s ease;
|
|
}
|
|
|
|
/* Fix: Radix Dialog scroll-lock adds padding-right to body, causing white bar.
|
|
Override to prevent layout shift when dialog opens. */
|
|
body[data-scroll-locked],
|
|
body[data-radix-scroll-locked],
|
|
body[style*="padding-right"] {
|
|
padding-right: 0 !important;
|
|
}
|
|
code, pre, .font-mono {
|
|
font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.dg-card {
|
|
@apply bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-lg;
|
|
transition: background-color 0.3s ease, border-color 0.3s ease;
|
|
}
|
|
.dg-card-hover {
|
|
@apply transition-colors duration-200;
|
|
}
|
|
.dg-card-hover:hover {
|
|
border-color: var(--dg-card-hover-border);
|
|
}
|
|
.dg-input {
|
|
@apply bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] placeholder:text-[var(--dg-text-muted)] focus:border-[var(--dg-blue)] focus:ring-1;
|
|
}
|
|
.dg-input:focus {
|
|
--tw-ring-color: var(--dg-input-focus-ring);
|
|
}
|
|
.dg-text-muted {
|
|
color: var(--dg-text-muted);
|
|
}
|
|
.dg-text-secondary {
|
|
color: var(--dg-text-secondary);
|
|
}
|
|
.dg-gradient-text {
|
|
color: var(--dg-text-primary);
|
|
}
|
|
.dg-gradient-bg {
|
|
background: var(--dg-blue);
|
|
}
|
|
.dg-gradient-br {
|
|
background: var(--dg-blue);
|
|
}
|
|
.scrollbar-thin::-webkit-scrollbar {
|
|
width: 4px;
|
|
height: 4px;
|
|
}
|
|
.scrollbar-thin::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
.scrollbar-thin::-webkit-scrollbar-thumb {
|
|
background: var(--dg-border);
|
|
border-radius: 2px;
|
|
}
|
|
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
|
|
background: var(--dg-text-muted);
|
|
}
|
|
[data-theme="light-professional"] .scrollbar-thin::-webkit-scrollbar-thumb,
|
|
[data-theme="light"] .scrollbar-thin::-webkit-scrollbar-thumb {
|
|
background: #d1d5db;
|
|
}
|
|
[data-theme="light-professional"] .scrollbar-thin::-webkit-scrollbar-thumb:hover,
|
|
[data-theme="light"] .scrollbar-thin::-webkit-scrollbar-thumb:hover {
|
|
background: #9ca3af;
|
|
}
|
|
|
|
/* ===== Design System Utilities ===== */
|
|
|
|
/* Buttons */
|
|
.dg-btn {
|
|
@apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200;
|
|
}
|
|
.dg-btn-primary {
|
|
@apply dg-btn dg-gradient-bg text-white hover:opacity-90 active:scale-[0.98];
|
|
}
|
|
.dg-btn-secondary {
|
|
@apply dg-btn bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)] active:scale-[0.98];
|
|
}
|
|
.dg-btn-ghost {
|
|
@apply dg-btn text-[var(--dg-text-secondary)] hover:bg-[var(--dg-bg-hover)] hover:text-[var(--dg-text-primary)];
|
|
}
|
|
.dg-btn-danger {
|
|
@apply dg-btn bg-red-500/10 text-red-400 hover:bg-red-500/20 active:scale-[0.98];
|
|
}
|
|
.dg-btn-sm {
|
|
@apply px-3 py-1.5 text-xs;
|
|
}
|
|
.dg-btn-lg {
|
|
@apply px-6 py-3 text-base;
|
|
}
|
|
|
|
/* Cards */
|
|
.dg-card-section {
|
|
@apply dg-card p-5;
|
|
}
|
|
.dg-card-header {
|
|
@apply text-sm font-semibold text-[var(--dg-text-primary)] mb-3;
|
|
}
|
|
|
|
/* Badges */
|
|
.dg-badge {
|
|
@apply inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium;
|
|
}
|
|
.dg-badge-blue {
|
|
@apply dg-badge bg-blue-500/10 text-blue-400;
|
|
}
|
|
.dg-badge-green {
|
|
@apply dg-badge bg-green-500/10 text-green-400;
|
|
}
|
|
.dg-badge-red {
|
|
@apply dg-badge bg-red-500/10 text-red-400;
|
|
}
|
|
.dg-badge-yellow {
|
|
@apply dg-badge bg-yellow-500/10 text-yellow-400;
|
|
}
|
|
.dg-badge-purple {
|
|
@apply dg-badge bg-purple-500/10 text-purple-400;
|
|
}
|
|
.dg-badge-orange {
|
|
@apply dg-badge bg-orange-500/10 text-orange-400;
|
|
}
|
|
.dg-badge-cyan {
|
|
@apply dg-badge bg-cyan-500/10 text-cyan-400;
|
|
}
|
|
.dg-badge-muted {
|
|
@apply dg-badge bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-secondary)];
|
|
}
|
|
|
|
/* Spacing helpers */
|
|
.dg-gap-section {
|
|
@apply gap-6;
|
|
}
|
|
.dg-gap-card {
|
|
@apply gap-4;
|
|
}
|
|
|
|
/* Table rows */
|
|
.dg-table-row {
|
|
@apply flex items-center px-4 py-3 border-b border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)] transition-colors duration-150;
|
|
}
|
|
.dg-table-header {
|
|
@apply flex items-center px-4 py-2.5 text-xs font-semibold text-[var(--dg-text-muted)] uppercase tracking-wider border-b border-[var(--dg-border)];
|
|
}
|
|
|
|
/* Status dot */
|
|
.dg-status-dot {
|
|
@apply w-2 h-2 rounded-full;
|
|
}
|
|
.dg-status-dot-green {
|
|
@apply dg-status-dot bg-green-400;
|
|
}
|
|
.dg-status-dot-red {
|
|
@apply dg-status-dot bg-red-400;
|
|
}
|
|
.dg-status-dot-yellow {
|
|
@apply dg-status-dot bg-yellow-400;
|
|
}
|
|
.dg-status-dot-blue {
|
|
@apply dg-status-dot bg-blue-400;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(8px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideInLeft {
|
|
from { opacity: 0; transform: translateX(-8px); }
|
|
to { opacity: 1; transform: translateX(0); }
|
|
}
|
|
|
|
@keyframes scaleIn {
|
|
from { opacity: 0; transform: scale(0.95); }
|
|
to { opacity: 1; transform: scale(1); }
|
|
}
|