/* ============================================= * 主题变量文件（抽取自 layouts/theme_css.php） * 在全站 common.css 之前引入，供全局和各页面使用 var() 引用 * 修改此文件即可统一全站的色彩、圆角、间距、阴影、过渡等 * ============================================= */ :root { /* ---------- 主色调（橙红渐变系列） ---------- */ --color-primary: #ff6b35; /* 主色：橙红（与白色搭配） */ --color-secondary: #f7931e; /* 次色：金橙 */ --color-primary-soft: #ff9a56; /* 主色偏浅（hover/边框） */ --color-primary-deep: #ff5a1f; /* 主色偏深（强调文字） */ --color-gradient: linear-gradient(135deg,#ff6b35,#f7931e); /* 主渐变 */ --color-gradient-strong: linear-gradient(90deg,#ff6b35,#f7931e,#ff9a56,#f7931e,#ff6b35); /* ---------- 辅助色 ---------- */ --color-success: #4caf50; --color-success-soft: #e8f5e9; --color-danger: #e53935; --color-danger-soft: #fff0f0; --color-warning: #ffa502; --color-info: #2196f3; --color-purple: #9c27b0; --color-purple-soft: #f3e5f5; /* ---------- 中性色/背景/文本（灰白主题） ---------- */ --color-bg: #f5f6f8; /* 全站灰白色背景 */ --color-bg-soft: #fafbfc; /* 更浅的灰白（局部轻量区块） */ --color-surface: #ffffff; /* 卡片白色底面 */ --color-surface-warm: #fafbfc; /* 灰白 warm，card 内浅底 */ --color-surface-soft: #f5f6f8; /* 更软的灰白（次要区） */ --color-surface-hot: #fff5f0; /* 微橙底：按钮/标签 hover、filter-bar 强调区 */ --color-border: #eef0f3; /* 浅分隔线（灰白主色） */ --color-border-soft: #f5f6f8; /* 更浅分隔 */ --color-border-warm: #ffe0cc; /* 暖橙边框：分类树线、回复框等主题强调 */ --color-border-warm-soft: #ffd4b8; /* 暖橙偏浅边框 */ --color-text: #333333; --color-text-strong: #1a1a1a; --color-text-soft: #555555; --color-text-muted: #888888; --color-text-disabled: #aaaaaa; --color-text-placeholder: #bbbbbb; /* ---------- 圆角（紧凑版，整体偏小） ---------- */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 12px; --radius-2xl: 14px; --radius-3xl: 16px; --radius-4xl: 18px; --radius-round: 22px; /* 胶囊/按钮大圆角 */ --radius-pill: 50%; /* 圆形头像等 */ /* ---------- 间距（紧凑版，统一 2~4px 步长）---------- */ --space-1: 4px; --space-2: 6px; --space-3: 8px; --space-4: 12px; --space-5: 16px; --space-6: 20px; --space-8: 28px; --space-10: 36px; /* ---------- 阴影 ---------- */ --shadow-sm: 0 2px 8px rgba(255,107,53,0.06); --shadow-md: 0 4px 20px rgba(255,107,53,0.08); --shadow-lg: 0 6px 20px rgba(255,107,53,0.12); --shadow-btn: 0 4px 14px rgba(255,107,53,0.3); /* 按钮抬起阴影 */ --shadow-btn-sm: 0 2px 8px rgba(255,107,53,0.25); /* 小按钮/徽章 */ --shadow-dropdown: 0 8px 30px rgba(0,0,0,0.15); --shadow-modal: 0 20px 60px rgba(0,0,0,0.25); --shadow-card-hover: 0 8px 30px rgba(0,0,0,0.1); /* ---------- 过渡 ---------- */ --trans-fast: .15s; --trans-base: .2s; --trans-slow: .25s; --trans-ease: cubic-bezier(.16,1,.3,1); /* ---------- 字体 ---------- */ --font-xs: 11px; --font-sm: 12px; --font-base: 14px; --font-md: 15px; --font-lg: 16px; --font-xl: 17px; --font-2xl: 18px; --font-title: 22px; /* ---------- 导航栏 ---------- */ --nav-height: 64px; --nav-bg: linear-gradient(90deg,#ff6b35,#f7931e); --nav-shadow: 0 2px 12px rgba(255,107,53,0.2); /* ---------- 常用宽度 ---------- */ --width-container: 1200px; --width-container-sm: 1100px; --width-container-xl: 1400px; } /* 深色模式（预留，后续可通过 切换） */ html[data-theme="dark"] { --color-bg: linear-gradient(135deg,#1e1e2e 0%,#232336 100%); --color-surface: #2a2a3a; --color-surface-warm: #313145; --color-surface-soft: #2c2c3e; --color-surface-hot: #3a3244; --color-border: #3a3a4e; --color-text: #e5e5e5; --color-text-strong: #f5f5f5; --color-text-soft: #c8c8d8; --color-text-muted: #a0a0b0; --shadow-md: 0 4px 20px rgba(0,0,0,0.25); }