130 lines
6.1 KiB
CSS
130 lines
6.1 KiB
CSS
/**
|
|
* ============================================
|
|
* 健身房管理系统小程序 - 全局配色变量
|
|
* 主题：活力运动风格
|
|
* 主色调：深蓝专业 + 活力橙热情
|
|
* 兼容暗色/浅色模式基础，保证可访问性
|
|
* ============================================
|
|
*/
|
|
|
|
:root {
|
|
/* ========== 主品牌色 ========== */
|
|
--primary-dark: #0B2B4B; /* 深蓝主色 - 用于头部导航栏、重要按钮、品牌标识，体现专业信赖感 */
|
|
--primary-deep: #1A4A6F; /* 中深蓝色 - 用于hover状态、次级按钮、图标点缀，增加层次感 */
|
|
--primary-light: #2C6288; /* 浅蓝色（预留）- 用于选中态或辅助背景，保持和谐渐变 */
|
|
|
|
/* ========== 强调/行动色 ========== */
|
|
--accent-orange: #FF6B35; /* 活力橙 - 主要CTA按钮、会员标识、高亮徽章、关键数据，刺激行动力 */
|
|
--accent-orange-light: #FF8C5A; /* 浅橙色 - hover轻量背景、渐变辅助，带来温暖运动感 */
|
|
--accent-orange-dark: #E55A2B; /* 深橙色 - 按压状态或重要警告，保持色彩体系完整 */
|
|
|
|
/* ========== 背景色系 ========== */
|
|
--bg-light: #F9FAFE; /* 全局浅灰蓝背景 - 柔和且提升深蓝/橙色的视觉舒适度 */
|
|
--bg-white: #FFFFFF; /* 纯白卡片背景 - 用于内容卡片、表单区域，提高可读性与层次感 */
|
|
--bg-gray: #F2F5F9; /* 浅灰辅助背景 - 分割区域或禁用态背景 */
|
|
|
|
/* ========== 文本色系 ========== */
|
|
--text-dark: #1E2A3A; /* 主要文字 - 标题、正文，保证高对比度 */
|
|
--text-muted: #5E6F8D; /* 辅助文字 - 次要信息、占位符，保持易读性 */
|
|
--text-light: #8A99B4; /* 更浅文字 - 提示语、时间戳，但需注意与背景对比 */
|
|
--text-inverse: #FFFFFF; /* 反白文字 - 深色/橙色背景上的文字 */
|
|
|
|
/* ========== 边框/分割线 ========== */
|
|
--border-light: #E9EDF2; /* 浅边框 - 卡片分割、列表边界，细腻柔和 */
|
|
--border-focus: #FF6B35; /* 聚焦边框 - 输入框选中或强调区域，使用橙色点缀 */
|
|
|
|
/* ========== 状态颜色（功能性） ========== */
|
|
--success-green: #2ECC71; /* 成功绿 - 已完成课程、健康打卡 */
|
|
--warning-amber: #F39C12; /* 警示橙黄 - 提醒、到期提示 */
|
|
--error-red: #E74C3C; /* 错误红 - 异常情况或取消预约 */
|
|
--info-blue: #3498DB; /* 信息蓝 - 提示气泡、帮助文字 */
|
|
|
|
/* ========== 渐变色 (提升活力感) ========== */
|
|
--gradient-orange: linear-gradient(135deg, #FF6B35 0%, #FF8C5A 100%); /* 橙色渐变 - 会员按钮、重要徽章 */
|
|
--gradient-blue: linear-gradient(135deg, #0B2B4B 0%, #1A4A6F 100%); /* 深蓝渐变 - 头部banner或特别卡片 */
|
|
--gradient-subtle: linear-gradient(120deg, #F9FAFE 0%, #FFFFFF 100%); /* 微弱渐变 - 增加细节精致度 */
|
|
|
|
/* ========== 阴影层级 ========== */
|
|
--shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.03), 0 2px 6px rgba(0, 0, 0, 0.05); /* 卡片小阴影 轻量浮起 */
|
|
--shadow-md: 0 12px 28px rgba(0, 0, 0, 0.08); /* 中等阴影 - 弹窗或下拉菜单 */
|
|
--shadow-lg: 0 20px 35px rgba(0, 0, 0, 0.12); /* 大阴影 - 模态框、悬浮元素 */
|
|
--shadow-orange-glow: 0 4px 12px rgba(255, 107, 53, 0.25); /* 橙色光晕 - 增强CTA吸引力 */
|
|
|
|
/* ========== 圆角规范 (柔和运动风) ========== */
|
|
--radius-sm: 12px; /* 小组件、标签圆角 */
|
|
--radius-md: 20px; /* 标准卡片圆角 */
|
|
--radius-lg: 28px; /* 大容器、头部卡片圆角 */
|
|
--radius-full: 999px; /* 胶囊按钮、头像完全圆角 */
|
|
|
|
/* ========== 布局与间距 ========== */
|
|
--spacing-xs: 4px;
|
|
--spacing-sm: 8px;
|
|
--spacing-md: 16px;
|
|
--spacing-lg: 24px;
|
|
--spacing-xl: 32px;
|
|
|
|
/* ========== 字体 (移动端优先) ========== */
|
|
--font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
|
--font-size-xs: 0.7rem; /* 辅助标注 */
|
|
--font-size-sm: 0.8rem; /* 次要文字 */
|
|
--font-size-base: 0.9rem; /* 正文基准 */
|
|
--font-size-md: 1rem; /* 小标题 */
|
|
--font-size-lg: 1.2rem; /* 卡片标题 */
|
|
--font-size-xl: 1.4rem; /* 大数字/欢迎语 */
|
|
--font-weight-regular: 400;
|
|
--font-weight-medium: 500;
|
|
--font-weight-bold: 700;
|
|
--font-weight-extrabold: 800;
|
|
}
|
|
|
|
/* ========== 暗色模式适配（可选，保持品牌一致性） ========== */
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
/* 暗色模式下微调背景与文字，保留品牌色核心 */
|
|
--bg-light: #121826;
|
|
--bg-white: #1E2636;
|
|
--bg-gray: #0F141F;
|
|
--text-dark: #EDF2F7;
|
|
--text-muted: #9AA9C1;
|
|
--border-light: #2A3346;
|
|
--shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.4);
|
|
/* 保留主色深蓝与橙色不变，但可适当提高对比 */
|
|
--primary-dark: #123A5E; /* 亮一点保证深色背景可见度 */
|
|
--accent-orange: #FF7846; /* 稍微提亮橙色 */
|
|
}
|
|
}
|
|
|
|
/* ========== 辅助类 (方便开发直接复用) ========== */
|
|
.bg-primary {
|
|
background-color: var(--primary-dark);
|
|
}
|
|
.bg-accent {
|
|
background-color: var(--accent-orange);
|
|
}
|
|
.text-primary {
|
|
color: var(--primary-dark);
|
|
}
|
|
.text-accent {
|
|
color: var(--accent-orange);
|
|
}
|
|
.btn-orange {
|
|
background: var(--gradient-orange);
|
|
color: white;
|
|
border: none;
|
|
border-radius: var(--radius-full);
|
|
padding: 10px 20px;
|
|
font-weight: var(--font-weight-bold);
|
|
box-shadow: var(--shadow-orange-glow);
|
|
transition: all 0.2s ease;
|
|
}
|
|
.btn-orange:active {
|
|
transform: scale(0.97);
|
|
background: var(--accent-orange-dark);
|
|
}
|
|
.card-default {
|
|
background: var(--bg-white);
|
|
border-radius: var(--radius-md);
|
|
box-shadow: var(--shadow-sm);
|
|
border: 1px solid var(--border-light);
|
|
padding: var(--spacing-md);
|
|
} |