/* 哈珀设计系统 —— 与哈珀未来学院官网（harpercollege.cn）统一 所有哈珀 Web 界面（业务页 / 监控台 / 录屏控制台）都引这一份。 改样式改这里，不要在各页面里写死颜色。 */ :root { /* ── 品牌色：与哈珀未来学院官网 assets/css/site-theme.css 同源 ── */ --hc-brand: #245b8b; /* 主品牌蓝：按钮 / 链接 / 强调 */ --hc-brand-strong: #17466f; /* 深一档：hover / 激活 */ --hc-brand-deep: #0d2f4d; /* 最深：顶栏 / 侧栏 / 页脚 */ --hc-brand-soft: #edf5fb; /* 浅底（浅色皮肤用） */ --hc-brand-line: #cbddec; /* 浅描边（浅色皮肤用） */ --hc-on-brand: #fff; --hc-focus: rgba(36,91,139,.24); --hc-teal: #14b8a6; /* 强调（Logo / 侧栏激活条） */ /* 组件别名（历史命名，指向品牌色，勿再另起颜色） */ --hc-navy: var(--hc-brand-deep); --hc-navy-2: var(--hc-brand-strong); --hc-navy-3: #2a4f74; --hc-blue: var(--hc-brand); --hc-blue-hover: var(--hc-brand-strong); --hc-radius: 10px; --hc-radius-lg: 14px; --hc-font: "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", sans-serif; } /* ── 深色皮肤（可选：）──────── */ html[data-theme="dark"] { color-scheme: dark; --hc-bg: #0c1620; /* 由 brand-deep 压暗而来，同色系 */ --hc-surface: #132234; --hc-surface-2: #1a2d43; --hc-border: #24405c; --hc-text: #e6edf5; --hc-muted: #93a7bd; --hc-faint: #6a8299; --hc-ok: #46d19e; --hc-ok-bg: #102f24; --hc-warn: #e0a83a; --hc-warn-bg: #33290f; --hc-err: #f0736f; --hc-err-bg: #3a1a1c; --hc-shadow: 0 1px 3px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.3); } /* ── 浅色皮肤（默认，与官网 site-theme.css 同款）───── */ :root, html[data-theme="light"] { color-scheme: light; --hc-bg: #f7f8fa; --hc-surface: #ffffff; --hc-surface-2: #ffffff; --hc-border: #e5e7ea; --hc-text: #111827; --hc-muted: #667085; --hc-faint: #98a2b3; --hc-ok: #17795e; --hc-ok-bg: #e8f7f1; --hc-warn: #a5620d; --hc-warn-bg: #fdf4e3; --hc-err: #c0322e; --hc-err-bg: #fdeceb; --hc-shadow: 0 2px 10px rgba(0,0,0,.05); } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; } body { background: var(--hc-bg); color: var(--hc-text); font: 14px/1.6 var(--hc-font); } /* ── 顶栏（官网深藏青条）────────────────────────────── */ .hc-header { background: #fff; color: #111; border-bottom: 1px solid #e5e7ea; box-shadow: 0 1px 6px rgba(0,0,0,.04); display: flex; align-items: center; gap: 14px; padding: 0 18px; height: 60px; flex: 0 0 auto; } html[data-theme="dark"] .hc-header { background: var(--hc-surface); color: var(--hc-text); border-bottom-color: var(--hc-border); box-shadow: none; } .hc-header .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; letter-spacing: 1px; color: inherit; text-decoration: none; } .hc-header .brand img.logo { height: 34px; width: auto; display: block; } .hc-header .sub { color: var(--hc-muted); font-size: 12px; font-weight: 400; letter-spacing: 0; } .hc-header .spacer { margin-left: auto; } .hc-header a { color: var(--hc-muted); text-decoration: none; font-size: 13px; } .hc-header a:hover { color: var(--hc-brand); } /* 官网 .lp-account 同款主行动按钮 */ .hc-header .act { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; background: var(--hc-brand); border: 1px solid var(--hc-brand); border-radius: 4px; color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; } .hc-header .act:hover { background: var(--hc-brand-strong); border-color: var(--hc-brand-strong); color: #fff; } /* ── 侧栏（官网后台那种深藏青竖栏）────────────────────── */ .hc-side { width: 210px; flex: 0 0 auto; background: var(--hc-surface); border-right: 1px solid var(--hc-border); color: #4b5563; display: flex; flex-direction: column; padding: 14px 12px; gap: 2px; transition: margin-left .2s; } .hc-side.hide { margin-left: -210px; } .hc-side .grp { padding: 14px 10px 6px; font-size: 11px; color: var(--hc-faint); letter-spacing: .5px; font-weight: 600; } .hc-side a { display: flex; align-items: center; gap: 11px; padding: 9px 15px; border-radius: 8px; color: #4b5563; cursor: pointer; font-size: 14px; font-weight: 600; text-decoration: none; } .hc-side a:hover { background: var(--hc-brand-soft); color: var(--hc-brand-strong); } .hc-side a.on { background: var(--hc-brand); color: #fff; } .hc-side .foot { margin-top: auto; padding: 10px 15px; font-size: 11px; color: var(--hc-faint); border-top: 1px solid var(--hc-border); } /* 深色皮肤下的侧栏 */ html[data-theme="dark"] .hc-side { background: var(--hc-surface); color: #c9d6e5; } html[data-theme="dark"] .hc-side a { color: #c9d6e5; } html[data-theme="dark"] .hc-side a:hover { background: var(--hc-surface-2); color: #fff; } html[data-theme="dark"] .hc-side a.on { background: var(--hc-brand); color: #fff; } /* ── 卡片 ───────────────────────────────────────────── */ .hc-card { background: var(--hc-surface); border: 1px solid var(--hc-border); border-radius: var(--hc-radius); box-shadow: var(--hc-shadow); padding: 14px 16px; margin-bottom: 14px; } .hc-card > h3 { margin: 0 0 10px; font-size: 14px; font-weight: 700; } .hc-card.stat { border-top: 3px solid var(--hc-brand); } .hc-card.stat .num { font-size: 30px; font-weight: 700; line-height: 1.2; } .hc-card.stat .lbl { color: var(--hc-muted); font-size: 12px; } /* ── 按钮 ───────────────────────────────────────────── */ .hc-btn { font: inherit; font-weight: 600; border: 1px solid transparent; border-radius: 8px; padding: 8px 16px; cursor: pointer; background: var(--hc-blue); color: #fff; } .hc-btn:hover { background: var(--hc-blue-hover); } .hc-btn.ghost { background: var(--hc-surface); color: var(--hc-brand); border-color: var(--hc-brand-line); } .hc-btn.ghost:hover { background: var(--hc-brand-soft); border-color: var(--hc-brand); color: var(--hc-brand); } html[data-theme="dark"] .hc-btn.ghost { background: var(--hc-surface-2); color: var(--hc-text); border-color: var(--hc-border); } html[data-theme="dark"] .hc-btn.ghost:hover { background: var(--hc-navy-2); } .hc-btn.navy { background: var(--hc-navy); color: #fff; } /* ghost 按钮的激活态：底色+字色一起换，避免藏青字压藏青底 */ .hc-btn.ghost.on, html[data-theme="dark"] .hc-btn.ghost.on { background: var(--hc-brand); color: #fff; border-color: var(--hc-brand); } .hc-btn.ghost.on:hover, html[data-theme="dark"] .hc-btn.ghost.on:hover { background: var(--hc-brand-strong); border-color: var(--hc-brand-strong); color: #fff; } .hc-btn.navy:hover { background: var(--hc-navy-2); } .hc-btn.danger { background: var(--hc-err); } .hc-btn.rec { background: #d93838; } .hc-btn:disabled { opacity: .45; cursor: not-allowed; } .hc-btn.sm { padding: 5px 11px; font-size: 12px; } /* ── 表单 ───────────────────────────────────────────── */ .hc-input, input[type=text], input[type=number], input[type=search], select, textarea { font: inherit; color: var(--hc-text); background: var(--hc-surface-2); border: 1px solid var(--hc-border); border-radius: 8px; padding: 7px 10px; } .hc-input:focus, input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--hc-blue); box-shadow: 0 0 0 3px var(--hc-focus); } .hc-label { font-size: 12px; color: var(--hc-muted); display: block; margin-bottom: 3px; } /* ── 徽标 / 状态 ────────────────────────────────────── */ .hc-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; } .hc-badge.ok { background: var(--hc-ok-bg); color: var(--hc-ok); } .hc-badge.warn { background: var(--hc-warn-bg); color: var(--hc-warn); } .hc-badge.err { background: var(--hc-err-bg); color: var(--hc-err); } .hc-badge.idle { background: var(--hc-surface-2); color: var(--hc-muted); } .hc-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; } .hc-dot.g { background: var(--hc-ok); } .hc-dot.r { background: var(--hc-err); } .ok { color: var(--hc-ok); } .no { color: var(--hc-err); } .muted { color: var(--hc-muted); } .faint { color: var(--hc-faint); } /* ── 布局 ───────────────────────────────────────────── */ .hc-app { display: flex; height: 100vh; } .hc-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .hc-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 20px 34px; } .hc-wrap { max-width: 980px; margin: 0 auto; } .hc-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .hc-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } .hc-sec { font-size: 13px; font-weight: 700; color: var(--hc-navy); margin: 20px 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--hc-border); } /* ── 表格 ───────────────────────────────────────────── */ .hc-table { width: 100%; border-collapse: collapse; background: var(--hc-surface); } .hc-table th { text-align: left; font-size: 12px; color: var(--hc-muted); font-weight: 600; padding: 9px 12px; background: var(--hc-surface-2); border-bottom: 1px solid var(--hc-border); } .hc-table td { padding: 9px 12px; border-bottom: 1px solid var(--hc-border); font-size: 13px; } /* ── 图片卡（截图图库）──────────────────────────────── */ .hc-shot { background: var(--hc-surface); border: 1px solid var(--hc-border); border-radius: var(--hc-radius); overflow: hidden; box-shadow: var(--hc-shadow); } .hc-shot img { width: 100%; display: block; cursor: zoom-in; background: #0b0e1a; } .hc-shot .m { padding: 7px 10px; font-size: 12px; } /* ── 对话气泡 ───────────────────────────────────────── */ .hc-turn { display: flex; flex-direction: column; gap: 3px; max-width: 86%; } .hc-turn.user { align-self: flex-end; align-items: flex-end; } .hc-turn.bot { align-self: flex-start; } .hc-turn.sys { align-self: center; } .hc-turn .who { font-size: 11px; color: var(--hc-faint); } .hc-turn .msg { padding: 8px 13px; border-radius: 12px; white-space: pre-wrap; word-break: break-word; } .hc-turn.user .msg { background: var(--hc-blue); color: #fff; border-bottom-right-radius: 4px; } .hc-turn.bot .msg { background: var(--hc-surface); border: 1px solid var(--hc-border); border-bottom-left-radius: 4px; } .hc-turn.pending .msg { opacity: .6; } .hc-turn.sys .msg { background: transparent; color: var(--hc-muted); font-size: 12px; } .hc-tr { font-size: 12.5px; color: #8ea2c8; border-left: 2px solid #cfd9e8; padding: 2px 8px; } code { background: rgba(255,255,255,.10); padding: 1px 5px; border-radius: 4px; font-size: .92em; }