/* 主题：默认深色（WWW-87 Stage 1.1：默认跟随系统 + 手动切换 + localStorage）。 浅色主题由 [data-theme="light"] 覆盖；初始主题在 内联脚本设置，防 FOUC。 颜色：均满足 WCAG AA 文本对比度（≥4.5:1）。 */ :root, :root[data-theme="dark"] { --bg: #0b0e14; --panel: #141a24; --text: #e6e9ef; --muted: #9aa4b2; --accent: #4f9cf9; --border: #232c3a; --header-bg: rgba(11, 14, 20, 0.9); --code-bg: #141a24; --bar-track-bg: #141a24; --scatter-bg: #141a24; --scatter-stroke: #0b0e14; /* 对比图 4 色（深色底，非文本图形对比 ≥3:1） */ --cmp-c1: #4f9cf9; --cmp-c2: #43d1a2; --cmp-c3: #f5a83c; --cmp-c4: #c774e8; } :root[data-theme="light"] { --bg: #f6f7f9; --panel: #ffffff; --text: #1a2233; --muted: #5b6478; --accent: #1565d8; --border: #d9dee6; --header-bg: rgba(246, 247, 249, 0.92); --code-bg: #eef1f5; --bar-track-bg: #eef1f5; --scatter-bg: #ffffff; --scatter-stroke: #ffffff; /* 对比图 4 色（浅色底，非文本图形对比 ≥3:1） */ --cmp-c1: #1565d8; --cmp-c2: #0f8f6d; --cmp-c3: #b45309; --cmp-c4: #8a3fbc; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 system-ui, -apple-system, "Segoe UI", "Noto Sans SC", sans-serif; } .wrap { width: min(1080px, calc(100% - 2rem)); margin-inline: auto; } /* 统一链接色（深色底对比度 ≥ 4.5:1，避免浏览器默认 #0000ee 不达标） */ a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* 正文段落内的链接用下划线区分（a11y link-in-text-block：不依赖颜色） */ p a { text-decoration: underline; } .site-header { border-bottom: 1px solid var(--border); background: var(--header-bg); position: sticky; top: 0; backdrop-filter: blur(8px); } .site-header .wrap { display: flex; align-items: center; gap: 0.75rem; height: 3.5rem; } .brand { color: var(--text); font-weight: 700; text-decoration: none; } .crumb { color: var(--muted); } .nav { margin-left: auto; display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; } .nav a { color: var(--accent); text-decoration: none; display: inline-block; padding: 0.4rem 0.3rem; } /* 触控目标 ≥24px（移动端 a11y target-size） */ .nav a[aria-current="page"] { font-weight: 700; } /* ---- 主题切换按钮（暗 / 亮 / 系统）---- */ .theme-toggle { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.35rem 0.6rem; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 0.85rem; cursor: pointer; min-height: 2rem; min-width: 2rem; } .theme-toggle:hover { border-color: var(--accent); } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .theme-toggle .icon { font-size: 1rem; line-height: 1; } .theme-toggle .icon-sun, .theme-toggle .icon-moon, .theme-toggle .icon-system { display: none; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: inline; } :root[data-theme="light"] .theme-toggle .icon-sun { display: inline; } :root:not([data-theme]) .theme-toggle .icon-system, :root[data-theme="system"] .theme-toggle .icon-system { display: inline; } /* 系统模式下，按 prefers-color-scheme 切换图标 */ @media (prefers-color-scheme: light) { :root[data-theme="system"] .theme-toggle .icon-system { display: none; } :root[data-theme="system"] .theme-toggle .icon-sun { display: inline; } } @media (prefers-color-scheme: dark) { :root[data-theme="system"] .theme-toggle .icon-system { display: none; } :root[data-theme="system"] .theme-toggle .icon-moon { display: inline; } } .hero { padding: 2.5rem 0 1.5rem; } h1 { margin: 0 0 0.5rem; font-size: clamp(1.6rem, 3vw, 2.4rem); } h3 { margin: 1rem 0 0.5rem; } .lede { color: var(--muted); max-width: 70ch; } .badge { display: inline-block; padding: 0.2rem 0.6rem; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: 0.85rem; margin-right: 0.4rem; } .badge-cited { border-color: var(--accent); color: var(--accent); } .badge-pending { border-style: dashed; } .badges { margin: 0.5rem 0; } .disclaimer { color: var(--muted); font-size: 0.85rem; max-width: 70ch; border-left: 3px solid var(--border); padding-left: 0.75rem; } section { margin: 2rem 0; } h2 { font-size: 1.2rem; border-left: 3px solid var(--accent); padding-left: 0.6rem; } .hint { color: var(--muted); font-size: 0.85rem; margin-top: -0.4rem; } .muted { color: var(--muted); font-size: 0.85rem; } code { background: var(--panel); border: 1px solid var(--border); border-radius: 4px; padding: 0.05em 0.35em; font-size: 0.85em; } /* ---- 键盘焦点可见（M4 a11y：筛选器 / 对比勾选 / 分页 / 链接键盘可达且焦点可见）---- */ a:focus-visible, button:focus-visible, select:focus-visible, input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } .compare-opt input[type="checkbox"] { accent-color: var(--accent); width: 1.05rem; height: 1.05rem; } /* ---- 筛选 / 排序 ---- */ .filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.75rem; margin-top: 0.75rem; } .filter { display: grid; gap: 0.25rem; font-size: 0.85rem; color: var(--muted); } .filter select { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 0.45rem 0.6rem; font: inherit; } /* ---- 表格 ---- */ .table-scroll { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 0.92rem; } th, td { text-align: left; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--border); vertical-align: top; } th { color: var(--muted); font-weight: 600; } tbody tr:hover { background: var(--panel); } td.params { white-space: normal; min-width: 12rem; } .rowhead a { color: var(--text); text-decoration: none; font-weight: 600; } .rowhead a:hover { color: var(--accent); } .pending { color: var(--muted); } .unit { color: var(--muted); font-size: 0.8rem; } .status-cell .badge { margin-right: 0; } /* ---- 分页（?page=N + rel=prev/next）---- */ .pager { margin-top: 1rem; } .pager-list { list-style: none; display: flex; gap: 0.4rem; padding: 0; margin: 0; } .pager-list li { border: 1px solid var(--border); border-radius: 6px; padding: 0.25rem 0.7rem; font-size: 0.9rem; } .pager-list a { color: var(--accent); text-decoration: none; } .pager-list .current { color: var(--text); font-weight: 700; border-color: var(--accent); } /* ---- 图表 ---- */ .figure { margin: 1.5rem 0; } .chart { display: grid; gap: 0.6rem; } .chart-visual { display: grid; gap: 0.6rem; } .bar-row { display: grid; grid-template-columns: minmax(9rem, 16rem) 1fr auto; gap: 0.75rem; align-items: center; } .bar-row-self { background: rgba(79, 156, 249, 0.08); border-radius: 6px; } .bar-row-self .bar-fill { background: linear-gradient(90deg, #8cc0ff, var(--accent)); } .bar-label { font-size: 0.9rem; color: var(--muted); } .bar-track { background: var(--bar-track-bg); border: 1px solid var(--border); border-radius: 6px; height: 0.9rem; overflow: hidden; } .bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), #7cc4ff); } .bar-value { font-variant-numeric: tabular-nums; font-size: 0.85rem; } .chart-caption { color: var(--muted); font-size: 0.85rem; } .chart-fallback { margin-top: 0.5rem; } .chart-fallback caption { text-align: left; } .chart-fallback .row-self th { color: var(--accent); } .scatter { width: 100%; height: auto; max-width: 720px; background: var(--scatter-bg); border: 1px solid var(--border); border-radius: 8px; } .scatter .grid { stroke: var(--border); stroke-width: 1; } .scatter .axis { stroke: var(--muted); stroke-width: 1.5; } .scatter .tick { fill: var(--muted); font-size: 11px; } .scatter .axis-label { fill: var(--muted); font-size: 12px; } .scatter .dot circle { fill: var(--accent); stroke: var(--scatter-stroke); stroke-width: 1.5; } .scatter .dot-label { fill: var(--text); font-size: 11px; } /* ---- 并排对比图（M4：零依赖 SVG 分组柱状，主题自适应）---- */ .cmp-svg { width: 100%; height: auto; max-width: 720px; background: var(--scatter-bg); border: 1px solid var(--border); border-radius: 8px; display: block; } .cmp-svg .cmp-grid { stroke: var(--border); stroke-width: 1; } .cmp-svg .cmp-axis { stroke: var(--muted); stroke-width: 1.5; } .cmp-svg .cmp-tick { fill: var(--muted); font-size: 11px; } .cmp-svg .cmp-dim { fill: var(--text); font-size: 12px; font-weight: 600; } .cmp-svg .cmp-value { fill: var(--text); font-size: 10px; } .cmp-svg .cmp-missing { fill: var(--muted); } .cmp-svg .cmp-missing-label { fill: var(--muted); font-size: 10px; } .cmp-svg .cmp-bar.cmp-i0 { fill: var(--cmp-c1); } .cmp-svg .cmp-bar.cmp-i1 { fill: var(--cmp-c2); } .cmp-svg .cmp-bar.cmp-i2 { fill: var(--cmp-c3); } .cmp-svg .cmp-bar.cmp-i3 { fill: var(--cmp-c4); } .cmp-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; font-size: 0.85rem; color: var(--muted); margin: 0.5rem 0; } .cmp-legend-item { display: inline-flex; align-items: center; gap: 0.35rem; } .cmp-legend .swatch { width: 0.85rem; height: 0.85rem; border-radius: 3px; display: inline-block; } .cmp-legend .swatch.cmp-i0 { background: var(--cmp-c1); } .cmp-legend .swatch.cmp-i1 { background: var(--cmp-c2); } .cmp-legend .swatch.cmp-i2 { background: var(--cmp-c3); } .cmp-legend .swatch.cmp-i3 { background: var(--cmp-c4); } .cmp-table { max-width: 100%; } /* ---- 对比页 ---- */ .compare-select { border: 1px solid var(--border); border-radius: 8px; padding: 1rem; margin: 0.75rem 0; } .compare-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.4rem; } .compare-opt { display: flex; gap: 0.5rem; align-items: center; font-size: 0.9rem; } .compare-count { display: block; margin-top: 0.5rem; color: var(--muted); font-size: 0.85rem; } .compare-table { font-size: 0.88rem; } .compare-table th[scope="col"] { white-space: nowrap; } .compare-table .group th { background: var(--panel); text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; } /* ---- 详情页 ---- */ .breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 0 0 1rem; font-size: 0.85rem; color: var(--muted); } .breadcrumbs a { color: var(--muted); text-decoration: none; } .breadcrumbs a:hover { color: var(--accent); } .breadcrumbs [aria-current="page"] { color: var(--text); } .bench-group { margin: 1.25rem 0; } .method-ref { color: var(--muted); font-size: 0.85rem; } .compare-charts-title { margin-top: 2rem; } .spec-table { max-width: 44rem; } .price-table-detail { margin-top: 0.5rem; } .sources li { margin: 0.4rem 0; font-size: 0.9rem; color: var(--muted); } /* ---- 数据集页 ---- */ .dims-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; } .fields-table { max-width: 52rem; } .status-list li { margin: 0.5rem 0; font-size: 0.92rem; color: var(--muted); } .status-list strong { color: var(--text); } .site-footer { border-top: 1px solid var(--border); margin-top: 3rem; padding: 1.5rem 0; } .site-footer .wrap { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; } .site-footer a { color: var(--accent); text-decoration: none; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (max-width: 600px) { .bar-row { grid-template-columns: 1fr; gap: 0.25rem; } .bar-value { order: -1; } .site-header .wrap { flex-wrap: wrap; height: auto; padding: 0.5rem 0; } }