/* ============================================================================ 恒材盛达 · 学习系统「内容管理中心」——P1「立壳」壳层样式 ---------------------------------------------------------------------------- 加载顺序（index.html）：layui.css → style.css → admin.css → **本文件**（最后） 作用域：本文件所有规则一律带 `body.admin-view` 前缀。 该类由 app.js 在后台模式（?admin=1 且 role ∈ {super,admin}）加到 body 上； 学员端永远没有这个类 ⇒ 本文件对学员端「零命中」（不新增任何全局选择器）。 与 P0 的分工： · admin.css = P0 立体系（token 表 + 既有后台元素保真样式） · admin-shell.css（本文件）= P1 新增壳层（左侧导航 / 56px 顶栏 / 面包屑 / 手机抽屉与底部格） 回滚：删掉本文件与 admin-nav.js、并去掉 index.html 里那两行引用即回到 P0 状态。 ---------------------------------------------------------------------------- 反面清单遵守：无 !important、无内联 style、无境外 CDN、文字色 ≤3 级、色相 ≤6、 字号 ≤7 阶（下限 11px）、不叠多层阴影、列表项 min-height ≥40px（触控下限）。 ============================================================================ */ /* --------------------------------------------------------------------------- 1 · 壳层尺寸 token 覆盖（P1 定稿值） --topbar-h 由 46px → 56px；新增侧栏与限宽三项。 覆盖写在 body.admin-view 内（同 P0 口径：不外泄到学员端）。 --------------------------------------------------------------------------- */ body.admin-view{ --topbar-h:56px; --sidebar-w:240px; --sidebar-w-collapsed:64px; --content-max:1280px; --bp-tablet:768px; --bp-desktop:1200px; } /* --------------------------------------------------------------------------- 2 · 归位：顶栏与内容区让出 240px 侧栏 #ap 是既有滚动容器（position:fixed），把 left 从 0 挪到侧栏宽度即可。 --------------------------------------------------------------------------- */ body.admin-view{ padding-left:var(--sidebar-w); } body.admin-view #ap{ left:var(--sidebar-w); top:var(--topbar-h); padding:var(--space-6); } /* 内容限宽居中（A4）：面板是本滚动容器的直接子元素 */ body.admin-view #ap > div{ max-width:var(--content-max); margin-left:auto; margin-right:auto; } /* 顶栏容器本身不再横向滚动（A1：3.4 屏横滑 → 0） */ body.admin-view #ab{ overflow-x:hidden; padding:0 var(--space-6); gap:var(--space-3); } /* --------------------------------------------------------------------------- 3 · 旧「10 个能力平铺条」退场 功能不删：10 个页签元素仍在 DOM 内（app.js 的角色门控照旧写入行内 display）， 入口改由左侧导航承担（同一个 window.at(el,tab) 调用）。 调试/回滚钩子：给 body 加 .adShell-legacy 即恢复显示。 --------------------------------------------------------------------------- */ body.admin-view #abel{ display:none; } body.admin-view.adShell-legacy #abel{ display:flex; } body.admin-view.adShell-legacy{ padding-left:0; } body.admin-view.adShell-legacy #ap{ left:0; } body.admin-view.adShell-legacy .adSd, body.admin-view.adShell-legacy .adBt, body.admin-view.adShell-legacy .adBurger{ display:none; } /* --------------------------------------------------------------------------- 4 · 左侧导航 --------------------------------------------------------------------------- */ body.admin-view .adSd{ position:fixed; left:0; top:0; bottom:0; z-index:1100; width:var(--sidebar-w); box-sizing:border-box; display:flex; flex-direction:column; background:var(--color-surface); border-right:1px solid var(--color-border); } body.admin-view .adSd-h{ height:var(--topbar-h); flex:0 0 auto; box-sizing:border-box; display:flex; align-items:center; gap:var(--space-2); padding:0 var(--space-4); background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-light) 100%); color:var(--color-on-primary); font-size:14px; font-weight:var(--fw-semibold); white-space:nowrap; overflow:hidden; } body.admin-view .adSd-h i{ flex:0 0 auto; } body.admin-view .adSd-h span{ overflow:hidden; text-overflow:ellipsis; } body.admin-view .adSd-nav{ flex:1 1 auto; overflow-y:auto; padding:var(--space-2) var(--space-2) var(--space-6); } body.admin-view .adSd-g{ padding:var(--space-3) var(--space-2) 6px; font-size:var(--fs-mini); color:var(--color-text-3); letter-spacing:.5px; white-space:nowrap; overflow:hidden; } body.admin-view .adSd-i{ display:flex; align-items:center; gap:var(--space-2); box-sizing:border-box; min-height:var(--touch-min); padding:9px var(--space-3); margin-bottom:2px; border-radius:var(--radius-md); cursor:pointer; font-size:var(--fs-body); line-height:var(--lh-snug); color:var(--color-text-1); text-decoration:none; white-space:nowrap; overflow:hidden; } body.admin-view .adSd-i i{ flex:0 0 auto; width:14px; text-align:center; color:var(--color-text-3); } body.admin-view .adSd-i span{ overflow:hidden; text-overflow:ellipsis; } body.admin-view .adSd-i:hover{ background:var(--color-accent-bg); } body.admin-view .adSd-i:hover i{ color:var(--color-accent); } body.admin-view .adSd-i.on, body.admin-view .adSd-i.on:hover{ background:var(--color-accent); color:#fff; font-weight:var(--fw-semibold); } body.admin-view .adSd-i.on i{ color:#fff; } /* 三级（测评 › 测评与试卷 › 课测/题库/…） */ body.admin-view .adSd-s{ padding-left:var(--space-6); } body.admin-view .adSd-s.adSd-i{ min-height:36px; font-size:var(--fs-caption); color:var(--color-text-2); } body.admin-view .adSd-s.adSd-i.on{ color:#fff; } /* 分组收起（点击组标题） */ body.admin-view .adSd-g.on{ color:var(--color-text-2); cursor:pointer; } body.admin-view .adSd-g.collapsed + .adSd-list{ display:none; } /* 收起态（桌面）：64px，仅留图标 */ body.admin-view.adSd-collapsed{ padding-left:var(--sidebar-w-collapsed); } body.admin-view.adSd-collapsed #ap{ left:var(--sidebar-w-collapsed); } body.admin-view.adSd-collapsed .adSd{ width:var(--sidebar-w-collapsed); } body.admin-view.adSd-collapsed .adSd-h span, body.admin-view.adSd-collapsed .adSd-g, body.admin-view.adSd-collapsed .adSd-i span{ display:none; } body.admin-view.adSd-collapsed .adSd-i{ justify-content:center; padding:9px 0; } /* --------------------------------------------------------------------------- 5 · 顶栏内容：面包屑 + 动作按钮 --------------------------------------------------------------------------- */ body.admin-view .adBurger{ display:none; flex:0 0 auto; width:36px; height:36px; margin-right:var(--space-2); border:none; border-radius:var(--radius-md); cursor:pointer; background:var(--color-on-primary-hover); color:var(--color-on-primary); font-size:15px; line-height:1; } body.admin-view .adCr{ display:flex; align-items:center; gap:6px; flex:1 1 auto; min-width:0; font-size:var(--fs-caption); color:var(--color-on-primary-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } body.admin-view .adCr b{ color:var(--color-on-primary); font-weight:var(--fw-semibold); } body.admin-view .adCr .adCr-s{ color:var(--color-on-primary-dim); } body.admin-view .adAct{ flex:0 0 auto; display:inline-flex; align-items:center; gap:5px; height:32px; padding:0 var(--space-3); box-sizing:border-box; border:1px solid rgba(255,255,255,.28); border-radius:var(--radius-md); background:transparent; color:var(--color-on-primary); font-size:var(--fs-caption); font-family:inherit; cursor:pointer; white-space:nowrap; } body.admin-view .adAct:hover{ background:var(--color-on-primary-hover); } body.admin-view .adAct.primary{ background:var(--color-accent); border-color:var(--color-accent); font-weight:var(--fw-medium); } body.admin-view .adAct.primary:hover{ background:#3f51b5; } body.admin-view .adSdToggle{ flex:0 0 auto; width:32px; height:32px; border:1px solid rgba(255,255,255,.28); border-radius:var(--radius-md); background:transparent; color:var(--color-on-primary); cursor:pointer; font-size:13px; line-height:1; } body.admin-view .adSdToggle:hover{ background:var(--color-on-primary-hover); } /* --------------------------------------------------------------------------- 6 · 手机 / 平板（<768px）：抽屉 + 底部五格 --------------------------------------------------------------------------- */ body.admin-view .adMask{ display:none; position:fixed; inset:0; z-index:1050; background:var(--color-overlay); } body.admin-view.adDrawer-open .adMask{ display:block; } /* 底部五格：默认不显示，仅 <768px 显现（见下方媒体查询） */ body.admin-view .adBt{ display:none; } @media (max-width: 767px){ body.admin-view{ padding-left:0; padding-bottom:64px; } body.admin-view #ap{ left:0; top:var(--topbar-h); padding:var(--space-4); } body.admin-view #ap > div{ max-width:none; } body.admin-view #ab{ padding:0 var(--space-3); gap:var(--space-2); } body.admin-view .adBurger{ display:inline-block; } body.admin-view .adCr{ display:none; } body.admin-view .adSdToggle{ display:none; } body.admin-view #ab > span:first-child{ font-size:var(--fs-body); overflow:hidden; text-overflow:ellipsis; flex:1 1 auto; } body.admin-view .adSd{ width:min(82vw,300px); transform:translateX(-100%); transition:transform .22s ease; box-shadow:none; } body.admin-view.adDrawer-open .adSd{ transform:none; box-shadow:var(--shadow-3); } /* 底部五格：五个一级组入口（第五格=更多，打开完整抽屉） */ body.admin-view .adBt{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:1150; height:calc(56px + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); background:var(--color-surface); border-top:1px solid var(--color-border); } } /* 底部五格默认不显示（仅 <768px 显现，见上方媒体查询） */ body.admin-view .adBt-i{ flex:1 1 0; min-width:0; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; border:none; background:transparent; font-family:inherit; font-size:var(--fs-mini); line-height:1.2; color:var(--color-text-2); cursor:pointer; padding:0 2px; } body.admin-view .adBt-i i{ font-size:15px; } body.admin-view .adBt-i span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; } body.admin-view .adBt-i.on{ color:var(--color-accent); font-weight:var(--fw-semibold); } /* --------------------------------------------------------------------------- 7 · 变更清单（相对 P0 状态） (1) 顶栏 46px → 56px（--topbar-h），#ap 的 top 随变量自动跟随。 (2) 内容区左侧让出 240px 侧栏；面板限宽 1280px 居中（A4）。 (3) 旧 10 页签平铺条 #abel 退场（元素保留、入口移交左侧导航）；.adShell-legacy 可还原。 (4) 手机 <768px：侧栏改抽屉、底部五格、面包屑隐藏、顶栏不再横向滚动。 (5) 桌面侧栏可收起为 64px（.adSd-collapsed）。 --------------------------------------------------------------------------- */