114 lines
3.3 KiB
CSS
114 lines
3.3 KiB
CSS
:root {
|
|
/* 交通物流产业专业配色 */
|
|
--primary-blue: #0052CC; /* 铁路蓝 - 主色调 */
|
|
--secondary-red: #D32F2F; /* 高铁红 - 强调色 */
|
|
--logistics-green: #00897B; /* 物流绿 - 成功状态 */
|
|
--steel-gray: #455A64; /* 钢铁灰 - 专业感 */
|
|
--cloud-white: #FAFAFA; /* 云白 - 背景色 */
|
|
|
|
/* 功能性色彩 */
|
|
--track-silver: #B0BEC5; /* 轨道银 */
|
|
--signal-yellow: #FFA726; /* 信号黄 */
|
|
--night-blue: #1A237E; /* 夜航蓝 */
|
|
--cargo-brown: #5D4037; /* 货运棕 */
|
|
|
|
/* 渐变色 */
|
|
--gradient-primary: linear-gradient(135deg, #0052CC 0%, #1976D2 100%);
|
|
--gradient-speed: linear-gradient(90deg, #0052CC 0%, #00897B 50%, #FFA726 100%);
|
|
--gradient-track: linear-gradient(180deg, rgba(0,82,204,0.1) 0%, rgba(0,82,204,0) 100%);
|
|
|
|
/* 文字颜色 */
|
|
--text-primary: #263238;
|
|
--text-secondary: #546E7A;
|
|
--text-light: #90A4AE;
|
|
--text-white: #FFFFFF;
|
|
|
|
/* 背景色 */
|
|
--bg-primary: #FFFFFF;
|
|
--bg-secondary: #F5F7FA;
|
|
--bg-card: #FFFFFF;
|
|
--bg-hover: rgba(0, 82, 204, 0.05);
|
|
|
|
/* 边框 */
|
|
--border-light: #E0E0E0;
|
|
--border-medium: #BDBDBD;
|
|
--border-focus: #0052CC;
|
|
|
|
/* 字体 */
|
|
--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;
|
|
|
|
/* 间距 */
|
|
--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;
|
|
|
|
/* 圆角 */
|
|
--radius-sm: 0.25rem;
|
|
--radius-md: 0.5rem;
|
|
--radius-lg: 0.75rem;
|
|
--radius-xl: 1rem;
|
|
--radius-2xl: 1.5rem;
|
|
--radius-full: 9999px;
|
|
|
|
/* 阴影 */
|
|
--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
|
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
|
--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
|
--shadow-card: 0 2px 8px rgba(0, 82, 204, 0.08);
|
|
--shadow-hover: 0 8px 16px rgba(0, 82, 204, 0.12);
|
|
|
|
/* 动画时长 */
|
|
--duration-fast: 150ms;
|
|
--duration-normal: 300ms;
|
|
--duration-slow: 500ms;
|
|
--duration-slower: 800ms;
|
|
|
|
/* 动画缓动 */
|
|
--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);
|
|
|
|
/* 特效 */
|
|
--blur-sm: blur(4px);
|
|
--blur-md: blur(8px);
|
|
--blur-lg: blur(12px);
|
|
--blur-xl: blur(16px);
|
|
}
|
|
|
|
/* 深色模式变量（可选） */
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--bg-primary: #0F172A;
|
|
--bg-secondary: #1E293B;
|
|
--bg-card: #1E293B;
|
|
--text-primary: #F1F5F9;
|
|
--text-secondary: #CBD5E1;
|
|
--border-light: #334155;
|
|
--border-medium: #475569;
|
|
}
|
|
} |