@charset "utf-8"; /** * 终端金融数据系统 - 公共主题变量 (Terminal Design System) * 专为高密度、长时间注视的深色环境设计 * * 使用方法：在每个 HTML 的最顶部引入 * * * 修改主题色：只需改这一个文件，全部12个页面自动生效 * 版本号规则：每次修改 theme.css 后更新 ?v=YYYYMMDD 参数 */ :root { /* ================= 1. 背景色系统 (深色低对比) ================= */ --bg-app: #0E1015; /* 软件底层级背景 */ --bg-panel: #15181E; /* 面板/卡片背景 */ --bg-hover: #21262E; /* 列表悬停/选中背景 */ --bg-border: #2B303B; /* 分割线/边框颜色 */ /* ================= 2. 文字色系统 ================= */ --text-primary: #DDE2E8; /* 核心文字：名称、重要数据 (非纯白，防眩光) */ --text-secondary: #8A939E; /* 辅助文字：表头、非核心维度 */ --text-muted: #4A5361; /* 极弱文字：时间、无关紧要的描述 */ /* ================= 3. A股信号色系统 (核心) ================= */ --up-color: #E6413A; /* 涨幅红 (哑光，去刺眼) */ --up-bg: rgba(230, 65, 58, 0.15); /* 涨幅高亮底色 */ --down-color: #28A745; /* 跌幅绿 (沉稳) */ --down-bg: rgba(40, 167, 69, 0.15); --limit-up-color: #FF5E56; /* 涨停极值红 (略亮于普通红) */ --broken-color: #D9A400; /* 炸板/警示暗金 */ --broken-bg: rgba(217, 164, 0, 0.15); /* ================= 4. 交互色 (禁止用红绿) ================= */ --accent: #3685DF; /* 选中/聚焦状态蓝 */ --accent-hover: #4B9BEE; --accent-bg: rgba(54, 133, 223, 0.15); /* ================= 5. 统一层级系统 (z-index 规范，禁止再拍脑袋写魔数) ================= * 全站弹窗/浮层层级只允许用以下 6 档变量，从低到高： * base < sticky < dropdown < tooltip < modal < toast * 迁移前散落的 10~9999999 共 11 个魔数值统一映射到这里。 */ --z-base: 1; /* 页面内普通定位元素（图表工具条等）*/ --z-sticky: 100; /* 表头/侧栏吸附、置顶行 */ --z-dropdown: 1000; /* 下拉菜单/导出菜单/排除面板/右键菜单 */ --z-tooltip: 2000; /* 悬停浮层：云图个股/板块、K线浮层（可被模态盖住）*/ --z-modal: 3000; /* 模态遮罩：Token/联系/升级/文章overlay/确认框 */ --z-toast: 4000; /* 轻提示 toast，永远最上层 */ } /* 用户主题预设：只调整背景/文字层级，涨跌语义色保持一致。 */ :root[data-theme="dark"] { --bg-app: #090a0d; --bg-panel: #111317; --bg-hover: #1d2128; --bg-border: #2b3038; } :root[data-theme="day"] { --bg-app: #f4f6f8; --bg-panel: #ffffff; --bg-hover: #e8eef5; --bg-border: #cbd5e1; --text-primary: #17202b; --text-secondary: #526173; --text-muted: #7b8794; --accent-bg: rgba(54, 133, 223, 0.12); } :root[data-theme="slate"] { --bg-app: #101a2b; --bg-panel: #17263d; --bg-hover: #223653; --bg-border: #304866; --text-primary: #e2ebf7; --text-secondary: #a5b7cf; --text-muted: #70839e; --accent-bg: rgba(78, 154, 240, 0.16); } :root[data-theme="warm"] { --bg-app: #f4efe7; --bg-panel: #fffaf2; --bg-hover: #eee3d3; --bg-border: #d8c8b3; --text-primary: #342b22; --text-secondary: #716252; --text-muted: #988a79; --accent-bg: rgba(160, 104, 45, 0.13); --accent: #9a642d; --accent-hover: #b77836; } /* ================= 全局基准样式 ================= */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } body, html { background-color: var(--bg-app); color: var(--text-primary); font-family: "Microsoft YaHei", "PingFang SC", sans-serif; font-size: 12px; line-height: 1.4; overflow: hidden; user-select: none; } /* 核心：解决数字跳动时的排版抖动（等宽数字字体） */ .num, .price, .percent, .tabular-nums, td[data-type="number"] { font-family: Arial, Consolas, sans-serif; font-variant-numeric: tabular-nums; font-weight: 700; } /* 信号色通用类 */ .is-up { color: var(--up-color) !important; } .is-down { color: var(--down-color) !important; } .is-limit-up { color: var(--limit-up-color) !important; background-color: var(--up-bg); padding: 1px 4px; border-radius: 2px; } .is-broken { color: var(--broken-color) !important; } .is-muted { color: var(--text-muted) !important; } /* 极简滚动条 (适应暗黑终端) */ ::-webkit-scrollbar { width: 4px; height: 4px; } ::-webkit-scrollbar-track { background: var(--bg-app); } ::-webkit-scrollbar-thumb { background: var(--text-muted); border-radius: 3px; } /* CSS Document */