/* 全站基础盒模型与页头基线。 各页面保留自己的内容排版，但页头必须共享同一条几何基线： body 顶部 48px + 页头向上抵消 16px = 32px 的首屏留白， 页头本身固定为 62px（30px Logo + 16px 上下内边距）。 */ *, *::before, *::after{box-sizing:border-box} body{margin:0;padding:48px 24px 72px} /* 全站链接基线。 ui.css 只负责页头、页脚和盒模型，内容排版由各页面自己管； 但链接颜色必须在这里兜底——漏写这条规则的页面会回落到浏览器默认蓝 （probe.html / probe-list.html / check.html 都踩过这个坑）。 各页面更具体的规则（.site-menu a、.crumb a 等）优先级更高，不受影响。 */ a{color:var(--link,#0645ad);text-decoration:none} /* 节点可达性标记：三个视角各一枚圆点，颜色即状态（绿 = 通畅，黄 = 被拒/部分， 红 = 不通/异常，灰 = 未检），图例由各页自带。悬停/聚焦弹出的小面板是全站唯一 允许的悬浮面：白底、1px 规则线、一层软阴影，方角。 数据超过 24 小时未更新时圆点降为半透明，"数据可能过期"写在面板里。 注意：这三色就写死在本文件里，后台状态点是另一套色值（admin.css 的 --green/--red）。 原来那句"与后台状态点同源"并不成立——改这里不会改到后台，反之亦然。 */ .views{display:inline-flex;gap:14px;align-items:center;vertical-align:middle;flex-wrap:wrap} /* 点前节点名标注：名字跟随后台节点，点=节点。 */ .view-unit{display:inline-flex;align-items:center;gap:5px} .view-label{font-size:13px;color:#666;line-height:1;white-space:nowrap} /* 名字下面的圆点行必须独占一行：.views 的 inline-flex 会覆盖 .subline 的 block。 */ .subline.views{display:flex;margin-top:4px} /* 可达性标记：9px 方块、2px 圆角（用户 2026-09-18 选的款式 8）。 站内其它元素都是方角，圆角 2px 让它比纯方块柔和一点，又不至于像圆点那样跟方角语言冲突。 **未检 = 空心框**而不是浅灰实心：空心读作"这里还没有数据"， 浅灰实心读作"有数据但很淡"；而且 #d4d4d8 在灰底上只有 1.34:1，等于看不见。 */ .view{position:relative;width:9px;height:9px;border-radius:2px;background:transparent;border:1px solid #8b8b8f;cursor:default;flex:none} .view.ok{background:#16a34a;border-color:transparent} .view.warn{background:#f59e0b;border-color:transparent} .view.bad{background:#dc2626;border-color:transparent} /* 排队中：这一轮没测成是我们自己的名额满了，不是站点的问题，所以既不能是绿 （站点没被证明是好的）也不能是红（站点没坏）。空心（形状与「未检」一致 = "没有结论"） + 琥珀描边（与「被拦截」同一个色，但那是实心，两者形状不同）， 再配合文字「排队中」——状态不靠颜色单独表意。 */ .view.queued{background:transparent;border-color:#f59e0b} .view.stale{opacity:.4} .view:focus-visible{outline:2px solid #06c;outline-offset:3px} /* 触屏热区：9px 的标记本身点不中，向外扩一圈隐形热区。 */ .view::after{content:"";position:absolute;inset:-6px} .view .panel{position:absolute;top:calc(100% + 9px);left:0;z-index:40;min-width:236px;padding:10px 12px;border:1px solid #6d6d6d;background:#fff;box-shadow:0 8px 20px rgba(0,0,0,.12);font-size:13px;line-height:1.55;color:#000;white-space:nowrap;display:none;text-align:left} /* :focus 而不是 :focus-visible：触屏轻触一个非文本元素不会命中 :focus-visible， 手机上点圆点什么都不会出现（Chrome/Safari 都不给这类元素 focus-visible）。 */ .view:hover .panel,.view:focus .panel{display:block} /* 图例：两行、各带标题（节点可达性 / 可用性检测）。标题固定宽度让两行色块对齐。 2026-09-18 简化：原来是一行 8 个色块 + 一句 30 字说明，信息重复、密度太高。 现在 7 项、两行标题、没有长句——「Key 失效」交给条带下方那行文字讲。 */ .views-legend{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;margin:0 0 12px;color:#555;font-size:13px;line-height:20px} .views-legend .legend-item{display:inline-flex;align-items:center;gap:7px} .views-legend .legend-title{color:#8a8a8a} .views-legend .views{gap:12px} .views-legend .views .view{width:9px;height:9px} /* 色块记号：图例与问号面板共用（问号面板里的色块由 colHelp.rich() 生成）。 */ .swatch{display:inline-block;width:9px;height:9px;border-radius:2px;flex:none;vertical-align:-1px} .panel .swatch{margin-right:6px} .swatch.g{background:#16a34a} .swatch.r{background:#dc2626} .swatch.nd{background:rgba(0,0,0,.22)} /* 节点四态：与圆点同色；「未检」是空心框，跟圆点一致（少了这四条，面板里的节点色块是隐形的）。 */ .swatch.ok{background:#16a34a} .swatch.warn{background:#f59e0b} .swatch.bad{background:#dc2626} .swatch.off{background:transparent;border:1px solid #8b8b8f} .swatch.queued{background:transparent;border:1px solid #f59e0b} .swatch.a{background:#97979d} /* 站点卡片里的问号：`.site-fact span{display:block}` 会把它顶到下一行，这里压回来。 */ .site-fact .th-help{display:inline-block} /* 最右列那个问号（节点访问）的面板要往**左**展开：默认 left:-8px 会在 1280/1024 下探出视口。 */ /* 只在宽屏：窄屏下 `.site-facts` 变成单列，第三个不再是右列，硬往左展开会跑到屏幕外。 */ @media(min-width:901px){.site-facts>.site-fact:nth-child(3) .th-help .panel{left:auto;right:-8px}} /* 模型品牌图标：尺寸由调用方传的 width/height 属性决定（15/17/19/21 各处不同）， 这里不写死——写死会让调用方精心选的尺寸全部失效，小尺寸场景里行高被撑开。 不换行、超出计 +N，保证表格行永不错位。 */ /* 厂商图标：白底 PNG 用 multiply 融合进当前底色，悬停紫底不再出现白方块。 */ /* vertical-align 用 middle：图标在 .brand-inline（inline-flex + align-items:center）里 是 flex 子项，vertical-align 本来就不生效——原来写的 -4px 是死代码，还容易误导。 写成 middle 是为了万一以后有页面把 .brand-ico 放在普通行内流里，对齐也是对的。 */ .brand-ico{flex:none;vertical-align:middle;object-fit:contain;mix-blend-mode:multiply} .brand-strip{display:inline-flex;align-items:center;gap:7px;flex-wrap:nowrap;max-width:100%;overflow:hidden;vertical-align:middle} .brand-chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#555;white-space:nowrap} .brand-more{color:#6b6b6b;font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap} /* #6b6b6b 而不是 #888（3.54:1）："未公开"是防止读者把"站方没公开"误读成"不支持"的 限定语，低视力用户看不到就等于没写。13px 正文要求 4.5:1。 */ .brand-none{color:#6b6b6b;font-size:13px} /* 没有图标的品牌（brand-icons.js 认不出的拼法）：只出名字，不出图，也不丢条。 */ .brand-text{color:#555;font-size:13px;white-space:nowrap} .brand-inline{display:inline-flex;align-items:center;gap:6px;white-space:nowrap} /* 编辑档位徽标（收录 / 推荐）：编辑选择，非评分。 */ /* 编辑挑选的档位标记（收录 / 推荐）：1px 灰框的角标，抬在站点名右上角。 不用紫底——紫色在本站是悬停/选中色，铺底会在悬停时整个融进行背景里（旧版就是这样消失的）。 */ .tier-badge{display:inline-block;margin-left:6px;padding:0 5px;border:1px solid #c9c9c9;color:#555;font-size:13px;line-height:16px;font-weight:400;vertical-align:4px;white-space:nowrap} /* KEY 实测：84 格两小时热力条，3 排 × 28 列。 **几何：每格 6×6 正方形、间隙 2px → 总宽 222px、总高 22px**（2026-09-18 定）。 原来写的是 `grid-template-columns:repeat(28,1fr)` + `grid-auto-rows:5px`： 列在 224px 里自动分配成 6.07px，行高写死 5px，格子宽高比 1.21 —— **横向拉长**， 84 个拉长的格子排起来怎么填色都别扭（用户："为什么都看起来好像不是正方形"）。 列宽和行高必须给同一个 px 值。 每格 = 2 小时。**墨水量模型**：有数据才上色—— 全部成功 = 实心绿，出现过失败 = 实心红，监测 Key 失效 = 实心灰， **无样本 = 半透明中性填充 `rgba(0,0,0,.22)`**。 半透明黑在**任何底色上都成立**（它压暗身后的颜色），所以白底、灰面板、 悬停紫三种底不用分别调色；这也修掉了"浅灰填充在悬停紫底上 1.02:1 看不见"的坑。 为什么不用"淡绿"表示无样本：原来 .nd 只是把"通畅"的同一个绿调淡到 38%， 于是「我们什么都没测到」和「一切正常」穿同一件制服——图形比文字更响， 新站默认满绿等于给它一个虚假的健康背书。 */ .meter{display:grid;grid-template-columns:repeat(28,6px);grid-auto-rows:6px;gap:2px;width:222px;margin-bottom:4px;cursor:default} .meter .c{background:#16a34a} .meter .c.r{background:#dc2626} .meter .c.a{background:#97979d} .meter .c.nd{background:rgba(0,0,0,.22)} .meter:focus-visible{outline:2px solid #06c;outline-offset:3px} .checkbar-note{display:block;font-size:13px;color:#666;line-height:19px} .checkbar-note b{color:#050505} /* 触屏点热力条弹出来的说明（views.js 写入）：逐格的时间与原因原来只在 title 里， 只有鼠标够得着。平时隐藏，点条带才出现。 */ .meter-tap{display:block;margin-top:2px;font-size:13px;line-height:19px;color:#555} .meter-tap[hidden]{display:none} /* 表头里的列级时间戳：跟「可用性检测 ?」同一排，字号小一号、颜色更淡， 免得跟列名抢注意力。整列共用一个值（表头放不下每个站点各自的时间）。 */ .col-stamp{margin-left:6px;font-size:12px;font-weight:400;color:#6b6b6b;white-space:nowrap} /* 表头问号：一枚 14px 的方框问号，悬停/聚焦弹出这一列的说明。 与可达性圆点的浮层同一套语言（白底、1px 规则线、软阴影、方角）。 */ .th-help{position:relative;display:inline-block;margin-left:5px;width:14px;height:14px;border:1px solid #c9c9c9;color:#777;font-size:11px;line-height:12px;font-weight:400;text-align:center;vertical-align:1px;cursor:default;white-space:normal} .th-help:hover{border-color:#6d6d6d;color:#050505} /* 键盘聚焦要有可见焦点环：原来这里写 outline:0，Tab 到问号时只剩边框颜色 从 #c9c9c9 变 #6d6d6d 的细微差别，几乎看不出焦点在哪。 */ .th-help:focus-visible{outline:2px solid var(--link,#0645ad);outline-offset:2px;border-color:#6d6d6d;color:#050505} /* 触屏热区：14px 的方框本身点不中，向外扩一圈隐形热区（与 .view 同一做法）。 */ .th-help::after{content:"";position:absolute;top:-5px;left:-5px;right:-5px;bottom:-5px} .th-help .panel{position:absolute;top:calc(100% + 8px);left:-8px;z-index:40;width:284px;padding:10px 12px;border:1px solid #6d6d6d;background:#fff;box-shadow:0 8px 20px rgba(0,0,0,.12);font-size:13px;font-weight:400;line-height:20px;color:#000;text-align:left;display:none} /* 浮层内容分两层：一句"这是什么"（墨色）+ 若干条"怎么读"（灰、带点）。 一坨话没人看，分行带点才扫得动。可达性标记与表头问号共用同一套排版。 */ .panel .lead{display:block;color:#050505;margin-bottom:4px} .panel .li{display:block;position:relative;padding-left:11px;color:#555} /* 浮层不继承表头的 text-transform:uppercase —— 否则面板里的「Key」会显示成「KEY」。 */ .panel{text-transform:none} .panel .li::before{content:"·";position:absolute;left:1px;color:#aaa} .th-help:hover .panel,.th-help:focus .panel{display:block} /* 窄屏「浮层逃逸」：祖先容器一旦变成横向滚动容器（overflow-x:auto 会把 overflow-y 的计算值也一起变成 auto），向下展开的浮层就被**纵向**裁掉——只剩一条要上下拖动 才看得见的缝。views.js 的 colHelp 检测到裁剪祖先就给浮层加 .floating 并写视口坐标： 固定定位的包含块是视口，不受那个滚动容器的 overflow 裁剪；浮层也不占容器的空间， 横向滚动一点没变。宽屏没有裁剪祖先 → 不加这个 class，行为与原来完全相同。 */ .th-help .panel.floating, .view .panel.floating{position:fixed;top:0;left:0;right:auto;z-index:60} /* 右侧几列的问号靠右展开，避免浮层伸出表格右边缘。 首页站点表按列数取尾部两列；模型详情的站点表另算。 （首页模型表不加问号——列名一目了然，用户明确说不用。） */ #sites .index-table th:nth-last-child(-n+2) .th-help .panel, .site-table th:nth-last-child(-n+2) .th-help .panel{left:auto;right:-8px} /* 模型详情那张表是自动布局、列窄，不加这条「充值比例」会把问号挤到第二行。 表格会自动把列宽让出来，实测不产生横向滚动。 */ .site-table th{white-space:nowrap} /* 支付与售后（首页 / 站点目录的紧凑列）：只有两种状态。 支持 = 实底标记（品牌色淡底 + 同色字；退款 / 发票不是品牌，用中性淡灰）； 没核实过的项不逐项出框，末尾用一句「未公开」兜底。 */ .fact-row{display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap} .fact-token{font-size:13px;line-height:19px;white-space:nowrap;padding:0 5px} .fact-token[data-key="alipay"]{background:#e8f1ff;color:#1677ff} .fact-token[data-key="wechat_pay"]{background:#e6f8ef;color:#07c160} .fact-token[data-key="usdt"]{background:#e7f5f1;color:#26a17b} .fact-token[data-key="refundable"], .fact-token[data-key="invoice_available"]{background:#f0efed;color:#5c5c5c} /* 「未公开」兜底：也给个框，不然跟前面几个实底标记并排时看着缺一块。 用**空心框**——实底 = 核实过，空心 = 没核实，一眼分得开。 字色 #767676 而不是 #9c9c9c：后者在白底上只有 2.75:1，13px 正文要求 4.5:1。 */ .fact-unknown{font-size:13px;line-height:19px;white-space:nowrap;padding:0 5px;border:1px solid #dcdcdc;color:#767676;cursor:default} .fact-ico{display:block;flex:none;object-fit:contain} .fact-empty{color:#6b6b6b;font-size:13px} /* 站点详情的事实岛是两列网格，这一块独占一行；类名不叫 .fact，避免被页面里 的 `.fact span{display:block}` 命中（那会把图标逐个撑成竖排）。 */ .fact-block{grid-column:1/-1} .fact-block-label{display:block;margin-bottom:6px;color:#555;font-size:14px;line-height:21px} .fact-list{list-style:none;margin:0;padding:0;border-top:1px solid #e2e0dc} .fact-list li{display:flex;align-items:center;gap:9px;padding:6px 0;border-bottom:1px solid #e2e0dc;font-size:13px;line-height:19px} .fact-list-name{min-width:80px} .fact-list-state{margin-left:auto;color:#050505} .fact-list li[data-state="no"] .fact-list-state{color:#9c9c9c} .fact-list li[data-state="unknown"] .fact-list-state{color:#8a8a8a} .fact-list li[data-state="no"] .fact-ico, .fact-list li[data-state="unknown"] .fact-ico{filter:grayscale(1);opacity:.38} /* ── 全站页头 ─────────────────────────────────────────────── 页面曾各自保留 header 的内联规则，哪怕导航 class 相同，容器也会 产生不同位置。以 .site-header 的更高选择器统一覆盖它们。 */ .site-header{position:sticky;top:0;z-index:10;display:block;box-sizing:border-box;height:62px;min-height:62px;margin:-16px -24px 0;margin-bottom:0;padding:16px 24px;background:rgba(255,255,255,.78);backdrop-filter:blur(12px)} .header-inner{display:flex;align-items:center;gap:24px;justify-content:flex-start;height:30px} .brand,.brand-mark{display:block;width:145px;height:30px} .site-menu{display:flex;align-items:center;gap:24px} .site-menu a{color:var(--link,#0645ad);font-size:15px;font-weight:700;line-height:24px;text-decoration:none;text-decoration-thickness:1px;text-underline-offset:5px} .site-menu a:hover,.site-menu a[aria-current="page"]{text-decoration:underline} /* 窄屏：三枚导航链接照常显示——跟站点目录、模型目录、两个详情页一致（那几页的