/** * CSS Variables - 灵动任务官网设计系统 * 项目：intelligentoffice.cn * 版本：1.0.0 * * 命名规范：--变量类型-具体名称 * 颜色格式：HSL（便于调整明度和饱和度） */ :root { /* ======================================== * 颜色变量 (Colors) * ======================================== */ /* 主色 - 品牌蓝色，用于主要按钮、链接、重点强调 */ --color-primary: hsl(217, 91%, 60%); --color-primary-light: hsl(217, 91%, 70%); --color-primary-dark: hsl(217, 91%, 50%); --color-primary-bg: hsl(217, 91%, 97%); /* 辅助色 - 用于次要元素、辅助信息 */ --color-secondary: hsl(262, 52%, 47%); --color-secondary-light: hsl(262, 52%, 60%); --color-secondary-dark: hsl(262, 52%, 37%); --color-secondary-bg: hsl(262, 52%, 97%); /* 成功色 - 绿色，用于成功状态、正向反馈 */ --color-success: hsl(142, 71%, 45%); --color-success-light: hsl(142, 71%, 55%); --color-success-dark: hsl(142, 71%, 35%); --color-success-bg: hsl(142, 71%, 95%); /* 警告色 - 橙色，用于警告提示、注意事项 */ --color-warning: hsl(38, 92%, 50%); --color-warning-light: hsl(38, 92%, 60%); --color-warning-dark: hsl(38, 92%, 40%); --color-warning-bg: hsl(38, 92%, 95%); /* 错误色 - 红色，用于错误状态、危险操作 */ --color-error: hsl(0, 84%, 60%); --color-error-light: hsl(0, 84%, 70%); --color-error-dark: hsl(0, 84%, 50%); --color-error-bg: hsl(0, 84%, 97%); /* 背景色 */ --color-bg-page: hsl(0, 0%, 100%); --color-bg-secondary: hsl(220, 14%, 96%); --color-bg-card: hsl(0, 0%, 100%); --color-bg-input: hsl(0, 0%, 100%); --color-bg-hover: hsl(220, 14%, 96%); --color-bg-overlay: hsla(0, 0%, 0%, 0.5); /* 文字色 */ --color-text-primary: hsl(220, 13%, 13%); --color-text-secondary: hsl(220, 9%, 46%); --color-text-muted: hsl(220, 9%, 65%); --color-text-disabled: hsl(220, 9%, 75%); --color-text-inverse: hsl(0, 0%, 100%); --color-text-link: hsl(217, 91%, 60%); --color-text-link-hover: hsl(217, 91%, 50%); /* 边框色 */ --color-border-default: hsl(220, 13%, 87%); --color-border-light: hsl(220, 13%, 93%); --color-border-focus: hsl(217, 91%, 60%); --color-border-error: hsl(0, 84%, 60%); /* ======================================== * 字体变量 (Typography) * ======================================== */ /* 字体族 - 系统字体栈，优先使用系统原生字体 */ --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; --font-family-mono: "SF Mono", SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; /* 字号 */ --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 */ /* 标题字号 */ --font-size-h1: var(--font-size-4xl); --font-size-h2: var(--font-size-3xl); --font-size-h3: var(--font-size-2xl); --font-size-h4: var(--font-size-xl); --font-size-h5: var(--font-size-lg); --font-size-h6: var(--font-size-base); /* 行高 */ --line-height-tight: 1.25; --line-height-snug: 1.375; --line-height-normal: 1.5; --line-height-relaxed: 1.625; --line-height-loose: 2; /* 字重 */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* 字间距 */ --letter-spacing-tight: -0.025em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.025em; /* ======================================== * 间距变量 (Spacing) * ======================================== */ /* 基础间距单位 */ --spacing-unit: 0.25rem; /* 4px */ /* 内边距 & 外边距 */ --spacing-xs: 0.25rem; /* 4px */ --spacing-sm: 0.5rem; /* 8px */ --spacing-md: 1rem; /* 16px */ --spacing-lg: 1.5rem; /* 24px */ --spacing-xl: 2rem; /* 32px */ --spacing-2xl: 3rem; /* 48px */ --spacing-3xl: 4rem; /* 64px */ --spacing-4xl: 6rem; /* 96px */ /* 圆角 */ --radius-sm: 0.25rem; /* 4px */ --radius-md: 0.5rem; /* 8px */ --radius-lg: 0.75rem; /* 12px */ --radius-xl: 1rem; /* 16px */ --radius-2xl: 1.5rem; /* 24px */ --radius-full: 9999px; /* 圆形/胶囊形 */ /* ======================================== * 断点变量 (Breakpoints) * 注：CSS 变量不能用于 @media 查询，此处仅作参考 * 在 media query 中请直接使用数值 * ======================================== */ /* * --breakpoint-mobile: 375px; 移动端 * --breakpoint-tablet: 768px; 平板 * --breakpoint-desktop: 1024px; 桌面端 * --breakpoint-wide: 1200px; 宽屏 * --breakpoint-ultra: 1440px; 超宽屏 */ /* 容器最大宽度 */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1200px; --container-2xl: 1440px; /* ======================================== * 效果变量 (Effects) * ======================================== */ /* 阴影 */ --shadow-sm: 0 1px 2px 0 hsla(0, 0%, 0%, 0.05); --shadow-md: 0 4px 6px -1px hsla(0, 0%, 0%, 0.1), 0 2px 4px -2px hsla(0, 0%, 0%, 0.1); --shadow-lg: 0 10px 15px -3px hsla(0, 0%, 0%, 0.1), 0 4px 6px -4px hsla(0, 0%, 0%, 0.1); --shadow-xl: 0 20px 25px -5px hsla(0, 0%, 0%, 0.1), 0 8px 10px -6px hsla(0, 0%, 0%, 0.1); --shadow-2xl: 0 25px 50px -12px hsla(0, 0%, 0%, 0.25); --shadow-inner: inset 0 2px 4px 0 hsla(0, 0%, 0%, 0.05); /* 过渡动画 */ --transition-fast: 150ms ease; --transition-normal: 250ms ease; --transition-slow: 350ms ease; /* 过渡属性预设 */ --transition-colors: color var(--transition-normal), background-color var(--transition-normal), border-color var(--transition-normal); --transition-transform: transform var(--transition-normal); --transition-opacity: opacity var(--transition-normal); --transition-shadow: box-shadow var(--transition-normal); --transition-all: all var(--transition-normal); /* ======================================== * Z-Index 层级 * ======================================== */ --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-modal-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; --z-toast: 1080; } /* ======================================== * 深色模式变量覆盖（预留） * ======================================== */ @media (prefers-color-scheme: dark) { :root { /* 背景色 - 深色模式 */ --color-bg-page: hsl(220, 13%, 10%); --color-bg-secondary: hsl(220, 13%, 15%); --color-bg-card: hsl(220, 13%, 13%); --color-bg-input: hsl(220, 13%, 15%); --color-bg-hover: hsl(220, 13%, 18%); /* 功能色背景 - 深色模式 */ --color-primary-bg: hsl(217, 50%, 20%); --color-secondary-bg: hsl(262, 30%, 20%); --color-success-bg: hsl(142, 30%, 15%); --color-warning-bg: hsl(38, 40%, 18%); --color-error-bg: hsl(0, 40%, 18%); /* 文字色 - 深色模式 */ --color-text-primary: hsl(220, 13%, 95%); --color-text-secondary: hsl(220, 9%, 70%); --color-text-muted: hsl(220, 9%, 55%); --color-text-disabled: hsl(220, 9%, 40%); /* 边框色 - 深色模式 */ --color-border-default: hsl(220, 13%, 25%); --color-border-light: hsl(220, 13%, 20%); } } /* ======================================== * 响应式字号调整 * ======================================== */ /* 移动端基础字号略小 */ @media (max-width: 767px) { :root { --font-size-h1: var(--font-size-3xl); --font-size-h2: var(--font-size-2xl); --font-size-h3: var(--font-size-xl); } }