/* ================================================================== * 设计令牌（Design Tokens） * 注意：前缀统一用 --c-* / --sp-* / --fs-* / --r-* / --sh-*， * 禁止使用 --doc-* / --a4-*（那两组属于 assets/css/doc.css 的 A4 排版引擎， * seal.php 会同时加载 app.css + doc.css，重名会串味）。 * ================================================================== */ :root{ /* 全站只有浅色版。声明 color-scheme:light 是为了让原生控件（勾选框、select 箭头、 * 滚动条）在系统深色模式下也按浅色渲染 —— 否则新加的白色输入框会被系统刷成深灰。 */ color-scheme: light; /* iOS 系统色（IOS-DESIGN-SPEC §1 令牌映射表）。改色不动语义：primary 仍是主色、 * danger 仍是危险/负数，所以下面散落的 var() 引用不用逐个改。 */ --c-primary:#007AFF; --c-primary-d:#0062CC; --c-success:#34C759; --c-warning:#FF9500; --c-danger:#FF3B30; --c-info:#30B0C7; --c-ink:#1C1C1E; --c-sidebar:rgba(255,255,255,.72); /* 语义色的「文字版」：iOS 亮色压浅底做 12-13px 正文对比度不足（2.0–3.8:1）， * 所有「深字压浅底」的场景统一走这三个，避免又散出 #C4271E 之类的字面值。 */ --c-danger-ink:#C4271E; --c-success-ink:#1E8E3E; --c-warning-ink:#B25E00; /* 中性「灰字压浅底」：.badge.gray / .pb-tag.pb-gray 三处在用，同样抽令牌。 */ --c-gray-ink:#6C6C70; /* 五个 -50 浅底：仍保留令牌名（.pm-add 等在用），值换成 iOS 系统色压白的 8–10% 淡色， * 否则旧 tailwind 的淡蓝/淡绿底会和新主色同框串味（主理人第二轮要求）。 */ --c-primary-50:#EBF4FF; --c-success-50:#EBF9EE; --c-warning-50:#FFF4E6; --c-danger-50:#FFEBEA; --c-info-50:#EAF7F9; --c-text:#3C3C43; --c-muted:#7C7C82; --c-faint:#AEAEB2; --c-line:rgba(60,60,67,.20); --c-line-2:rgba(60,60,67,.10); --c-bg:#F2F2F7; --c-surface:#FFFFFF; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px; --fs-xs:12px; --fs-sm:13px; --fs-md:15px; --fs-lg:17px; --fs-xl:22px; --fs-2xl:28px; --r-sm:6px; --r-md:10px; --r-lg:14px; --r-full:999px; /* 规范里有两处写死 12px 圆角（§2.6 统计卡、§2.12 看板行、§2.11 登录控件）， * 之前写的字面值，抽成令牌，以后调圆角只改这一行。 */ --r-12:12px; --sh-1:0 0 0 .5px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.05); --sh-2:0 4px 16px rgba(0,0,0,.07); --sh-3:0 20px 60px rgba(0,0,0,.16); /* ---- iOS 新增令牌（规范 §1.1）---- */ --c-fill:rgba(120,120,128,.12); /* systemFill：输入框 / 次要按钮底 */ --c-fill-2:rgba(120,120,128,.20); /* 悬停、按下 */ --c-glass:rgba(255,255,255,.72); /* 侧栏毛玻璃 */ --c-glass-2:rgba(255,255,255,.86); /* 顶栏毛玻璃（更实一点，压住滚动内容） */ --c-sep:rgba(60,60,67,.20); /* separator：表格行分隔（1x 屏上要看得见） */ --c-sep-soft:rgba(60,60,67,.12); /* 极轻内部分隔：虚线、卡片内分隔 */ --c-sep-strong:rgba(60,60,67,.28); /* 表头底线：表头与内容必须分得开 */ /* 完工后补录标识（order_progress.is_supplement=1）专用三色。 * 车间强光 + 手机降亮度下要认得出，所以这一组不参与「降对比度」的整体调整。 */ --c-supp:#FF9500; /* 竖条 / 强调 */ --c-supp-bd:rgba(255,149,0,.35); /* 徽章描边 */ --c-supp-bg:rgba(255,149,0,.10); /* 整行底 */ --blur:saturate(180%) blur(20px); --tap:44px; /* 移动端最小触控 */ } /* 下面这条不许动：seal.php 同时加载 app.css + doc.css，改 * 的 margin/padding * 会让合同版式整体位移。font-family 同理（doc.css 依赖继承来的字体度量）。 * —— 补充：doc.css 的 .a4-sheet 自己声明了 --doc-font，合同排版不继承 body， * 所以下面换字体栈只影响界面，打印稿一个字都不会动。 */ * { box-sizing: border-box; margin: 0; padding: 0; } /* 字体栈：中文优先。 * 原来的顺序是 -apple-system 打头，Windows 上不认这个关键字，实际落到「微软雅黑」， * Mac 上落到「苹方」——结果一样，但少了几个兜底：服务器装的精简版 Windows、 * Linux 桌面、部分国产系统里没有雅黑，就会掉到 sans-serif 的无衬线默认字体， * 中文立刻变宋体或糊成一片。这里把常见中文字体都列进去。 * * 另外删掉了 -webkit-font-smoothing: antialiased。这条是给 Retina 屏的 Mac * 准备的（让字细一点），但在 Windows 上它的作用是【关掉 ClearType 次像素渲染】， * 换成灰度抗锯齿 —— 12~13px 的汉字笔画本来就细，灰度渲染后笔画边缘发灰、 * 像蒙了一层雾，这就是「字体不清楚」的直接来源。Windows 默认的 ClearType * 才是这个场景下最清晰的渲染方式，不要关。 */ body { font-family: -apple-system, "Microsoft YaHei", "Microsoft YaHei UI", "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC", "Noto Sans SC", sans-serif; font-size: var(--fs-md); line-height: 1.5; color: var(--c-text); background: var(--c-bg); } a { color: var(--c-primary); text-decoration: none; } a:hover { text-decoration: underline; } .layout { display: flex; min-height: 100vh; } /* 侧栏：深色石板底 → 浅色毛玻璃（规范 §2.1）。文字必须同步由浅色改深色， * 否则白底浅灰字等于消失。宽度 200 → 232px（胶囊缩进需要空间）。 */ .sidebar { width: 232px; background: var(--c-glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-right: .5px solid rgba(0,0,0,.08); color: var(--c-ink); flex-shrink: 0; overflow-y: auto; } .brand { padding: var(--sp-4); font-size: var(--fs-lg); font-weight: 500; color: var(--c-ink); background: transparent; border-bottom: .5px solid rgba(0,0,0,.08); } .sidebar nav { padding: var(--sp-2) 0; } .nav-group { padding: var(--sp-3) var(--sp-4) var(--sp-1); font-size: var(--fs-xs); color: var(--c-muted); text-transform: uppercase; } .sidebar a { display: block; padding: var(--sp-2) var(--sp-4); color: var(--c-ink); font-size: var(--fs-sm); } .sidebar a:hover { background: rgba(120,120,128,.08); color: var(--c-ink); text-decoration: none; } .main { flex: 1; display: flex; flex-direction: column; min-width: 0; } /* 顶栏：52 → 56px，白色实底 → 半透明毛玻璃 + 0.5px 发丝线（规范 §2.2） */ .topbar { height: 56px; background: var(--c-glass-2); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-bottom: .5px solid rgba(0,0,0,.08); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--sp-5); } .crumb { font-size: var(--fs-lg); font-weight: 500; color: var(--c-ink); } .userbox { display: flex; gap: var(--sp-4); align-items: center; color: var(--c-muted); font-size: var(--fs-sm); } /* 「退出」是破坏性动作，iOS 惯例用 systemRed（规范 §2.2） */ .userbox a { color: var(--c-danger); } .content { padding: var(--sp-5); } .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-5); } /* 统计卡：白底描边 → systemFill 浅灰块，无边框无阴影（规范 §2.6） */ /* 统计卡（主理人第二轮 P1）：原来 var(--c-fill) 是 6% 亮度的灰，压在 #F2F2F7 页底上 * 分不出层，实测「灰上灰」。改白底 + 一条 0.5px 的发丝外描边（不用真实阴影， * 避免多卡并排时投影互相叠出脏边）—— iOS 分组列表就是这么做的。 */ .card { background: var(--c-surface); border: 0; border-radius: var(--r-12); padding: var(--sp-4); box-shadow: 0 0 0 .5px rgba(0,0,0,.04); } .card-label { color: var(--c-muted); font-size: var(--fs-sm); margin-bottom: var(--sp-2); } .card-value { font-size: 26px; font-weight: 500; color: var(--c-ink); } /* 注意：.panel 上禁止加 overflow / overflow-x —— 会裁掉 .ss-list 搜索下拉 * （searchable.css 里是 position:absolute; z-index:60）。 */ .panel { background: var(--c-surface); border: 0; border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-4); box-shadow: var(--sh-1); } /* 面板里的 h3 有两种用法，必须分开处理： * A) 独占一行的面板标题

客户列表

… * B) 横排工具栏里的标题

