/* ────────────────────────────────────────────────────────────── CaelLabSearch 样式亮 / 暗双主题：，值由页面头部的内联脚本按 localStorage → 系统偏好算出，避免首屏闪一下白。配色全走 CSS 变量，换皮只动下面两个 :root 块。 ────────────────────────────────────────────────────────────── */ :root { color-scheme: light; --bg: #ffffff; --fg: #202124; --dim: #5f6368; --faint: #70757a; --snippet: #4d5156; --link: #1a73e8; --visited: #681da8; --line: #dfe1e5; --soft: #f8f9fa; --hover: #f1f3f4; --shadow: rgba(32, 33, 36, 0.16); --mark: #1a73e8; --danger: #d93025; /* 轻提示（toast）用；--ok 跟 --danger 一个色阶（Material 700），别用荧光绿 */ --ok: #188038; --warn: #e37400; } :root[data-theme="dark"] { color-scheme: dark; --bg: #202124; --fg: #e8eaed; --dim: #9aa0a6; --faint: #9aa0a6; --snippet: #bdc1c6; --link: #8ab4f8; --visited: #c58af9; --line: #3c4043; --soft: #292a2d; --hover: #303134; --shadow: rgba(0, 0, 0, 0.55); --mark: #8ab4f8; --danger: #f28b82; --ok: #81c995; --warn: #fdd663; } * { margin: 0; padding: 0; box-sizing: border-box; } body { background: var(--bg); color: var(--fg); font: 14px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; transition: background-color 0.2s, color 0.2s; } a { color: var(--link); text-decoration: none; } a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; } mark { background: none; color: var(--mark); font-weight: 700; } svg.globe { color: var(--dim); } /* ── 顶栏 ── */ .top { position: relative; display: flex; align-items: center; gap: 28px; padding: 18px 24px; } .results .top { position: sticky; top: 0; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--line); } .brand { display: block; flex-shrink: 0; line-height: 0; } .brand img { display: block; height: 26px; width: auto; } /* 深浅色切换 */ .theme { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; background: none; border: 0; border-radius: 50%; color: var(--dim); cursor: pointer; transition: background-color 0.15s, color 0.15s; } .theme:hover { background: var(--hover); color: var(--fg); } .theme svg { width: 20px; height: 20px; } .theme .i-sun { display: none; } :root[data-theme="dark"] .theme .i-sun { display: block; } :root[data-theme="dark"] .theme .i-moon { display: none; } /* ── 右上角那一组：账号 + 设置齿轮 ── 账号在齿轮**左边**（用户 2026-09-26 要求从设置面板挪出来：齿轮是"改偏好"的地方，身份该一直看得见）。首页的 header 是纵向排的，整个 .tools 一起钉到右上角 —— **别只钉齿轮**，那样账号会掉进纵向流里跑到品牌下面去。 */ .tools { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } /* 没登录：一个胶囊按钮。宽度够写「登录」，全称放 title 里 */ .acct-in { display: flex; align-items: center; gap: 5px; height: 36px; padding: 0 14px; background: var(--soft); border: 1px solid var(--line); border-radius: 999px; color: var(--fg); font-size: 13px; transition: background-color 0.15s; } .acct-in:hover { background: var(--hover); } .acct-in svg { width: 15px; height: 15px; color: var(--dim); } /* 登录了：头像 + 昵称的胶囊，右边跟一个小「退出」。整个胶囊**不可点**（没有个人主页，做成链接等于给个假入口），昵称太长就省略。 */ .acct-user { display: flex; align-items: center; gap: 7px; max-width: 150px; height: 36px; padding: 0 12px 0 5px; background: var(--soft); border: 1px solid var(--line); border-radius: 999px; } .acct-avatar { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--bg); object-fit: cover; } /* 没有头像 / 头像挂了时的文字版：就是昵称首字 */ .acct-avatar-fb { display: flex; align-items: center; justify-content: center; color: var(--dim); font-size: 12px; font-weight: 600; } .acct-name { overflow: hidden; color: var(--fg); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; } .acct-out { color: var(--dim); font-size: 12px; } .acct-out:hover { color: var(--fg); } /* ── 设置面板（右上角齿轮）── 外观三态 + 安全搜索滑块。折叠靠原生

，点齿轮直接展开。面板挂在自己下面、**右对齐**：按钮本来就在屏幕右上角，往左展开才不会顶出屏幕（窄屏再单独挪，见文件末尾的 media query）。 */ .settings { position: relative; flex-shrink: 0; } .set-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; /*

自带的小三角要分浏览器去掉：标准属性 + WebKit 私有伪元素 */ list-style: none; border-radius: 50%; color: var(--dim); cursor: pointer; transition: background-color 0.15s, color 0.15s; } .set-btn::-webkit-details-marker { display: none; } .set-btn:hover, .settings[open] .set-btn { background: var(--hover); color: var(--fg); } .set-btn svg { width: 20px; height: 20px; } .set-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 20; width: 268px; max-width: calc(100vw - 32px); padding: 14px 16px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 6px 24px var(--shadow); } /* 两组设置之间拉一条分隔线 */ .set-group + .set-group { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); } .set-label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 9px; color: var(--dim); font-size: 12px; } /* 安全搜索标题右边的当前档位名 */ .set-label b { color: var(--fg); font-size: 13px; font-weight: 600; } .set-tip { margin: 5px 0 0; color: var(--faint); font-size: 11px; line-height: 1.6; } /* 外观：三格分段控件 */ .seg { display: flex; gap: 2px; padding: 2px; background: var(--soft); border: 1px solid var(--line); border-radius: 9px; } .seg-item { flex: 1; padding: 6px 0; background: none; border: 0; border-radius: 7px; color: var(--dim); font-family: inherit; font-size: 12px; line-height: 1.3; cursor: pointer; transition: background-color 0.15s, color 0.15s; } .seg-item:hover { color: var(--fg); } .seg-item.on { background: var(--bg); color: var(--fg); box-shadow: 0 1px 3px var(--shadow); } /* 安全搜索：四档滑块。轨道和滑块头得分浏览器各写一套（-webkit- / -moz-） */ .safe-range { display: block; width: 100%; height: 18px; margin: 0; -webkit-appearance: none; appearance: none; background: none; cursor: pointer; } .safe-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--line); } .safe-range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border: 2px solid var(--bg); border-radius: 50%; background: var(--link); box-shadow: 0 1px 3px var(--shadow); } .safe-range::-moz-range-track { height: 4px; border-radius: 2px; background: var(--line); } .safe-range::-moz-range-thumb { width: 14px; height: 14px; border: 2px solid var(--bg); border-radius: 50%; background: var(--link); box-shadow: 0 1px 3px var(--shadow); } .safe-range:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 2px; } /* 滑块两端：区域允许的最低档 ↔ 最高档。中间几档不刻度 —— 当前档位名就在上面那行 */ .safe-scale { display: flex; justify-content: space-between; margin-top: 2px; color: var(--faint); font-size: 11px; } /* 结果列表**下面**那行「过滤了 N 条」（用户要求放底部：它是对"你刚看到的这一页"的说明） */ .safe-hidden { margin: 14px 0 0; padding: 8px 12px; background: var(--soft); border: 1px solid var(--line); border-radius: 8px; color: var(--dim); font-size: 12px; line-height: 1.65; } .safe-hidden strong { color: var(--fg); } /* 搜索框 */ .sb { position: relative; display: flex; align-items: center; flex: 1; max-width: 692px; } .sb input { width: 100%; height: 44px; padding: 0 52px 0 20px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; font-size: 16px; font-family: inherit; color: var(--fg); outline: none; transition: box-shadow 0.15s, border-color 0.15s; } .sb input::placeholder { color: var(--faint); } .sb input:hover { box-shadow: 0 1px 6px var(--shadow); } .sb input:focus { border-color: transparent; box-shadow: 0 1px 6px var(--shadow); } .sb button { position: absolute; right: 4px; display: flex; align-items: center; justify-content: center; width: 40px; height: 36px; background: none; border: 0; border-radius: 50%; color: var(--link); cursor: pointer; transition: background-color 0.15s; } .sb button:hover { background: var(--hover); } /* ── 首页 ── */ /* 搜索框搁页面正中间：header + main 当一组在视口里垂直居中，页脚钉在底部不参与 */ body.home { position: relative; justify-content: center; padding-bottom: 72px; } .home .top { flex-direction: column; gap: 26px; padding: 24px 24px 0; } .home main { flex: 0 0 auto; padding: 14px 24px 0; } .home footer { position: absolute; bottom: 0; left: 0; right: 0; } .home .brand img { height: 44px; } .home .sb { width: 100%; max-width: 584px; } /* 首页这一组要锚**视口**，不能锚 .top： `body.home` 有一条 justify-content: center，首页的 header + main 是整组在视口里垂直居中的，所以 .top 自己就落在页面 1/3 处（实测 y=238）。锚在 .top 上的话，账号和齿轮会跟着居中块下移、跟大 logo 挤在同一行 —— 看着就像被强行上下居中了（用户 2026-09-26 报的就是这个）。改成 fixed 之后这一组永远在页面真正的右上角，跟 Google 首页那种顶栏一个道理。结果页不用这条：那边 .top 是 sticky 的，.tools 在横向 flex 流里本来就对。 */ .home .tools { position: fixed; top: 18px; right: 24px; } .home-stat { text-align: center; color: var(--dim); font-size: 13px; } .home-stat strong { color: var(--fg); } /* ── 结果页 ── */ main { flex: 1; width: 100%; max-width: 712px; margin: 0 auto; padding: 14px 24px 56px; } /* 宽屏：结果列**偏左**，不再完全居中（用户 2026-09-26 要求的）。原来 1280 上左右各让 296px，右边那一大块全空着，而右边以后是要放东西的（眼下第一个用户就是结果条目的「⋯」菜单，它宽屏下往列右侧展开，见 .hit-menu）。 **别贴最左**：左边留 clamp(48px, 11vw, 200px) 的呼吸位，右边 auto —— 于是左小右大。首页（body.home）不掺和：那页的 header + main 是整组在视口里垂直居中的。 */ @media (min-width: 1180px) { /* .related 那条规则定义在后面，得靠 body.results 前缀把特异性顶上去，否则被它的 margin: 0 auto 盖掉 */ body.results main, body.results .related { margin-left: clamp(48px, 11vw, 200px); margin-right: auto; } } .stats { color: var(--faint); font-size: 13px; padding: 8px 0 2px; } .stats strong { color: var(--fg); font-weight: 600; } .active-filter { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; padding: 2px 6px 2px 12px; background: var(--soft); border: 1px solid var(--line); border-radius: 999px; color: var(--fg); } .active-filter a { color: var(--faint); font-size: 15px; line-height: 1; } .active-filter a:hover { color: var(--fg); } .facets { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 0 6px; } .facet { padding: 3px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--dim); font-size: 13px; transition: background-color 0.15s, color 0.15s, border-color 0.15s; } .facet span { color: var(--faint); margin-left: 2px; } .facet:hover { background: var(--hover); color: var(--fg); } .facet.on { background: var(--soft); border-color: var(--link); color: var(--link); } /* 相关搜索：页面底部的块（用户 2026-09-25 要求挪到页脚并做成有样式的）。形状参考 Google 底部那排「与 X 相关的搜索」：等宽格子 + 放大镜图标。容器宽度跟 main 对齐（712 减去左右 24 的 padding）。 */ .related { width: 100%; max-width: 712px; margin: 0 auto; padding: 26px 24px 6px; } .related h2 { margin-bottom: 13px; color: var(--fg); font-size: 16px; font-weight: 500; } .related ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 8px 10px; list-style: none; } .related a { display: flex; align-items: center; gap: 9px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 9px; background: var(--soft); color: var(--fg); font-size: 14px; line-height: 1.3; transition: background-color 0.15s, border-color 0.15s; } .related a:hover { background: var(--hover); border-color: var(--dim); } .related svg { flex: none; width: 15px; height: 15px; color: var(--faint); } /* 「站内其它信息 »」：某个站被折叠掉内容时给个入口（Google 那个 more from this site） */ .more-sites { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 14px; } .more-sites a { color: var(--link); } .more-sites a:hover { text-decoration: underline; } /* 结果项 */ .hits { list-style: none; padding-top: 6px; } .hit { position: relative; /* 「⋯」菜单（.hit-menu）绝对定位到这一条的右上角 */ padding: 18px 0 20px; } .hit + .hit { border-top: 1px solid var(--line); } .hit-head { display: flex; align-items: center; gap: 12px; } .fav { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex-shrink: 0; background: var(--soft); border: 1px solid var(--line); border-radius: 50%; overflow: hidden; } .fav img { display: block; } .hit-src { display: flex; flex-direction: column; min-width: 0; } .hit-site { color: var(--fg); font-size: 14px; line-height: 1.35; } .hit-url { color: var(--dim); font-size: 12px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hit-title { display: block; margin: 6px 0 0 38px; font-size: 20px; line-height: 1.3; font-weight: 400; } .hit-title:visited { color: var(--visited); } .hit-title:hover { text-decoration: underline; } .hit-desc { margin: 4px 0 0 38px; color: var(--snippet); font-size: 14px; line-height: 1.58; } /* 首位结果的「站内子链接」（学 Google 给官网挂的那排 sitelinks：Docs / Downloads / Pricing…）。跟 .hit-title / .hit-desc 一样缩进 38px（图标 26 + 间距 12）对齐右边。列宽用 auto-fill + 240px：宽屏自动两列、窄屏自动一列，不用再写一条 media query */ .sublinks { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px 18px; margin: 10px 0 0 38px; padding: 0; list-style: none; font-size: 14px; } .sublinks a { display: block; color: var(--link); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sublinks a:hover { text-decoration: underline; } /* ── 结果条目右上角那个「⋯」菜单（网站信息 + 报告 + 反馈）── 平时半透明：每条都挂一个，做实了会把整页弄得很吵。触屏上没有 hover，所以**不能**靠 hover 才让它出现，得一直可见，只是淡。 SSR 输出时带 hidden，report.js 才放开（没 JS 就根本没这个按钮）。 */ .hit-more { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: auto; flex-shrink: 0; background: none; border: 0; border-radius: 50%; color: var(--faint); opacity: 0.45; cursor: pointer; transition: opacity 0.15s, background-color 0.15s, color 0.15s; } /* hidden 得自己兜住：上面的 display:flex 优先级比 hidden 属性的 UA 样式高 */ .hit-more[hidden] { display: none; } .hit-more svg { width: 17px; height: 17px; } /* .on = 菜单正开着，按钮跟着亮起来，让人知道点的是谁 */ .hit-more:hover, .hit-more.on { opacity: 1; background: var(--hover); color: var(--fg); } /* 菜单：绝对定位到 .hit 的右上角（.hit 是 position:relative）。默认 display:none，report.js 加 .on 才出来；.up = 下面放不下，翻到按钮上方。 */ .hit-menu { position: absolute; top: 34px; right: 0; z-index: 5; display: none; width: 258px; max-width: calc(100vw - 28px); padding: 6px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 6px 20px var(--shadow); } .hit-menu.on { display: block; } .hit-menu.up { top: auto; bottom: 34px; } /* 宽屏：菜单**展开到结果列右边那块空位里**，不再盖在结果上（用户 2026-09-26 要求的），因此也宽一点，长地址少换几行。放得下是有算过的：断点 1180 起，内容列左边缘最多 11vw、列宽 712（含左右各 24 的 padding）、菜单 300 + 10 的间距 —— 菜单右边缘还在视口里（1180 上留 37px 富余）。 **别把这个断点调小**，不然窄一点的屏上菜单会顶出右边。 */ @media (min-width: 1180px) { .hit-menu { left: calc(100% + 10px); right: auto; width: 300px; } } /* 顶上那格「网站信息」：图标 + 站名 + 完整地址 */ .menu-info { display: flex; align-items: flex-start; gap: 10px; padding: 6px 6px 10px; border-bottom: 1px solid var(--line); } .menu-info .fav { width: 22px; height: 22px; } .menu-info-text { display: flex; flex-direction: column; min-width: 0; } .menu-info-site { color: var(--fg); font-size: 13px; line-height: 1.4; } /* 完整地址要能换行：长 URL 不换行会把菜单撑破 */ .menu-info-url { color: var(--dim); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; } /* 「报告」「反馈」两组的小标题 */ .menu-label { padding: 9px 6px 3px; color: var(--faint); font-size: 12px; line-height: 1.4; } .menu-item { display: block; width: 100%; padding: 7px 6px; background: none; border: 0; border-radius: 6px; color: var(--fg); font-family: inherit; font-size: 13px; line-height: 1.4; text-align: left; white-space: nowrap; cursor: pointer; transition: background-color 0.15s, color 0.15s; } .menu-item:hover { background: var(--hover); } /* 已经提交过的那一块：整块换成这一行（SSR 和 report.js 输出的文案、class 都一样）。报告那组、反馈那组都是这么换的 —— 满意/不满意因此天然互斥，报告也只能报一次。 */ .menu-state { padding: 7px 6px; color: var(--ok); font-size: 13px; line-height: 1.4; } /* 「报告」那一行是个二级入口：点它在**上方**另展一层原因（.hit-sub），一级菜单因此始终两行。子菜单贴着这一行往上长，在菜单内部盖住上面那格网站信息 —— 用户 2026-09-26 定的形式。 */ .menu-report { position: relative; /* .hit-sub 相对这一行定位 */ } .menu-more { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .menu-more .chev { width: 14px; height: 14px; flex-shrink: 0; color: var(--faint); transition: transform 0.15s; } .menu-more.on .chev { transform: rotate(90deg); /* ▸ → ▾：这一层已经展开了 */ } .hit-sub { position: absolute; left: 0; right: 0; bottom: 100%; z-index: 1; /* 压在信息行上面（.hit-menu 本身已经是 z-index 5） */ margin-bottom: 4px; display: none; padding: 4px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 20px var(--shadow); } .hit-sub.on { display: block; } /* 上方实在放不下（顶到视口顶）就改成往下展 —— report.js 量过才加这个类，总比点不到强 */ .hit-sub.down { bottom: auto; top: 100%; margin: 4px 0 0; } /* 满意 / 不满意并排一行 */ .menu-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } .menu-pair .menu-item { text-align: center; } /* ── 轻提示（右上角 toast）── 借 codingcommunity 的 xcc-ui.js（XCC.toast）那套：图标 + 文字 + 关闭 + 底部倒计时条，自动消失、鼠标悬停暂停。这边只把配色换成本站的变量（亮暗各一套，见 :root 的 --ok / --warn），类名也跟着站里的习惯走（.toast.success 这种，不用 xcc 的 BEM）。现在唯一的来源是登录后那句提示：PHP 把它放在上， toast.js 读到就滑出来 —— 消息走 data-* 而不是内联