134 lines
4.1 KiB
CSS
134 lines
4.1 KiB
CSS
/* CSS变量定义 - 遵循设计规范中的色彩方案 */
|
|
|
|
:root {
|
|
/* 主色系 - 深色主题 */
|
|
--color-primary: #1a1a2e; /* 深蓝黑 */
|
|
--color-secondary: #16213e; /* 深蓝 */
|
|
--color-accent: #0f3460; /* 中蓝 */
|
|
--color-highlight: #e94560; /* 珊瑚红 */
|
|
|
|
/* 文字颜色 */
|
|
--color-text-primary: #ffffff; /* 白色 */
|
|
--color-text-secondary: #b8b8b8; /* 浅灰 */
|
|
--color-text-muted: #888888; /* 中灰 */
|
|
|
|
/* 背景颜色 */
|
|
--color-bg-primary: #0a0a1a; /* 更深的背景 */
|
|
--color-bg-secondary: #121225; /* 次要背景 */
|
|
--color-bg-card: #1e1e3a; /* 卡片背景 */
|
|
--color-bg-overlay: rgba(0, 0, 0, 0.7); /* 遮罩层 */
|
|
|
|
/* 边框和阴影 */
|
|
--color-border: #2a2a4a;
|
|
--color-border-light: #3a3a5a;
|
|
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
|
|
--shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
|
|
--shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
|
|
--shadow-highlight: 0 0 15px rgba(233, 69, 96, 0.3);
|
|
|
|
/* 字体 */
|
|
--font-heading: 'Montserrat', sans-serif;
|
|
--font-body: 'Open Sans', sans-serif;
|
|
|
|
/* 字体大小 - 响应式 */
|
|
--font-size-xs: 0.75rem; /* 12px */
|
|
--font-size-sm: 0.875rem; /* 14px */
|
|
--font-size-base: 1rem; /* 16px */
|
|
--font-size-lg: 1.125rem; /* 18px */
|
|
--font-size-xl: 1.25rem; /* 20px */
|
|
--font-size-2xl: 1.5rem; /* 24px */
|
|
--font-size-3xl: 1.875rem; /* 30px */
|
|
--font-size-4xl: 2.25rem; /* 36px */
|
|
--font-size-5xl: 3rem; /* 48px */
|
|
--font-size-6xl: 3.75rem; /* 60px */
|
|
|
|
/* 行高 */
|
|
--line-height-tight: 1.2;
|
|
--line-height-normal: 1.5;
|
|
--line-height-relaxed: 1.75;
|
|
|
|
/* 间距 - 基于8px基准 */
|
|
--spacing-1: 0.25rem; /* 2px */
|
|
--spacing-2: 0.5rem; /* 4px */
|
|
--spacing-3: 0.75rem; /* 6px */
|
|
--spacing-4: 1rem; /* 8px */
|
|
--spacing-5: 1.25rem; /* 10px */
|
|
--spacing-6: 1.5rem; /* 12px */
|
|
--spacing-8: 2rem; /* 16px */
|
|
--spacing-10: 2.5rem; /* 20px */
|
|
--spacing-12: 3rem; /* 24px */
|
|
--spacing-16: 4rem; /* 32px */
|
|
--spacing-20: 5rem; /* 40px */
|
|
--spacing-24: 6rem; /* 48px */
|
|
--spacing-32: 8rem; /* 64px */
|
|
--spacing-40: 10rem; /* 80px */
|
|
--spacing-48: 12rem; /* 96px */
|
|
--spacing-56: 14rem; /* 112px */
|
|
--spacing-64: 16rem; /* 128px */
|
|
|
|
/* 边框圆角 */
|
|
--radius-sm: 0.25rem; /* 4px */
|
|
--radius-md: 0.5rem; /* 8px */
|
|
--radius-lg: 1rem; /* 16px */
|
|
--radius-xl: 1.5rem; /* 24px */
|
|
--radius-full: 9999px; /* 完全圆形 */
|
|
|
|
/* 过渡动画 */
|
|
--transition-fast: 150ms ease;
|
|
--transition-normal: 300ms ease;
|
|
--transition-slow: 500ms ease;
|
|
|
|
/* 容器宽度 */
|
|
--container-sm: 640px;
|
|
--container-md: 768px;
|
|
--container-lg: 1024px;
|
|
--container-xl: 1200px;
|
|
--container-2xl: 1400px;
|
|
|
|
/* Z-index层级 */
|
|
--z-dropdown: 1000;
|
|
--z-sticky: 1020;
|
|
--z-fixed: 1030;
|
|
--z-modal-backdrop: 1040;
|
|
--z-modal: 1050;
|
|
--z-popover: 1060;
|
|
--z-tooltip: 1070;
|
|
}
|
|
|
|
/* 浅色主题变量（备用） */
|
|
@media (prefers-color-scheme: light) {
|
|
:root {
|
|
--color-primary: #ffffff;
|
|
--color-secondary: #f8f9fa;
|
|
--color-accent: #e3f2fd;
|
|
--color-highlight: #e94560;
|
|
|
|
--color-text-primary: #1a1a2e;
|
|
--color-text-secondary: #4a5568;
|
|
--color-text-muted: #718096;
|
|
|
|
--color-bg-primary: #ffffff;
|
|
--color-bg-secondary: #f7fafc;
|
|
--color-bg-card: #ffffff;
|
|
--color-bg-overlay: rgba(255, 255, 255, 0.9);
|
|
|
|
--color-border: #e2e8f0;
|
|
--color-border-light: #edf2f7;
|
|
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
--shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
--shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);
|
|
}
|
|
}
|
|
|
|
/* 打印样式 */
|
|
@media print {
|
|
:root {
|
|
--color-primary: #ffffff;
|
|
--color-secondary: #ffffff;
|
|
--color-text-primary: #000000;
|
|
--color-text-secondary: #333333;
|
|
--shadow-sm: none;
|
|
--shadow-md: none;
|
|
--shadow-lg: none;
|
|
}
|
|
} |