/* ========================================================================== 现代 OJ 设计系统 1) 设计变量（深浅两套）2) 基础排版 3) 布局骨架 4) 组件 5) 题库 6) 题页工作台 7) 编辑器 8) 判题控制台 9) 响应式 ========================================================================== */ /* ---------- 1) 设计变量 ---------- */ :root { --bg: #f6f7f9; --surface: #ffffff; --surface-2: #fafafb; --surface-3: #f1f3f5; --border: #e6e8eb; --border-strong: #d3d7dd; /* 列表行的发丝分隔线（题库/错题本/收藏夹 .prow）。亮色沿用 --border； 暗色的 --border(#333b46) 压在深底上太亮，每行像被亮线包边的独立卡条（2026-09-29 实测 「分离卡片条」观感主因），故暗色把行线往 surface 方向收回 45%。 */ --row-line: var(--border); --text: #16181d; --text-2: #5b6270; /* --text-3 是「提示/次要文字」用色，白卡片上实测 3.17:1（低于 WCAG AA 4.5:1）。 #6b7280 在该色与各底色（白卡片 4.83 / 页面底 4.51 / surface-2 4.63）都过关， 视觉上仍是同一档灰；--text-2 更深的层级关系不变。 */ --text-3: #6b7280; --brand: #2f6df6; --brand-hover: #245bdb; --brand-soft: #eaf1ff; --ac: #12a150; --ac-soft: #e8f8ef; --info: #0e8aa8; --info-soft: #e2f4f8; --warn: #d98200; --warn-soft: #fff5e6; --kt: #7a58f2; --kt-soft: #f1ecff; /* 知识点标签紫（NOI 大纲树，2026-09-30） */ --danger: #e5484d; --danger-soft: #fdecec; --mono: "Sarasa Mono SC", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* 正文不放等宽（2026-10-15 用户「读起来生硬」）：等宽黑体只适合代码， 长文阅读回人文黑体栈（苹方/雅黑/思源），轻松清晰零加载成本。 */ --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif; /* 阅读内容区字体（2026-10-16 用户钦定「字体还是保留默认字体吧」）：文楷实验回退， 题面/文章/解析与全站 UI 同用默认黑体栈；代码仍用 --mono 等宽。 （fonts.css 里的 LXGW @font-face 保留但无人引用=零下载，随时可回切。） */ --font-read: var(--sans); --r-sm: 6px; --r: 10px; --r-lg: 14px; /* 字号（设置里可调，JS 改写这两个变量） */ --code-fs: 13px; --fs-statement: 15px; --sh-1: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06); --sh-2: 0 8px 24px rgba(16, 24, 40, .10); --nav-h: 56px; /* 语法高亮 */ --syn-kw: #c026d3; --syn-str: #0f7b3f; --syn-num: #b45309; --syn-fn: #2563eb; --syn-type: #0891b2; --syn-com: #98a1ad; } /* 暗色：跟随系统，除非用户显式选了亮色 */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0d0f12; --surface: #15181d; --surface-2: #1a1e24; --surface-3: #21262e; --border: #333b46; --border-strong: #454f5e; --row-line: color-mix(in srgb, var(--border) 45%, var(--surface)); --text: #e9ecf1; --text-2: #9aa3b2; --text-3: #858d9b; --brand: #5b8cff; --brand-hover: #7ba3ff; --brand-soft: #17233c; --ac: #35c07a; --ac-soft: #11281d; --info: #56d4dd; --info-soft: rgba(86, 212, 221, .12); --warn: #f0b429; --warn-soft: #2b2210; --kt: #b9a3ff; --kt-soft: rgba(150, 120, 255, .14); --kt: #b9a3ff; --kt-soft: rgba(150, 120, 255, .14); --danger: #f2555a; --danger-soft: #2c1a1b; --sh-1: 0 1px 2px rgba(0, 0, 0, .4); --sh-2: 0 10px 30px rgba(0, 0, 0, .45); --syn-kw: #e879f9; --syn-str: #7ee787; --syn-num: #f0b429; --syn-fn: #79c0ff; --syn-type: #56d4dd; --syn-com: #6f7784; } } /* 用户手动选暗色（覆盖系统亮色） */ :root[data-theme="dark"] { --bg: #0d0f12; --surface: #15181d; --surface-2: #1a1e24; --surface-3: #21262e; /* 深色描边原 #262b33：压在行底上只有 1.22–1.25:1，表格的横线细到几乎看不见， 在「重置密码」那种带边框输入框的列里，看上去就像横线断成两截（用户报障）。 改 #333b46（1.53–1.57:1）后线是连续的、清楚的，又不抢内容。 */ --border: #333b46; --border-strong: #454f5e; --row-line: color-mix(in srgb, var(--border) 45%, var(--surface)); /* 深色下 --text-3 原为 #6f7784：在 surface-3 上只有 3.36:1。改 #858d9b 后 最差表面 4.55:1、常规卡片 5.32:1，仍明显比 --text-2(#9aa3b2) 弱，层级不变。 */ --text: #e9ecf1; --text-2: #9aa3b2; --text-3: #858d9b; --brand: #5b8cff; --brand-hover: #7ba3ff; --brand-soft: #17233c; --ac: #35c07a; --ac-soft: #11281d; --info: #56d4dd; --info-soft: rgba(86, 212, 221, .12); --warn: #f0b429; --warn-soft: #2b2210; --kt: #b9a3ff; --kt-soft: rgba(150, 120, 255, .14); --danger: #f2555a; --danger-soft: #2c1a1b; --sh-1: 0 1px 2px rgba(0, 0, 0, .4); --sh-2: 0 10px 30px rgba(0, 0, 0, .45); --syn-kw: #e879f9; --syn-str: #7ee787; --syn-num: #f0b429; --syn-fn: #79c0ff; --syn-type: #56d4dd; --syn-com: #6f7784; } .theme-btn { background: none; border: 0; cursor: pointer; color: var(--text-2); padding: 6px; border-radius: var(--r-sm); display: grid; place-items: center; } /* ---------- 46) 导航栏隐藏（2026-09-29 用户要求「腾出可视区域」） ---------- 顶栏右侧一枚收起钮；隐藏后右上角浮一枚恢复钮。--nav-h 归零让所有应用式页面 （题库 .pl-app / 作业比赛 .ct-app / 私信 .pm-app）自动吃满腾出的 56px。 */ html.nav-hidden { --nav-h: 0px; } html.nav-hidden .topbar { display: none; } /* 居中把手（2026-09-29 用户钦定「细小横条放中间，点击上折/下展」）： 展开态贴在顶栏正下方中间（top: var(--nav-h)），收起态 --nav-h 归零自动跳到屏幕顶缘中央； 外钮 64×16 透明扩热区，内条 64×6 胶囊，hover 亮品牌色。 */ .nav-handle { position: fixed; top: var(--nav-h); left: 50%; transform: translateX(-50%); z-index: 90; width: 64px; height: 16px; padding: 5px 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; } .nav-handle i { display: block; width: 64px; height: 6px; border-radius: 99px; background: var(--surface-3); border: 1px solid var(--border-strong); transition: background .13s, border-color .13s; } .nav-handle:hover i { background: var(--brand-soft); border-color: var(--brand); } .theme-btn:hover { background: var(--surface-3); color: var(--text); } /* ---------- 2) 基础排版 ---------- */ * { box-sizing: border-box; } /* 我们自己给 .console/.run-panel/.pane-body 写了 display，会盖掉 hidden 属性自带的 display:none， 于是 JS 用 el.hidden 开关根本关不掉（踩过：自测面板一直挂在页面上、按钮点了像没反应） */ [hidden] { display: none !important; } /* 滚动条：告诉浏览器用哪套配色（缺 color-scheme 时暗色主题下浏览器会画亮色滚动条 + 上下箭头， 就是"下拉条跟主题不配"的根因），再补一层细滚动条样式 */ html { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { color-scheme: dark; } } * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-strong); background-clip: content-box; border: 2px solid transparent; border-radius: 99px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: content-box; } ::-webkit-scrollbar-corner { background: transparent; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.6 var(--sans); -webkit-font-smoothing: antialiased; } a { color: var(--brand); text-decoration: none; } a:hover { text-decoration: none; color: var(--brand-hover); } h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; } h1 { font-size: 22px; } h2 { font-size: 16px; } h3 { font-size: 14px; } p { margin: 0 0 10px; } ::selection { background: var(--brand-soft); } :focus-visible { outline: 2px solid color-mix(in srgb, var(--brand) 45%, transparent); outline-offset: 2px; } .muted { color: var(--text-3); } .small { font-size: 12px; } /* 图标尺寸护栏：SVG 不给宽高会按默认尺寸撑开（踩过） */ svg { flex: none; } .brand, .nav-link, .user-btn { white-space: nowrap; } .mono { font-family: var(--mono); } .row { display: flex; align-items: center; gap: 8px; } .spacer { flex: 1; } /* ---------- 3) 布局骨架 ---------- */ .shell { min-height: 100vh; display: flex; flex-direction: column; } .topbar { position: sticky; top: 0; z-index: 40; height: var(--nav-h); background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--border); } /* 全宽流式：不用 max-width 居中（带鱼屏上会出现"中间一条"，左不贴左右不贴右） */ .topbar-inner { width: 100%; height: 100%; padding: 0 20px; display: flex; align-items: center; gap: 22px; } .brand { display: flex; align-items: center; gap: 9px; color: var(--text); font-weight: 650; font-size: 15px; } .brand-mark { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 60%, #7c3aed)); color: #fff; font-size: 14px; font-weight: 700; } .nav { display: flex; gap: 2px; } .nav-link { color: var(--text-2); padding: 7px 12px; border-radius: var(--r-sm); font-size: 14px; } .nav-link:hover { background: var(--surface-3); color: var(--text); } .nav-link.active { color: var(--text); font-weight: 600; background: var(--surface-3); } .nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; } /* 顶栏时钟（hh:mm:ss 24 小时制）：等宽数字防走秒跳动，色阶同导航词 */ .topbar-clock { font-family: var(--mono); font-size: 13.5px; font-variant-numeric: tabular-nums; letter-spacing: .5px; color: var(--text-2); white-space: nowrap; user-select: none; padding: 0 2px; } /* ≤760px 顶栏导航已收进底部 tabbar，右侧只剩图标排不下时钟（手机状态栏本就有时间） */ @media (max-width: 760px) { .topbar-clock { display: none; } } /* 用户菜单 */ .user { position: relative; } .user-btn { display: flex; align-items: center; gap: 8px; background: none; border: 0; cursor: pointer; padding: 4px 6px; border-radius: var(--r-sm); color: var(--text); } .user-btn:hover { background: var(--surface-3); } .avatar { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; color: #fff; background: linear-gradient(135deg, #6366f1, #0ea5e9); } .user-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 180px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--sh-2); padding: 6px; display: none; } .user-menu.open { display: block; } .user-menu a, .user-menu button { display: flex; width: 100%; align-items: center; gap: 8px; padding: 8px 10px; border: 0; background: none; color: var(--text-2); font: inherit; text-align: left; border-radius: var(--r-sm); cursor: pointer; } .user-menu a:hover, .user-menu button:hover { background: var(--surface-3); color: var(--text); } .user-menu .sep { height: 1px; background: var(--border); margin: 5px 4px; } .page { flex: 1; width: 100%; padding: 22px 20px 64px; } .footer { border-top: 1px solid var(--border); color: var(--text-3); font-size: 12px; } .footer-inner { width: 100%; padding: 16px 20px; display: flex; gap: 8px; flex-wrap: wrap; } /* 工作台页：整屏高度、页面本身不滚动（题面与编辑器各自内部滚） */ .shell-full { height: 100vh; overflow: hidden; } /* 页面标题区 */ .page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; } .page-title { display: flex; align-items: baseline; gap: 10px; } .page-title .count { color: var(--text-3); font-size: 13px; font-weight: 400; } /* 统计条 */ .stats { display: flex; gap: 10px; flex-wrap: wrap; } .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 8px 14px; min-width: 108px; box-shadow: var(--sh-1); } .stat .k { color: var(--text-3); font-size: 12px; } .stat .v { font-size: 18px; font-weight: 650; letter-spacing: -.02em; } .stat .v small { font-size: 12px; font-weight: 400; color: var(--text-3); } /* 两栏（左分类栏 + 内容） */ .with-rail { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 20px; align-items: start; } @media (max-width: 900px) { .with-rail { grid-template-columns: 1fr; } } .rail { position: sticky; top: calc(var(--nav-h) + 14px); display: flex; flex-direction: column; gap: 14px; } .rail-group { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 12px 12px 10px; box-shadow: var(--sh-1); } .rail-title { font-size: 12px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; } .rail-list { display: flex; flex-direction: column; gap: 1px; } .rail-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 8px; border-radius: var(--r-sm); color: var(--text-2); font-size: 13px; } .rail-item:hover { background: var(--surface-3); color: var(--text); } .rail-item.on { background: var(--brand-soft); color: var(--brand); font-weight: 500; } .rail-item .n { color: var(--text-3); font-size: 12px; font-variant-numeric: tabular-nums; } .rail-item.on .n { color: var(--brand); } .rail-sub { padding-left: 10px; } /* ---------- 4) 组件 ---------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--sh-1); } .card-pad { padding: 16px 18px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 13px; font: inherit; font-size: 13px; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-sm); cursor: pointer; transition: background .15s, border-color .15s, transform .06s; } /* 按钮被 min-width/width 拉宽时（如 .run-head 的 96px 运行钮、手机端拉满行宽），图标+文字要居中而不是挤左 （2026-10-03 用户「按钮里面的内容要居中，现在里面靠左很怪」）。 */ .btn:hover { background: var(--surface-3); } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 550; } .btn-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: #fff; } /* 会命中全局 a:hover 的蓝字规则（蓝底蓝字=按钮"消失"），此处显式压回白字 */ a.btn-primary, a.btn-primary:hover { color: #fff; } .btn-ghost { border-color: transparent; background: transparent; color: var(--text-2); } .btn-ghost:hover { background: var(--surface-3); color: var(--text); } .btn-sm { padding: 5px 10px; font-size: 12px; } /* 只有一枚图标的方钮（顶栏的「全屏编辑」）：宽度收成正方形，和旁边带字的按钮一样高 */ .btn-icon { padding: 5px; width: 30px; justify-content: center; } .btn-icon svg { width: 16px; height: 16px; } /* 全屏态换图标：展开 ↔ 收起（两枚都渲染在按钮里，靠 body.fs-on 切） */ #btn-fs .ic-shrink { display: none; } body.fs-on #btn-fs .ic-expand { display: none; } body.fs-on #btn-fs .ic-shrink { display: block; } .btn:disabled { opacity: .5; cursor: default; } /* 草稿状态点（题目工作台 + 笔记编辑器共用）： 「草稿已保存」在右栏这种天然窄容器里会一字一行竖排（用户圈图两次），圆点全端统一： 绿=已保存 / 蓝=已恢复；悬停展开完整文字。 */ #draft-tip, #note-draft-tip { font-size: 0; line-height: 1; } #draft-tip:not(:empty)::before, #note-draft-tip:not(:empty)::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ac); vertical-align: middle; transition: transform .12s; } #draft-tip[data-kind=info]:not(:empty)::before, #note-draft-tip[data-kind=info]:not(:empty)::before { background: var(--brand); } #draft-tip:hover, #note-draft-tip:hover { font-size: 12px; } #draft-tip:hover::before, #note-draft-tip:hover::before { margin-right: 5px; } /* 判题方式开关：做成「模式徽章」而不是普通按钮—— 关=灰边框中性（标准输入输出是默认态，不该抢眼）；开=品牌色填充（文件判题必须一眼看出来， 学生此时必须写 freopen，忘写就全 WA）。开着时文件名用等宽字，复制文件名时看得清。 */ /* 判题方式滑块（.fio，2026-09-25 改版：原来是「标准输入输出 ⇄ x.in / .out」一枚 toggle 按钮）。 外壳一枚胶囊、里面「标准｜文件」两段，选中的那段浮起来；右边两枚文件名按钮与滑块**同高** （24px，对齐旁边的 .btn-sm），双击复制名字（走全局 [data-copynum]）。 作业/比赛里老师定过判题方式时滑块带 data-editable="0"：两段变灰、点不动，但还看得见。 */ .fio { display: inline-flex; align-items: center; gap: 6px; } .fio-seg { display: inline-flex; align-items: center; gap: 2px; height: 31px; padding: 0 3px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); } /* 文件读写提示条（2026-10-01）：文件判题的题，把输入/输出文件名亮在题面最上方。 2026-10-02 按用户反馈改版：去掉 freopen 说教与品牌蓝底（「好丑」），收敛为安静的信息条—— 文件名用等宽 chip 呈现，一眼可复制。★ 此前一次编辑把这三条规则嵌进了 .fio-seg 未闭合的 大括号里，整块被 CSS 解析器丢弃（提示条裸文本的根因）——已在顶层重新落位。 */ .fio-names { margin: 0 0 14px; padding: 8px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); font-size: 13.5px; color: var(--text-2); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .fio-names .fk { color: var(--text-3); } .fio-names code { font-family: var(--mono); font-size: 12.5px; background: var(--surface-3); border: 1px solid var(--border); border-radius: 5px; padding: 1px 8px; color: var(--text); } .fio-opt { height: 25px; padding: 0 12px; font: inherit; font-size: 12px; line-height: 1; white-space: nowrap; /* 手机窄栏里「标准/文件」被压到竖排折行（2026-10-07 问题记录 #16） */ color: var(--text-3); background: none; border: 0; border-radius: 999px; cursor: pointer; transition: background .15s, color .15s; } .fio-opt:hover:not(.on) { color: var(--text); } .fio-opt.on { background: var(--brand-soft); color: var(--brand); font-weight: 600; } /* 锁定态（作业/比赛里老师定的）：两段都是死的 —— 悬浮**一点变化都不给**（不然看着像能点）， 光标也保持默认；这不是「disabled 变淡」，是「本来就不响应的硬按钮」。 */ .fio-seg[data-editable="0"] .fio-opt, .fio-seg[data-editable="0"] .fio-opt:hover, .fio-seg[data-editable="0"] .fio-opt:active { color: var(--text-3); cursor: default; } .fio-seg[data-editable="0"] .fio-opt.on { background: var(--surface-3); color: var(--text-3); } .fio-files { display: inline-flex; align-items: center; gap: 6px; } /* 文件名按钮（.in/.out）：**全站统一灰、无悬浮、无选中高亮**，只认双击复制 —— 桌面软件那种「刚性」观感（2026-09-25 用户：悬浮不要变色、不要能选中的文本按钮）。 */ .fio-file { display: inline-flex; align-items: center; height: 31px; padding: 0 12px; font-family: var(--mono); font-size: 12px; line-height: 1; color: var(--text-3); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; cursor: default; user-select: none; } /* 顶栏 <> 在编辑器页 = 返回钮：图标转 180°（右尖括号变左尖括号），微妙但能看出来作用变了 */ .theme-btn.is-back svg { transform: rotate(180deg); } .theme-btn.is-back { color: var(--brand); } .btn svg { width: 15px; height: 15px; } .input, select.input { padding: 8px 11px; font: inherit; font-size: 13px; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-sm); width: 100%; } .input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); } .search-wrap { position: relative; flex: 1; max-width: 420px; } /* 放大镜是**真的提交按钮**：Chromium 在「表单里没有 submit 按钮」时不做隐式提交， 而筛选态下表单里带着 hidden 的 kind/tag —— 结果就是「筛选中按回车搜不动」（2026-09-23 实测）。 */ .search-wrap .search-go { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--text-3); cursor: pointer; } .search-wrap .search-go:hover { color: var(--brand); background: var(--brand-soft); } .search-wrap .search-go svg { width: 15px; height: 15px; } .search-wrap .input { padding-left: 34px; } .toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } .seg { display: inline-flex; background: var(--surface-3); border-radius: var(--r-sm); padding: 2px; gap: 2px; } .seg a, .seg button { padding: 5px 11px; font-size: 13px; color: var(--text-2); border-radius: 4px; border: 0; background: none; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 5px; } .seg a:hover { color: var(--text); } .seg a.on { background: var(--surface); color: var(--text); font-weight: 550; box-shadow: var(--sh-1); } .chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); font-size: 12px; border: 1px solid transparent; } .chip:hover { color: var(--text); border-color: var(--border-strong); } .chip-on { background: var(--brand-soft); color: var(--brand); border-color: color-mix(in srgb, var(--brand) 35%, transparent); } .chip-xs { padding: 1px 7px; font-size: 11px; } /* 测试点数据的下载列（老师专用「入/出」两个小链接） */ .case-dl a { color: var(--brand); text-decoration: none; margin-right: 12px; font-size: 12.5px; white-space: nowrap; } .case-dl a:last-child { margin-right: 0; } .case-dl a:hover { text-decoration: underline; } /* 失败点透出（2026-10-10）：学生的「看数据」按钮 + 输入/期望输出双栏对照 */ .case-view { background: none; border: none; padding: 0; color: var(--brand); font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap; } .case-view:hover { text-decoration: underline; } .case-view:disabled { opacity: .5; cursor: default; } .rec-actions { display: inline-flex; gap: 8px; align-items: center; } .case-data-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 720px) { .case-data-cols { grid-template-columns: 1fr; } } /* 知识块侧栏树（2026-10-10 可嵌套：老师可拖动排序/就地新增/双击改名） */ .kb-nav-row { display: flex; align-items: center; gap: 2px; border-radius: var(--r-sm); } .kb-nav-row.t { cursor: grab; } .kb-nav-row.t.dragging { opacity: .45; } .kb-nav-row .scope-item { flex: 1; min-width: 0; } .kb-grip2 { color: var(--muted); font-size: 11px; cursor: grab; padding: 0 2px; user-select: none; letter-spacing: -1px; } .kb-mini { background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); font-size: 12px; line-height: 1; padding: 2px 6px; cursor: pointer; opacity: 0; transition: opacity .12s; } .kb-nav-row:hover .kb-mini, .kb-mini:focus { opacity: 1; } .kb-mini:hover { color: var(--brand); border-color: var(--brand); } .kb-add-root { width: 100%; margin-top: 8px; background: none; border: 1px dashed var(--border); border-radius: var(--r-sm); color: var(--muted); font-size: 12.5px; padding: 7px 0; cursor: pointer; } .kb-add-root:hover { color: var(--brand); border-color: var(--brand); } #kb-root-drop { min-height: 26px; } .kb-add-name { width: 100%; } .kb-nav-row.drop-before { box-shadow: inset 0 2px 0 var(--brand); } .kb-nav-row.drop-after { box-shadow: inset 0 -2px 0 var(--brand); } .kb-nav-row.drop-in { outline: 2px dashed var(--brand); outline-offset: -2px; background: color-mix(in srgb, var(--brand) 8%, transparent); } /* 编辑分组弹窗（2026-10-10 重做）：搜索 + 树形层级勾选 + 已选 chips，替代行内 52 个平铺复选框 */ .gm-card { max-width: 520px; } .gm-tree { border: 1px solid var(--border); border-radius: var(--r-sm); max-height: 46vh; overflow: auto; padding: 6px 0; margin-top: 8px; } .gm-row { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px calc(12px + var(--d, 0) * 18px); cursor: pointer; } .gm-row:hover { background: var(--surface-2); } .gm-row input { accent-color: var(--brand); } .gm-row[data-hidden="1"] { display: none; } .gm-sel { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .gm-sel:empty { display: none; } .gm-chip { cursor: pointer; } .stu-acts .btn, .stu-acts summary, .stu-acts .btn-sm { white-space: nowrap; } /* 知识块右键菜单（2026-10-10 VSCode 式）：新增子块/改名/删除 */ .ctx-menu { position: fixed; z-index: 300; min-width: 150px; background: var(--surface, #1c2128); border: 1px solid var(--border); border-radius: var(--r-sm); box-shadow: 0 8px 24px rgba(0,0,0,.4); padding: 4px; } .ctx-item { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--text, inherit); font-size: 12.5px; padding: 7px 12px; border-radius: 6px; cursor: pointer; } .ctx-item:hover { background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); } /* 题面「复制 Markdown」按钮：外观与旁边的标签 chip 一致，但它是可点的按钮 */ .copy-md { cursor: pointer; font-family: inherit; } .copy-md:hover { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 40%, transparent); } .chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 14px; } .badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 500; } .badge-ac { background: var(--ac-soft); color: var(--ac); } .badge-tried { background: var(--warn-soft); color: var(--warn); } .badge-todo { background: var(--surface-3); color: var(--text-3); } .badge-pending { background: var(--brand-soft); color: var(--brand); } .badge-fail { background: var(--danger-soft); color: var(--danger); } .badge-muted { background: var(--surface-3); color: var(--text-3); } .alert { background: var(--danger-soft); color: var(--danger); border-radius: var(--r-sm); padding: 10px 12px; font-size: 13px; margin-bottom: 12px; } .empty { padding: 40px 20px; text-align: center; color: var(--text-3); } /* ---------- 5) 题库 ---------- */ /* 行清单走「文件管理器」式连续紧凑条（2026-09-29 用户钦定）：发丝线分隔 + 小内距， 分隔线用 --row-line（暗色自动收暗）——实测暗色下 --border 太亮，是「行像独立卡片」观感的主因。 */ .plist { overflow: hidden; } .plhead { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; color: var(--text-3); background: var(--surface-2); border-bottom: 1px solid var(--border); padding: 8px 18px; } /* .plhead 的 8px 内距曾被下面同优先级的 .prow(11px) 按源码顺序盖掉，表头跟着变高；这里提一级优先级定死 */ .plist .prow.plhead { padding: 6px 18px; } .plhead .plh-st { text-align: center; } .plhead .plh-no { text-align: right; } .plhead .plh-rate { text-align: right; } .plist .prow:not(.plhead):hover { background: var(--surface-2); } .prow { display: grid; grid-template-columns: 34px 74px minmax(0, max-content) minmax(0, 1fr) 118px; align-items: center; gap: 12px; padding: 7px 18px; border-bottom: 1px solid var(--row-line); color: inherit; transition: background .15s, box-shadow .15s; } .prow:last-child { border-bottom: 0; } .prow { position: relative; } .prow:hover { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--brand); } .prow .ttl a { color: inherit; } /* 标题链接拉伸覆盖整行（整行可点），行内的按钮/标签/徽章抬起来保持可点 */ .prow .ttl a::after { content: ""; position: absolute; inset: 0; } .prow .tags, .prow .rate, .prow .diff, .prow .btn, .prow .badge, .prow button { position: relative; z-index: 1; } .prow .no { position: relative; z-index: 1; /* 抬到整行拉伸链接之上：点题号不跳转，方便双击/全选复制 */ font-family: var(--mono); font-size: 12.5px; color: var(--text-3); text-align: right; font-variant-numeric: tabular-nums; cursor: text; user-select: all; } /* 原来这里有一条 .prow .ttl:hover { color: var(--brand) } —— 删掉。 .ttl 是 minmax(0,1fr) 那一整列（很宽），指针只要移进这一列、哪怕离文字还差几百像素， 题名就白→蓝变一次色；同一行的「悬停」于是有了两套反馈（列内变蓝 / 列外只有底色+左侧蓝条）， 用户报「我就稍微挪动了一些鼠标，颜色就从白色变成蓝色」。 现在整行统一：底色 + 左侧 2px 蓝条 + 指针变手型，不再有看不见的变色边界。 */ .prow .ttl { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .prow .tags { display: flex; gap: 5px; overflow: hidden; } /* 标签按类型着色（tagClass() 在 layout.mjs）：大类=蓝 / 课名=青 / 自拟题=绿 / 池题=橙 */ .chip.tag-cat { background: var(--brand-soft); color: var(--brand); border-color: transparent; } .chip.tag-cat:hover { border-color: color-mix(in srgb, var(--brand) 40%, transparent); color: var(--brand); } .chip.tag-lesson { background: var(--info-soft); color: var(--info); border-color: transparent; } .chip.tag-lesson:hover { border-color: color-mix(in srgb, var(--info) 40%, transparent); color: var(--info); } .chip.tag-zt { background: var(--ac-soft); color: var(--ac); border-color: transparent; } .chip.tag-zt:hover { border-color: color-mix(in srgb, var(--ac) 40%, transparent); color: var(--ac); } /* 知识点叶子（NOI 大纲树，2026-09-30）：专属紫，与课名青/大类蓝/题源绿区分 */ .chip.tag-know { background: var(--kt-soft); color: var(--kt); border-color: transparent; } .chip.tag-know:hover { border-color: color-mix(in srgb, var(--kt) 40%, transparent); color: var(--kt); } .chip.tag-chi { background: var(--warn-soft); color: var(--warn); border-color: transparent; } .chip.tag-chi:hover { border-color: color-mix(in srgb, var(--warn) 40%, transparent); color: var(--warn); } /* 通过率：56px 圆角小轨 + 分档配色（≥60 绿 / ≥30 琥珀 / 低=灰红）；没人提交过显示 — */ .prow .rate { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 8px; } .prow .rate b { font-weight: 600; color: var(--text-2); min-width: 34px; text-align: right; } .prow .rate .rate-na { min-width: 34px; text-align: right; opacity: .7; } .ratebar { flex: 1; height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; min-width: 52px; } .ratebar i { display: block; height: 100%; border-radius: 99px; background: var(--text-3); transition: width .3s; } .ratebar.rate-hi i { background: var(--ac); } .ratebar.rate-mid i { background: var(--warn); } .ratebar.rate-lo i { background: color-mix(in srgb, var(--danger) 55%, var(--text-3)); } .diff { font-size: 12px; display: inline-flex; align-items: center; gap: 6px; } .diff::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .8; } .diff-easy { color: var(--ac); } .diff-medium { color: var(--warn); } .diff-hard { color: var(--danger); } .diff-none { color: var(--text-3); } .mark { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; } .mark-ac { background: var(--ac-soft); color: var(--ac); } .mark-tried { background: var(--warn-soft); color: var(--warn); } .mark-todo { border: 1.5px dashed var(--border-strong); } @media (max-width: 1100px) { .prow { grid-template-columns: 30px 60px minmax(0, 1fr) 84px; } .prow .tags { display: none; } } .pager { display: flex; gap: 4px; justify-content: center; margin: 18px 0 0; } .pg { min-width: 32px; height: 32px; padding: 0 9px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-sm); color: var(--text-2); font-size: 13px; border: 1px solid transparent; } .pg:hover { background: var(--surface-3); color: var(--text); } .pg.on { background: var(--brand); color: #fff; } .pg.off { opacity: .4; } /* ---------- 6) 题页工作台 ---------- */ /* 中间那条拖动线（2026-09-24 用户「看起来很粗」）： 原来 gutter 8px 里用 `inset: 0 3px` 画一条 **2px** 的线，左边还叠着 .ws-left 的 1px 右边框 —— 两条线之间隔 3px，眼睛把它们并成一条粗带子。 现在整条分隔线只由 gutter 画：1px 居中，hover 加粗到 3px 变蓝。 */ .ws { display: grid; grid-template-columns: minmax(0, 1fr) 9px minmax(0, 1fr); height: calc(100vh - var(--nav-h)); } .ws.dragging { cursor: col-resize; user-select: none; } /* 拖分栏线时指针会扫过右栏 —— 右栏若是 Excalidraw 的 iframe，move 事件全被 iframe 吃掉， 表现为「往右拖不动」（2026-09-28 用户报；往左拖没事是因为指针还在父文档里）。 拖动期间把 iframe 的指针事件关掉，父文档收得到 mousemove。 */ .ws.dragging #bd-frame { pointer-events: none; } .ws-gutter { cursor: col-resize; background: transparent; position: relative; } .ws-gutter::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; margin-left: -.5px; background: var(--border); transition: width .15s, margin-left .15s, background .15s; } .ws-gutter:hover::after, .ws.dragging .ws-gutter::after { width: 3px; margin-left: -1.5px; background: var(--brand); } .ws-left, .ws-right { min-width: 0; overflow: hidden; display: flex; flex-direction: column; } /* 右边框交给 .ws-gutter 画：这里再画一条就和它并排成「粗线」了。窄屏下由 1118 行统一清掉 */ .ws-left { border-right: 0; } /* 标题+徽章块已移进 pane-body 滚动流（2026-10-03 用户：这块常驻占了太多可视区，题目描述太窄； 滚动时随内容上滚，钉住的只有 tabs 行）。pane-body 自带 20px 内边距，这里只留纵向节奏。 */ .pane-body .problem-head { padding: 0 0 12px; border-bottom: 1px solid var(--border); margin-bottom: 16px; } .problem-head { padding: 18px 22px 14px; border-bottom: 1px solid var(--border); } .problem-head h1 { font-size: 20px; display: flex; align-items: center; gap: 10px; } .problem-meta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 9px; font-size: 12px; color: var(--text-3); } .problem-meta > span { display: inline-flex; align-items: center; gap: 5px; } .problem-meta svg { width: 14px; height: 14px; } .problem-meta .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--border-strong); } .tabs { display: flex; gap: 2px; padding: 8px 16px 0; border-bottom: 1px solid var(--border); align-items: center; } /* 提交记录搜索（2026-10-03 用户钦定「老师可以搜索出某个人的提交记录」；2026-10-03 美化： 放大镜图标胶囊输入（复用题库 search-wrap 形态）+ 计数同行右置，与列表间距收紧） */ .recs-search { display: flex; align-items: center; gap: 14px; padding: 10px 16px 8px; } .recs-search .search-wrap { position: relative; width: 240px; } .recs-search .search-wrap .input { width: 100%; padding-left: 30px; border-radius: 999px; } .recs-search .search-go { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; display: inline-flex; } .recs-search .search-go svg { width: 14px; height: 14px; } .recs-search .input:focus + .search-go, .recs-search .search-wrap:focus-within .search-go { color: var(--brand); } .recs-search > .muted { flex: none; } /* 收藏/打印/翻题挪进 tab 行右侧（2026-10-03 用户钦定）：标题块随内容滚走后，这组操作跟着钉住的 tabs 走 */ .tabs .ph-nav { margin-left: auto; flex: none; } /* 页签行垂直居中（2026-10-07 问题记录 #28）：tab 与右侧动作链接统一盒高（8px 上下 + 底边对齐）， 原先 tab 有 padding-bottom 0、ph-nav 组 8px，两边中心差一截，肉眼看是一高一低。 */ .tabs .tab, .tabs .pn-link { display: inline-flex; align-items: center; padding-top: 8px; padding-bottom: 8px; } .tabs .tab { padding: 8px 12px; margin-bottom: -1px; } .tabs .pn-link { white-space: nowrap; } .tab { padding: 8px 12px; font-size: 13px; color: var(--text-2); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; background: none; border-left: 0; border-right: 0; border-top: 0; font-family: inherit; } .tab:hover { color: var(--text); } .tab.on { color: var(--text); font-weight: 600; border-bottom-color: var(--brand); } .pane-body { flex: 1; overflow: auto; padding: 20px 22px 60px; } .statement { max-width: 760px; font-size: var(--fs-statement); line-height: 1.78; color: var(--text); } /* 工作台左栏里的题面**跟随栏宽**（2026-09-25 用户：「拖动之后题目没跟着变长、右边留一大片空白」）。 760px 那个限宽是给居中排版留的可读行长用的；在分栏里，宽度是用户自己拖出来的，就该听他的。 注意只限 .ws-left（作业/比赛的说明、打印页等地方仍然吃 760px）。 */ .ws-left .statement { max-width: none; } .statement > h2 { font-size: 15px; margin: 26px 0 8px; padding-top: 4px; } .statement > h2:first-child { margin-top: 0; } .statement p { margin: 0 0 12px; } /* 列表缩进随字号缩放（2026-10-01 用户报「1. 2. 序号被裁掉一半」）：padding 写死 22px 时， 字号调大（设置面板最高 35px）后 outside 标记的占位超出 padding 区，被 pane-body 的 overflow 裁掉。max() 保证小字号维持原 22px、大字号按 1.7em 自动放宽（嵌套列表逐层叠加也安全）。 */ .statement ul, .statement ol { margin: 0 0 12px; padding-left: max(22px, 1.7em); } .statement li { margin: 3px 0; } .statement code { font-family: var(--mono); font-size: .88em; background: var(--surface-3); padding: 1.5px 5px; border-radius: 5px; color: var(--text); } .statement pre { position: relative; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 12px 14px; overflow: auto; margin: 0 0 14px; } .statement pre code { background: none; padding: 0; font-size: 13px; } /* 代码块的行高必须按「代码自己的字号」钉死（2026-09-25 用户报「笔记里代码块莫名有很多空行」）。 真凶：pre 继承的是正文那套（--fs-statement ≈21px × line-height 1.78 = 37.4px 的行盒）， 而里面的 code 只有 13px —— 行盒高度取参与者的较大者，于是**每行都被撑成将近两倍**， 看着就跟「每行下面多一个空行」一样（实测 pre 高 699px，按 13px 算只该 440px，倍数 1.59）。 这里把 pre 自己的字号/行高也按代码钉死，行盒就不再被正文的 strut 撑开。 */ .statement pre { font-size: 13px; line-height: 1.62; } /* 代码高亮（Prism）主题：颜色全取门户调色板，暗/亮两套自动跟随 —— 刻意**不用** prism 自带的浅色主题 css（暗色下深绿 #690、深蓝 #07a 几乎看不清）。 */ pre code .token.comment, pre code .token.prolog, pre code .token.doctype, pre code .token.cdata { color: var(--text-2); } /* 注释不放斜体（2026-10-15 用户「注释看不清」）：中文伪斜体发虚，颜色提到 --text-2 分层即可。 */ pre code .token.punctuation, pre code .token.operator { color: var(--text-2); } pre code .token.keyword, pre code .token.control, pre code .token.directive { color: var(--brand); } pre code .token.string, pre code .token.char, pre code .token.attr-value { color: var(--ac); } pre code .token.number, pre code .token.boolean, pre code .token.constant { color: var(--warn); } pre code .token.function, pre code .token.macro, pre code .token.preprocessor { color: var(--info); } pre code .token.class-name, pre code .token.type, pre code .token.builtin { color: var(--info); } pre code .token.deleted { color: var(--danger); } pre code .token.inserted { color: var(--ac); } .statement table { border-collapse: collapse; margin: 4px 0 14px; font-size: 14px; } .statement th, .statement td { border: 1px solid var(--border); padding: 6px 11px; } .statement th { background: var(--surface-2); font-weight: 600; } .statement img { max-width: 100%; border-radius: var(--r-sm); } .statement .math-block { overflow-x: auto; margin: 10px 0 14px; } .statement blockquote { margin: 0 0 12px; padding: 2px 14px; border-left: 3px solid var(--border-strong); color: var(--text-2); } .katex { font-size: 1.02em; } /* 复制按钮：常显（原来 opacity:0 只在悬停出现，用户看不到 → 以为没有复制功能，踩过） */ .copy-btn { padding: 3px 9px; font-size: 11.5px; color: var(--text-2); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; transition: all .14s; font-family: inherit; } .copy-btn:hover { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); } /* 题面里非样例的代码块：仍悬浮在右上角（那里没有块头可放） */ .statement pre > .copy-btn { position: absolute; top: 6px; right: 6px; } .statement pre { position: relative; } /* 说明：早先这里有一条给「样例代码块」用的 .sample 规则；现在 .sample 已经是力扣式示例卡片 （见文末第 13 节），旧规则会让卡片继承等宽字体 + white-space:pre，故删除。 */ .pane-foot { border-top: 1px solid var(--border); padding: 10px 22px; display: flex; gap: 10px; align-items: center; color: var(--text-3); font-size: 12px; } /* 右栏编辑器 */ .ed-top { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); flex-wrap: wrap; row-gap: 6px; } /* 窄栏不裁按钮（2026-10-07 问题记录 #14）：把左栏拖宽（或窗口本身窄）时顶栏一行装不下， 而 .ws-right 是 overflow:hidden——排最后的「提交」「重置」直接被裁没。三层降级： ① 容器查询按右栏**实际宽度**生效（拖分隔条也响应，媒体查询做不到）：先藏文件名芯片与草稿提示， ② 再把「重置」「画板」收成纯图标，③ flex-wrap 永远兜底——任何宽度下主操作都看得见。 */ .ws-right { container: wsright / inline-size; } @container wsright (max-width: 560px) { .ws-right .ed-top .fio-files, .ws-right .ed-top .draft-tip { display: none; } } @container wsright (max-width: 470px) { .ws-right .ed-top #btn-reset-t, .ws-right .ed-top .bd-open-t { display: none; } .ws-right .ed-top { row-gap: 4px; } } .ed-top .lang { appearance: none; padding: 6px 26px 6px 10px; font-size: 13px; border-radius: var(--r-sm); border: 1px solid var(--border-strong); background: var(--surface) url("data:image/svg+xml;utf8,") no-repeat right 8px center; color: var(--text); } /* 编辑器容器：绝对定位让 CodeMirror 严格填满父容器 （踩过：CM 内部的 .CodeMirror-scroll 会算成内容高度，导致可视区空一片） */ .ed-body { flex: 1; min-height: 0; overflow: hidden; position: relative; } .ed-body .CodeMirror { position: absolute; inset: 0; height: auto; } .CodeMirror { font-family: var(--mono); font-size: var(--code-fs); line-height: 1.6; background: var(--surface); color: var(--text); } .cm-s-oj.CodeMirror { background: var(--surface); color: var(--text); } .cm-s-oj .CodeMirror-gutters { background: var(--surface-2); border-right: 1px solid var(--border); } /* ---------- 行号栏宽度：**算出来的，不是量出来的**（2026-09-26 定稿，替换掉前三轮的"自愈"） ---------- 病根：CodeMirror 5 把行号栏宽度交给**运行时 JS 测量**（造隐藏节点读 offsetWidth），缓存在 `display.lineNumWidth/lineNumInnerWidth/lineNumChars` 上，而且**只在行号位数变化时**才重量。 这一个数决定：行号栏内联宽度 → `gutters.offsetWidth` → `sizer.marginLeft`（= 代码的左偏移）； 同一个数还进 `dims.gutterTotalWidth` → 每一行行号盒的左移量。所以"量错一次"就会同时表现为 「代码压住行号」「行号压住代码」「越量越宽右漂」——全都是这一个数错了。 而我们站点恰好把"测量必须成立"的三个前提同时破坏了：**Web 字体迟到**（先按回退字体量）、 **面板/分栏初始零宽**（量的时候容器是 0）、**字号用户可调**（老师设了 28px，字形变了却永不重量）。 前三轮我都在"治理被污染出来的数字"（补写内联值、清缓存逼它重量、按几何回扳、加看门狗）—— 3 次以上失败就该换架构：**把测量从系统里删掉**。 现在宽度 = `位数 × 1ch + 内边距`，由 CSS 算（`ch` 是浏览器按当前真实字体算的，不用我们量）； 栏宽、每行号码盒宽、每行左移量、代码左偏移**全部由这同一个值推导**，并用 `!important` 压掉 CM 写死的那些内联值（`vendor` 的 renderGutters / maybeUpdateLineNumberWidth 会写内联 width）。 JS 只负责把「现在是几位数」写进 `--num-digits`（`String(cm.lineCount()).length`，纯数字、零测量）。 ⇒ 字体迟到 / 容器零宽 / 字号变化这些**时机问题全部失去意义**：条件一变 CSS 自己重算， 没有缓存会过期，也就没有东西需要"自愈"。5 个编辑器实例都吃 `.cm-s-oj`，一处生效。 */ .CodeMirror { --line-num-w: calc(var(--num-digits, 3) * 1ch + 22px); } /* 尾部内边距从 15px 提到 22px（2026-09-26 用户报「代码离行号栏太近」）。 为什么是 22：行号在栏里是**左对齐**的，所以「行号右缘 → 代码左缘」的间隙 = 尾部内边距 − 左 padding(8px)。 15px 时只有 7px，两位数行号（10、11…）几乎贴住代码；22px → 14px，一位数两位数都一样宽，只多 7px。 改这一个数仍然够用：栏宽 / 号码盒宽 / 每行左移量 / 代码左偏移全由它推导，见上面那段注释。 对过的四种取值（15/19/22/26）本地同源渲染在 workspace/cspj-review-kebiao_2026-09-23/gutter-check.html。 */ /* 三处的 1ch 必须同一个基准：把字号钉成代码字号（行号本身也是这个字号） */ .cm-s-oj .CodeMirror-gutters, .cm-s-oj .CodeMirror-gutter-wrapper { font-size: var(--code-fs, 13px); } /* ⚠️ 下面这几条**只对"真的带行号"的实例生效**：判据是 CM 有没有渲染出行号栅格 （`.CodeMirror-linenumbers`）。2026-09-26 用户报「写笔记的地方前面有很多空白」—— 笔记编辑器是 lineNumbers:false（没有栅格、没有号码盒），可 `.CodeMirror-sizer` 的 margin-left 是**无条件**打断的，于是正文与光标整体右移 34.5px、还和左侧占位文字错位。 */ .cm-s-oj:has(.CodeMirror-linenumbers) .CodeMirror-gutter.CodeMirror-linenumbers { width: var(--line-num-w) !important; } .cm-s-oj:has(.CodeMirror-linenumbers) .CodeMirror-gutter-wrapper { left: calc(-1 * var(--line-num-w)) !important; } .cm-s-oj:has(.CodeMirror-linenumbers) .CodeMirror-linenumber.CodeMirror-gutter-elt { width: var(--line-num-w) !important; box-sizing: border-box !important; } .cm-s-oj:has(.CodeMirror-linenumbers) .CodeMirror-sizer { margin-left: var(--line-num-w) !important; } .cm-s-oj .CodeMirror-linenumber { padding: 0 6px 0 8px; color: var(--text-3); opacity: .75; } /* 编辑器获得焦点时行号亮一点：让「现在在写代码」有可见反馈 */ .cm-s-oj.CodeMirror-focused .CodeMirror-linenumber { opacity: 1; } /* 代码区四周留出呼吸空间：CodeMirror 默认贴边，长行滚动条贴着底边很挤 */ .ed-body .CodeMirror { padding: 8px 0 2px; box-sizing: border-box; } .ed-body .CodeMirror-scroll { padding-bottom: 14px; } /* 横向滚动条细化（默认 16px 高，手机上会盖住最后一行代码的下沿） */ .ed-body .CodeMirror-scroll::-webkit-scrollbar { height: 8px; } .ed-body .CodeMirror-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; } .ed-body .CodeMirror-scroll::-webkit-scrollbar-track { background: transparent; } /* 行号字号必须跟代码字号走（--code-fs）：写死 12px 时，用户调大编辑器字号后 行号行盒(19px)比代码行(32px)矮，行号越往下越往上飘（累积错位，用户抓到） */ .cm-s-oj .CodeMirror-linenumber { color: var(--text-3); font-size: var(--code-fs, 13px); line-height: inherit; } .cm-s-oj .CodeMirror-cursor { border-left: 2px solid var(--brand); } .cm-s-oj .CodeMirror-selected, .cm-s-oj.CodeMirror-focused .CodeMirror-selected { background: var(--brand-soft) !important; } .cm-s-oj .cm-keyword { color: var(--syn-kw); } .cm-s-oj .cm-builtin { color: var(--syn-type); } .cm-s-oj .cm-string, .cm-s-oj .cm-string-2 { color: var(--syn-str); } .cm-s-oj .cm-number, .cm-s-oj .cm-atom { color: var(--syn-num); } .cm-s-oj .cm-comment { color: var(--syn-com); } /* 中文注释不放斜体（2026-10-15，同 Prism token 口径） */ .cm-s-oj .cm-def, .cm-s-oj .cm-variable-2 { color: var(--syn-fn); } .cm-s-oj .cm-type, .cm-s-oj .cm-variable-3 { color: var(--syn-type); } .cm-s-oj .cm-meta, .cm-s-oj .cm-preprocessor { color: var(--syn-kw); } .cm-s-oj .cm-operator, .cm-s-oj .cm-punctuation { color: var(--text-2); } .cm-s-oj .CodeMirror-matchingbracket { color: var(--brand) !important; border-bottom: 1px solid var(--brand); } .cm-s-oj .CodeMirror-activeline-background { background: var(--surface-2); } /* ---------- 7) 底部停靠区：判题控制台 + 自测面板（两块各自独立开合） ---------- */ .dock { display: flex; flex-direction: column; min-height: 0; flex: 0 1 auto; } .console { border-top: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; min-height: 0; max-height: 40vh; } .console-head { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--border); cursor: pointer; flex: none; } .console-head .v { font-weight: 650; font-size: 14px; } .v-ac { color: var(--ac); } .v-fail { color: var(--danger); } .v-pending { color: var(--brand); } .v-muted { color: var(--text-3); } .console-body { overflow: auto; padding: 12px 14px 16px; min-height: 0; } .cases { width: 100%; border-collapse: collapse; font-size: 12.5px; } .cases th { text-align: left; color: var(--text-3); font-weight: 500; padding: 4px 10px 6px; } .cases td { padding: 5px 10px; border-top: 1px solid var(--border); font-variant-numeric: tabular-nums; } .cases tr:hover td { background: var(--surface-2); } .msg { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 9px 11px; margin: 8px 0 0; font-family: var(--mono); font-size: 12px; white-space: pre-wrap; max-height: 200px; overflow: auto; } /* 自测面板：左输入 / 右输出双栏；高度随视口走，两块区域一起长 */ /* 高度要「固定」而不是 max-height：否则切到「测试结果」内容少 → 面板塌下去、编辑器突然变高（用户报的 bug） */ .run-panel { border-top: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; min-height: 0; height: clamp(210px, 44vh, 460px); } .run-head { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--border); flex: none; background: var(--surface-2); } .run-title { font-weight: 650; font-size: 13px; display: inline-flex; align-items: center; gap: 7px; } .run-head .btn-primary { min-width: 96px; } .run-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; flex: 1; min-height: 0; } @media (max-width: 900px) { .run-grid { grid-template-columns: 1fr; } } /* 三区布局（输入 / 输出 / 答案）：输出区是程序真实跑出来的结果，就地显示、不再单开「测试结果」页 */ .run-tri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); flex: 1; min-height: 0; } .run-tri .run-col + .run-col { border-left: 1px solid var(--border); } .run-tri .run-output { flex: 1; min-height: 104px; margin: 0 12px 12px; padding: 10px 12px; overflow: auto; font-family: var(--mono); font-size: 12.5px; line-height: 1.65; white-space: pre-wrap; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-2); } /* 手机上三格竖排：每格给固定可用的最小高度（64px 只够看一行，实际跑样例要看 3~5 行） */ @media (max-width: 900px) { .run-tri { grid-template-columns: 1fr; } .run-tri .run-col + .run-col { border-left: 0; border-top: 1px solid var(--border); } .run-tri .run-panel textarea, .run-tri .run-output { min-height: 96px; max-height: 40vh; } } /* 三格并排时输出格太窄，一行放不下几个字符：≤720px 就竖排 */ @media (max-width: 720px) { .run-tri { grid-template-columns: 1fr; } .run-tri .run-col + .run-col { border-left: 0; border-top: 1px solid var(--border); } } .run-col { min-width: 0; min-height: 0; display: flex; flex-direction: column; } .run-col + .run-col { border-left: 1px solid var(--border); } .run-label { flex: none; padding: 9px 14px 5px; font-size: 11.5px; letter-spacing: .05em; color: var(--text-3); display: flex; align-items: center; gap: 8px; text-transform: uppercase; font-weight: 600; } .run-label .btn { padding: 2px 7px; font-size: 11px; } /* 检查器给的不通过理由（自测用题目自己的 checker 判，2026-09-25）：挂在「答案」格文本域下面， 只在有话说时出现（.hide 收起来），文案可能是兜底模板译出来的中文，也可能是 checker.cpp 自己写的 */ .run-chk { flex: none; margin: 0 12px 10px; padding: 7px 10px; border-radius: var(--r-sm); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 26%, transparent); } .run-chk.hide { display: none; } .run-status { font-size: 12px; font-weight: 500; letter-spacing: 0; } .run-status.ok { color: var(--ac); } .run-status.bad { color: var(--danger); } .run-status.wait { color: var(--brand); } .run-panel textarea, .run-panel .run-output { flex: 1; min-height: 104px; margin: 0 12px 12px; padding: 11px 13px; resize: none; overflow: auto; font-family: var(--mono); font-size: 13px; line-height: 1.7; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); color: var(--text); white-space: pre; } .run-panel textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent); } .run-panel textarea { display: block; width: calc(100% - 24px); } .run-panel textarea:focus { outline: none; } /* 三格底色统一（2026-09-24 用户「为什么背景色不一样」）： 原来「输出」和「只读的输入」用 --bg（更深），可编辑的用 --surface-2 —— 同一排三格出现两种深浅，同一个「输入」格在题目页（只读）和编辑器（可写）还不一样。 只读态改由 cursor + 灰字 + 标签上的「样例 · 只读」表达，不再动底色。 */ .run-panel textarea.ro { background: var(--surface-2); color: var(--text-2); cursor: not-allowed; } .run-panel .run-output { color: var(--text-2); background: var(--surface-2); tab-size: 4; } .run-panel .run-output.has-out { color: var(--text); } /* 编译错误态（2026-10-07 问题 #9 美化）：输出格升格为「编译输出」——danger 浅底 + 描边与 .run-chk 同一词汇（color-mix 令牌自动适配深浅色）；g++ 正文保持 --text（三四十行长文全红 反而读不了），语义由底色/描边/标签换字（「编译输出」+ .is-ce danger 色）承担。 */ .run-panel .run-output.ce, .run-tri .run-output.ce { background: color-mix(in srgb, var(--danger) 7%, var(--surface-2)); border-color: color-mix(in srgb, var(--danger) 32%, transparent); color: var(--text); } .run-label .is-ce { color: var(--danger); } /* 提交详情「提交人」行（2026-10-07 问题 #10）：行内人形图标 + 名字，与 meta 卡其他行同基线 */ .rec-owner { display: inline-flex; align-items: center; gap: 5px; } .rec-owner svg { opacity: .72; } .recs { padding: 4px 0; } .rec-row { display: grid; grid-template-columns: 96px 110px 70px 90px 90px 150px; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; font-variant-numeric: tabular-nums; } .rec-row:last-child { border-bottom: 0; } /* ---------- 8) 首页 ---------- */ .hero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; margin-bottom: 18px; } @media (max-width: 900px) { .hero { grid-template-columns: 1fr; } } .hero-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px 24px; box-shadow: var(--sh-1); } .hero-card h2 { font-size: 18px; margin-bottom: 6px; } .ring { position: relative; width: 132px; height: 132px; } .ring svg { transform: rotate(-90deg); } .ring circle { fill: none; stroke-width: 11; stroke-linecap: round; } .ring .bg { stroke: var(--surface-3); } .ring .fg { stroke: var(--brand); transition: stroke-dashoffset .6s cubic-bezier(.4, 0, .2, 1); } .ring-label { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; } .ring-label b { font-size: 24px; letter-spacing: -.03em; display: block; } .ring-label span { font-size: 12px; color: var(--text-3); } .quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; } .quick a { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); box-shadow: var(--sh-1); color: var(--text); } .quick a:hover { border-color: var(--brand); } .quick .ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); } .quick .ic svg { width: 17px; height: 17px; } .quick .tt { font-weight: 550; font-size: 13.5px; } .quick .dd { font-size: 12px; color: var(--text-3); } /* ---------- 9) 登录 ---------- */ .login-shell { min-height: calc(100vh - var(--nav-h)); display: grid; place-items: center; padding: 40px 20px; } .login-card { width: 100%; max-width: 400px; padding: 28px 30px; } .login-card h1 { font-size: 20px; margin-bottom: 4px; } .field { margin: 14px 0; } /* 只作用于字段的直接标签：写成 .field label 会连带命中选择器里的 写的，不重置的话