/** * 聚支付管理系统 - 浅色主题颜色变量 * * @fileoverview 浅色主题的所有颜色变量定义，使用 CSS 变量实现主题切换 * @author 流沙聚开发团队 * @company 流沙聚工作室 * @version 1.0.0 * @since 2025-11-02 * @copyright Copyright (c) 2025 流沙聚工作室. All rights reserved. * @license 商业软件，保留所有权利 * @contact https://www.icks018.cn * * 本文件包含： * - 主题色变量（--primary-color 等） * - 状态色变量（成功、警告、危险、信息） * - 背景颜色变量（--body-bg、--card-bg 等） * - 文本颜色变量（--text-primary、--text-secondary 等） * - 边框颜色变量 * - 阴影变量 * - 渐变色变量 * - 表格颜色变量 * - 滚动条颜色变量 * * 使用场景：浅色主题时动态加载 * 加载方式：通过 JavaScript 根据用户选择的主题动态加载 * 互斥文件：color-dark.css（同一时间只加载一个） * * 注意事项： * - 所有变量名必须与 color-dark.css 保持一致 * - 只有变量值不同，变量名相同 * - 禁止在其他 CSS 文件中硬编码颜色值 * * 本软件为商业软件，严禁复制、传播、反编译或用于其他任何用途 * 仅授权合法用户在许可范围内使用 */ :root { /* ==================== 主题色 ==================== */ --primary-color: #4F46E5; --primary-hover: #4338CA; --primary-light: #EEF2FF; --primary-dark: #3730A3; /* ==================== 状态色 ==================== */ --success-color: #10B981; --success-hover: #059669; --success-light: #D1FAE5; --success-bg: #D4EDDA; --success-text: #155724; --warning-color: #F59E0B; --warning-hover: #D97706; --warning-light: #FEF3C7; --warning-bg: #FFF3CD; --warning-text: #856404; --danger-color: #EF4444; --danger-hover: #DC2626; --danger-light: #FEE2E2; --danger-bg: #F8D7DA; --danger-text: #721C24; --info-color: #3B82F6; --info-hover: #2563EB; --info-light: #DBEAFE; /* ==================== 背景颜色 ==================== */ --body-bg: #F3F4F6; --sidebar-bg: #FFFFFF; --navbar-bg: #FFFFFF; --card-bg: #FFFFFF; --content-bg: #F9FAFB; --bg-primary: #FFFFFF; --bg-secondary: #F3F4F6; --bg-tertiary: #E5E7EB; --bg-hover: #F3F4F6; /* ==================== 表格专用背景 ==================== */ --table-header-bg: #F9FAFB; --table-hover-bg: #F3F4F6; /* ==================== 表单输入背景 ==================== */ --input-bg: #FFFFFF; /* ==================== 文字颜色 ==================== */ --text-primary: #111827; --text-secondary: #6B7280; --text-muted: #9CA3AF; --text-inverse: #FFFFFF; --text-white: #FFFFFF; --text-black: #000000; /* ==================== 边框颜色 ==================== */ --border-color: #E5E7EB; --border-light: #F3F4F6; --border-dark: #D1D5DB; /* ==================== 圆角 ==================== */ --border-radius: 12px; --border-radius-sm: 8px; --border-radius-lg: 16px; /* ==================== 悬停和激活状态 ==================== */ --hover-bg: #F3F4F6; --active-bg: #EEF2FF; --active-text: #4F46E5; /* ==================== 阴影 ==================== */ --shadow-color-sm: rgba(0, 0, 0, 0.05); --shadow-color-md: rgba(0, 0, 0, 0.1); --shadow-color-lg: rgba(0, 0, 0, 0.15); --shadow-color-xl: rgba(0, 0, 0, 0.2); --shadow-sm: 0 1px 2px 0 var(--shadow-color-sm); --shadow-md: 0 4px 6px -1px var(--shadow-color-md); --shadow-lg: 0 10px 15px -3px var(--shadow-color-lg); --shadow-xl: 0 20px 25px -5px var(--shadow-color-xl); /* ==================== 遮罩层 ==================== */ --overlay-bg: rgba(0, 0, 0, 0.5); --overlay-light: rgba(0, 0, 0, 0.3); --overlay-dark: rgba(0, 0, 0, 0.7); /* ==================== 滚动条 ==================== */ --scrollbar-track: #F3F4F6; --scrollbar-thumb: #D1D5DB; --scrollbar-thumb-hover: #9CA3AF; /* ==================== 渐变色（基于主题色系） ==================== */ --gradient-primary-start: #6366F1; --gradient-primary-end: #4F46E5; --gradient-success-start: #34D399; --gradient-success-end: #10B981; --gradient-warning-start: #FBBF24; --gradient-warning-end: #F59E0B; --gradient-info-start: #60A5FA; --gradient-info-end: #3B82F6; --gradient-danger-start: #F87171; --gradient-danger-end: #EF4444; /* 特殊渐变色（用于卡片、图标等） */ --gradient-purple-start: #6366F1; --gradient-purple-end: #4F46E5; --gradient-pink-start: #EC4899; --gradient-pink-end: #DB2777; --gradient-blue-start: #3B82F6; --gradient-blue-end: #2563EB; --gradient-green-start: #10B981; --gradient-green-end: #059669; --gradient-orange-start: #F59E0B; --gradient-orange-end: #D97706; --gradient-red-start: #EF4444; --gradient-red-end: #DC2626; /* ==================== 通用颜色 ==================== */ --white: #FFFFFF; --black: #000000; /* ==================== 简化颜色别名（兼容性） ==================== */ --primary: var(--primary-color); --success: var(--success-color); --warning: var(--warning-color); --danger: var(--danger-color); --info: var(--info-color); /* ==================== 图表颜色 ==================== */ --chart-color-1: #3B82F6; --chart-color-2: #10B981; --chart-color-3: #F59E0B; --chart-color-4: #EF4444; --chart-color-5: #8B5CF6; --chart-color-6: #14B8A6; --chart-axis-line: #E5E7EB; --chart-axis-label: #6B7280; --chart-split-line: #F3F4F6; --chart-grid-bg: #FFFFFF; --chart-tooltip-bg: rgba(0, 0, 0, 0.75); --chart-no-data: #9CA3AF; /* ==================== 金额颜色 ==================== */ --amount-color: #DC2626; --amount-positive: #10B981; --amount-negative: #EF4444; --amount-warning: #F59E0B; /* ==================== 第三方平台颜色 ==================== */ --wechat-color: #07C160; --alipay-color: #1677FF; --qq-color: #12B7F5; /* ==================== 透明度变体 ==================== */ --overlay-white-light: rgba(255, 255, 255, 0.1); --overlay-white-medium: rgba(255, 255, 255, 0.15); --overlay-white-heavy: rgba(255, 255, 255, 0.2); --overlay-black-light: rgba(0, 0, 0, 0.1); --overlay-black-medium: rgba(0, 0, 0, 0.3); --overlay-black-heavy: rgba(0, 0, 0, 0.5); /* ==================== 阴影增强 ==================== */ --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.12); --shadow-focus: 0 0 0 0.2rem rgba(79, 70, 229, 0.15); /* ==================== Bootstrap 颜色覆盖 ==================== */ --bs-primary: var(--primary-color); --bs-success: var(--success-color); --bs-warning: var(--warning-color); --bs-danger: var(--danger-color); --bs-info: var(--info-color); --bs-body-bg: var(--body-bg); --bs-body-color: var(--text-primary); --bs-border-color: var(--border-color); }