/* Pad detail (/pads/{id}) · 2026-09-08 新增。主体主题感知,不写死明暗 —— 全部走 globals.css 的 token。 ⚠️ .pad-root 挂在上（不是某个 div）,所以这里不许出现 overflow:hidden —— 那是模态框锁滚动的写法,整页会划不动。这条规矩由 assets.rs 的 no_body_root_class_locks_page_scroll 钉住（pad.css 已经在那张 PAGE_CSS 表里）。发射状态 pill 用的是 globals.css 的 .launch-result / .lr-*,分页条用的是 globals.css 的 .pager —— 两者都不在这个文件里重写一遍。 */ .pad-root { background:var(--bg);color:var(--fg);min-height:100vh;font-family:var(--font-sans);padding-bottom:80px; } .pad-crumb { width:calc(100% - 64px);max-width:1320px;margin:20px auto 0;font-family:var(--font-mono);font-size:12px;color:var(--fg-faint);display:flex;gap:8px;align-items:center;flex-wrap:wrap; } .pad-crumb a { color:var(--fg-faint);text-decoration:none; } .pad-crumb a:hover { color:var(--accent); } .pad-crumb .sep { color:var(--fg-dim); } .pad-crumb b { color:var(--fg);font-weight:600; } /* --- hero ---------------------------------------------------------------- */ .pad-hero { width:calc(100% - 64px);max-width:1320px;margin:18px auto 0;display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:28px;align-items:start; } .pad-hero-main { min-width:0; } .pad-eyebrow { font-family:var(--font-mono);font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--fg-faint);margin-bottom:10px;display:flex;gap:10px;align-items:center;flex-wrap:wrap; } .pad-pill { font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:0.06em;padding:3px 9px;border-radius:999px;border:1px solid currentColor;text-transform:none; } /* 在役 / 已停用的两档色与专题页工位卡同一个分桶（go / sched）—— 那边给的是 pill 类名,这里给色值。绿=在役,灰=停用或未知。 */ .pad-pill.go { color:var(--success); } .pad-pill.sched { color:var(--fg-faint); } .pad-hero h1 { font-family:var(--font-display);font-size:48px;font-weight:700;margin:0 0 6px;letter-spacing:-0.02em;line-height:1.05;color:var(--fg);text-wrap:balance; } .pad-orig { font-family:var(--font-mono);font-size:13px;color:var(--fg-faint);margin-bottom:10px;overflow-wrap:anywhere; } .pad-where { display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:14px;color:var(--fg-muted);margin-bottom:14px; } .pad-where .sep { color:var(--fg-dim); } .pad-where .coord { font-family:var(--font-mono);font-size:12.5px;letter-spacing:0.02em; } .pad-tags { display:flex;flex-wrap:wrap;gap:8px; } .pad-htag { font-family:var(--font-mono);font-size:12px;padding:5px 10px;border-radius:4px;border:1px solid var(--line-strong);color:var(--fg-muted);letter-spacing:0.04em; } /* 战绩。列数交给 auto-fit,而不是写死 4 列 —— 一发未打的工位只有两格, 写死列数会留两个空洞。 */ .pad-scoreboard { background:var(--bg-elev);border:1px solid var(--line-strong);border-radius:14px;padding:18px 20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:16px 18px; } .pad-stat .lb { font-family:var(--font-mono);font-size:11px;color:var(--fg-faint);letter-spacing:0.06em;text-transform:uppercase;margin-bottom:4px; } .pad-stat .v { font-family:var(--font-mono);font-size:21px;font-weight:700;color:var(--fg);font-variant-numeric:tabular-nums;line-height:1.15;overflow-wrap:anywhere; } .pad-stat .v .u { font-size:11px;color:var(--fg-faint);font-weight:400;margin-left:3px;letter-spacing:0.04em; } .pad-stat .v.ok { color:var(--success); } .pad-stat .v.fail { color:var(--danger); } /* --- 主体 ---------------------------------------------------------------- */ .pad-main { width:calc(100% - 64px);max-width:1320px;margin:24px auto 0;display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:28px;align-items:start; } .pad-left { min-width:0; } .pad-card, .pad-side-card { background:var(--bg-elev);border:1px solid var(--line-strong);border-radius:14px;padding:22px 26px;margin-bottom:20px; } .pad-side-card { padding:18px 20px;margin-bottom:16px; } .pad-sec-h { display:flex;align-items:baseline;gap:12px;margin:0 0 16px; } .pad-sec-h h2 { font-family:var(--font-display);font-size:21px;font-weight:600;margin:0;letter-spacing:-0.01em;color:var(--fg); } .pad-sec-h .meta { margin-left:auto;font-family:var(--font-mono);font-size:12px;color:var(--fg-faint);letter-spacing:0.04em;text-align:right; } .pad-side-card h2 { font-family:var(--font-display);font-size:15px;font-weight:600;margin:0 0 12px;color:var(--fg);display:flex;align-items:baseline;gap:8px; } .pad-side-card h2 .c { margin-left:auto;font-family:var(--font-mono);font-size:11px;font-weight:400;color:var(--fg-faint); } .pad-overview p { font-size:15px;line-height:1.78;color:var(--fg);margin:0;text-wrap:pretty; } /* .ov-links 的基础样式在 globals.css;这里只加本页的分隔线。 */ .pad-overview .ov-links { padding-top:14px;margin-top:14px;border-top:1px dashed var(--line-strong); } .pad-empty { font-size:14px;color:var(--fg-faint);margin:0; } /* --- 年度 ---------------------------------------------------------------- */ /* 横条而不是柱状图:工位可以横跨六十年（1/5 从 1957 年起）,几十根竖柱在窄屏上必然挤成一片,而横条一行一年,想加多少年都还读得动。 */ .pad-years { display:flex;flex-direction:column;gap:5px; } .pad-yr-row { display:grid;grid-template-columns:52px minmax(0,1fr) 92px;gap:12px;align-items:center;padding:3px 0; } .pad-yr-row .yr { font-family:var(--font-mono);font-size:12px;color:var(--fg-faint);font-variant-numeric:tabular-nums; } .pad-yr-row.this .yr { color:var(--accent);font-weight:700; } .pad-yr-row .bars { display:flex;height:10px;border-radius:3px;overflow:hidden;background:var(--bg-inset); } .pad-yr-row .bars i { display:block;height:100%;min-width:0; } .pad-yr-row .bars i.ok { background:var(--success); } .pad-yr-row .bars i.fail { background:var(--danger); } .pad-yr-row .n { font-family:var(--font-mono);font-size:12px;display:flex;gap:8px;justify-content:flex-end;font-variant-numeric:tabular-nums; } .pad-yr-row .n b { color:var(--fg);font-weight:700; } .pad-yr-row .n .ok { color:var(--success); } .pad-yr-row .n .fail { color:var(--danger); } .pad-yr-legend { display:flex;gap:14px;margin-top:14px;font-family:var(--font-mono);font-size:11.5px;color:var(--fg-faint); } .pad-yr-legend span { display:flex;align-items:center;gap:5px; } .pad-yr-legend .sw { width:9px;height:9px;border-radius:2px;display:inline-block; } .pad-yr-legend .sw.ok { background:var(--success); } .pad-yr-legend .sw.fail { background:var(--danger); } /* --- 发射列表 ------------------------------------------------------------ */ .pad-list { display:flex;flex-direction:column; } .pad-row { display:grid;grid-template-columns:118px minmax(0,1fr) auto;gap:14px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit; } .pad-row:last-child { border-bottom:none; } .pad-row:hover { background:var(--bg-inset); } .pad-row .d { font-family:var(--font-mono);font-size:12.5px;color:var(--fg-muted);font-variant-numeric:tabular-nums;display:flex;flex-direction:column;gap:2px; } .pad-row .d .t { font-size:11px;color:var(--fg-faint); } .pad-row .m { min-width:0;display:flex;flex-direction:column;gap:2px; } .pad-row .m b { font-size:14.5px;font-weight:600;color:var(--fg);overflow-wrap:anywhere; } .pad-row .m .sub { font-family:var(--font-mono);font-size:11.5px;color:var(--fg-faint);overflow-wrap:anywhere; } /* --- 侧栏清单 ------------------------------------------------------------ */ .pad-kv { display:flex;align-items:baseline;gap:10px;padding:7px 0;border-bottom:1px dashed var(--line);text-decoration:none;color:inherit; } .pad-kv:last-child { border-bottom:none; } .pad-kv .k { font-size:13.5px;color:var(--fg);min-width:0;overflow-wrap:anywhere; } .pad-kv:hover .k { color:var(--accent); } .pad-kv .v { margin-left:auto;font-family:var(--font-mono);font-size:12px;color:var(--fg-faint);white-space:nowrap; } /* 截断提示。抬头写全部款数、卡里只列前 CHIP_LIMIT 行,差额在这里说出来 —— 见 render::pad_detail::PadDetailPage 的 rockets_more。 */ .pad-kv-more { padding:8px 0 0;font-family:var(--font-mono);font-size:11.5px;color:var(--fg-dim); } /* --- 地图 ---------------------------------------------------------------- */ /* 🔴 **launch.css 里有一份逐条同值的副本,改一边就要改两边。** 为什么不共用一张:那边的外框选择器锚在 `.launch-map-card .launch-map` 上, 够不到这一页;而 `.pad-map-ph` / `.pad-map-go` / `.pad-pop` / `.pad-layer-toggle` 这四个类名**必须**跟那边一模一样 —— 两页的内联脚本按同样的类名找元素(占位块、启动按钮、气泡、底图切换)。两页各链自己那一张 CSS,所以运行时不会互相覆盖。 */ .pad-map-card .pad-map { position:relative;height:260px;border-radius:8px;overflow:hidden;border:1px solid var(--line-strong);background:var(--bg-inset); } .pad-map-card .pad-map .maplibregl-map { height:100%;width:100%;font:inherit; } .pad-map-meta { display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px;font-size:12px;color:var(--fg-muted); } .pad-map-meta .coord { font-family:var(--font-mono);letter-spacing:0.02em; } .pad-map-meta a { color:var(--fg-muted);text-decoration:none;border-bottom:1px dashed var(--line);white-space:nowrap; } .pad-map-meta a:hover { color:var(--fg); } /* 「交互地图」启动按钮。占位块是海报,按下才加载 maplibre。 */ .pad-map-go { position:absolute;right:8px;bottom:8px;z-index:2; padding:5px 10px;font-size:12px;font-family:var(--font-mono); color:var(--fg);background:var(--bg);border:1px solid var(--line-strong); border-radius:6px;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,0.18); } .pad-map-go:hover { border-color:var(--accent);color:var(--accent); } /* 地图占位块。无脚本时这就是终态:工位名在这里,坐标与 OSM 链接在下面那行 .pad-map-meta 里,信息一条不少。 */ .pad-map-ph { height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--fg-faint);background:repeating-linear-gradient(45deg,transparent,transparent 9px,var(--line) 9px,var(--line) 10px); } .pad-map-ph svg { width:26px;height:26px;color:var(--accent);opacity:0.75; } .pad-map-ph span { font-size:12px;color:var(--fg-muted);text-align:center;padding:0 14px;line-height:1.4;background:var(--bg-inset);border-radius:4px; } /* 气泡与底图切换按钮在 maplibre 自己的浅色控件皮肤里,所以这几个色值是写死的 —— 与 launch.css 逐字相同,别改成 token(控件底是白的,深色 token 会看不见)。 */ .pad-pop { font-size:12px;line-height:1.45;padding:1px 2px; } .pad-pop strong { display:block;color:#15151a;font-weight:600; } .pad-pop span { color:#5a5853; } .pad-layer-toggle { display:flex;overflow:hidden; } .pad-layer-toggle button { width:auto;height:28px;padding:0 9px;font-size:12px;font-family:var(--font-mono);color:#333;background:#fff;border:none;cursor:pointer; } .pad-layer-toggle button + button { border-left:1px solid rgba(0,0,0,0.12); } .pad-layer-toggle button.active { background:#e11d48;color:#fff; } /* --- 窄屏 ---------------------------------------------------------------- */ @media (max-width:1080px) { .pad-hero, .pad-main { grid-template-columns:minmax(0,1fr); } /* 地图与两张清单跟在正文后面,不再是侧栏。 */ .pad-side { display:contents; } } @media (max-width:720px) { .pad-crumb, .pad-hero, .pad-main { width:calc(100% - 32px); } .pad-hero h1 { font-size:34px; } .pad-card, .pad-side-card { padding:18px 16px; } .pad-yr-row { grid-template-columns:44px minmax(0,1fr) 80px;gap:8px; } /* 三列压成两行:日期与状态同一行,任务另起一行占满。 */ .pad-row { grid-template-columns:minmax(0,1fr) auto;gap:6px 10px; } .pad-row .m { grid-column:1 / -1;order:2; } .pad-row .d { order:0; } .pad-row .launch-result { order:1;justify-self:end; } }