/* =============== Hao AI - 全局样式定义 ========================== */ /* 根元素变量定义 - 统一命名规范 */ :root { /* 颜色系统 - 使用 --color-* 前缀 */ /* 默认主题为极简白 */ --color-primary: #2d2d2d; --color-accent-blue: #1677ff; --color-accent-blue-dark: #0958d9; --color-accent-blue-rgb: 22, 119, 255; --color-primary-light: #555555; --color-primary-dark: #1a1a1a; --color-primary-rgb: 45, 45, 45; --color-success: #22c55e; --color-success-light: #4ade80; --color-success-rgb: 34, 197, 94; --color-error: #ef4444; --color-error-light: #f87171; --color-error-rgb: 239, 68, 68; --color-warning: #f59e0b; --color-warning-rgb: 245, 158, 11; --color-bg-main: #f5f5f5; --color-bg-secondary: #ffffff; --color-bg-tertiary: #f0f0f0; --color-text-primary: #1f1f1f; --color-text-secondary: #666666; --color-text-muted: #999999; --color-border: rgba(0, 0, 0, 0.06); --color-border-light: rgba(0, 0, 0, 0.12); /* 尺寸系统 - 使用 --radius-* 前缀 */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-pill: 999px; /* 间距系统 - 使用 --space-* 前缀 */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; /* 阴影系统 - 使用 --shadow-* 前缀 */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); --scrollbar-thumb: rgba(45, 45, 45, 0.2); --scrollbar-thumb-hover: rgba(45, 45, 45, 0.4); --sidebar-bg: #ffffff; --input-bg: #ffffff; --card-bg: #ffffff; --hover-bg: rgba(0, 0, 0, 0.04); --card-gradient-from: #d9d9d9; --card-gradient-to: #bfbfbf; /* 动画系统 - 使用 --duration-* 和 --easing-* 前缀 */ --duration-fast: 0.15s; --duration-base: 0.25s; --duration-slow: 0.35s; --easing-standard: ease; --easing-out: ease-out; /* 字体系统 - 使用 --font-* 前缀 */ --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'Monaco', 'Courier New', monospace; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* 兼容旧变量名（逐步废弃） */ --primary-color: var(--color-primary); --bg-main: var(--color-bg-main); --bg-secondary: var(--color-bg-secondary); --bg-tertiary: var(--color-bg-tertiary); --text-primary: var(--color-text-primary); --text-secondary: var(--color-text-secondary); --text-muted: var(--color-text-muted); --border-color: var(--color-border); --spacing-xs: var(--space-xs); --spacing-sm: var(--space-sm); --spacing-md: var(--space-md); --spacing-lg: var(--space-lg); --spacing-xl: var(--space-xl); --spacing-2xl: var(--space-2xl); --transition-fast: var(--duration-fast) var(--easing-standard); --transition-base: var(--duration-base) var(--easing-standard); --transition-slow: var(--duration-slow) var(--easing-out); } /* =========================================== 主题系统 - 通过 data-theme 属性切换 使用方式: =========================================== */ /* 🌙 深空蓝（默认） */ [data-theme="deep-blue"] { --color-primary: #60a5fa; --color-primary-light: #93c5fd; --color-primary-dark: #3b82f6; --color-primary-rgb: 96, 165, 250; --color-bg-main: #0f172a; --color-bg-secondary: #0a0e27; --color-bg-tertiary: #1a2a4a; --color-text-primary: #e2e8f0; --color-text-secondary: #94a3b8; --color-text-muted: #64748b; --color-border: rgba(255, 255, 255, 0.08); --color-border-light: rgba(255, 255, 255, 0.12); --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.5); --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.8); --scrollbar-thumb: rgba(var(--color-primary-rgb), 0.3); --scrollbar-thumb-hover: rgba(var(--color-primary-rgb), 0.5); --sidebar-bg: #0a0e27; --input-bg: #1a2a4a; --card-bg: rgba(30, 41, 59, 0.5); --hover-bg: rgba(255, 255, 255, 0.05); --card-gradient-from: #3b82f6; --card-gradient-to: #60a5fa; } /* ☀️ 极简白（Ant Design Pro 风格）*/ [data-theme="light"] { --color-primary: #2d2d2d; --color-primary-light: #555555; --color-primary-dark: #1a1a1a; --color-primary-rgb: 45, 45, 45; --color-accent-blue: #1677ff; --color-accent-blue-dark: #0958d9; --color-accent-blue-rgb: 22, 119, 255; --color-bg-main: #f5f5f5; --color-bg-secondary: #ffffff; --color-bg-tertiary: #f0f0f0; --color-text-primary: #1f1f1f; --color-text-secondary: #666666; --color-text-muted: #999999; --color-border: rgba(0, 0, 0, 0.06); --color-border-light: rgba(0, 0, 0, 0.12); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); --scrollbar-thumb: rgba(22, 119, 255, 0.2); --scrollbar-thumb-hover: rgba(22, 119, 255, 0.4); --sidebar-bg: #ffffff; --input-bg: #ffffff; --card-bg: #ffffff; --hover-bg: rgba(0, 0, 0, 0.04); --card-gradient-from: #d9d9d9; --card-gradient-to: #bfbfbf; } /* 🟣 赛博紫 */ [data-theme="cyber"] { --color-primary: #a78bfa; --color-primary-light: #c4b5fd; --color-primary-dark: #7c3aed; --color-primary-rgb: 167, 139, 250; --color-bg-main: #0a0015; --color-bg-secondary: #12002a; --color-bg-tertiary: #1e0040; --color-text-primary: #e2ddf0; --color-text-secondary: #a59cc0; --color-text-muted: #7a72a0; --color-border: rgba(167, 139, 250, 0.12); --color-border-light: rgba(167, 139, 250, 0.2); --shadow-sm: 0 4px 12px rgba(167, 139, 250, 0.15); --shadow-md: 0 10px 30px rgba(167, 139, 250, 0.2); --shadow-lg: 0 20px 60px rgba(167, 139, 250, 0.25); --scrollbar-thumb: rgba(167, 139, 250, 0.3); --scrollbar-thumb-hover: rgba(167, 139, 250, 0.5); --sidebar-bg: #12002a; --input-bg: #1e0040; --card-bg: rgba(30, 0, 64, 0.5); --hover-bg: rgba(167, 139, 250, 0.08); --card-gradient-from: #7c3aed; --card-gradient-to: #a78bfa; } /* 🟢 翡翠绿 */ [data-theme="emerald"] { --color-primary: #34d399; --color-primary-light: #6ee7b7; --color-primary-dark: #059669; --color-primary-rgb: 52, 211, 153; --color-bg-main: #0a1f15; --color-bg-secondary: #0d2819; --color-bg-tertiary: #123d24; --color-text-primary: #e0f2e9; --color-text-secondary: #93caa8; --color-text-muted: #6a9d7e; --color-border: rgba(52, 211, 153, 0.1); --color-border-light: rgba(52, 211, 153, 0.18); --shadow-sm: 0 4px 12px rgba(52, 211, 153, 0.12); --shadow-md: 0 10px 30px rgba(52, 211, 153, 0.18); --shadow-lg: 0 20px 60px rgba(52, 211, 153, 0.22); --scrollbar-thumb: rgba(52, 211, 153, 0.3); --scrollbar-thumb-hover: rgba(52, 211, 153, 0.5); --sidebar-bg: #0d2819; --input-bg: #123d24; --card-bg: rgba(18, 61, 36, 0.5); --hover-bg: rgba(52, 211, 153, 0.08); --card-gradient-from: #059669; --card-gradient-to: #34d399; } @media (prefers-color-scheme: light) { :root:not([data-theme]) { /* 跟随系统：默认用亮色 */ --color-primary: #2d2d2d; --color-primary-light: #555555; --color-primary-dark: #1a1a1a; --color-primary-rgb: 45, 45, 45; --color-accent-blue: #1677ff; --color-accent-blue-dark: #0958d9; --color-accent-blue-rgb: 22, 119, 255; --color-bg-main: #f5f5f5; --color-bg-secondary: #ffffff; --color-bg-tertiary: #f0f0f0; --color-text-primary: #1f1f1f; --color-text-secondary: #666666; --color-text-muted: #999999; --color-border: rgba(0, 0, 0, 0.06); --color-border-light: rgba(0, 0, 0, 0.12); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); --scrollbar-thumb: rgba(22, 119, 255, 0.2); --scrollbar-thumb-hover: rgba(22, 119, 255, 0.4); --sidebar-bg: #ffffff; --input-bg: #ffffff; --card-bg: #ffffff; --hover-bg: rgba(0, 0, 0, 0.04); --card-gradient-from: #d9d9d9; --card-gradient-to: #bfbfbf; } } /* 重置基础样式 */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background-color: var(--color-bg-main); color: var(--color-text-primary); font-family: var(--font-family); font-size: 14px; line-height: 1.6; overflow: hidden; } /* 滚动条美化 */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } /* 标题 */ h1 { font-size: 72px; font-weight: 700; letter-spacing: -2px; } h2 { font-size: 36px; font-weight: 700; } h3 { font-size: 24px; font-weight: 600; } h4 { font-size: 18px; font-weight: 600; } /* 链接 */ a { color: var(--color-primary); text-decoration: none; transition: var(--transition-fast); } a:hover { opacity: 0.7; } /* 按钮基础 */ button { font-family: inherit; cursor: pointer; border: none; outline: none; } /* 输入框基础 */ input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; } /* 代码块 */ code { font-family: var(--font-mono); background: var(--card-bg); padding: 2px 6px; border-radius: 4px; font-size: 0.9em; } pre { background: var(--card-bg); padding: var(--spacing-md); border-radius: var(--radius-md); overflow-x: auto; margin: var(--spacing-md) 0; } pre code { background: none; padding: 0; } /* 列表 */ ul, ol { margin-left: var(--spacing-lg); } /* 分隔线 */ hr { border: none; border-top: 1px solid var(--border-color); margin: var(--spacing-lg) 0; } /* 表格 */ table { width: 100%; border-collapse: collapse; margin: var(--spacing-md) 0; } th, td { padding: var(--spacing-md); text-align: left; border-bottom: 1px solid var(--border-color); } th { background: rgba(var(--color-primary-rgb), 0.05); font-weight: 600; } /* 禁用状态 */ :disabled { opacity: 0.5; cursor: not-allowed; } /* 文字选择 */ ::selection { background: rgba(var(--color-primary-rgb), 0.3); color: var(--text-primary); } ::-moz-selection { background: rgba(var(--color-primary-rgb), 0.3); color: var(--text-primary); } /* -- 全局角色管理样式 -- */ .character-management-content { display: flex; flex-direction: column; gap: 20px; max-height: 70vh; } .series-tabs { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--color-border); } .series-tab { padding: 10px 20px; background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text-secondary); font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s; } .series-tab:hover { color: var(--color-primary); border-color: var(--color-primary); background: rgba(var(--color-primary-rgb), 0.06); } .series-tab.active { color: var(--color-primary); border-color: var(--color-primary); background: rgba(var(--color-primary-rgb), 0.1); font-weight: 600; } .category-tabs { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--color-border); } .category-tab { padding: 8px 16px; background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text-secondary); font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.2s; } .category-tab:hover { color: var(--color-primary); border-color: var(--color-primary); background: rgba(var(--color-primary-rgb), 0.06); } .category-tab.active { color: var(--color-primary); border-color: var(--color-primary); background: rgba(var(--color-primary-rgb), 0.1); font-weight: 600; } #global-character-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; padding: 4px; } #global-character-grid::-webkit-scrollbar { width: 6px; } #global-character-grid::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; } .category-count { margin-left: 4px; padding: 2px 6px; background: rgba(var(--color-primary-rgb), 0.2); border-radius: 4px; font-size: 11px; font-weight: 600; } .category-tab.active .category-count { background: rgba(255, 255, 255, 0.2); }