219 lines
7.1 KiB
CSS
219 lines
7.1 KiB
CSS
|
:root {
|
||
|
|
/* 极光蓝紫渐变色系 - 高级物流主题 */
|
||
|
|
|
||
|
|
/* 主色调 - 深邃蓝紫 */
|
||
|
|
--aurora-950: #0A0E27; /* 极夜深蓝 */
|
||
|
|
--aurora-900: #0F1729; /* 深空蓝 */
|
||
|
|
--aurora-800: #1A2942; /* 午夜蓝 */
|
||
|
|
--aurora-700: #273E63; /* 深海蓝 */
|
||
|
|
--aurora-600: #3B5998; /* 皇家蓝 */
|
||
|
|
--aurora-500: #5B7EC2; /* 极光蓝 - 主色 */
|
||
|
|
--aurora-400: #7B9FE0; /* 天际蓝 */
|
||
|
|
--aurora-300: #9BB9F1; /* 晨曦蓝 */
|
||
|
|
--aurora-200: #BDD4F7; /* 薄雾蓝 */
|
||
|
|
--aurora-100: #E0EBFB; /* 冰晶蓝 */
|
||
|
|
--aurora-50: #F3F7FE; /* 极光白 */
|
||
|
|
|
||
|
|
/* 紫色调 - 神秘感 */
|
||
|
|
--purple-900: #1E0E3E; /* 深紫 */
|
||
|
|
--purple-800: #2D1B69; /* 皇家紫 */
|
||
|
|
--purple-700: #3F2B96; /* 贵族紫 */
|
||
|
|
--purple-600: #5141C3; /* 极光紫 */
|
||
|
|
--purple-500: #6B5DD3; /* 薰衣草紫 */
|
||
|
|
--purple-400: #8B7FE5; /* 丁香紫 */
|
||
|
|
--purple-300: #ACA3F2; /* 淡紫 */
|
||
|
|
--purple-200: #CFC9F8; /* 浅紫 */
|
||
|
|
--purple-100: #E9E6FC; /* 极浅紫 */
|
||
|
|
|
||
|
|
/* 青色调 - 科技感 */
|
||
|
|
--cyan-600: #0891B2; /* 科技青 */
|
||
|
|
--cyan-500: #06B6D4; /* 青蓝 */
|
||
|
|
--cyan-400: #22D3EE; /* 亮青 */
|
||
|
|
--cyan-300: #67E8F9; /* 浅青 */
|
||
|
|
--cyan-200: #A5F3FC; /* 极浅青 */
|
||
|
|
|
||
|
|
/* 高级渐变组合 */
|
||
|
|
--gradient-aurora: linear-gradient(135deg,
|
||
|
|
var(--aurora-600) 0%,
|
||
|
|
var(--purple-600) 50%,
|
||
|
|
var(--cyan-500) 100%);
|
||
|
|
|
||
|
|
--gradient-premium: linear-gradient(90deg,
|
||
|
|
#667eea 0%,
|
||
|
|
#764ba2 25%,
|
||
|
|
#6B8DD6 50%,
|
||
|
|
#8E37D7 75%,
|
||
|
|
#667eea 100%);
|
||
|
|
|
||
|
|
--gradient-mesh:
|
||
|
|
radial-gradient(at 20% 80%, var(--purple-400) 0%, transparent 50%),
|
||
|
|
radial-gradient(at 80% 20%, var(--cyan-400) 0%, transparent 50%),
|
||
|
|
radial-gradient(at 40% 40%, var(--aurora-400) 0%, transparent 50%),
|
||
|
|
linear-gradient(135deg, var(--aurora-950) 0%, var(--purple-900) 100%);
|
||
|
|
|
||
|
|
--gradient-glass: linear-gradient(135deg,
|
||
|
|
rgba(255, 255, 255, 0.1) 0%,
|
||
|
|
rgba(255, 255, 255, 0.05) 100%);
|
||
|
|
|
||
|
|
--gradient-holographic: linear-gradient(45deg,
|
||
|
|
#ff0080,
|
||
|
|
#ff8c00,
|
||
|
|
#ffd700,
|
||
|
|
#00ff00,
|
||
|
|
#00ffff,
|
||
|
|
#0080ff,
|
||
|
|
#ff0080);
|
||
|
|
|
||
|
|
--gradient-card: linear-gradient(135deg,
|
||
|
|
rgba(91, 126, 194, 0.1) 0%,
|
||
|
|
rgba(107, 93, 211, 0.05) 50%,
|
||
|
|
rgba(6, 182, 212, 0.1) 100%);
|
||
|
|
|
||
|
|
--gradient-text: linear-gradient(90deg,
|
||
|
|
var(--aurora-400) 0%,
|
||
|
|
var(--purple-400) 33%,
|
||
|
|
var(--cyan-400) 66%,
|
||
|
|
var(--aurora-400) 100%);
|
||
|
|
|
||
|
|
/* 毛玻璃效果背景 */
|
||
|
|
--glass-white: rgba(255, 255, 255, 0.08);
|
||
|
|
--glass-white-hover: rgba(255, 255, 255, 0.12);
|
||
|
|
--glass-dark: rgba(10, 14, 39, 0.6);
|
||
|
|
--glass-purple: rgba(81, 65, 195, 0.1);
|
||
|
|
--glass-cyan: rgba(6, 182, 212, 0.1);
|
||
|
|
|
||
|
|
/* 霓虹光效 */
|
||
|
|
--neon-blue: #00d4ff;
|
||
|
|
--neon-purple: #a855f7;
|
||
|
|
--neon-pink: #ec4899;
|
||
|
|
--glow-blue: 0 0 20px rgba(0, 212, 255, 0.5);
|
||
|
|
--glow-purple: 0 0 20px rgba(168, 85, 247, 0.5);
|
||
|
|
--glow-pink: 0 0 20px rgba(236, 72, 153, 0.5);
|
||
|
|
|
||
|
|
/* 文字颜色 */
|
||
|
|
--text-primary: var(--aurora-50);
|
||
|
|
--text-secondary: var(--aurora-200);
|
||
|
|
--text-muted: var(--aurora-300);
|
||
|
|
--text-accent: var(--cyan-400);
|
||
|
|
--text-gradient: var(--gradient-text);
|
||
|
|
|
||
|
|
/* 背景色 */
|
||
|
|
--bg-primary: var(--aurora-950);
|
||
|
|
--bg-secondary: var(--aurora-900);
|
||
|
|
--bg-tertiary: var(--aurora-800);
|
||
|
|
--bg-card: var(--glass-white);
|
||
|
|
--bg-overlay: rgba(10, 14, 39, 0.8);
|
||
|
|
|
||
|
|
/* 边框 */
|
||
|
|
--border-default: rgba(255, 255, 255, 0.1);
|
||
|
|
--border-hover: rgba(255, 255, 255, 0.2);
|
||
|
|
--border-accent: var(--cyan-500);
|
||
|
|
--border-gradient: linear-gradient(90deg,
|
||
|
|
var(--purple-500),
|
||
|
|
var(--cyan-500));
|
||
|
|
|
||
|
|
/* 高级阴影 */
|
||
|
|
--shadow-neon:
|
||
|
|
0 0 20px rgba(91, 126, 194, 0.5),
|
||
|
|
0 0 40px rgba(107, 93, 211, 0.3),
|
||
|
|
0 0 60px rgba(6, 182, 212, 0.2);
|
||
|
|
|
||
|
|
--shadow-card:
|
||
|
|
0 10px 40px rgba(0, 0, 0, 0.3),
|
||
|
|
0 2px 10px rgba(91, 126, 194, 0.2);
|
||
|
|
|
||
|
|
--shadow-hover:
|
||
|
|
0 20px 60px rgba(0, 0, 0, 0.4),
|
||
|
|
0 10px 20px rgba(107, 93, 211, 0.3),
|
||
|
|
inset 0 0 0 1px rgba(255, 255, 255, 0.1);
|
||
|
|
|
||
|
|
--shadow-glass:
|
||
|
|
0 8px 32px 0 rgba(31, 38, 135, 0.37),
|
||
|
|
inset 0 0 0 1px rgba(255, 255, 255, 0.1);
|
||
|
|
|
||
|
|
--shadow-text:
|
||
|
|
0 0 10px rgba(91, 126, 194, 0.8),
|
||
|
|
0 0 20px rgba(107, 93, 211, 0.6),
|
||
|
|
0 0 30px rgba(6, 182, 212, 0.4);
|
||
|
|
|
||
|
|
/* 动画时长 */
|
||
|
|
--duration-instant: 100ms;
|
||
|
|
--duration-fast: 200ms;
|
||
|
|
--duration-normal: 300ms;
|
||
|
|
--duration-slow: 500ms;
|
||
|
|
--duration-slower: 800ms;
|
||
|
|
--duration-slowest: 1200ms;
|
||
|
|
|
||
|
|
/* 动画缓动函数 */
|
||
|
|
--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-elastic: cubic-bezier(0.68, -0.55, 0.32, 1.55);
|
||
|
|
--ease-back: cubic-bezier(0.36, 0, 0.66, -0.56);
|
||
|
|
|
||
|
|
/* 模糊效果 */
|
||
|
|
--blur-sm: blur(4px);
|
||
|
|
--blur-md: blur(8px);
|
||
|
|
--blur-lg: blur(16px);
|
||
|
|
--blur-xl: blur(24px);
|
||
|
|
--blur-2xl: blur(40px);
|
||
|
|
--backdrop-blur: blur(12px);
|
||
|
|
|
||
|
|
/* 字体系统 */
|
||
|
|
--font-display: 'Orbitron', 'Space Grotesk', sans-serif;
|
||
|
|
--font-primary: 'Inter', 'PingFang SC', sans-serif;
|
||
|
|
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
|
||
|
|
|
||
|
|
/* 字体大小 - 响应式 */
|
||
|
|
--text-xs: clamp(0.75rem, 1.5vw, 0.875rem);
|
||
|
|
--text-sm: clamp(0.875rem, 2vw, 1rem);
|
||
|
|
--text-base: clamp(1rem, 2.5vw, 1.125rem);
|
||
|
|
--text-lg: clamp(1.125rem, 3vw, 1.25rem);
|
||
|
|
--text-xl: clamp(1.25rem, 3.5vw, 1.5rem);
|
||
|
|
--text-2xl: clamp(1.5rem, 4vw, 2rem);
|
||
|
|
--text-3xl: clamp(2rem, 5vw, 2.5rem);
|
||
|
|
--text-4xl: clamp(2.5rem, 6vw, 3.5rem);
|
||
|
|
--text-5xl: clamp(3rem, 7vw, 4.5rem);
|
||
|
|
--text-6xl: clamp(3.5rem, 8vw, 6rem);
|
||
|
|
|
||
|
|
/* 间距系统 */
|
||
|
|
--space-0: 0;
|
||
|
|
--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;
|
||
|
|
--space-32: 8rem;
|
||
|
|
|
||
|
|
/* 圆角 */
|
||
|
|
--radius-sm: 0.5rem;
|
||
|
|
--radius-md: 0.75rem;
|
||
|
|
--radius-lg: 1rem;
|
||
|
|
--radius-xl: 1.5rem;
|
||
|
|
--radius-2xl: 2rem;
|
||
|
|
--radius-3xl: 3rem;
|
||
|
|
--radius-full: 9999px;
|
||
|
|
|
||
|
|
/* 装饰性元素 */
|
||
|
|
--pattern-grid: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23667eea' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||
|
|
|
||
|
|
--pattern-dots: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%236B5DD3' fill-opacity='0.1'%3E%3Ccircle cx='1' cy='1' r='1'/%3E%3C/g%3E%3C/svg%3E");
|
||
|
|
|
||
|
|
/* 特殊效果 */
|
||
|
|
--noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.02'/%3E%3C/svg%3E");
|
||
|
|
|
||
|
|
/* 动画关键帧定义 */
|
||
|
|
--animation-float: float 6s ease-in-out infinite;
|
||
|
|
--animation-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||
|
|
--animation-gradient: gradient 8s linear infinite;
|
||
|
|
--animation-glow: glow 2s ease-in-out infinite alternate;
|
||
|
|
}
|