合作方账号

…按钮… * 分隔线只给 A（`.panel > h3`）。给 B 会画出一条只到标题宽度一半的横线， * 而且 padding-bottom 会把工具栏那一行顶高 —— 全站有 18 处 B 型，会集体裂版。 * 基础排版（display:flex / 17px / 500）仍然作用于全部 h3，不能只写 > h3， * 否则 B 型会退回浏览器默认的

（block + 粗体 + 1em 外边距）。 */ .panel h3 { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-lg); font-weight: 500; color: var(--c-ink); line-height: 1.4; margin-bottom: var(--sp-3); } .panel > h3 { padding-bottom: 12px; margin-bottom: 14px; border-bottom: .5px solid var(--c-sep-soft); } /* 看板标题行 / 详情标题行是 flex 横排（旁边挂搜索框、返回链接），按 B 型处理 */ .prod-board-h h3, .prod-detail-h h3 { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; } /* 长说明文字（如 modules/sales/out.php 的打印记录提示）不要顶破面板 */ .panel h3 > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* ---- 表格基础（全局只作用在 table.grid 上，禁止写裸 table/td/th 选择器， * 否则会渗进 doc.css 的合同表格）---- */ table.grid { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } /* iOS 表格：删掉全部竖线与外框，只留 0.5px 横发丝线（规范 §2.5）。 * 注：这里用 --c-sep(.20) 而不是 --c-sep-soft(.12) —— .5px 在 1x 屏会被取整成 1px， * 12% 的黑在 1px 上几乎看不见，10 行数据会糊成一片（主理人截图 P0）。 * --c-sep-soft 只留给极轻的内部虚线（.pick-row / .copyblock-actions）。 */ /* 水平 padding 从 14px 收回 12px（主理人第二轮 P0「已收」列被压）： * 9 列 × 4px = 36px，把 1366/1280 笔记本上的横向余量还回来。 * 垂直仍是 12px —— 行高 52px 的舒适档不动。 */ table.grid th, table.grid td { border: 0; border-bottom: .5px solid var(--c-sep); padding: 12px 12px; text-align: left; } table.grid th { background: transparent; font-weight: 500; color: var(--c-muted); } table.grid tbody tr:hover { background: rgba(120,120,128,.06); } table.grid td.num { text-align: right; font-variant-numeric: tabular-nums; } /* 表头跟随数字列右对齐（主理人第七轮）：此前 th 统一 text-align:left， * 而 td.num 是 right，导致「金额 / 已收」表头贴左、数字贴右，视觉错位。 */ table.grid th.num { text-align: right; } table.grid th.nowrap, table.grid td.nowrap { white-space: nowrap; } table.grid td.nowrap .btn { margin: 0 2px 0 0; } table.grid td.nowrap .btn:last-child { margin-right: 0; } /* 表格内按钮收紧（主理人第二轮 P0：「已收」列被 sticky 操作列压掉）： * 只作用于 table.grid 内，工具栏主按钮（+ 新建销售订单 / 筛选 / 重置）的 * 宽 padding 呼吸感一点不动 —— 那才是 iOS 按钮好看的原因。 * 三档全部锁在 min-width:1000px 里：车间手机的触屏字号/点击面积不受影响。 * 实测回收（1366 已收右边缘 → 操作列左边缘的余量）： * 现状 −10px → 字号 11.5 −19px → 加 margin 1px −25px → 加 padding 7px −53px。 */ @media (min-width: 1000px) { table.grid .btn { padding: 0 7px; } table.grid .btn.sm { padding: 0 7px; font-size: 11.5px; } table.grid td.nowrap .btn { margin-right: 1px; } } .text-red { color: var(--c-danger); } .text-green { color: var(--c-success); } .muted { color: var(--c-muted); } .toolbar { display: flex; gap: var(--sp-2); align-items: center; margin-bottom: var(--sp-3); flex-wrap: wrap; } .toolbar form { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; } /* ---- 按钮 ---- * font:inherit 是关键：以前