/* CSS变量定义 - 大厂标准纯白半透明毛玻璃配色方案 */ :root { /* ========== 基础文本颜色 - 大厂标准 ========== */ --xyx-text-color: #1d1d1f; /* 主文本 - Apple风格深灰 */ --xyx-text-color-light: #6e6e73; /* 次要文本 - 中等灰 */ --xyx-text-color-muted: #86868b; /* 辅助文本 - 浅灰 */ --xyx-text-color-inverse: #ffffff; /* 反色文本 - 白色 */ /* ========== 品牌主色调 - 统一协调的蓝色系 ========== */ --xyx-accent-color: #0071e3; /* 主色 - Apple Blue */ --xyx-accent-color-hover: #0077ed; /* 悬停 - 稍亮 */ --xyx-accent-color-active: #0066cc; /* 激活 - 稍暗 */ --xyx-accent-color-alpha-05: rgba(0, 113, 227, 0.05); --xyx-accent-color-alpha-10: rgba(0, 113, 227, 0.1); --xyx-accent-color-alpha-15: rgba(0, 113, 227, 0.15); --xyx-accent-color-alpha-20: rgba(0, 113, 227, 0.2); --xyx-accent-color-alpha-30: rgba(0, 113, 227, 0.3); --xyx-primary-color: #0071e3; /* 主色调 */ --xyx-border-color: rgba(0, 0, 0, 0.06); /* 边框颜色 - 更柔和 */ /* ========== 纯白半透明毛玻璃效果 - 大厂标准 ========== */ --xyx-glass-bg: rgba(255, 255, 255, 0.72); /* 主背景 - 72%透明度（Apple标准） */ --xyx-glass-bg-solid: rgba(255, 255, 255, 0.85); /* 实心背景 - 85%透明度 */ --xyx-glass-bg-light: rgba(255, 255, 255, 0.6); /* 浅背景 - 60%透明度 */ --xyx-glass-bg-hover: rgba(255, 255, 255, 0.8); /* 悬停背景 - 80%透明度 */ --xyx-glass-bg-active: rgba(255, 255, 255, 0.9); /* 激活背景 - 90%透明度 */ --xyx-glass-border: rgba(255, 255, 255, 0.18); /* 边框 - 白色半透明（Apple风格） */ --xyx-glass-border-hover: rgba(0, 0, 0, 0.08); /* 悬停边框 - 深色 */ --xyx-glass-shadow: rgba(0, 0, 0, 0.04); /* 阴影 - 极轻微 */ --xyx-glass-shadow-hover: rgba(0, 0, 0, 0.08); /* 悬停阴影 */ --xyx-glass-blur: 30px; /* 模糊度 - 大厂标准 */ --xyx-glass-radius: 18px; /* 圆角 - 大厂标准 */ --xyx-glass-radius-sm: 10px; /* 小圆角 */ --xyx-glass-radius-lg: 24px; /* 大圆角 */ /* ========== 背景颜色系统 - 蓝天白云风格（参考图片） ========== */ --xyx-bg-color: #e3f0ff; /* 页面背景 - subtle的浅蓝色（比之前稍重） */ --xyx-bg-gradient: linear-gradient(180deg, #d6e9ff 0%, #e3f0ff 35%, #ecf5ff 70%, #f5f9ff 90%, #ffffff 100%); /* 从浅蓝到白色的平滑渐变（蓝色稍重） */ --xyx-section-bg: rgba(255, 255, 255, 0.4); /* 区块背景 */ --xyx-card-bg: rgba(255, 255, 255, 0.72); /* 卡片背景 */ --xyx-input-bg: rgba(255, 255, 255, 0.8); /* 输入框背景 */ --xyx-dropdown-bg: rgba(255, 255, 255, 0.85); /* 下拉菜单背景 */ /* ========== 状态颜色 - 统一协调的配色 ========== */ /* 成功 - 柔和的绿色 */ --xyx-success-color: #34c759; /* Apple Green */ --xyx-success-color-hover: #30d158; --xyx-success-bg: rgba(52, 199, 89, 0.1); --xyx-success-bg-hover: rgba(52, 199, 89, 0.15); /* 危险 - 柔和的红色 */ --xyx-danger-color: #ff3b30; /* Apple Red */ --xyx-danger-color-hover: #ff453a; --xyx-danger-bg: rgba(255, 59, 48, 0.1); --xyx-danger-bg-hover: rgba(255, 59, 48, 0.15); /* 警告 - 柔和的橙色 */ --xyx-warning-color: #ff9500; /* Apple Orange */ --xyx-warning-color-hover: #ff9f0a; --xyx-warning-bg: rgba(255, 149, 0, 0.1); --xyx-warning-bg-hover: rgba(255, 149, 0, 0.15); /* 信息 - 柔和的蓝色 */ --xyx-info-color: #5ac8fa; /* Apple Blue Light */ --xyx-info-color-hover: #64d2ff; --xyx-info-bg: rgba(90, 200, 250, 0.1); --xyx-info-bg-hover: rgba(90, 200, 250, 0.15); /* ========== 表格和列表 ========== */ --xyx-table-header-bg: rgba(255, 255, 255, 0.6); --xyx-table-row-hover: rgba(0, 113, 227, 0.04); --xyx-table-border: rgba(0, 0, 0, 0.04); /* ========== 过渡效果 - 大厂标准缓动函数 ========== */ --xyx-transition-speed: 0.25s; /* 标准过渡 */ --xyx-transition-speed-fast: 0.15s; /* 快速过渡 */ --xyx-transition-speed-slow: 0.4s; /* 慢速过渡 */ --xyx-glass-transition: all var(--xyx-transition-speed) cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Apple标准缓动 */ /* ========== 间距变量 - 基于8px网格系统（大公司标准） ========== */ --xyx-spacing-xs: 4px; /* 极小间距 - 图标与文字之间 */ --xyx-spacing-sm: 8px; /* 小间距 - 紧密元素之间 */ --xyx-spacing-md: 16px; /* 中间距 - 标准元素间距 */ --xyx-spacing-lg: 24px; /* 大间距 - 区块之间 */ --xyx-spacing-xl: 32px; /* 超大间距 - 大区块之间 */ --xyx-spacing-2xl: 48px; /* 2倍超大间距 */ --xyx-spacing-3xl: 64px; /* 3倍超大间距 */ --xyx-spacing-4xl: 96px; /* 4倍超大间距 */ /* ========== 组件间距 - 统一协调的布局比例 ========== */ --xyx-component-gap: 16px; /* 组件间距 - 标准 */ --xyx-section-gap: 32px; /* 区块间距 - 标准 */ --xyx-page-padding: 24px; /* 页面内边距 - 标准 */ --xyx-card-padding: 24px; /* 卡片内边距 - 标准 */ --xyx-card-padding-sm: 16px; /* 卡片内边距 - 小 */ --xyx-card-padding-lg: 32px; /* 卡片内边距 - 大 */ /* ========== 元素尺寸 - 统一协调的比例系统 ========== */ /* 按钮尺寸 */ --xyx-button-height: 40px; /* 标准按钮高度 */ --xyx-button-height-sm: 32px; /* 小按钮高度 */ --xyx-button-height-lg: 48px; /* 大按钮高度 */ --xyx-button-padding-x: 20px; /* 按钮水平内边距 */ --xyx-button-padding-y: 10px; /* 按钮垂直内边距 */ --xyx-button-padding-x-sm: 16px; /* 小按钮水平内边距 */ --xyx-button-padding-y-sm: 8px; /* 小按钮垂直内边距 */ --xyx-button-padding-x-lg: 28px; /* 大按钮水平内边距 */ --xyx-button-padding-y-lg: 14px; /* 大按钮垂直内边距 */ --xyx-button-min-width: 80px; /* 按钮最小宽度 */ --xyx-button-min-width-sm: 64px; /* 小按钮最小宽度 */ --xyx-button-min-width-lg: 100px; /* 大按钮最小宽度 */ /* 输入框尺寸 */ --xyx-input-height: 44px; /* 标准输入框高度（符合触摸目标） */ --xyx-input-height-sm: 36px; /* 小输入框高度 */ --xyx-input-height-lg: 52px; /* 大输入框高度 */ --xyx-input-padding-x: 16px; /* 输入框水平内边距 */ --xyx-input-padding-y: 12px; /* 输入框垂直内边距 */ /* 图标尺寸 */ --xyx-icon-size: 18px; /* 标准图标大小 */ --xyx-icon-size-sm: 14px; /* 小图标大小 */ --xyx-icon-size-lg: 24px; /* 大图标大小 */ --xyx-icon-size-xl: 32px; /* 超大图标大小 */ /* 头像/缩略图尺寸 */ --xyx-avatar-size: 40px; /* 标准头像大小 */ --xyx-avatar-size-sm: 32px; /* 小头像大小 */ --xyx-avatar-size-lg: 64px; /* 大头像大小 */ /* 导航栏尺寸 */ --xyx-navbar-height: 70px; /* 导航栏高度 */ --xyx-navbar-item-height: 36px; /* 导航项高度 */ --xyx-navbar-item-padding-x: 15px; /* 导航项水平内边距 */ --xyx-navbar-item-padding-y: 8px; /* 导航项垂直内边距 */ /* 字体大小变量 */ --xyx-font-size-xs: 12px; --xyx-font-size-sm: 14px; --xyx-font-size-md: 16px; --xyx-font-size-lg: 18px; --xyx-font-size-xl: 24px; --xyx-font-size-2xl: 32px; --xyx-font-size-3xl: 48px; /* 行高变量 */ --xyx-line-height-sm: 1.4; --xyx-line-height-md: 1.6; --xyx-line-height-lg: 1.8; /* 阴影系统 - 移除全局阴影 */ --xyx-shadow-xs: none; --xyx-shadow-sm: none; --xyx-shadow-md: none; --xyx-shadow-lg: none; --xyx-shadow-xl: none; --xyx-shadow-2xl: none; /* ========== 焦点和交互状态 ========== */ --xyx-focus-ring: 0 0 0 3px var(--xyx-accent-color-alpha-20); --xyx-focus-ring-offset: 2px; --xyx-focus-ring-color: var(--xyx-accent-color); /* 最小触摸目标（符合Fitts定律和WCAG标准） */ --xyx-touch-target-min: 44px; /* 字体权重 - 更清晰的层次 */ --xyx-font-weight-normal: 400; --xyx-font-weight-medium: 500; --xyx-font-weight-semibold: 600; --xyx-font-weight-bold: 700; } /* ========== 全局背景样式 - 蓝天白云风格纯白半透明毛玻璃 ========== */ body { background: var(--xyx-bg-gradient); background-attachment: fixed; background-color: var(--xyx-bg-color); min-height: 100vh; transition: background var(--xyx-transition-speed) ease, color var(--xyx-transition-speed) ease; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; color: var(--xyx-text-color); } /* 全局可访问性优化 */ * { box-sizing: border-box; } /* ========== 焦点可见性 - 符合WCAG标准 ========== */ *:focus-visible { outline: 2px solid var(--xyx-focus-ring-color); outline-offset: var(--xyx-focus-ring-offset); border-radius: var(--xyx-glass-radius-sm); } /* 禁用文本选择（仅在必要时） */ .no-select { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* 平滑滚动 */ html { scroll-behavior: smooth; } /* 图片优化 */ img { max-width: 100%; height: auto; display: block; }