/** * 社会人士避难所 3.0 - CSS 变量系统 * Liquid Glass 液态玻璃风格 - Apple 设计语言 (进阶版) * 新主题色：深海蓝 + 珊瑚橙 */ /* ==================== 基础变量 ==================== */ :root { /* 圆角 - 更大更柔和 */ --radius-sm: 16px; --radius-md: 24px; --radius-lg: 32px; --radius-xl: 48px; --radius-full: 9999px; /* 过渡动画 - 苹果缓动曲线 */ --transition-fast: 200ms cubic-bezier(0.4, 0, 0.2, 1); --transition-normal: 400ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 600ms cubic-bezier(0.4, 0, 0.2, 1); --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1); /* 弹性动画 */ /* 字体 */ --font-primary: 'LXGW WenKai Mono GB', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif; /* 间距 */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2rem; --space-xl: 3rem; --space-2xl: 4rem; /* 容器 */ --container-max: 1200px; --container-padding: 2rem; /* 玻璃模糊强度 - 进阶多层系统 */ --glass-blur: 60px; /* 主模糊增强 */ --glass-blur-heavy: 80px; /* 导航栏更强模糊 */ --glass-saturate: 180%; /* 色彩饱和度增强 */ --glass-brightness: 1.15; /* 亮度提升 */ } /* ==================== 白天模式 - 液态玻璃进阶 ==================== */ :root { /* 背景色 - 更深的蓝灰底色，增加与卡片的对比度 */ --bg-primary: linear-gradient(135deg, #C5D5E0 0%, #D8E5ED 50%, #C8DCE8 100%); --bg-color: #C8DCE8; --bg-secondary: rgba(255, 255, 255, 0.5); /* 玻璃效果 - 半透明白带冷蓝调 */ --glass-bg: rgba(240, 248, 255, 0.55); --glass-bg-hover: rgba(255, 255, 255, 0.75); /* 边缘高光系统 - 增强对比 */ --glass-border-top: rgba(255, 255, 255, 0.9); --glass-border-left: rgba(255, 255, 255, 0.5); --glass-border-right: rgba(255, 255, 255, 0.3); --glass-border-bottom: rgba(200, 220, 235, 0.4); --glass-border: rgba(255, 255, 255, 0.6); --glass-border-subtle: rgba(255, 255, 255, 0.3); /* 内阴影营造厚度感 */ --glass-shadow-inner: inset 0 2px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 0 rgba(0, 0, 0, 0.05); /* 外阴影层次 - 更明显 */ --glass-shadow: 0 8px 32px rgba(27, 107, 147, 0.18), 0 4px 12px rgba(27, 107, 147, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08), var(--glass-shadow-inner); --glass-shadow-hover: 0 12px 48px rgba(27, 107, 147, 0.25), 0 8px 24px rgba(27, 107, 147, 0.15), 0 2px 6px rgba(0, 0, 0, 0.1), inset 0 2px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(0, 0, 0, 0.08); /* 光泽效果 - 更强 */ --glass-shine: radial-gradient( ellipse at 50% 0%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.2) 40%, transparent 70% ); /* 新主题色 - 深海蓝 + 珊瑚橙 */ --accent-primary: #1B6B93; /* 深海蓝 */ --accent-secondary: #4FC0D0; /* 浅海蓝 */ --accent-tertiary: #FF6B6B; /* 珊瑚橙 */ --accent-hover: #155724; --accent-glow: rgba(27, 107, 147, 0.25); /* 渐变强调 */ --accent-gradient: linear-gradient(135deg, #1B6B93 0%, #4FC0D0 100%); --accent-gradient-warm: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%); /* 文字色 - 增强对比度 */ --text-primary: #1A2B3C; /* 深蓝黑 */ --text-secondary: #3D5A73; /* 中蓝灰 */ --text-muted: #6B8BA4; /* 浅蓝灰 */ --text-on-accent: #FFFFFF; /* 状态色 */ --status-online: #22C55E; --status-offline: #94A3B8; --status-busy: #EF4444; } /* ==================== 黑暗模式 - 液态玻璃进阶 ==================== */ [data-theme="dark"] { /* 背景色 - 深邃的暗色渐变 */ --bg-primary: linear-gradient(135deg, #0A0F16 0%, #121820 50%, #0D1218 100%); --bg-color: #0A0F16; --bg-secondary: rgba(255, 255, 255, 0.03); /* 玻璃效果 - 夜间冷调 */ --glass-bg: rgba(30, 41, 59, 0.5); --glass-bg-hover: rgba(45, 58, 78, 0.65); /* 边缘高光系统 - 夜间 */ --glass-border-top: rgba(255, 255, 255, 0.25); --glass-border-left: rgba(255, 255, 255, 0.12); --glass-border-right: rgba(255, 255, 255, 0.08); --glass-border-bottom: rgba(0, 0, 0, 0.3); --glass-border: rgba(255, 255, 255, 0.12); --glass-border-subtle: rgba(255, 255, 255, 0.06); /* 内阴影 - 夜间 */ --glass-shadow-inner: inset 0 1.5px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.2); /* 外阴影层次 - 夜间 */ --glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.35), 0 16px 48px rgba(0, 0, 0, 0.25), var(--glass-shadow-inner); --glass-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.45), 0 24px 64px rgba(0, 0, 0, 0.35), inset 0 1.5px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.25); /* 光泽效果 - 夜间 */ --glass-shine: radial-gradient( ellipse at 50% 0%, rgba(255, 255, 255, 0.12) 0%, transparent 50% ); /* 主题色 - 夜晚更亮 */ --accent-primary: #5CD1E5; /* 亮海蓝 */ --accent-secondary: #7DD3E8; /* 浅海蓝 */ --accent-tertiary: #FF8E8E; /* 柔和珊瑚 */ --accent-hover: #7EE8FA; --accent-glow: rgba(92, 209, 229, 0.35); /* 渐变强调 */ --accent-gradient: linear-gradient(135deg, #5CD1E5 0%, #7DD3E8 100%); --accent-gradient-warm: linear-gradient(135deg, #FF8E8E 0%, #FFB07A 100%); /* 文字色 - 优化可读性 */ --text-primary: #F8FAFC; /* 更亮的白色 */ --text-secondary: #E2E8F0; /* 更亮的浅灰 */ --text-muted: #A3B3C9; /* 稍亮的灰色，提升可读性 */ --text-on-accent: #0A0F16; /* 状态色 */ --status-online: #4ADE80; --status-offline: #64748B; --status-busy: #F87171; } /* ==================== 系统偏好检测 ==================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg-primary: linear-gradient(135deg, #0A0F16 0%, #121820 50%, #0D1218 100%); --bg-color: #0A0F16; --bg-secondary: rgba(255, 255, 255, 0.03); --glass-bg: rgba(30, 41, 59, 0.5); --glass-bg-hover: rgba(45, 58, 78, 0.65); --glass-border-top: rgba(255, 255, 255, 0.25); --glass-border-left: rgba(255, 255, 255, 0.12); --glass-border-right: rgba(255, 255, 255, 0.08); --glass-border-bottom: rgba(0, 0, 0, 0.3); --glass-border: rgba(255, 255, 255, 0.12); --glass-border-subtle: rgba(255, 255, 255, 0.06); --glass-shadow-inner: inset 0 1.5px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.2); --glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.35), 0 16px 48px rgba(0, 0, 0, 0.25), var(--glass-shadow-inner); --glass-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.45), 0 24px 64px rgba(0, 0, 0, 0.35), inset 0 1.5px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.25); --glass-shine: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.12) 0%, transparent 50%); --accent-primary: #5CD1E5; --accent-secondary: #7DD3E8; --accent-tertiary: #FF8E8E; --accent-hover: #7EE8FA; --accent-glow: rgba(92, 209, 229, 0.35); --accent-gradient: linear-gradient(135deg, #5CD1E5 0%, #7DD3E8 100%); --accent-gradient-warm: linear-gradient(135deg, #FF8E8E 0%, #FFB07A 100%); --text-primary: #F8FAFC; --text-secondary: #E2E8F0; --text-muted: #A3B3C9; --text-on-accent: #0A0F16; --status-online: #4ADE80; --status-offline: #64748B; --status-busy: #F87171; } } /* ==================== 减少动画偏好 ==================== */ @media (prefers-reduced-motion: reduce) { :root { --transition-fast: 0ms; --transition-normal: 0ms; --transition-slow: 0ms; --transition-spring: 0ms; } }