/* ============================================================================ tool-theme.css — 工具子页统一视觉规范（Vercel / Linear 风格 chrome） ---------------------------------------------------------------------------- 这是「首页视觉」抽出的可复用外壳（header / logo / 搜索框 / 小铺按钮 / 页面标题区 / footer / 页面底色），供各工具子页「按需接入」。接入方式（单个页面 opt-in，绝不影响未接入的页面）： 1. 2. 在该页自己的 CSS 之后引入：冲突处理原则： - 全部规则以 body.tool-page 命名空间限定 → 靠特异性压过页面自有 CSS （如 prompts.css 的 `header{}` 0,0,1 < `body.tool-page header{}` 0,1,1）。 - 需要压过 shared-white.css 的 !important 处，本文件也用 !important，且特异性更高（多一个 .tool-page 类）→ 稳定胜出。 - 因此本文件既不改 shared-white.css，也不改各页自有 CSS。注意：本文件只统一「外壳 chrome」。页面内部组件（卡片/筛选/标签/输出面板）的配色留待 phase 2，避免影响功能，详见 docs/tool-page-visual-standard.md。 ============================================================================ */ /* ── 设计令牌（与首页一致）────────────────────────────────────────────── */ body.tool-page{ --tool-shell:1180px; --tool-gutter:24px; --bg:#fdfcfa; --bg-subtle:#f8f6f1; --fg:#0a0a0a; --muted:#54585c; --muted-2:#6b7280; --border:#f0ede4; --border-strong:#e2dcc9; --ease:cubic-bezier(.22,1,.36,1); --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Helvetica,Arial,sans-serif; background:var(--bg) !important; color:var(--fg) !important; font-family:var(--sans) !important; -webkit-font-smoothing:antialiased; } /* system-repair 的独立样式把 body 设为居中 flex，导致全站顶栏被当作主窗口旁边的一个 flex 子项；这里只恢复页面外壳的正常文档流。 */ body.tool-page.theme-dark{ display:block !important; justify-content:flex-start !important; align-items:stretch !important; } /* ── Header：暖白底 + 细边框（取代 prompts 的深色 header / api 的玻璃拟态）── */ body.tool-page header{ display: block !important; background:var(--bg) !important; border-bottom:1px solid var(--border) !important; height:auto !important; padding:0 !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; position:static !important; } body.tool-page .header-inner{ width: 100% !important; max-width:var(--tool-shell); margin:0 auto; padding:12px var(--tool-gutter) !important; display:flex; align-items:center; justify-content:flex-start; gap:20px; background:transparent !important; } /* ── Logo：深色圆角方块 + 白色 glyph（取代渐变机器人脸）───────────────── */ body.tool-page .logo{ display:flex; align-items:center; gap:10px; min-height:34px; text-decoration:none; color:var(--fg) !important; font-weight:700; font-size:15px; letter-spacing:-.01em; white-space:nowrap; } body.tool-page .logo-mark{ position:relative; width:28px; height:28px; flex-shrink:0; } body.tool-page .logo-mark svg{ width:28px; height:28px; display:block; } /* shared-white 会把 .logo svg 描边强制成 currentColor（深色），这里恢复 glyph 的白色描边，保证深底方块上的图形可见 */ body.tool-page .logo-mark svg path{ stroke:#fff !important; } /* ── 右侧集群：搜索框 + 小铺按钮 ─────────────────────────────────────── */ body.tool-page .header-right{ display:flex; align-items:center; gap:10px; flex:1; justify-content:flex-end; } /* ── 搜索框：浅底细边（取代深色 header 上的半透明白框）──────────────── */ body.tool-page .search-wrap{ position:relative; width:100%; max-width:280px; flex:0 1 280px; } body.tool-page .search-wrap svg, body.tool-page .search-wrap .search-icon{ position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--muted-2) !important; stroke:currentColor !important; opacity:1 !important; pointer-events:none; } body.tool-page .search-wrap input{ width:100%; font-family:inherit; font-size:13px; padding:8px 12px 8px 34px !important; border-radius:8px !important; border:1px solid var(--border) !important; background:var(--bg-subtle) !important; color:var(--fg) !important; outline:none; transition:border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease); } body.tool-page .search-wrap input::placeholder{ color:var(--muted-2) !important; } body.tool-page .search-wrap input:focus{ border-color:var(--fg) !important; background:var(--bg) !important; box-shadow:0 0 0 3px rgba(10,10,10,.08) !important; } /* ── 小铺按钮：实心近黑药丸（取代绿色发光渐变）───────────────────────── */ body.tool-page .shop-btn{ display:inline-flex; align-items:center; gap:7px; min-height:34px; padding:8px 15px !important; border-radius:8px !important; background:var(--fg) !important; color:#fff !important; border:1px solid var(--fg) !important; font-size:13px; font-weight:600; text-decoration:none; white-space:nowrap; box-shadow:none !important; transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease); } body.tool-page .shop-btn:hover{ transform:translateY(-1px); background:#1a1a1a !important; box-shadow:0 6px 16px rgba(0,0,0,.18) !important; } body.tool-page .shop-btn:active{ transform:translateY(0); } body.tool-page .shop-btn svg{ color:#fff !important; stroke:currentColor !important; } /* ── 工具页标题区：深色标题 + 灰副标题（page-head / pb-page-head 通用）── */ body.tool-page .page-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:4px 0 18px; } body.tool-page .page-title, body.tool-page .pb-page-title{ color:var(--fg) !important; font-size:1.5rem; font-weight:700; letter-spacing:-.01em; line-height:1.25; margin:0; } body.tool-page .page-sub, body.tool-page .pb-page-sub{ color:var(--muted) !important; font-size:.85rem; line-height:1.5; margin:4px 0 0; } /* ── Footer：透明底 + 细顶边（取代强制白底 surface）─────────────────── */ body.tool-page footer{ background:transparent !important; border-top:1px solid var(--border) !important; color:var(--muted-2) !important; box-shadow:none !important; } /* ── 页面比例：统一成首页 1180px 内容轴 ─────────────────────────────── */ body.tool-page .container, body.tool-page .main-inner, body.tool-page .app, body.tool-page .app-container{ width:100% !important; max-width:var(--tool-shell) !important; margin-left:auto !important; margin-right:auto !important; padding-left:var(--tool-gutter) !important; padding-right:var(--tool-gutter) !important; } /* typesetter 没有页面 wrapper，单独让工具条/编辑器/状态栏跟首页内容轴对齐。 */ body.tool-page > .actionbar, body.tool-page > .statusbar{ padding-left:max(var(--tool-gutter), calc((100vw - var(--tool-shell)) / 2 + var(--tool-gutter))) !important; padding-right:max(var(--tool-gutter), calc((100vw - var(--tool-shell)) / 2 + var(--tool-gutter))) !important; } body.tool-page #editor{ max-width:var(--tool-shell) !important; padding-left:var(--tool-gutter) !important; padding-right:var(--tool-gutter) !important; } /* ════════════════════════════════════════════════════════════════════════ PHASE 2 — 卡片层统一规则（暖白米色系，与首页完全一致） ──────────────────────────────────────────────────────────────────────── 目标：把全站 14+ 种卡片类名（.card / .site-card / .info-card / .group / .step / .panel / .schedule-card / .team-card / .hero / .preview-container / .upload-dropzone / .window-frame / .dashboard-hero / .installer-panel 等）的底色/边框/圆角/hover 统一成首页的暖白米色系，压过 shared-white.css 强制的纯白冷灰系。原则： - 全部以 body.tool-page 命名空间限定，特异性高于 shared-white.css 的裸类选择器，稳定胜出。 - 需要压 !important 处一律用 !important。 - 不动 shared-white.css 本体、不动各页内联 CSS、不动功能 JS。 ════════════════════════════════════════════════════════════════════════ */ /* ── 卡片基类：统一底色/边框/圆角/阴影 ────────────────────────────────── */ /* 覆盖 shared-white.css 第 138-181 行的纯白冷灰 10px 圆角规则 */ body.tool-page .card, body.tool-page .site-card, body.tool-page .info-card, body.tool-page .group, body.tool-page .step, body.tool-page .panel, body.tool-page .schedule-card, body.tool-page .team-card, body.tool-page .hero, body.tool-page .info-item, body.tool-page .list-item, body.tool-page .window-frame, body.tool-page .window-body, body.tool-page .dashboard-hero, body.tool-page .installer-panel, body.tool-page .network-diagnostic-card, body.tool-page .network-actions-card, body.tool-page .console-section, body.tool-page .checklist-card, body.tool-page .sound-item, body.tool-page .file-item, body.tool-page .installer-item, body.tool-page .remedy-step, body.tool-page .preview-container, body.tool-page .upload-dropzone, body.tool-page .field, body.tool-page .modal, body.tool-page .empty-state, body.tool-page .comparison-slider-container, body.tool-page .network-status-details{ background:var(--bg) !important; color:var(--fg) !important; border:1px solid var(--border) !important; border-radius:9px !important; box-shadow:0 1px 2px rgba(10,10,10,.03) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } /* ── 卡片 hover：米色边框加深 + 轻微上浮（与首页 tool-card 一致）──────── */ body.tool-page .card:hover, body.tool-page .site-card:hover, body.tool-page .info-card:hover, body.tool-page .group:hover, body.tool-page .step:hover, body.tool-page .panel:hover, body.tool-page .schedule-card:hover, body.tool-page .team-card:hover, body.tool-page .hero:hover, body.tool-page .list-item:hover, body.tool-page .file-item:hover, body.tool-page .installer-item:hover, body.tool-page .preview-container:hover, body.tool-page .upload-dropzone:hover{ background:var(--bg) !important; border-color:var(--border-strong) !important; box-shadow:0 4px 14px rgba(0,0,0,.06) !important; } /* ── 卡片内标题：深色 fg（覆盖 shared-white 的 currentColor 继承）──────── */ body.tool-page .card-title, body.tool-page .group-title, body.tool-page .panel-title, body.tool-page .step-title, body.tool-page .info-title, body.tool-page .modal-title, body.tool-page .site-title{ color:var(--fg) !important; -webkit-text-fill-color:currentColor !important; } /* ── 卡片内描述/副标题：灰色 muted ───────────────────────────────────── */ body.tool-page .card-info p, body.tool-page .card-info, body.tool-page .site-desc, body.tool-page .article-desc, body.tool-page .tool-desc, body.tool-page .info-line, body.tool-page .step-desc{ color:var(--muted) !important; } /* ── 徽章/pill/tag：透明底 + 彩色圆点 + 米色细边（与首页 tool-tag 一致）── */ /* 覆盖 shared-white.css 第 455-467 行的纯白填充冷灰边 pill */ body.tool-page .pill, body.tool-page .card-tag, body.tool-page .badge, body.tool-page .status-badge, body.tool-page .file-pages, body.tool-page .meta-tag, body.tool-page .latency-indicator, body.tool-page .chip, body.tool-page .card-tag.model{ background:transparent !important; color:var(--muted-2) !important; border:1px solid var(--border) !important; border-radius:99px !important; box-shadow:none !important; font-family:var(--mono, var(--sans)) !important; font-weight:500; } /* 徽章前缀圆点（若元素有 ::before 圆点，统一成 muted 灰） */ body.tool-page .pill::before, body.tool-page .card-tag::before, body.tool-page .badge::before{ background:var(--muted-2) !important; } /* ── 网格容器：统一 gap 间距 ──────────────────────────────────────────── */ body.tool-page .grid, body.tool-page .sites-grid, body.tool-page .schedule-cards, body.tool-page .teams-grid, body.tool-page .checklist-grid, body.tool-page .prompts-grid, body.tool-page .related-grid, body.tool-page .field-grid{ gap:12px !important; } /* 缩略图网格稍紧凑 */ body.tool-page .thumbs{ gap:8px !important; } /* ── 按钮态卡片（筛选/标签按钮）：透明底 + 米色边 ─────────────────────── */ /* 覆盖 shared-white.css 第 298-319 行的纯白填充按钮 */ body.tool-page .tag-btn, body.tool-page .filter-btn, body.tool-page .angle-btn, body.tool-page .page-chk, body.tool-page .file-btn, body.tool-page .visit-btn, body.tool-page .feedback-btn, body.tool-page .tab-btn, body.tool-page .action-btn, body.tool-page .copy-btn, body.tool-page .related-card, body.tool-page .load-more-btn{ background:var(--bg) !important; color:var(--muted) !important; border:1px solid var(--border) !important; border-radius:8px !important; box-shadow:none !important; text-shadow:none !important; transition:border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease) !important; } /* hover：米色边加深 + 文字变深 */ body.tool-page .tag-btn:hover, body.tool-page .filter-btn:hover, body.tool-page .angle-btn:hover, body.tool-page .page-chk:hover, body.tool-page .file-btn:hover, body.tool-page .visit-btn:hover, body.tool-page .feedback-btn:hover, body.tool-page .tab-btn:hover, body.tool-page .action-btn:hover, body.tool-page .copy-btn:hover, body.tool-page .related-card:hover, body.tool-page .load-more-btn:hover{ background:var(--bg-subtle) !important; border-color:var(--border-strong) !important; color:var(--fg) !important; } /* active 态：实心近黑（与首页 tab.active 一致） */ body.tool-page .tag-btn.active, body.tool-page .filter-btn.active, body.tool-page .angle-btn.active, body.tool-page .page-chk.checked, body.tool-page .tab-btn.active, body.tool-page .chip.active{ background:var(--fg) !important; color:#fff !important; border-color:var(--fg) !important; } /* 主操作按钮：实心近黑（与首页 shop-btn 一致，覆盖 shared-white 的蓝/绿） */ body.tool-page .btn-primary, body.tool-page .btn.primary, body.tool-page button.primary, body.tool-page .login-btn, body.tool-page #repairBtn, body.tool-page #generateBtn, body.tool-page #downloadBtn, body.tool-page #merge-btn, body.tool-page #split-btn, body.tool-page #rotate-btn, body.tool-page #extract-btn, body.tool-page #playBtn, body.tool-page .action-btn.primary, body.tool-page .copy-btn-full{ background:var(--fg) !important; color:#fff !important; border:1px solid var(--fg) !important; border-radius:8px !important; box-shadow:none !important; } body.tool-page .btn-primary:hover, body.tool-page .btn.primary:hover, body.tool-page button.primary:hover, body.tool-page .login-btn:hover, body.tool-page #repairBtn:hover, body.tool-page #generateBtn:hover, body.tool-page #downloadBtn:hover, body.tool-page .action-btn.primary:hover, body.tool-page .copy-btn-full:hover{ background:#1a1a1a !important; border-color:#1a1a1a !important; color:#fff !important; } /* ── 卡片内分隔线：米色细边（覆盖 shared-white 的冷灰）────────────────── */ body.tool-page .card-actions, body.tool-page .card-body, body.tool-page .modal-prompt{ border-color:var(--border) !important; } /* ── system-repair 专属：theme-dark 下强制浅色（与全站一致）────────────── */ /* system-repair 是唯一用 theme-dark + 独立 style.css 的页面。 tool-theme.css 的 body.tool-page 已把背景强制成暖白，但 style.css 里的 .window-frame / .dashboard-hero 等有深色覆盖，需用更高特异性压过。 */ body.tool-page.theme-dark .window-frame, body.tool-page.theme-dark .window-body, body.tool-page.theme-dark .dashboard-hero, body.tool-page.theme-dark .installer-panel, body.tool-page.theme-dark .network-diagnostic-card, body.tool-page.theme-dark .network-actions-card, body.tool-page.theme-dark .console-section, body.tool-page.theme-dark .checklist-card, body.tool-page.theme-dark .installer-item, body.tool-page.theme-dark .remedy-step, body.tool-page.theme-dark .network-status-details{ background:var(--bg) !important; color:var(--fg) !important; border:1px solid var(--border) !important; border-radius:9px !important; box-shadow:0 1px 2px rgba(10,10,10,.03) !important; } /* system-repair 控制台保留深色（代码终端风格，符合语义） */ body.tool-page.theme-dark .console-body, body.tool-page.theme-dark .log-output{ background:#0a0a0a !important; color:#f9fafb !important; border:1px solid var(--border) !important; border-radius:9px !important; } /* system-repair 的模拟桌面窗口装饰元素：统一成浅色细边 */ body.tool-page.theme-dark .window-titlebar, body.tool-page.theme-dark .statusbar, body.tool-page.theme-dark .actionbar{ background:var(--bg) !important; color:var(--fg) !important; border-color:var(--border) !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } /* system-repair 装饰光球已由 shared-white 隐藏，这里确认 */ body.tool-page.theme-dark .background-decorations, body.tool-page.theme-dark .glow-orb, body.tool-page.theme-dark .orb-1, body.tool-page.theme-dark .orb-2, body.tool-page.theme-dark .orb-3{ display:none !important; } /* ── 输入框统一：暖白底 + 米色边（覆盖 shared-white 的纯白冷灰）────────── */ body.tool-page input, body.tool-page textarea, body.tool-page select, body.tool-page .form-input, body.tool-page .form-textarea, body.tool-page .login-input, body.tool-page .search-input{ background:var(--bg-subtle) !important; color:var(--fg) !important; border:1px solid var(--border) !important; border-radius:8px !important; box-shadow:none !important; } body.tool-page input:focus, body.tool-page textarea:focus, body.tool-page select:focus, body.tool-page .form-input:focus, body.tool-page .form-textarea:focus, body.tool-page .login-input:focus, body.tool-page .search-input:focus{ border-color:var(--fg) !important; background:var(--bg) !important; box-shadow:0 0 0 3px rgba(10,10,10,.08) !important; outline:none !important; } body.tool-page input::placeholder, body.tool-page textarea::placeholder{ color:var(--muted-2) !important; } /* ════════════════════════════════════════════════════════════════════════ PHASE 2 补遗 — 容器型卡片 / 普通按钮 / 装饰元素漏网补全 ──────────────────────────────────────────────────────────────────────── 首轮 phase 2 覆盖了 .card/.group/.step 等显式卡片类，但各页还有一类 "容器型卡片"用内联 CSS 写死纯白底+冷灰边，未纳入统一，导致视觉割裂。此区块补全这些漏网类名，使全站容器型元素彻底统一暖白米色系。 ════════════════════════════════════════════════════════════════════════ */ /* ── 容器型卡片补全：typesetter/watermark/compressor/shift-helper ──────── */ body.tool-page .actionbar, body.tool-page .editor-wrap, body.tool-page .statusbar, body.tool-page .app, body.tool-page .app-container, body.tool-page .preview-wrap, body.tool-page .control-item, body.tool-page .calendar-wrap, body.tool-page .form-group, body.tool-page .controls-row, body.tool-page .controls, body.tool-page .toolbar, body.tool-page .main-content, body.tool-page .content-area, body.tool-page .work-area{ background:var(--bg) !important; color:var(--fg) !important; border:1px solid var(--border) !important; border-radius:9px !important; box-shadow:0 1px 2px rgba(10,10,10,.03) !important; } /* editor-wrap / preview-wrap 通常是无边满屏容器，去掉边框避免双重边框 */ body.tool-page .editor-wrap, body.tool-page .preview-wrap{ border:none !important; box-shadow:none !important; background:var(--bg) !important; } /* statusbar / actionbar 是横向工具条，保留底边即可 */ body.tool-page .actionbar, body.tool-page .statusbar{ border:none !important; border-bottom:1px solid var(--border) !important; border-radius:0 !important; } /* ── 普通按钮统一：透明底 + 米色边（覆盖各页自定义 btn）────────────────── */ body.tool-page .btn, body.tool-page button, body.tool-page .btn-secondary, body.tool-page .btn.ghost, body.tool-page .btn-ghost{ background:var(--bg) !important; color:var(--muted) !important; border:1px solid var(--border) !important; border-radius:8px !important; box-shadow:none !important; text-shadow:none !important; transition:border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease) !important; } body.tool-page .btn:hover, body.tool-page button:hover, body.tool-page .btn-secondary:hover, body.tool-page .btn.ghost:hover, body.tool-page .btn-ghost:hover{ background:var(--bg-subtle) !important; border-color:var(--border-strong) !important; color:var(--fg) !important; } /* primary 按钮不覆盖（已在上面统一成实心近黑） */ /* ── 装饰元素统一：分隔线 / 数字圆点 / 表格 ─────────────────────────────── */ /* bsep 分隔线：米色细线 */ body.tool-page .bsep{ background:var(--border) !important; } /* step-num 数字圆圈：实心近黑（与 primary 按钮一致） */ body.tool-page .step-num{ background:var(--fg) !important; color:#fff !important; } /* calendar 表格：暖白底 + 米色边（覆盖 shift-helper 的纯白冷灰） */ body.tool-page .calendar, body.tool-page .calendar th, body.tool-page .calendar td{ background:var(--bg) !important; border-color:var(--border) !important; } body.tool-page .calendar th{ background:var(--bg-subtle) !important; } body.tool-page .calendar td.row-label{ background:var(--bg-subtle) !important; } /* modal-row 分隔线：米色 */ body.tool-page .modal-row{ border-color:var(--border) !important; } body.tool-page .modal-row .lbl{ color:var(--muted) !important; } body.tool-page .modal-row .val{ color:var(--fg) !important; } /* modal-close 按钮：暖白底 + 米色边 */ body.tool-page .modal-close{ background:var(--bg-subtle) !important; color:var(--muted) !important; border:1px solid var(--border) !important; border-radius:8px !important; } body.tool-page .modal-close:hover{ background:var(--bg) !important; border-color:var(--border-strong) !important; color:var(--fg) !important; } /* stat 统计文字：深色 */ body.tool-page .stat{ color:var(--muted) !important; } /* ════════════════════════════════════════════════════════════════════════ PHASE 2 变量重映射层（根治变量名不匹配问题） ──────────────────────────────────────────────────────────────────────── 背景：api-nav/shift-helper/compressor/temp-mail 等页内联 :root 定义了深色或纯白变量（--bg/--card/--cb/--border/--text/--muted/--primary 等），主体元素通过 var(--card) 引用。phase 2 用 body.tool-page .xxx 类名硬压，但变量名不匹配导致部分元素仍解析到旧色值。解法：在 body.tool-page 命名空间重定义这些变量到首页暖白系。特异性 body.tool-page (0,1,1) > :root (0,1,0)，稳赢。功能色（--success/--danger/--warn/--early/--mid/--night/--team0-3 等）保留不动。 ════════════════════════════════════════════════════════════════════════ */ body.tool-page{ /* 重映射各页 :root 里的"配色基础变量"到首页暖白系 */ --bg:#fdfcfa; /* 覆盖 api-nav #090d16 / shift #f5f7fa / temp #f7f8fa */ --card:#fdfcfa; /* 覆盖 api-nav #131b2e / shift #fff / temp #fff */ --cb:#f0ede4; /* 覆盖 api-nav #1e293b（边框变量名） */ --border:#f0ede4; /* 覆盖 shift #e5e7eb / temp #e5e7eb */ --text:#0a0a0a; /* 覆盖 api-nav #f8fafc / shift #1f2937 / temp #111827 */ --muted:#54585c; /* 覆盖各页 #6b7280 / #64748b */ --muted-2:#6b7280; --primary:#0a0a0a; /* 覆盖 temp-mail #111827（主色统一近黑） */ --phover:#2b2b30; /* 覆盖 api-nav #2563eb */ --soft:#f8f6f1; /* 覆盖 temp-mail #f3f4f6 */ /* --success/--danger/--warn/--early/--mid/--night/--team0-3 等功能色保留 */ } /* shift-helper 班次功能色保留（不统一成暖白，属于语义色） */ body.tool-page.shift-helper-keep, body.tool-page{ --early:#86efac; --mid:#93c5fd; --night:#a78bfa; --day12:#fdba74; --night12:#818cf8; --rest:#cbd5e1; } /* ════════════════════════════════════════════════════════════════════════ PHASE 2 硬编码颜色兜底层 ──────────────────────────────────────────────────────────────────────── 变量重映射覆盖了 var(--card)/var(--bg) 等，但部分页内联 CSS 用了硬编码颜色（#fff/#f9fafb/rgba 蓝绿透明底）。这里补针对性规则。 ════════════════════════════════════════════════════════════════════════ */ /* shift-helper 表格：表头/行标签底色统一暖白subtle，单元格白底统一暖白 */ body.tool-page .calendar th, body.tool-page .calendar td, body.tool-page .stats-table th, body.tool-page .stats-table td{ background:var(--bg) !important; border-color:var(--border) !important; color:var(--fg) !important; } body.tool-page .calendar th, body.tool-page .calendar td.row-label, body.tool-page .stats-table th{ background:var(--bg-subtle) !important; } body.tool-page .calendar th.weekend{ color:#ef4444 !important; /* 周末红色保留（语义色） */ } /* shift-helper 班次单元格：保留功能色背景，文字色保留 */ body.tool-page .calendar td[class*="shift-"]{ -webkit-print-color-adjust:exact; print-color-adjust:exact; } /* api-nav 蓝色透明底元素：统一成暖白subtle + 米色边 */ body.tool-page .info-card, body.tool-page .feedback-btn, body.tool-page .tag-btn, body.tool-page .card-tag, body.tool-page .visit-btn, body.tool-page .test-btn, body.tool-page .modal, body.tool-page .form-input, body.tool-page .form-textarea, body.tool-page .search-input{ background:var(--bg-subtle) !important; border-color:var(--border) !important; color:var(--fg) !important; } /* api-nav 按钮hover/active：统一近黑 */ body.tool-page .tag-btn.active, body.tool-page .visit-btn:hover, body.tool-page .btn-primary{ background:var(--fg) !important; border-color:var(--fg) !important; color:#fff !important; } body.tool-page .tag-btn:hover, body.tool-page .test-btn:hover, body.tool-page .nav-link:hover{ color:var(--fg) !important; border-color:var(--border-strong) !important; } /* api-nav latency-dot 功能色保留（在线绿/离线红） */ body.tool-page .latency-dot.online{ background:#10b981 !important; } body.tool-page .latency-dot.offline{ background:#ef4444 !important; } /* shift-helper .tip 提示条：保留黄色语义（但底色统一成暖黄系） */ body.tool-page .tip{ background:#fef9c3 !important; border-left-color:#ca8a04 !important; color:#713f12 !important; } /* temp-mail .notice 提示条：橙色语义保留但统一暖系 */ body.tool-page .notice{ background:#fff7ed !important; border-color:#fed7aa !important; color:#9a3412 !important; } /* temp-mail .domain 域名文字：统一muted */ body.tool-page .domain{ color:var(--muted-2) !important; } /* 全站 .card:hover 统一（覆盖 temp-mail/compressor 等硬编码hover） */ body.tool-page .card:hover{ border-color:var(--border-strong) !important; background:var(--bg) !important; } /* ── 响应式：窄屏时搜索框换行占满 ────────────────────────────────────── */ @media (max-width:640px){ body.tool-page .header-inner{ flex-wrap:wrap; row-gap:10px; } body.tool-page .header-right{ flex-wrap:wrap; row-gap:10px; flex:1 1 100%; } body.tool-page .search-wrap{ order:3; flex:1 1 100%; max-width:100%; } } /* ── 最终布局覆盖：所有工具页统一成首页 1180px / 24px 内容轴 ─────── */ body.tool-page > header{ width:100% !important; flex:0 0 auto !important; } body.tool-page .header-inner, body.tool-page .container, body.tool-page .main-inner, body.tool-page .app, body.tool-page .app-container{ width:100% !important; max-width:var(--tool-shell) !important; margin-left:auto !important; margin-right:auto !important; padding-left:var(--tool-gutter) !important; padding-right:var(--tool-gutter) !important; box-sizing:border-box !important; } body.tool-page > .actionbar, body.tool-page > .statusbar{ padding-left:max(var(--tool-gutter), calc((100vw - var(--tool-shell)) / 2 + var(--tool-gutter))) !important; padding-right:max(var(--tool-gutter), calc((100vw - var(--tool-shell)) / 2 + var(--tool-gutter))) !important; } body.tool-page #editor{ max-width:var(--tool-shell) !important; padding-left:var(--tool-gutter) !important; padding-right:var(--tool-gutter) !important; box-sizing:border-box !important; } /* api-nav 筛选栏不是内容卡片，去掉统一容器补全带来的外框。 */ body.tool-page.api-nav-page .controls-row{ background:transparent !important; border:none !important; border-radius:0 !important; box-shadow:none !important; padding:0 0 16px !important; }