65 行
2.7 KiB
SCSS
65 行
2.7 KiB
SCSS
/**
|
|
* uni-app 内置样式变量与电竞暗夜流光设计系统 (Cyber-Esports Dark Elegance)
|
|
*/
|
|
|
|
/* 1. 全局背景与表面色阶 */
|
|
$bg-primary: #0A0F1D; // 页面最底色（深邃夜空黑）
|
|
$bg-surface: #151D30; // 卡片/模块容器底色
|
|
$bg-surface-elevated: #1E2942; // 浮层/弹窗底色
|
|
$bg-surface-glass: rgba(21, 29, 48, 0.85); // 拟态磨砂玻璃
|
|
|
|
/* 2. 品牌核心色与流光 */
|
|
$color-brand: #6366F1; // 核心电竞靛蓝
|
|
$color-brand-light: #818CF8; // 亮色高光
|
|
$color-brand-purple: #8B5CF6; // 紫罗兰流光
|
|
$color-brand-glow: rgba(99, 102, 241, 0.35);
|
|
|
|
/* 3. 业务强调与状态色 */
|
|
$color-accent: #10B981; // 翠绿高光（活动项目、在线呼吸灯、核销码）
|
|
$color-accent-glow: rgba(16, 185, 129, 0.3);
|
|
$color-warning: #F59E0B; // 暖橙金（金牌段位、倒计时）
|
|
$color-danger: #EF4444; // 警示红（退款、仲裁）
|
|
|
|
/* 4. 文本与排版无障碍色阶 (满足 WCAG AA 标准) */
|
|
$text-primary: #F8FAFC; // 一级标题与主要文字 (纯白)
|
|
$text-secondary: #94A3B8; // 二级描述文字 (冷灰蓝)
|
|
$text-muted: #64748B; // 三级占位说明文字
|
|
$border-subtle: #1E293B; // 微弱分割线与描边
|
|
|
|
/* 5. 圆角阶梯 */
|
|
$radius-sm: 8rpx;
|
|
$radius-md: 16rpx;
|
|
$radius-lg: 24rpx;
|
|
$radius-xl: 32rpx;
|
|
$radius-full: 9999rpx;
|
|
|
|
/* 6. 统一阴影与电竞流光 */
|
|
$shadow-card: 0 8rpx 24rpx rgba(0, 0, 0, 0.4);
|
|
$shadow-brand: 0 8rpx 24rpx rgba(99, 102, 241, 0.35);
|
|
$shadow-accent: 0 8rpx 24rpx rgba(16, 185, 129, 0.3);
|
|
|
|
/* 默认变量兼容器 */
|
|
$uni-color-primary: #6366F1;
|
|
$uni-bg-color: #0A0F1D;
|
|
$uni-text-color: #F8FAFC;
|
|
|
|
/* 7. 浅色暖阳晨曦专属 Tokens (Light Warm Sunset Morning) */
|
|
$warm-bg-primary: #FDFBF7; // 页面最底色 (温润奶油米白)
|
|
$warm-bg-surface: #FFFFFF; // 卡片底色 (高洁暖白)
|
|
$warm-bg-surface-elevated: #F8F5F0; // 浮层底色 (浅暖米杏)
|
|
$warm-bg-surface-glass: rgba(255, 255, 255, 0.90); // 暖白透亮磨砂玻璃
|
|
|
|
$warm-color-brand: #EA580C; // 核心曜橙 (高对比度聚焦色)
|
|
$warm-color-brand-light: #F97316; // 暖橙高光
|
|
$warm-color-brand-gold: #F59E0B; // 暖金流光
|
|
$warm-color-brand-glow: rgba(234, 88, 12, 0.18); // 柔和发光光晕
|
|
$warm-color-brand-gradient: linear-gradient(135deg, #F97316, #FB923C);
|
|
|
|
$warm-text-primary: #1C1917; // 暖炭黑一级主文本 (对比度 > 15:1)
|
|
$warm-text-secondary: #57534E; // 暖深灰二级描述文本 (对比度 > 7:1)
|
|
$warm-text-muted: #78716C; // 暖中灰三级占位说明
|
|
$warm-border-subtle: #F0ECE4; // 浅米暖灰边框
|
|
$warm-border-focus: #EA580C; // 聚焦边框
|
|
$warm-shadow-brand: 0 8rpx 24rpx rgba(234, 88, 12, 0.25);
|
|
|