177 lines
5.4 KiB
CSS
177 lines
5.4 KiB
CSS
:root {
|
|
/* 统一蓝色系 - 交通物流专业配色 */
|
|
--primary-900: #0C1929; /* 深夜蓝 - 最深色 */
|
|
--primary-800: #1A2F4B; /* 深海蓝 */
|
|
--primary-700: #234567; /* 海军蓝 */
|
|
--primary-600: #2C5F8D; /* 标准蓝 */
|
|
--primary-500: #3B7CB8; /* 主色调 - 铁路蓝 */
|
|
--primary-400: #5A9FD4; /* 天空蓝 */
|
|
--primary-300: #7FB5E1; /* 浅天蓝 */
|
|
--primary-200: #A5CEEC; /* 云朵蓝 */
|
|
--primary-100: #D2E5F5; /* 薄雾蓝 */
|
|
--primary-50: #EBF4FB; /* 极浅蓝 */
|
|
|
|
/* 中性色 - 带蓝色调 */
|
|
--gray-900: #1A1F2B; /* 深灰蓝 */
|
|
--gray-800: #2C3241; /* 暗灰蓝 */
|
|
--gray-700: #3E4557; /* 中深灰蓝 */
|
|
--gray-600: #525A70; /* 中灰蓝 */
|
|
--gray-500: #6B7489; /* 标准灰蓝 */
|
|
--gray-400: #8892A6; /* 浅灰蓝 */
|
|
--gray-300: #A8B2C3; /* 更浅灰蓝 */
|
|
--gray-200: #CAD2DD; /* 很浅灰蓝 */
|
|
--gray-100: #E5E9EF; /* 极浅灰蓝 */
|
|
--gray-50: #F5F7FA; /* 背景灰蓝 */
|
|
|
|
/* 功能色 - 蓝色系调和 */
|
|
--accent-teal: #2E7D8C; /* 青蓝 - 成功/完成 */
|
|
--accent-slate: #4A5F7A; /* 石板蓝 - 信息 */
|
|
--accent-steel: #546B84; /* 钢铁蓝 - 次要 */
|
|
--accent-ice: #6B9BD2; /* 冰蓝 - 高亮 */
|
|
|
|
/* 语义色彩 */
|
|
--success: #2E7D8C; /* 成功 - 青蓝色 */
|
|
--warning: #7A8BA3; /* 警告 - 中性蓝灰 */
|
|
--error: #5A6B84; /* 错误 - 深蓝灰 */
|
|
--info: #3B7CB8; /* 信息 - 主蓝色 */
|
|
|
|
/* 渐变 */
|
|
--gradient-primary: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-400) 100%);
|
|
--gradient-hero: linear-gradient(180deg, var(--primary-900) 0%, var(--primary-700) 50%, var(--primary-500) 100%);
|
|
--gradient-card: linear-gradient(135deg, var(--primary-50) 0%, var(--gray-50) 100%);
|
|
--gradient-mesh: radial-gradient(at 20% 80%, var(--primary-100) 0%, transparent 50%),
|
|
radial-gradient(at 80% 20%, var(--primary-200) 0%, transparent 50%);
|
|
|
|
/* 文字颜色 */
|
|
--text-primary: var(--gray-900);
|
|
--text-secondary: var(--gray-700);
|
|
--text-muted: var(--gray-500);
|
|
--text-light: var(--gray-400);
|
|
--text-white: #FFFFFF;
|
|
--text-on-primary: #FFFFFF;
|
|
|
|
/* 背景色 */
|
|
--bg-primary: #FFFFFF;
|
|
--bg-secondary: var(--gray-50);
|
|
--bg-tertiary: var(--primary-50);
|
|
--bg-card: #FFFFFF;
|
|
--bg-overlay: rgba(12, 25, 41, 0.6);
|
|
--bg-hover: rgba(59, 124, 184, 0.08);
|
|
--bg-active: rgba(59, 124, 184, 0.12);
|
|
|
|
/* 边框 */
|
|
--border-light: var(--gray-200);
|
|
--border-default: var(--gray-300);
|
|
--border-medium: var(--gray-400);
|
|
--border-focus: var(--primary-500);
|
|
--border-hover: var(--primary-400);
|
|
|
|
/* 字体 */
|
|
--font-primary: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
|
--font-heading: 'Space Grotesk', 'Inter', sans-serif;
|
|
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
|
|
|
|
/* 字体大小 */
|
|
--text-xs: 0.75rem;
|
|
--text-sm: 0.875rem;
|
|
--text-base: 1rem;
|
|
--text-lg: 1.125rem;
|
|
--text-xl: 1.25rem;
|
|
--text-2xl: 1.5rem;
|
|
--text-3xl: 1.875rem;
|
|
--text-4xl: 2.25rem;
|
|
--text-5xl: 3rem;
|
|
--text-6xl: 3.75rem;
|
|
|
|
/* 字体粗细 */
|
|
--font-thin: 100;
|
|
--font-light: 300;
|
|
--font-normal: 400;
|
|
--font-medium: 500;
|
|
--font-semibold: 600;
|
|
--font-bold: 700;
|
|
--font-black: 900;
|
|
|
|
/* 间距 */
|
|
--space-1: 0.25rem;
|
|
--space-2: 0.5rem;
|
|
--space-3: 0.75rem;
|
|
--space-4: 1rem;
|
|
--space-5: 1.25rem;
|
|
--space-6: 1.5rem;
|
|
--space-8: 2rem;
|
|
--space-10: 2.5rem;
|
|
--space-12: 3rem;
|
|
--space-16: 4rem;
|
|
--space-20: 5rem;
|
|
--space-24: 6rem;
|
|
|
|
/* 圆角 */
|
|
--radius-sm: 0.375rem;
|
|
--radius-md: 0.5rem;
|
|
--radius-lg: 0.75rem;
|
|
--radius-xl: 1rem;
|
|
--radius-2xl: 1.5rem;
|
|
--radius-3xl: 2rem;
|
|
--radius-full: 9999px;
|
|
|
|
/* 阴影 - 蓝色调 */
|
|
--shadow-xs: 0 1px 2px 0 rgba(12, 25, 41, 0.05);
|
|
--shadow-sm: 0 1px 3px 0 rgba(12, 25, 41, 0.1), 0 1px 2px 0 rgba(12, 25, 41, 0.06);
|
|
--shadow-md: 0 4px 6px -1px rgba(12, 25, 41, 0.1), 0 2px 4px -1px rgba(12, 25, 41, 0.06);
|
|
--shadow-lg: 0 10px 15px -3px rgba(12, 25, 41, 0.1), 0 4px 6px -2px rgba(12, 25, 41, 0.05);
|
|
--shadow-xl: 0 20px 25px -5px rgba(12, 25, 41, 0.12), 0 10px 10px -5px rgba(12, 25, 41, 0.04);
|
|
--shadow-2xl: 0 25px 50px -12px rgba(12, 25, 41, 0.25);
|
|
--shadow-card: 0 2px 8px rgba(59, 124, 184, 0.1);
|
|
--shadow-hover: 0 8px 20px rgba(59, 124, 184, 0.15);
|
|
--shadow-focus: 0 0 0 3px rgba(59, 124, 184, 0.2);
|
|
|
|
/* 动画时长 */
|
|
--duration-instant: 100ms;
|
|
--duration-fast: 200ms;
|
|
--duration-normal: 300ms;
|
|
--duration-slow: 500ms;
|
|
--duration-slower: 700ms;
|
|
--duration-slowest: 1000ms;
|
|
|
|
/* 动画缓动 */
|
|
--ease-linear: linear;
|
|
--ease-in: cubic-bezier(0.4, 0, 1, 1);
|
|
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
|
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
|
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
--ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
|
|
|
|
/* 特效 */
|
|
--blur-sm: blur(4px);
|
|
--blur-md: blur(8px);
|
|
--blur-lg: blur(12px);
|
|
--blur-xl: blur(20px);
|
|
--blur-2xl: blur(40px);
|
|
|
|
/* 透明度 */
|
|
--opacity-0: 0;
|
|
--opacity-5: 0.05;
|
|
--opacity-10: 0.1;
|
|
--opacity-20: 0.2;
|
|
--opacity-30: 0.3;
|
|
--opacity-40: 0.4;
|
|
--opacity-50: 0.5;
|
|
--opacity-60: 0.6;
|
|
--opacity-70: 0.7;
|
|
--opacity-80: 0.8;
|
|
--opacity-90: 0.9;
|
|
--opacity-100: 1;
|
|
|
|
/* 层级 */
|
|
--z-0: 0;
|
|
--z-10: 10;
|
|
--z-20: 20;
|
|
--z-30: 30;
|
|
--z-40: 40;
|
|
--z-50: 50;
|
|
--z-modal: 1000;
|
|
--z-popover: 1100;
|
|
--z-tooltip: 1200;
|
|
--z-notification: 1300;
|
|
} |