/* ========================================================================== 智能投研专业版 · 统一主题层 theme.css -------------------------------------------------------------------------- 投放位置：/assets/theme.css 加载顺序：必须在每个页面自己的 CSS **之前** link，页面 CSS 可以覆盖它。 主题切换： / 未标记时跟随 prefers-color-scheme（默认按 dark 处理）。 约束：不引用任何外部字体 / 图片 / 脚本（CSP: default-src 'self'）。 语义色纪律：红=涨 绿=跌，仅用于价格方向；产品强调色是琥珀金，不参与方向表达。 ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens · 暗色（默认真相源） -------------------------------------------------------------------------- */ :root, :root[data-theme="dark"] { color-scheme: dark; /* 背景三层 */ --bg: #07090e; /* 页面底 */ --surface: #0e1117; /* 卡片 / 面板 */ --surface-2: #141822; /* 卡片内嵌层 / 表头 / 输入框 */ --surface-hover: #1a1f29; --overlay: rgba(6, 8, 12, .62); /* 描边 */ --line: #222834; /* 常规边框 */ --line-soft: #171b23; /* 发丝分隔线 */ --line-strong: #303846; /* 强调边框 / 输入聚焦前 */ /* 文字四级 */ --text: #f1ebdd; --text-dim: #a69f8f; --text-faint: #6f6a5f; --text-invert: #14110a; /* 产品强调色（琥珀金，禁止用于涨跌） */ --accent: #d9b56a; /* 香槟金：只做线/字/点，不做实底（黑金机构版 #E2B667 家族）*/ --accent-hover: #e8c682; --accent-ink: #14110a; /* 仅 .mm-btn--solid 用 */ --accent-deep: #8b642a; /* 深金：渐变尾/装饰线 */ --hl-bg: rgba(217, 181, 106, .10); /* 高亮底，正文色不变 */ --accent-bg: rgba(217, 181, 106, .10); --accent-line: rgba(217, 181, 106, .30); /* 语义方向色（A股口径：红涨 绿跌） */ --up: #e0685f; --up-bg: rgba(224, 104, 95, .12); --down: #5fc492; --down-bg: rgba(95, 196, 146, .12); --flat: #8e9a99; --flat-bg: rgba(139, 147, 163, .12); /* 状态色 */ --warn: #c9973f; --warn-bg: rgba(201, 151, 63, .12); --info: #7fa6c9; --info-bg: rgba(127, 166, 201, .12); --danger: #d65d57; --danger-bg: rgba(214, 93, 87, .12); --ok: #e0685f; /* 状态灯用红点（所有者规定），不用绿 */ --ok-bg: rgba(224, 104, 95, .12); /* 阴影 / 焦点 */ --shadow-1: 0 1px 2px rgba(0, 0, 0, .5); --shadow-2: 0 10px 26px -14px rgba(0, 0, 0, .8); --shadow-3: 0 24px 60px -28px rgba(0, 0, 0, .9); --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); /* 图表 8 色（暗底） */ --c1: #e2b667; /* 琥珀 */ --c2: #7fa6c9; /* 蓝 */ --c3: #69cb9e; /* 青 */ --c4: #b48ead; /* 紫 */ --c5: #d99059; /* 橙 */ --c6: #8b94a6; /* 灰 */ --c7: #d9675d; /* 品红 */ --c8: #f0ce85; /* 银灰 */ --grid-major: #222834; --grid-minor: #171b23; --refline: #3a4150; } /* -------------------------------------------------------------------------- 2. Tokens · 亮色（开灯 · 米纸调） -------------------------------------------------------------------------- */ :root[data-theme="light"] { color-scheme: light; --bg: #f5f4f1; --surface: #ffffff; --surface-2: #f7f6f2; --surface-hover: #f0eee9; --overlay: rgba(28, 26, 22, .38); --line: #e2ded4; --line-soft: #edeae2; --line-strong: #c6c0b3; --text: #171a21; --text-dim: #5a606c; --text-faint: #8b9099; --text-invert: #ffffff; --accent: #8b642a; --accent-hover: #6f4f20; --accent-ink: #ffffff; --accent-bg: rgba(139, 100, 42, .09); --accent-line: rgba(139, 100, 42, .28); --up: #ce2f2f; --up-bg: rgba(206, 47, 47, .09); --down: #0e8f55; --down-bg: rgba(14, 143, 85, .09); --flat: #6e7480; --flat-bg: rgba(110, 116, 128, .10); --warn: #a06a06; --warn-bg: rgba(160, 106, 6, .10); --info: #2e6be6; --info-bg: rgba(46, 107, 230, .09); --danger: #c0392b; --danger-bg: rgba(192, 57, 43, .09); --ok: #ce2f2f; --ok-bg: rgba(206, 47, 47, .09); --shadow-1: 0 1px 2px rgba(30, 27, 22, .07); --shadow-2: 0 10px 26px -16px rgba(30, 27, 22, .30); --shadow-3: 0 24px 60px -30px rgba(30, 27, 22, .38); --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); --c1: #8b642a; --c2: #2e6be6; --c3: #1d8c99; --c4: #7455b8; --c5: #c4551f; --c6: #6b7280; --c7: #b84a82; --c8: #6c7482; --grid-major: #e4e1d8; --grid-minor: #eeece5; --refline: #b6b0a2; } /* 系统主题：未显式声明 data-theme 时，浅色系统走亮色 */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --bg: #f5f4f1; --surface: #ffffff; --surface-2: #f7f6f2; --surface-hover: #f0eee9; --overlay: rgba(28,26,22,.38); --line: #e2ded4; --line-soft: #edeae2; --line-strong: #c6c0b3; --text: #171a21; --text-dim: #5a606c; --text-faint: #8b9099; --text-invert: #ffffff; --accent: #8b642a; --accent-hover: #6f4f20; --accent-ink: #ffffff; --accent-bg: rgba(139,100,42,.09); --accent-line: rgba(139,100,42,.28); --up: #ce2f2f; --up-bg: rgba(206,47,47,.09); --down: #0e8f55; --down-bg: rgba(14,143,85,.09); --flat: #6e7480; --flat-bg: rgba(110,116,128,.10); --warn: #a06a06; --warn-bg: rgba(160,106,6,.10); --info: #2e6be6; --info-bg: rgba(46,107,230,.09); --danger: #c0392b; --danger-bg: rgba(192,57,43,.09); --ok: #ce2f2f; --ok-bg: rgba(206,47,47,.09); --shadow-1: 0 1px 2px rgba(30,27,22,.07); --shadow-2: 0 10px 26px -16px rgba(30,27,22,.30); --shadow-3: 0 24px 60px -30px rgba(30,27,22,.38); --c1:#8b642a; --c2:#2e6be6; --c3:#1d8c99; --c4:#7455b8; --c5:#c4551f; --c6:#6b7280; --c7:#b84a82; --c8:#6c7482; --grid-major:#e4e1d8; --grid-minor:#eeece5; --refline:#b6b0a2; } } /* -------------------------------------------------------------------------- 3. 与主题无关的基础 token -------------------------------------------------------------------------- */ :root { --font-sans: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Hiragino Sans GB", -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "DIN Alternate", Consolas, "Liberation Mono", "Microsoft YaHei", monospace; /* 4px 基准间距 */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; /* 圆角：按语义分级，不要全站一个圆角 */ --r-xs: 4px; /* 芯片 / 标签 */ --r-sm: 6px; /* 按钮 / 输入 */ --r-md: 10px; /* 卡片 */ --r-lg: 14px; /* 模态 / 登录卡 */ --r-pill: 999px; /* 字号阶梯 */ --fs-micro: 10.5px; --fs-xs: 11.5px; --fs-sm: 12.5px; --fs-base: 14px; --fs-md: 16px; --fs-lg: 20px; --fs-xl: 26px; --fs-2xl: 34px; --fs-3xl: 44px; /* 布局 */ --shell-max: 1440px; --shell-wide: 1680px; --gutter: 28px; --topbar-h: 52px; --tr: .18s cubic-bezier(.2, .7, .2, 1); } @media (max-width: 900px) { :root { --gutter: 16px; } } /* -------------------------------------------------------------------------- 4. Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; background: var(--bg); } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--fs-base); line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); } button, input, select, textarea { font: inherit; color: inherit; } :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); } /* 数字统一等宽对齐 —— 全站任何数字列都应带 .num */ .num, .tabular { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; } /* 方向语义 —— 只表示价格方向 */ .up { color: var(--up); } .down { color: var(--down); } .flat { color: var(--flat); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } /* -------------------------------------------------------------------------- 5. 组件 · 顶栏 mm-topbar -------------------------------------------------------------------------- */ .mm-topbar { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: var(--sp-4); height: var(--topbar-h); padding: 0 var(--gutter); background: color-mix(in srgb, var(--surface) 92%, transparent); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); } .mm-brand { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--text); font-weight: 700; font-size: var(--fs-base); letter-spacing: .04em; white-space: nowrap; } .mm-brand .pip { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); } .mm-crumb { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; color: var(--text-faint); font-size: var(--fs-sm); } .mm-crumb a { color: var(--text-dim); } .mm-crumb a:hover { color: var(--text); } .mm-crumb .sep { color: var(--line-strong); } .mm-crumb .cur { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mm-spacer { flex: 1 1 auto; min-width: 0; } /* 数据新鲜度胶囊 —— 由 /api/data-status 驱动 */ .mm-fresh { display: inline-flex; align-items: center; gap: var(--sp-2); height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-dim); font-size: var(--fs-xs); white-space: nowrap; } .mm-fresh .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); flex: none; } .mm-fresh b { color: var(--text); font-family: var(--font-mono); font-weight: 600; } .mm-fresh[data-state="stale"] { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); background: var(--warn-bg); } .mm-fresh[data-state="stale"] .dot { background: var(--warn); } .mm-fresh[data-state="expired"] { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); background: var(--danger-bg); } .mm-fresh[data-state="expired"] .dot { background: var(--danger); } .mm-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-dim); font-size: var(--fs-sm); cursor: pointer; transition: var(--tr); white-space: nowrap; } .mm-btn:hover { color: var(--text); border-color: var(--line-strong); background: var(--surface-hover); } /* 黑金规则：金色只做线、字、点，不做大面积实底。主按钮 = 金描边 + 金字； 每页最多一个 .mm-btn--solid（如登录），其余一律描边。 */ .mm-btn--primary { background: transparent; border-color: var(--accent-line); color: var(--accent); font-weight: 600; } .mm-btn--primary:hover { background: var(--accent-bg); border-color: var(--accent); color: var(--accent-hover); } .mm-btn--solid { background: linear-gradient(180deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 78%, #000) 100%); border-color: transparent; color: var(--accent-ink); font-weight: 600; } .mm-btn--solid:hover { filter: brightness(1.06); color: var(--accent-ink); } /* 高亮/标记：禁止金色实底压深色字。统一为淡金底 + 左侧金线 + 正常正文色 */ .mm-hl, mark.mm-hl { background: var(--accent-bg); color: var(--text); border-left: 2px solid var(--accent); padding: 2px 8px; border-radius: 0 var(--r-xs) var(--r-xs) 0; } .mm-hl-text { color: var(--accent); background: transparent; font-weight: 600; } .mm-btn--ghost { background: transparent; } .mm-btn--icon { width: 32px; padding: 0; } @media (max-width: 900px) { .mm-crumb, .mm-topbar .mm-user-name { display: none; } } /* -------------------------------------------------------------------------- 6. 组件 · 页面壳 -------------------------------------------------------------------------- */ .mm-shell { max-width: var(--shell-max); margin: 0 auto; padding: var(--sp-6) var(--gutter) var(--sp-12); } .mm-shell--wide { max-width: var(--shell-wide); } .mm-shell--narrow { max-width: 960px; } .mm-page-head { display: flex; align-items: flex-end; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-6); } .mm-page-head h1 { margin: 0; font-size: var(--fs-2xl); line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; } .mm-page-head .lede { margin: var(--sp-2) 0 0; color: var(--text-dim); } .mm-eyebrow { margin: 0 0 var(--sp-2); color: var(--accent); font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .22em; text-transform: uppercase; } .mm-section-head { display: flex; align-items: baseline; gap: var(--sp-3); margin: var(--sp-8) 0 var(--sp-3); } .mm-section-head:first-child { margin-top: 0; } .mm-section-head h2 { margin: 0; font-size: var(--fs-md); font-weight: 700; } .mm-section-head .count { color: var(--text-faint); font-family: var(--font-mono); font-size: var(--fs-xs); } .mm-section-head .rule { flex: 1; height: 1px; background: var(--line-soft); } /* -------------------------------------------------------------------------- 7. 组件 · 卡片 / 模块卡 -------------------------------------------------------------------------- */ .mm-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-5); } .mm-card--flush { padding: 0; } .mm-card-head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--line-soft); } .mm-card-head h3 { margin: 0; font-size: var(--fs-base); font-weight: 700; } .mm-card-head .meta { margin-left: auto; color: var(--text-faint); font-size: var(--fs-xs); font-family: var(--font-mono); } .mm-grid { display: grid; gap: var(--sp-4); } .mm-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mm-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 1100px) { .mm-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .mm-grid--3, .mm-grid--2 { grid-template-columns: 1fr; } } .mm-module { display: flex; flex-direction: column; gap: var(--sp-3); min-height: 172px; padding: var(--sp-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); color: inherit; transition: var(--tr); } .mm-module:hover { border-color: var(--accent-line); background: var(--surface-hover); transform: translateY(-1px); box-shadow: var(--shadow-2); color: inherit; } .mm-module-top { display: flex; align-items: center; gap: var(--sp-2); } .mm-module h3 { margin: 0; font-size: var(--fs-md); font-weight: 700; } .mm-module p { margin: 0; color: var(--text-dim); font-size: var(--fs-sm); line-height: 1.65; } .mm-module-foot { display: flex; align-items: center; gap: var(--sp-3); margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--line-soft); color: var(--text-faint); font-family: var(--font-mono); font-size: var(--fs-xs); } .mm-module-foot .open { margin-left: auto; color: var(--accent); font-weight: 600; } /* -------------------------------------------------------------------------- 8. 组件 · 芯片 / 徽标 -------------------------------------------------------------------------- */ .mm-chip { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--r-xs); background: var(--surface-2); color: var(--text-dim); font-size: var(--fs-micro); letter-spacing: .06em; white-space: nowrap; } .mm-chip--ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); background: var(--ok-bg); } .mm-chip--warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); background: var(--warn-bg); } .mm-chip--danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); background: var(--danger-bg); } .mm-chip--info { color: var(--info); border-color: color-mix(in srgb, var(--info) 40%, var(--line)); background: var(--info-bg); } .mm-chip--accent { color: var(--accent); border-color: var(--accent-line); background: var(--accent-bg); } .mm-chip--mono { font-family: var(--font-mono); } /* -------------------------------------------------------------------------- 9. 组件 · KPI -------------------------------------------------------------------------- */ .mm-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-3); } .mm-kpi { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-4) var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); } .mm-kpi .label { color: var(--text-faint); font-size: var(--fs-xs); letter-spacing: .04em; } .mm-kpi .value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-xl); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; } .mm-kpi .delta { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-sm); } .mm-kpi .note { color: var(--text-faint); font-size: var(--fs-xs); } /* 方向只落在数值上，不给整块上色 */ .mm-kpi[data-dir="up"] .delta { color: var(--up); } .mm-kpi[data-dir="down"] .delta { color: var(--down); } .mm-kpi[data-dir="flat"] .delta { color: var(--flat); } /* ------------------------------------------------------------------------- 10. 组件 · 表格 ------------------------------------------------------------------------- */ .mm-table-wrap { overflow-x: auto; } .mm-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .mm-table thead th { position: sticky; top: 0; z-index: 1; padding: var(--sp-2) var(--sp-3); background: var(--surface-2); color: var(--text-faint); font-weight: 600; font-size: var(--fs-xs); letter-spacing: .06em; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; } .mm-table tbody td { padding: 9px var(--sp-3); border-bottom: 1px solid var(--line-soft); white-space: nowrap; } .mm-table tbody tr:hover td { background: var(--surface-hover); } .mm-table tbody tr:last-child td { border-bottom: 0; } .mm-table .n { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .mm-table .name { color: var(--text); font-weight: 600; } .mm-table .sub { color: var(--text-faint); font-size: var(--fs-xs); } /* 方向条：涨绘红、跌绘绿，宽度由行内 --w 控制 */ .mm-bar { display: block; height: 5px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; min-width: 60px; } .mm-bar i { display: block; height: 100%; width: var(--w, 0%); border-radius: inherit; background: var(--flat); } .mm-bar[data-dir="up"] i { background: var(--up); } .mm-bar[data-dir="down"] i { background: var(--down); } /* ------------------------------------------------------------------------- 11. 组件 · 信息流 ------------------------------------------------------------------------- */ .mm-feed { display: flex; flex-direction: column; } .mm-feed-item { display: grid; grid-template-columns: minmax(3.6rem, max-content) minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--line-soft); color: inherit; } .mm-feed-item:last-child { border-bottom: 0; } .mm-feed-item:hover { background: var(--surface-hover); color: inherit; } .mm-feed-time { color: var(--text-faint); font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.5; padding-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mm-feed-title { margin: 0; font-size: var(--fs-sm); font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; } .mm-feed-item--flag { box-shadow: inset 2px 0 var(--up); background: var(--up-bg); } .mm-feed-item--flag .mm-feed-title { color: var(--up); } /* ------------------------------------------------------------------------- 12. 组件 · 空态 / 过期态 / Toast ------------------------------------------------------------------------- */ .mm-empty { display: grid; place-items: center; gap: var(--sp-2); min-height: 200px; padding: var(--sp-8); border: 1px dashed var(--line-strong); border-radius: var(--r-md); color: var(--text-dim); text-align: center; } .mm-empty strong { color: var(--text); font-size: var(--fs-md); } .mm-stale { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: 10px var(--sp-4); margin-bottom: var(--sp-4); border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--line)); border-radius: var(--r-sm); background: var(--warn-bg); color: var(--text-dim); font-size: var(--fs-sm); } .mm-stale strong { color: var(--text); } .mm-stale[data-state="expired"] { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); background: var(--danger-bg); } .mm-toast { position: fixed; right: var(--sp-6); bottom: var(--sp-6); z-index: 90; max-width: min(360px, calc(100vw - 2 * var(--sp-6))); padding: var(--sp-3) var(--sp-4); background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--r-sm); box-shadow: var(--shadow-3); font-size: var(--fs-sm); } .mm-toast[hidden] { display: none !important; } /* ------------------------------------------------------------------------- 13. 组件 · 表单 / 登录卡 ------------------------------------------------------------------------- */ .mm-field { width: 100%; height: 40px; padding: 0 12px; background: var(--surface-2); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-sm); transition: var(--tr); } .mm-field::placeholder { color: var(--text-faint); } .mm-field:hover { border-color: var(--line-strong); } .mm-field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); } .mm-login { min-height: 100vh; display: grid; place-items: center; padding: var(--sp-6); background: var(--bg); } .mm-login-card { width: min(392px, 100%); padding: var(--sp-8); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-3); } .mm-login-card h1 { margin: 0 0 var(--sp-1); font-size: var(--fs-xl); letter-spacing: -.01em; } .mm-login-card .sub { margin: 0 0 var(--sp-6); color: var(--text-dim); font-size: var(--fs-sm); } .mm-login-card form { display: grid; gap: var(--sp-3); } .mm-login-card button { height: 40px; } .mm-login-card .fine { margin: var(--sp-5) 0 0; color: var(--text-faint); font-size: var(--fs-xs); line-height: 1.7; } /* ------------------------------------------------------------------------- 14. 页脚 ------------------------------------------------------------------------- */ .mm-footer { display: flex; gap: var(--sp-4); flex-wrap: wrap; max-width: var(--shell-max); margin: 0 auto; padding: var(--sp-5) var(--gutter); border-top: 1px solid var(--line-soft); color: var(--text-faint); font-family: var(--font-mono); font-size: var(--fs-xs); } .mm-footer .right { margin-left: auto; } /* ------------------------------------------------------------------------- 15. 兼容层 —— 把旧页面的私有变量重指向统一 token 旧页面 CSS 会在本文件之后加载并重新声明这些变量；因此下面这段 只在旧页面**删除**自己的 :root 块之后生效，作为迁移目标状态使用。 ------------------------------------------------------------------------- */ :root { /* dashboard/assets/styles.css */ --page: var(--bg); --raised: var(--surface-2); --border: var(--line); --border-strong: var(--line-strong); --muted: var(--text-dim); --weak: var(--text-faint); --warning: var(--warn); --shadow: var(--shadow-2); /* home-original.css / ib_radar.css / limit_up.css / notebook.css */ --ink: var(--text); --ink-dim: var(--text-dim); --ink-faint: var(--text-faint); --mono: var(--font-mono); --sans: var(--font-sans); --radius: var(--r-md); /* realtime.css */ --panel: var(--surface); --panel-2: var(--surface-2); --txt: var(--text); --dim: var(--text-dim); --faint: var(--text-faint); --dn: var(--down); --err: var(--danger); --live: var(--ok); --r: var(--r-md); --idx-sh: var(--c1); --idx-sz: var(--c2); --idx-cyb: var(--c5); --idx-kc: var(--c3); --idx-hs300: var(--c4); --idx-zz500: var(--c6); --idx-zz1000: var(--c7); } :root{--mm-layer-nav:60;--mm-layer-overlay:100;--mm-layer-drawer:110;--mm-layer-confirm:200} .mm-topbar{z-index:var(--mm-layer-nav)} .mm-logout-overlay{z-index:var(--mm-layer-confirm)} :root{--view-color-0:#0D9488;--view-color-1:#0b0c0f;--view-color-2:#0f131b;--view-color-3:#101114;--view-color-4:#14161b;--view-color-5:#141922;--view-color-6:#16171b;--view-color-7:#1d1e23;--view-color-8:#202127;--view-color-9:#24252b;--view-color-10:#2a2b32;--view-color-11:#3a3b44;--view-color-12:#5c6270;--view-color-13:#77746c;--view-color-14:#78a8ff;--view-color-15:#878d9b;--view-color-16:#a6a29a;--view-color-17:#c2bbaa;--view-color-18:#ded9cc;--view-color-19:#ebe7db;--view-color-20:#ebe7dc;--view-color-21:#ece9e1;--view-color-22:#f23b46;--view-color-23:#f2efe6;--view-color-24:#f3f5f7;--view-color-25:#f5f3ec;--view-color-26:#f7f6f3;--view-color-27:#ffffff;}