/* ============================================================ 公开版页面净化 + Catppuccin Latte（light）换肤 + feed 卡片流作用域：extra_css_urls 全站注入，但规则限定在 .db-public-feed 下（类挂在上，由 Datasette 按路径注入：/public-feed/* → db-public-feed）。 2026-09-19 整文件重写（用户 O2 决策）：此前三轮追加 + 两天十几处补丁，同一个值散在 3~6 处（接缝 3 种写法、同高账 6 处算术、手机块 8 条纯拷贝），改一个字号要跟着重算四五个 padding。重写只改「值的住处」，不动观感：验收 = PC 1280 / 手机 375 两端 × 10 个状态页，截图逐像素 0 差异 + 逐元素计算样式 0 差异（临时脚本 /tmp/pxdiff，用冻结的快照库跑的）。 ⚠ 端隔离规矩（PC / 手机不许混）——端差异只准走这两条路： ① 令牌覆写：手机块 :root 里改值，桌面选择器与数值永不被手机块触碰； ② 布局重排：手机块里只写 grid 落位、断行、幽灵热区垫、显隐这类结构性差异，不写字号/内边距/圆角/盒高（那些一律走 ①）。回退路径（表格视图等）在本站不可达：那些页面的 body 类不是 db-public-feed，本节样式在其中不生效——保留只为将来放行其它表时有底。令牌（Catppuccin Latte）：base #eff1f5 / mantle #e6e9ef / crust #dce0e8 surface1 #bcc0cc / overlay0 #9ca0b0 text #4c4f69 / subtext1 #5c5f77 / mauve #8839ef / blue #1e66f5 green #40a02b / yellow #df8e1d / red #d20f39 / teal #179299 原则：细边框分层，不用填充色块；light 下卡片用白底+浅投影分层。 ============================================================ */ /* ============================================================ 1. 令牌：全站单点真源 ============================================================ */ :root { /* --- 调色板 --- */ --c-base: #eff1f5; /* 页底 */ --c-mantle: #e6e9ef; /* 灰底容器（顶栏胶囊条 / 底栏翻页条 / 选中斑马） */ --c-crust: #dce0e8; /* 分隔线 / 卡片描边 / 置灰件描边 */ --c-surface1: #bcc0cc; /* 控件描边 */ --c-overlay0: #9ca0b0; /* 次要文字、信息位 */ --c-text: #4c4f69; --c-subtext1: #5c5f77; --c-mauve: #8839ef; /* hover / 聚焦 / 选中 */ --c-blue: #1e66f5; /* 链接与控件文字 */ --c-green: #40a02b; /* 原文链接 */ --c-yellow: #df8e1d; --c-red: #d20f39; --c-teal: #179299; --c-white: #ffffff; /* --- 圆角 --- */ --r-pill: 999px; /* 胶囊（顶栏系，两端同值） */ --r-panel: 10px; /* 面板容器：顶栏胶囊条 / 底栏翻页条 */ --r-card: 10px; /* 卡片 */ --r-box: 8px; /* 方角件：表格回退按钮 / 表格版 facet 块 */ --r-chip: 6px; /* 徽标 / stock 输入框 */ --foot-radius: var(--r-pill); /* foot bar 操作件：桌面 pill、手机方角 */ /* --- 面板容器（顶栏胶囊条 / 底栏翻页条）--- */ --fs-panel: 1em; /* 15px：面板内所有 em 的锚点（msg/gap 随它） */ --pad-panel: .85em 1em; --pad-facet: .85em 1em; /* 顶栏胶囊条容器内边距（手机单独收窄） */ --margin-facet: 1.4em 0 1.4em; /* --- 紧凑区交互件（连体组 / 搜索钮 / 胶囊）同高账 --- 盒高 = 字号 × --lh-cmp + 2 × --pad-cmp + 2px 描边桌面：15 × 1.65 + 12 + 2 = 39px；手机：13 × 1.5 + 11.96 + 2 = 33px */ --lh-cmp: 1.65; --pad-cmp: .4em .85em; --pad-in: .4em .7em; /* 输入框左右更窄（数字比中文窄） */ --w-input: 4.5em; --seam: -1px; /* 连体组相邻件重叠：两条 1px 描边共用一条 */ /* --- 单独使用的按钮（zero-results 的「回到最新内容」）--- 2026-09-19 重写时按现状保留：它不在连体组里，手机上仍是 .4em .85em + 继承 1.65 行高（33.81px），与组内 33px 差 0.8px。是否归一待用户裁定。 */ --pad-btn: .4em .85em; /* --- 站内搜索 --- */ --fs-search: .95em; --lh-search: normal; --r-search: var(--r-chip); --pad-search: .3em .8em; --fs-go: .9em; /* --- 胶囊 --- */ --fs-pill: .85em; /* --- 卡片流 --- */ --pad-body: 1.2em 1.5em; --gap-cards: .9em; --pad-card: .9em 1.1em; --fs-title: 1.02em; --fs-sev: .8em; --mw-sev: 1.7em; /* severity 徽标 */ --fs-cat: .78em; /* category 徽标 */ --mw-fpname: 6.5em; /* 胶囊条名称列宽（对齐两行胶囊起点） */ --ml-origin: auto; /* 脚区原文链接右靠（flex 的 auto 边距）*/ --clamp-summary: 4; /* 摘要折叠行数 */ --fs-expand: .8em; --ghost-expand: -11px 0; /* 展开按钮的幽灵热区垫 */ --fs-foot: .82em; /* 脚区（时间/tags/原文）字号 */ --mb-cardhead: .35em; /* 卡片头行下留白 */ /* 脚区三段分隔（手机端才画线：强化「头/摘要/脚」结构） */ --foot-divider: none; --foot-pad-top: 0; --foot-margin-top: 0; } @media (max-width: 640px) { :root { --r-panel: 8px; --r-card: 8px; --foot-radius: 10px; /* 2026-09-19 用户定「天圆地方」：顶栏圆胶囊、底栏方角——区域语义分界 */ --fs-panel: 13px; --lh-cmp: 1.5; --pad-cmp: .46em .7em; --pad-in: .46em .7em; --w-input: 3.6em; /* iOS Safari 对 <16px 输入框聚焦会自动放大整页 → 手机上搜索框钉 16px （其余控件 13px），高度靠压 padding 收 */ --fs-search: 16px; --lh-search: 1.5; --r-search: var(--r-pill); --fs-go: 13px; --fs-pill: 1em; /* 去掉 .85em 自缩（11px 曾是全 bar 最小件） */ --pad-body: .8em .7em; /* 原 1.2/1.5em，375px 下吃掉 8% 宽度 */ --gap-cards: .7em; --pad-card: .7em .8em; --fs-title: 1em; /* 标题层级靠加粗，不靠字号（2026-09-18 定稿） */ --fs-sev: .72em; --mw-sev: 1.5em; --fs-cat: .7em; --mw-fpname: 0; /* 名称改独占一行（flex 槽宽失效） */ --ml-origin: 0; /* 脚区改 grid 后 auto 边距失效，改 justify-self */ --pad-facet: .7em .8em; --margin-facet: 1em 0; --clamp-summary: 8; /* 实测摘要中位 151 字，8 行 ≈170 字，覆盖 p75 */ --fs-expand: .85em; --ghost-expand: -12px 0; --fs-foot: .8em; --mb-cardhead: .45em; --foot-divider: 1px solid var(--c-crust); --foot-pad-top: .5em; --foot-margin-top: .2em; } } /* ============================================================ 2. 基座：净化 / 字排 / 链接 / 表格回退 ============================================================ */ /* ---------- 2a. 净化：藏掉 stock 件的壳 ---------- */ .db-public-feed form.filters { display: none; } /* 筛选/排序表单 */ /* 卡片拉齐 header 色带（2026-09-18 用户定）：stock app.css 给 section.content 加了 margin: 0 1rem，而 header 色带自带 padding—— 色带比正文列每边宽 16px，「帽大头小」。这段 margin 清零后，正文（胶囊条/搜索/卡片/翻页条）整体顶到色带边缘；header 不动。 */ .db-public-feed section.content { margin: 0; } .db-public-feed pre.wrapped-sql { display: none; } /* 表结构 DDL */ .db-public-feed .advanced-export { display: none; }/* 高级导出块 */ .db-public-feed div.ft { display: none; } /* 页脚推广 */ /* 头部再简约：页头标题条 / 导出链接行 / 建议 facet 行 / 数据源行 / 行数标题全部隐藏（只留 facet 过滤胶囊） */ .db-public-feed .page-header { display: none; } .db-public-feed p.export-links { display: none; } .db-public-feed p.suggested-facets { display: none; } .db-public-feed section.content > p:first-of-type { display: none; } .db-public-feed section.content > h3 { display: none; } .db-public-feed footer.ft .ftr-info { color: var(--c-overlay0); font-size: .82em; } .db-public-feed header nav p.crumbs a { display: inline; } /* 保留 home 链接 */ /* ---------- 2b. 字排 ---------- */ /* ⚠ 2026-09-18 抓到既存 bug：.db-public-feed 挂在上，旧写法 `.db-public-feed body` 后代选择器永不命中——字号、行高、通栏容器从第一天起就没生效过。修正 = body.db-public-feed 复合选择器。底色/字色那段旧写法恰好带了裸类回退（首行 `.db-public-feed,`）才没穿帮。 */ .db-public-feed, body.db-public-feed { background: var(--c-base); color: var(--c-text); } body.db-public-feed { font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif; font-size: 15px; /* 全页 em 锚点：各层级等比缩放 */ line-height: 1.65; /* 通栏不设上限（2026-09-18 用户定：喜欢宽屏卡片）。不设宽度也天然无「帽子大头小」：header/胶囊条/卡片同在 body 容器里，共享同一内容宽度。 */ margin: 0 auto; padding: var(--pad-body); } /* 段间呼吸（2026-09-18 用户：摘要行距太密）：正文 1.65 → 1.85 */ .db-public-feed .fc-summary { line-height: 1.85; } /* ---------- 2c. 链接 ---------- */ .db-public-feed a { color: var(--c-blue); } .db-public-feed a:hover { color: var(--c-mauve); } .db-public-feed td.col-origin_url a, .db-public-feed .fc-origin a { color: var(--c-green); white-space: nowrap; } .db-public-feed td.col-origin_url a::before, .db-public-feed .fc-origin a::before { content: "↗ "; color: var(--c-overlay0); } /* ---------- 2d. 顶栏导航 ---------- */ body.db-public-feed > header > nav { border-bottom: 1px solid var(--c-surface1); padding-bottom: .6em; margin-bottom: 1.2em; font-size: .92em; } body.db-public-feed > header > nav a { color: var(--c-blue); text-decoration: none; } body.db-public-feed > header > nav a:hover { color: var(--c-mauve); text-decoration: underline; } /* ---------- 2e. 标题层级 ---------- */ .db-public-feed .page-header h1 { color: var(--c-text); font-size: 1.35em; border-left: 4px solid var(--c-mauve); padding-left: .55em; margin-bottom: .3em; } .db-public-feed h3 { color: var(--c-subtext1); font-size: .95em; font-weight: 500; } /* ---------- 2f. 表格视图基座（回退路径，本站在 db-public-feed 下不可达） ---------- */ .db-public-feed .rows-and-columns { border-collapse: collapse; width: 100%; font-size: .93em; } .db-public-feed .rows-and-columns th { text-align: left; color: var(--c-blue); font-weight: 600; border-bottom: 2px solid var(--c-surface1); padding: .5em .7em; white-space: nowrap; } .db-public-feed .rows-and-columns td { border-bottom: 1px solid var(--c-crust); padding: .55em .7em; vertical-align: top; } .db-public-feed .rows-and-columns tbody tr:nth-child(even) { background: var(--c-mantle); } .db-public-feed .rows-and-columns tbody tr:hover { background: var(--c-crust); } .db-public-feed td.col-summary { min-width: 24em; color: var(--c-subtext1); } .db-public-feed td.col-origin_url { width: 9em; overflow-wrap: anywhere; } .db-public-feed td.col-title { font-weight: 600; min-width: 18em; } /* 表格视图翻页按钮化 */ .db-public-feed p > a[href*="_next"], .db-public-feed p > a[href*="_previous"] { display: inline-block; padding: .45em 1.1em; border: 1px solid var(--c-surface1); border-radius: var(--r-box); background: var(--c-mantle); color: var(--c-blue); text-decoration: none; } .db-public-feed p > a[href*="_next"]:hover, .db-public-feed p > a[href*="_previous"]:hover { border-color: var(--c-mauve); color: var(--c-mauve); } /* stock 输入框 light 化（含站内搜索框的圆角基线） */ .db-public-feed input[type="search"], .db-public-feed input[type="text"], .db-public-feed select { background: var(--c-white); color: var(--c-text); border: 1px solid var(--c-surface1); border-radius: var(--r-chip); padding: .35em .6em; } .db-public-feed input[type="search"]:focus { border-color: var(--c-mauve); outline: none; } /* ============================================================ 3. 面板与控件（顶栏胶囊条 / 底栏翻页条 / 站内搜索）两区结构对称：灰底容器 + 白底小控件；控件规格全部来自 §1 令牌。 ============================================================ */ /* ---------- 3a. 面板容器 ---------- */ .db-public-feed .feed-nav, .db-public-feed .facet-pills { background: var(--c-mantle); border: 1px solid var(--c-crust); border-radius: var(--r-panel); font-size: var(--fs-panel); /* 面板内 em 的锚点（15px 桌面 / 13px 手机） */ } .db-public-feed .feed-nav { padding: var(--pad-panel); } /* ---------- 3b. 底栏排布 ---------- */ .db-public-feed .feed-nav { display: flex; align-items: center; gap: .6em; margin: 1.2em 0 .6em; flex-wrap: wrap; } /* ---------- 3c. 白底交互件：胶囊 / 按钮 / 输入框 / 搜索钮 ---------- */ .db-public-feed .fp-pill, .db-public-feed .fn-btn, .db-public-feed .fn-jump-input, .db-public-feed .fs-go { border: 1px solid var(--c-surface1); background: var(--c-white); } .db-public-feed .fn-btn, .db-public-feed .fn-jump-input, .db-public-feed .fs-go { color: var(--c-blue); } .db-public-feed .fn-btn { display: inline-block; padding: var(--pad-btn); /* 独立件：不参与手机压缩 */ border-radius: var(--foot-radius); text-decoration: none; } .db-public-feed .fn-jump-input { color: var(--c-text); } /* 输入的是数字，压蓝不合适 */ .db-public-feed .fn-btn:hover { border-color: var(--c-mauve); color: var(--c-mauve); } .db-public-feed .fn-btn.fn-disabled { pointer-events: none; /* 不可点 */ color: var(--c-overlay0); border-color: var(--c-crust); } /* 信息位：实走定位提示（稀疏流跳页时显示进度与失败原因）。页码没有独立显示元素——唯一显示位是跳转输入框的 placeholder（n/N）。 */ .db-public-feed .fn-jump-msg { color: var(--c-overlay0); font-size: .82em; } /* ---------- 3d. 页码输入框 ---------- */ .db-public-feed .fn-jump-input { width: var(--w-input); padding: var(--pad-in); /* 不吃继承：UA 只让字号继承（我们显式给 font-size），字族仍强制 Arial、字号默认 13.33px —— 两样都必须显式写，否则与相邻件异族异高（2026-09-19 实测：35px vs 翻页件 39px）。 */ font-size: 1em; font-family: inherit; line-height: var(--lh-cmp); border-radius: var(--foot-radius); -moz-appearance: textfield; appearance: textfield; } .db-public-feed .fn-jump-input::-webkit-outer-spin-button, .db-public-feed .fn-jump-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .db-public-feed .fn-jump-input:focus { border-color: var(--c-mauve); outline: none; } /* ---------- 3e. 连体组：五件一行（首页/上一页/下一页/输入框/跳转）---------- 2026-09-19 用户定。几何三条规则搞定，不再按 tag 或角色各写一遍： ① 组内件一律直角、相邻件重叠 1px 共用一条描边（含「上一件是」这种情形——旧写法 `.fn-btn + .fn-btn` 漏掉它，两条描边并排成 2px，在半像素位置渲染成「粗 + 重影」，用户 2026-09-19 报障）； ② 两端口件恢复外侧圆角（--foot-radius：桌面 pill / 手机方角）。同高账见 §1：组内件的字号继承面板锚点，行高与内边距由 --lh-cmp / --pad-cmp 给出，四件按钮与输入框在两端各自齐平。 */ .db-public-feed .fn-group { display: inline-flex; align-items: center; } .db-public-feed .fn-group > * { border-radius: 0; } .db-public-feed .fn-group > * + * { margin-left: var(--seam); } .db-public-feed .fn-group > :first-child { border-radius: var(--foot-radius) 0 0 var(--foot-radius); } .db-public-feed .fn-group > :last-child { border-radius: 0 var(--foot-radius) var(--foot-radius) 0; } .db-public-feed .fn-group > .fn-btn { padding: var(--pad-cmp); line-height: var(--lh-cmp); } .db-public-feed .fn-group > .fn-jump-input { text-align: center; } /* 组内五件即全部：首页/上一页/下一页/输入框/跳转，没有第六件信息位。 2026-09-26 删 .fn-pageinfo：它的兜底文字「第 ? 页」在窄屏给组多加 33px，五件被 flex 压缩后中文按字断行（360px 手机实测整条错乱）；页号改由输入框 placeholder 独占显示。 */ /* 接缝那一个像素归后画的件（同层 DOM 后者在上）→ 聚焦时输入框的紫边右侧会被跳转件描边吃掉，抬到上一层保持整圈可见。 */ .db-public-feed .fn-group .fn-jump-input:focus { position: relative; z-index: 1; } .db-public-feed .fn-jump-go { cursor: pointer; } /* ---------- 3f. 顶栏胶囊条 ---------- */ .db-public-feed .facet-pills { display: flex; flex-direction: column; gap: .55em; padding: var(--pad-facet); margin: var(--margin-facet); } .db-public-feed .fp-group { display: flex; align-items: center; gap: .45em; flex-wrap: wrap; padding: .1em 0; } .db-public-feed .fp-name { flex: none; font-size: .8em; font-weight: 600; color: var(--c-overlay0); min-width: var(--mw-fpname); text-transform: capitalize; } .db-public-feed .fp-pill { display: inline-flex; align-items: center; gap: .45em; font-size: var(--fs-pill); padding: var(--pad-cmp); line-height: var(--lh-cmp); border-radius: var(--r-pill); color: var(--c-blue); text-decoration: none; } .db-public-feed .fp-pill:hover { border-color: var(--c-mauve); color: var(--c-mauve); } .db-public-feed .fp-count { color: var(--c-overlay0); font-size: .85em; } .db-public-feed .fp-pill.fp-selected { background: var(--c-mauve); border-color: var(--c-mauve); color: var(--c-white); } .db-public-feed .fp-pill.fp-selected .fp-count { color: rgba(255,255,255,.75); } .db-public-feed .fp-cross { color: rgba(255,255,255,.9); text-decoration: none; margin-left: .2em; } .db-public-feed .fp-cross:hover { color: var(--c-white); } .db-public-feed .fp-more { color: var(--c-overlay0); } .db-public-feed .fp-hide { color: var(--c-overlay0); font-size: .8em; text-decoration: none; } .db-public-feed .fp-hide:hover { color: var(--c-red); } /* 表格版 facet（回退路径）保持原样的 light 微调 */ .db-public-feed .facet-results, .db-public-feed ul.facet-results { border: 1px solid var(--c-crust); border-radius: var(--r-box); padding: .8em 1em; background: var(--c-mantle); } .db-public-feed .facet-results a, .db-public-feed ul.facet-results a { color: var(--c-teal); text-decoration: none; } .db-public-feed .facet-results a:hover { color: var(--c-mauve); } .db-public-feed .facet-results .facet-count { color: var(--c-overlay0); font-size: .85em; } /* ---------- 3g. 站内搜索（配 _table-public-feed-feed.html 的 .feed-search； stock 搜索框在 form.filters 里，已被 §2a 净化段隐藏） ---------- */ .db-public-feed .feed-search { display: flex; align-items: center; gap: .55em; margin: 0 0 .5em; } .db-public-feed .feed-search input[type="search"] { flex: 1; font-size: var(--fs-search); line-height: var(--lh-search); padding: var(--pad-search); border-radius: var(--r-search); } .db-public-feed .fs-go { cursor: pointer; font-size: var(--fs-go); padding: var(--pad-cmp); border-radius: var(--r-pill); font-family: inherit; /*