/* ============================================================ 潜龙八字 · 骨架层（shell.css） T-093 S3 ------------------------------------------------------------ 分层（严格单向依赖）： tokens（皮肤：只声明变量） ↓ shell.css（骨架：布局 / 栅格 / 侧栏两态 / 断点 / 轨道接管） ↓ app.css（页面与组件：只消费 var） ------------------------------------------------------------ 状态宿主：#viewportStage 上的三个 data 属性，全部由 js/shell.js 写入 data-shell = phone | tab | desk | wide ← 由容器实测宽度判定 data-nav = expanded | rail ← 侧栏两态（桌面/平板） data-skin = light | dark | mo | qing | dai ← 皮肤（沿用 app.css 既有机制） 为何用「实测宽度 + data-shell」而不写 @media： 1) 本项目自带设备调试器（#devTools 把 #viewportStage 限宽模拟手机/平板）。 媒体查询量的是**窗口**宽度，在宽屏上模拟手机时仍命中桌面段 ⇒ 调试器失真。 实测容器宽度则真机与模拟两条路都对。 2) 同一套 HTML 可嵌任意容器（后续 WebView / 小程序），不依赖容器查询。 3) 无 JS 时退化为手机骨架 —— 本应用是 JS 渲染的空壳 SPA，无 JS 本就无内容， 故不需为无 JS 另写一套 @media（避免第二处断点真源）。 骨架三套（丙案）： 第一套 手机 < 768 底栏 tabbar（既有）· 单列 第二套 平板 768–991 左侧图标条 76px · 单列 第三套 桌面 ≥ 992 左侧栏 248px ⇄ 76px 可隐藏 · 内容 1160px 居中 宽屏增量 ≥ 1440 侧栏 264px ⇄ 76px · 内容 1240px 居中 ============================================================ */ /* ============================================================ 0 · 容器尺寸令牌（默认值＝手机骨架） ============================================================ */ #viewportStage{ --sb-w: 0px; /* 侧栏入流宽度：手机为 0（底栏是浮层，不入流） */ --sb-w-expanded: 248px; /* 桌面展开 */ --sb-w-rail: 76px; /* 收起＝图标条 */ --sb-w-wide: 264px; /* 宽屏展开 */ --topbar-h: 56px; --page-pad: 12px; --page-pad-b: 84px; /* 手机须让开 64px 底栏 */ --content-max: 100%; --sb-item-h: 44px; } /* ============================================================ 1 · 侧栏外壳内部件（默认隐藏） ——默认隐藏是**安全默认**：万一 shell.js 未执行，底栏不会多出品牌块 ============================================================ */ .tabbar .side-brand, .tabbar .sb-toggle, .tabbar .side-foot{ display:none; } .side-brand{ align-items:center; gap:9px; padding:2px 4px 12px; width:100%; } .sb-seal{ width:30px; height:30px; flex:none; border-radius:9px 6px 9px 6px; background:var(--brand); color:#fffdf6; display:flex; align-items:center; justify-content:center; font-family:var(--font-serif); font-size:15px; font-weight:800; box-shadow:inset 0 0 0 1px rgba(255,255,255,.28); } .side-brand .sb-name{ font-family:var(--font-serif); font-size:15px; font-weight:800; letter-spacing:1px; line-height:1.15; } .side-brand .sb-sub{ font-size:11px; color:var(--ink-3); letter-spacing:.3px; margin-top:1px; white-space:nowrap; } .sb-toggle{ width:100%; height:32px; margin:0 0 8px; padding:0 10px; align-items:center; gap:8px; cursor:pointer; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface-2); color:var(--ink-2); font-family:inherit; font-size:11.5px; font-weight:700; transition:border-color .18s, color .18s; } .sb-toggle:hover{ border-color:var(--brand); color:var(--brand); } .sb-toggle svg{ width:15px; height:15px; flex:none; } .sb-toggle .sb-tg-text{ flex:1; text-align:left; white-space:nowrap; } .side-foot{ margin-top:auto; width:100%; padding-top:10px; border-top:1px solid var(--line); } .sf-k{ font-size:11px; color:var(--ink-3); letter-spacing:.6px; margin-bottom:5px; } .skin-pick{ width:100%; padding:7px 8px; font-family:inherit; font-size:12px; color:var(--ink); background:var(--surface-2); border:1px solid var(--line); border-radius:10px; cursor:pointer; } .skin-pick:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); } .side-foot .sf-note{ font-size:11px; color:var(--ink-3); line-height:1.5; margin-top:6px; } /* 顶栏内的皮肤选择器（手机/平板也可达；与侧栏共用同一状态） */ .skin-pick.in-head{ width:auto; max-width:118px; height:34px; padding:0 6px; font-size:11.5px; } /* ============================================================ 2 · 第二套 · 平板（768 – 991） ============================================================ */ #viewportStage[data-shell="tab"]{ --sb-w: 76px; --topbar-h: 64px; --page-pad: 16px; --page-pad-b: 40px; --content-max: 100%; --sb-item-h: 44px; } #viewportStage[data-shell="tab"] #app{ flex-direction:row; align-items:flex-start; max-width:none; margin:0; } #viewportStage[data-shell="tab"] .tabbar{ position:sticky; top:0; left:auto; transform:none; order:-1; flex:0 0 auto; width:var(--sb-w); max-width:none; height:100vh; flex-direction:column; justify-content:flex-start; gap:3px; padding:12px 7px; border-top:none; border-right:1px solid var(--line); background:var(--surface); } #viewportStage[data-shell="tab"] .page{ flex:1 1 auto; min-width:0; max-width:var(--content-max); margin-inline:auto; padding:var(--page-pad) var(--page-pad) var(--page-pad-b); } /* ============================================================ 3 · 第三套 · 桌面（≥ 992）／宽屏（≥ 1440） ============================================================ */ #viewportStage[data-shell="desk"], #viewportStage[data-shell="wide"]{ --sb-w: 248px; --topbar-h: 64px; --page-pad: 20px; --page-pad-b: 44px; --content-max: 1160px; --sb-item-h: 40px; } #viewportStage[data-shell="wide"]{ --sb-w: 264px; --content-max: 1240px; } /* 侧栏两态（唯一的「可隐藏」实现）：data-nav 写在 html 上，刷新后由 shell.js 复原 */ html[data-nav="rail"] #viewportStage[data-shell="desk"], html[data-nav="rail"] #viewportStage[data-shell="wide"]{ --sb-w: var(--sb-w-rail); } #viewportStage[data-shell="desk"] #app, #viewportStage[data-shell="wide"] #app{ flex-direction:row; align-items:flex-start; max-width:none; margin:0; } #viewportStage[data-shell="desk"] .tabbar, #viewportStage[data-shell="wide"] .tabbar{ position:sticky; top:0; left:auto; transform:none; order:-1; flex:0 0 auto; width:var(--sb-w); max-width:none; height:100vh; flex-direction:column; justify-content:flex-start; gap:2px; padding:14px 10px; border-top:none; border-right:1px solid var(--line); background:var(--surface); box-shadow:1px 0 0 var(--line-thin); /* 推挤式：内容随侧栏宽度同步过渡（非覆盖） */ transition:width 220ms cubic-bezier(.4,0,.2,1); } #viewportStage[data-shell="desk"] .page, #viewportStage[data-shell="wide"] .page{ flex:1 1 auto; min-width:0; max-width:var(--content-max); margin-inline:auto; padding:var(--page-pad) var(--page-pad) var(--page-pad-b); } /* ---------- 侧栏内的导航项（把既有 .tab 重排为纵列） ---------- */ #viewportStage[data-shell="tab"] .tab, #viewportStage[data-shell="desk"] .tab, #viewportStage[data-shell="wide"] .tab{ flex:0 0 auto; width:100%; height:var(--sb-item-h); flex-direction:row; justify-content:flex-start; align-items:center; gap:10px; padding:0 11px; border-radius:10px; font-size:12.5px; transition:background .16s, color .16s; } #viewportStage[data-shell="tab"] .tab svg, #viewportStage[data-shell="desk"] .tab svg, #viewportStage[data-shell="wide"] .tab svg{ flex:none; width:19px; height:19px; } #viewportStage[data-shell="tab"] .tab span, #viewportStage[data-shell="desk"] .tab span, #viewportStage[data-shell="wide"] .tab span{ white-space:nowrap; } #viewportStage[data-shell="tab"] .tab:hover, #viewportStage[data-shell="desk"] .tab:hover, #viewportStage[data-shell="wide"] .tab:hover{ background:var(--surface-2); color:var(--ink); } /* 选中：底色翻白 + 左侧 3px 品牌竖条（替换底栏的顶部横条） */ #viewportStage[data-shell="tab"] .tab.active, #viewportStage[data-shell="desk"] .tab.active, #viewportStage[data-shell="wide"] .tab.active{ background:var(--brand-soft); color:var(--brand); font-weight:800; } #viewportStage[data-shell="tab"] .tab.active::before, #viewportStage[data-shell="desk"] .tab.active::before, #viewportStage[data-shell="wide"] .tab.active::before{ top:50%; left:-1px; transform:translateY(-50%); width:3px; height:20px; border-radius:0 3px 3px 0; } /* ---------- 侧栏内三件的排序（品牌 → 收起按钮 → 导航 → 侧栏脚） ---------- */ #viewportStage[data-shell="tab"] .side-brand, #viewportStage[data-shell="tab"] .sb-toggle, #viewportStage[data-shell="tab"] .side-foot, #viewportStage[data-shell="desk"] .side-brand, #viewportStage[data-shell="desk"] .sb-toggle, #viewportStage[data-shell="desk"] .side-foot, #viewportStage[data-shell="wide"] .side-brand, #viewportStage[data-shell="wide"] .sb-toggle, #viewportStage[data-shell="wide"] .side-foot{ width:100%; } #viewportStage[data-shell="tab"] .side-brand, #viewportStage[data-shell="desk"] .side-brand, #viewportStage[data-shell="wide"] .side-brand{ order:0; } #viewportStage[data-shell="tab"] .sb-toggle, #viewportStage[data-shell="desk"] .sb-toggle, #viewportStage[data-shell="wide"] .sb-toggle{ order:1; } #viewportStage[data-shell="tab"] .side-foot, #viewportStage[data-shell="desk"] .side-foot, #viewportStage[data-shell="wide"] .side-foot{ order:9; margin-top:auto; } /* 收起按钮：两态都可见（图标条态是**回到展开态的唯一入口**），仅隐藏其文字 */ #viewportStage[data-shell="tab"] .sb-toggle, #viewportStage[data-shell="desk"] .sb-toggle, #viewportStage[data-shell="wide"] .sb-toggle{ display:flex; } /* 品牌块与侧栏脚：仅展开态显示 */ html[data-nav="expanded"] #viewportStage[data-shell="tab"] .side-brand, html[data-nav="expanded"] #viewportStage[data-shell="desk"] .side-brand, html[data-nav="expanded"] #viewportStage[data-shell="wide"] .side-brand{ display:flex; } html[data-nav="expanded"] #viewportStage[data-shell="tab"] .side-foot, html[data-nav="expanded"] #viewportStage[data-shell="desk"] .side-foot, html[data-nav="expanded"] #viewportStage[data-shell="wide"] .side-foot{ display:block; } /* ---------- 收起态＝图标条：只留图标，悬停浮出名称 ---------- */ html[data-nav="rail"] #viewportStage[data-shell="tab"] .tab, html[data-nav="rail"] #viewportStage[data-shell="desk"] .tab, html[data-nav="rail"] #viewportStage[data-shell="wide"] .tab{ justify-content:center; padding:0; position:relative; } html[data-nav="rail"] #viewportStage[data-shell="tab"] .tab span, html[data-nav="rail"] #viewportStage[data-shell="desk"] .tab span, html[data-nav="rail"] #viewportStage[data-shell="wide"] .tab span{ display:none; } html[data-nav="rail"] #viewportStage[data-shell="tab"] .tab:hover span, html[data-nav="rail"] #viewportStage[data-shell="desk"] .tab:hover span, html[data-nav="rail"] #viewportStage[data-shell="wide"] .tab:hover span{ display:block; position:absolute; left:calc(100% + 6px); top:50%; transform:translateY(-50%); z-index:60; padding:5px 10px; border-radius:8px; background:var(--ink); color:var(--bg); font-size:11.5px; font-weight:700; white-space:nowrap; box-shadow:var(--shadow-md); } /* 收起态：收起按钮只留图标，文字隐藏 */ html[data-nav="rail"] #viewportStage[data-shell="tab"] .sb-toggle, html[data-nav="rail"] #viewportStage[data-shell="desk"] .sb-toggle, html[data-nav="rail"] #viewportStage[data-shell="wide"] .sb-toggle{ justify-content:center; padding:0; } html[data-nav="rail"] #viewportStage[data-shell="tab"] .sb-toggle .sb-tg-text, html[data-nav="rail"] #viewportStage[data-shell="desk"] .sb-toggle .sb-tg-text, html[data-nav="rail"] #viewportStage[data-shell="wide"] .sb-toggle .sb-tg-text{ display:none; } /* 收起态：仍给选中项保留左侧金条 */ html[data-nav="rail"] #viewportStage[data-shell="tab"] .tab.active::before, html[data-nav="rail"] #viewportStage[data-shell="desk"] .tab.active::before, html[data-nav="rail"] #viewportStage[data-shell="wide"] .tab.active::before{ left:-1px; top:50%; transform:translateY(-50%); width:3px; height:20px; border-radius:0 3px 3px 0; } /* ============================================================ 4 · 骨架层对既有组件的「布局接管」 ——只改网格轨道与溢出策略，不碰任何色彩 / 字号令牌 ============================================================ */ /* ---------- 4.1 ★★ 260923 整块退场：岁运「三框制」已收归 css/xy3.css 单一真源 ★★ ⛔ 原块（旧四页签设计的遗留）对 dayun / xiaoyun 两条轨道做「布局接管」： display:grid; grid-template-columns:repeat(auto-fit,minmax(76px,1fr)); gap:6px; overflow-x:visible; scroll-snap-type:none; 其选择器带 `#viewportStage`（ID）⇒ 优先级 **(1,4,0)**，**静默压过** xy3.css 的三框制规则 (0,4,0)。 实测后果（260923 探针坐实，非推测）： · `gap` 被抢成 6px（xy3 声明的是 `var(--xy-gap,4px)`=4px）⇒ 等分算式失准； · `auto-fit` 显式建列 ⇒ 宽屏实测生成 **12 条轨道**（10 实 + 2 条 0px 空轨）， 大运格被算成 98.6px 而小运格 100.4px ⇒ 与 owner「11 个框格**平均分布**」相悖； · `overflow-x:visible` 与 xy3 的 `overflow-y:hidden` 相遇 ⇒ 计算值变 `auto` （CSS 规范：visible 与 hidden 不同轴时 visible 计算为 auto）⇒ 凭空多出横滑可能。 ✅ 三框制的「一行 11 格等分 / 不横滑 / 骨架只调密度」由 **xy3.css §0–§2** 全权负责， `--xy-c1-a/-b` 已用 calc 反解补偿 padding/gap ⇒ 骨架层**不得**再碰这些属性。 ⛔ 骨架层职责边界：只改**自身骨架观感**（侧栏两态、抽屉、底栏），不接管组件内部轨道。 */ /* ---------- 4.2 ★ 原盘 / 四柱总览表：行标签列固定不随滑，数据列允许收缩 ---------- */ .pillars-table .row-name{ position:sticky; left:0; z-index:2; background:var(--surface-2); box-shadow:1px 0 0 var(--line-thin); } .pillars-table .relation-row .row-name{ background:var(--surface-3,var(--surface-2)); } /* 桌面：行标签列放宽到 88px（读向更稳），平板收到 76px */ #viewportStage[data-shell="desk"] .pillars-table .row-name, #viewportStage[data-shell="wide"] .pillars-table .row-name{ width:88px; min-width:88px; } #viewportStage[data-shell="tab"] .pillars-table .row-name{ width:76px; min-width:76px; } /* 手机：行标签列收窄，把宽度让给四柱（避免为塞标签列而横滑） */ #viewportStage[data-shell="phone"] .pillars-table .row-name{ width:58px; min-width:58px; font-size:11px; padding-right:5px; } /* ---------- 4.3 手机：四柱大字略收，避免四列撑破 ---------- */ #viewportStage[data-shell="phone"] .pillar .p-gan, #viewportStage[data-shell="phone"] .pillar .p-zhi{ font-size:30px; } #viewportStage[data-shell="phone"] .pillar{ padding:10px 2px 9px; } /* ============================================================ 5 · 手机抽屉（外观面板）—— 导航已由底栏覆盖，不重复导航 ============================================================ */ #sbDrawer{ position:fixed; top:0; left:0; height:100%; width:min(268px,84vw); background:var(--surface); border-right:1px solid var(--line-strong); box-shadow:12px 0 40px rgba(0,0,0,.28); z-index:150; display:none; flex-direction:column; padding:16px; transform:translateX(-100%); transition:transform .22s ease; } #sbDrawer.open{ transform:translateX(0); } #viewportStage[data-shell="phone"] #sbDrawer{ display:flex; } #sbDrawer[hidden]{ display:none; } #sbDrawer .dr-head{ display:flex; align-items:center; gap:8px; margin-bottom:14px; } #sbDrawer .dr-title{ font-size:14px; font-weight:800; } #sbDrawer .dr-close{ margin-left:auto; width:30px; height:30px; border-radius:8px; cursor:pointer; border:1px solid var(--line); background:var(--surface); color:var(--ink-2); font-size:14px; } #sbDrawer .dr-close:hover{ border-color:var(--brand); color:var(--brand); } #sbDrawer .dr-body{ overflow-y:auto; } #sbDrawer .dr-note{ font-size:11px; color:var(--ink-3); line-height:1.6; margin-top:10px; } .scrim{ position:fixed; inset:0; z-index:140; background:rgba(20,16,10,.5); opacity:0; pointer-events:none; transition:opacity .22s ease; } .scrim.show{ opacity:1; pointer-events:auto; } #viewportStage[data-shell="phone"] .scrim{ display:block; } #viewportStage:not([data-shell="phone"]) .scrim{ display:none; } /* 汉堡按钮：仅手机骨架显示（打开外观抽屉） */ .hamburger{ display:none; position:fixed; top:12px; left:12px; z-index:120; width:38px; height:38px; border-radius:11px; cursor:pointer; align-items:center; justify-content:center; border:1px solid var(--line); background:var(--surface); color:var(--ink-2); box-shadow:var(--shadow-sm); } .hamburger svg{ width:19px; height:19px; } .hamburger:hover{ border-color:var(--brand); color:var(--brand); } #viewportStage[data-shell="phone"] .hamburger{ display:flex; } /* ============================================================ 6 · ★ 辅助栏（参考栏）——本轮**有意不建** ------------------------------------------------------------ S1 §3.5 R3 的实质是「辅助栏**不得无条件常驻**、抢走主内容宽」。 我方现状本就**没有**常驻辅助栏（S0 实测），故本批**不新建空栏**—— 建一个空壳面板属于死码（铁律⑩）。 第二批（消费点补齐）落位时，新栏须遵守本批复核过的三条： ① 默认收起为 44px 图标条，不得无条件常驻； ② 仅在 ≥1440（data-shell="wide"）才允许用户手动常驻 340px； ③ 展开态须与命柱矩阵共存而不使其横滑（验收 A3/A7 在两种态下均须通过）。 ============================================================ */ /* ============================================================ 7 · 动效降级 ------------------------------------------------------------ 注：本轮**有意不使用** container-type / @container。 理由：data-shell 由 shell.js 实测容器宽度写入，已是单一断点真源； 再加一层容器查询会引入 contain:layout 副作用（固定定位后代改以容器 为包含块），使既有 #ai-drawer / .ql-toast 的定位行为变化 —— 得不偿失。 ============================================================ */ /* ---------- 动效降级：尊重「减少动效」系统偏好 ---------- */ @media (prefers-reduced-motion: reduce){ #viewportStage .tabbar, #sbDrawer, .scrim{ transition-duration:.001ms !important; } }