/* ============================================================ theme.css — 皮肤层：双主题（浅色 / 深色） 加载在 ui-v2.css 之后，只负责「填色」，不负责布局。 ── 两套主题是怎么做到不打架的 ────────────────────────────── 最初的写法是「一个变量名，两套值」，直接把 --bg / --text 换掉。做下去才 发现换不动 —— 因为深浅两套主题的【透明度方向是反的】： 深色主题靠「往白里提」造厚度：表面是 rgba(255,255,255,.035)， 内高光是 rgba(255,255,255,.07)，凹陷是 rgba(0,0,0,.28)。 浅色主题里同样这几个位置，往白里提完全看不见（白底上的白）， 必须换成「往黑里压」，而且压的幅度得大得多（.07 的黑在浅底上 几乎无感，要 .10~.20 才等价）。 硬换变量名的结果是浅色主题一片死平：卡片浮不起来、内高光消失、凹陷感没有。 所以真正要抽的不是颜色，是【语义槽位】。每个槽位在两套主题里各填一个 具体的值，宁可两边填的值「看起来不像是一回事」，只要它们在各自的主题里 扮演同一个角色就行： --hi 顶部内高光 —— 深色=白 .07，浅色=白 1.0（在白卡上不可见， 所以浅色主题真正的厚度来源转移到 --sh-card 上） --well 凹陷（输入框、键帽）—— 深色=黑 .28，浅色=黑 .045 --sh-card 投影 —— 深色=浓黑大扩散，浅色=淡蓝灰小扩散 这就是为什么下面两段看起来值差得很远，那是对的，不是抄错了。 强调色同样分开填：琥珀 #e8963a 在近黑上是 7.4:1，在浅底上只有 2.9:1， 当正文色直接不达标。浅色主题的 --accent 换成烧赭 #a85812（浅底 4.6:1）， 而 --accent-rgb 让全站二十多处 rgba(232,150,58,α) 的描边、辉光、选中态 跟着一起换，不用逐个改。 ── 主题是怎么选中的 ──────────────────────────────────────── :root 就是深色（也是 JS 关闭时的兜底），浅色靠 html[data-theme="light"]。 头上那段内联脚本在样式表生效【之前】就把 data-theme 写好（读 localStorage， 没有就跟随系统），所以不存在先闪一下深色再跳浅色。故意不写 @media(prefers-color-scheme) 的第二份浅色值：那会变成两份要同步维护的 浅色主题，是纯粹的负债。 ── 对比度预算（WCAG AA：正文 4.5:1，大字/图形 3:1）──────── 全部实算，脚本 work/atk-capture/palette-check.cjs 可重跑： 深色 --text #EEF1F7 / #08090D 17.7:1 ✓ --muted 6.6:1 ✓ --accent #E8963A / #08090D 7.4:1 ✓ --accent-ink 8.0:1 ✓ 浅色 --text #14161C / #F3F4F7 16.4:1 ✓ --muted 5.5:1 ✓ --accent #A85812 / #F3F4F7 4.6:1 ✓ --accent-ink 4.8:1 ✓ --dim 在两边都只有 2.8~3.3:1，只允许做线条和装饰，禁止做正文。 见 .brand small 那一组的说明。 ============================================================ */ /* 自托管字体。font-display:swap —— 字体没就绪时先用回退字体渲染文字， 绝不出现「白屏等字体」。变体字体只需声明一个 wght 范围。 */ @font-face{ font-family:"Geist";font-style:normal;font-weight:300 900;font-display:swap; src:url("vendor/fonts/geist-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:"Geist Mono";font-style:normal;font-weight:300 900;font-display:swap; src:url("vendor/fonts/geist-mono-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* ============================================================ 语义槽位 —— 深色（默认） ============================================================ */ :root{ /* 表面与描边 */ --bg:#08090d; --surface:rgba(255,255,255,.035); --surface-2:rgba(255,255,255,.062); --line:rgba(255,255,255,.078); --line-hi:rgba(255,255,255,.155); --card-grad:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012) 42%,rgba(255,255,255,.02)); --card-base:rgba(11,12,17,.72); --hi:rgba(255,255,255,.07); --hi-edge:rgba(255,255,255,.02); --well:rgba(0,0,0,.28); --well-2:rgba(0,0,0,.4); /* 文字：三级，全部冷中性（带一点蓝，不混暖灰） */ --text:#eef1f7; --muted:#8f97a8; --dim:#5f6675; /* 3.3:1 —— 仅装饰，禁止正文 */ /* 单一强调色：琥珀。 深色科技界面几乎被青蓝/紫占满了，那是「AI 味」最重的一档。琥珀在近黑上 的观感接近航空仪表、频谱仪、Braun 的橙色开关 —— 同一色相，气质完全不同。 而且顶栏的 P 字标和 favicon 本来就是琥珀，换掉等于把品牌一起扔了。 */ --accent:#e8963a; --accent-rgb:232,150,58; --accent-ink:#1a0f02; --accent-ink-soft:rgba(26,15,2,.16); --accent-ink-soft-2:rgba(26,15,2,.26); --accent-text:#f5b45e; --accent-soft:rgba(var(--accent-rgb),.10); --accent-line:rgba(var(--accent-rgb),.30); --accent-wash:rgba(var(--accent-rgb),.13); /* ui-v2.css 的历史变量名，保留别名，省掉 26 处引用改动 */ --lime:var(--accent); --lime-ink:var(--accent-ink); --orange:#ff6a3d; /* 固定/粘性表层（顶栏、底栏、弹层背板）的毛玻璃底色 */ --glass:rgba(8,9,13,.72); --glass-2:rgba(8,9,13,.86); --panel:#101218; --backdrop:rgba(4,5,8,.66); /* 设备舞台：比周围再深一档、再冷一档，像被放在凹槽里 */ --stage:#0a0b11; --stage-2:#131620; --on-stage:#eef1f7; --on-stage-dim:#8f97a8; /* 「舞台上的强调色」是个独立槽位，不能直接借用 --accent。 原因：舞台（.device-view）在深色主题下是近黑的，浅色主题下是 #e8eaf0 —— 它自己会翻转。而 --accent 在浅色主题里是 #a85812，压在 #edf0f4 的舞台底上 只有 4.49:1（要 4.5），DEVICE / 2.4.7 那行小字和型号选择器里的 01 就卡在这。 深色主题这边保持不变（#e8963a 在 #0a0b11 上是 8.28:1，本来就够）。 浅色主题改用 --accent-text 的 #8f4a0d，升到 5.83:1。 */ --on-stage-accent:#e8963a; /* 环境光 —— 两层 mesh 辉光 + 64px 仪器网格。 琥珀那团第一版是 .13 且铺到 -6%，在近黑底上直接读成一片【棕色】， 整个页面上半部像蒙了层脏滤镜。琥珀这种低明度高饱和的色配黑底，一过量 就发褐、不发暖。压到 .085 并往画面上方推出视野，只留左上角一点余晖。 另一团极淡的冷光是对位用的：纯单色径向会显得像「一个灯泡」，两团才有纵深。 */ --mesh-a:radial-gradient(ellipse 52% 38% at 18% -14%,rgba(232,150,58,.085),transparent 62%); --mesh-b:radial-gradient(ellipse 46% 38% at 88% 12%,rgba(88,130,255,.05),transparent 62%); --grid-line:rgba(255,255,255,.018); --grain:.032; /* 圆角与投影。深色下投影要更重、更黑 —— 近黑底上的浅投影完全看不见， 卡片会「浮」不起来；这里厚度的主要来源是 --hi 那条内高光。 */ --sh-card:0 1px 2px rgba(0,0,0,.55),0 18px 40px -22px rgba(0,0,0,.9); --sh-raise:0 2px 4px rgba(0,0,0,.6),0 28px 60px -24px rgba(0,0,0,.95); --sh-stage:0 2px 4px rgba(0,0,0,.6),0 30px 64px -28px rgba(0,0,0,1); --sh-accent:0 1px 2px rgba(0,0,0,.45),0 10px 28px -8px rgba(var(--accent-rgb),.45); --sh-brand:0 4px 12px -4px rgba(var(--accent-rgb),.5); /* 全站禁止 linear / ease-in-out —— 那两条是「模板感」最明显的信号 */ --ease-out:cubic-bezier(.22,.68,0,1); --ease-io:cubic-bezier(.32,.72,0,1); --font:"Geist","PingFang SC","Microsoft YaHei",-apple-system,system-ui,sans-serif; --mono:"Geist Mono","Cascadia Code",Consolas,"Microsoft YaHei","PingFang SC",monospace; --r-card:13px; --r-ctl:9px; --r-stage:16px; --r-pill:999px; color-scheme:dark; } /* ============================================================ 语义槽位 —— 浅色 只看这一段就能知道浅色主题长什么样；上面那段的注释解释了为什么 同一个槽位在两边的值「差这么远」。 ============================================================ */ :root[data-theme="light"]{ --bg:#f3f4f7; --surface:rgba(255,255,255,.72); --surface-2:rgba(255,255,255,.92); --line:rgba(20,22,28,.10); --line-hi:rgba(20,22,28,.20); --card-grad:linear-gradient(180deg,#ffffff,#fdfdff 44%,#f9fafc); --card-base:rgba(255,255,255,.9); --hi:rgba(255,255,255,.9); /* 白卡上不可见，浅色的厚度交给 --sh-card */ --hi-edge:rgba(20,22,28,.035); --well:rgba(20,22,28,.045); --well-2:rgba(20,22,28,.07); --text:#14161c; --muted:#5b6270; --dim:#8b92a0; /* 2.8:1 —— 仅装饰，禁止正文 */ /* 浅底上的琥珀必须压深才够对比：#e8963a 在 #f3f4f7 上只有 2.9:1， 连「大字/图形」的 3:1 都不到。换成烧赭 #a85812（4.6:1）。 */ --accent:#a85812; --accent-rgb:168,88,18; --accent-ink:#fff8ef; --accent-ink-soft:rgba(255,248,239,.20); --accent-ink-soft-2:rgba(255,248,239,.34); --accent-text:#8f4a0d; --accent-soft:rgba(var(--accent-rgb),.09); --accent-line:rgba(var(--accent-rgb),.32); --accent-wash:rgba(var(--accent-rgb),.10); --glass:rgba(246,247,250,.76); --glass-2:rgba(246,247,250,.9); --panel:#ffffff; --backdrop:rgba(20,22,28,.34); /* 浅色主题下设备舞台不做「深色凹槽」——那会在整页浅底上凭空插一块黑， 读起来像抄错了。改成比周围【深半档】的冷灰，凹陷感由内阴影给。 */ --stage:#e8eaf0; --stage-2:#f2f3f7; --on-stage:#14161c; --on-stage-dim:#5b6270; --on-stage-accent:#8f4a0d; /* = --accent-text，在 #edf0f4 的舞台底上是 5.83:1 */ /* 浅色主题的 mesh 比深色主题更难伺候：深色底上辉光是「发光」，浅色底上 同样的 alpha 是「污渍」。第一版照搬深色的量级（.14/.10）截出来右上角 一整片蓝紫、左上角一片橘，像两块没擦干净的印子。压到 .09/.05 并让 它们更快收边（transparent 52% 而不是 62%）才只剩一层氛围。 */ --mesh-a:radial-gradient(ellipse 50% 34% at 16% -16%,rgba(232,150,58,.09),transparent 52%); --mesh-b:radial-gradient(ellipse 44% 34% at 90% 8%,rgba(88,130,255,.05),transparent 52%); /* 网格在浅色底上要比深色底更淡才等价。深色那边 .018 的白线几乎看不出来， 浅色这边照抄 .026 的深线，整页就成了一本方格纸 —— 实测网格线的亮度差 是 12 级（231↔243，底色均值 240），换算成韦伯比 5%，眼睛在这个亮度区间 对绝对差比对相对差敏感得多。压到 .016 后差值是 7 级，退回到「有刻度」 而不是「有格子」。 */ --grid-line:rgba(20,22,28,.016); --grain:.026; --sh-card:0 1px 2px rgba(20,22,28,.05),0 12px 26px -16px rgba(20,22,28,.16); --sh-raise:0 2px 6px rgba(20,22,28,.07),0 26px 52px -22px rgba(20,22,28,.22); --sh-stage:inset 0 2px 8px -4px rgba(20,22,28,.14),inset 0 -1px 0 rgba(255,255,255,.9); --sh-accent:0 1px 2px rgba(20,22,28,.12),0 10px 24px -10px rgba(var(--accent-rgb),.42); --sh-brand:0 4px 12px -4px rgba(var(--accent-rgb),.42); color-scheme:light; } html{color-scheme:dark} html[data-theme="light"]{color-scheme:light} /* ---------- 基础 ---------- */ /* 背景是三层叠加，从远到近：mesh 辉光 → 64px 仪器网格 → 页面底色。 网格压到几乎看不见，它的作用不是被看见，而是让大面积纯色「有刻度」。 全部是 background-image 叠加，不占 DOM、不触发重绘。 */ body{ background:var(--bg); color:var(--text); background-image:var(--mesh-a),var(--mesh-b), linear-gradient(var(--grid-line) 1px,transparent 1px), linear-gradient(90deg,var(--grid-line) 1px,transparent 1px); background-size:auto,auto,64px 64px,64px 64px; background-attachment:fixed,fixed,scroll,scroll; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; transition:background-color .38s var(--ease-out),color .38s var(--ease-out); } /* 颗粒层：要的是「胶片/磨砂」的微质感，不是滤镜特效 —— 纯平面矢量背景 永远显得「数字、无菌」，一层极淡噪点就能把它压回「实物」。深色下它同时 压低大面积色带（banding），浅色下它给白底一点纸感。 为什么用位图而不是 SVG feTurbulence：先写的正是那段到处能搜到的 feTurbulence + rect 的 data URI，实测【画不出来】。伪元素生成了、样式全对、 data URI 也能解码成 300x150 —— 但把解码结果画到 canvas 上读回来， 45000 个像素的 alpha 全是 127.5，也就是一块均匀半透明灰，不是噪点。 叠上去和关掉它像素级一致。别再试 SVG 那条路。 现在这张是 ffmpeg 生成的真噪点，64x64 灰度、平铺： ffmpeg -f lavfi -i "color=c=gray:s=64x64" -vf "noise=alls=100:allf=t+u,eq=contrast=1.9" \ -frames:v 1 -pix_fmt gray noise64.png 判据是压缩率：真噪点几乎不可压缩（≈7~8 bit/px），早先用 geq=random() 生成的只有 927 字节，那种压缩率本身就说明它根本不是随机像素。 z-index 为什么是 100 —— 别再调回去：.device-gate 自己带实心背景且 position:fixed;z-index:18，整块盖住连接页。颗粒层写在 z-index:1 时被它 整个吃掉，只在顶栏那条 72px 缝里露出来（对照实验最大差分只有 2/255）。 也不能写 -1：body 的背景色会传播到 canvas，负 z-index 同样被盖住。 全项目最大 z-index 是 40，这里取 100 —— 压在弹层之上是有意的： 胶片颗粒本来就该在画面上，不在画面下。 */ body::after{ content:"";position:fixed;inset:0;z-index:100;pointer-events:none; opacity:var(--grain);background-repeat:repeat; background-image:url("data:image/png;base64,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"); } /* 数字统一用等宽数字。配置页全是数据（DPI、回报率、消抖毫秒、按键编号）， 比例数字在数值变化时会左右抖动，等宽数字不会，且天然更「仪表」。 这一条是零成本的质感提升。 */ .dpi-item strong,.dpi-item input,.key-now b,.fn-bytes, output,#brightnessOut,#debounceOut,.gate-meta{font-variant-numeric:tabular-nums} /* ---------- 顶栏 ---------- */ .brandmark{ border-radius:8px; box-shadow:0 0 0 1px var(--hi),var(--sh-brand); } .outline-button{border-radius:var(--r-ctl)} .outline-button:hover{ color:var(--accent-text); border-color:var(--accent-line); background:var(--accent-soft); } /* ui-v2.css 原为硬编码 rgba(201,255,61,.65) 荧光绿辉光，别名覆盖不到，单独换琥珀 */ .connection.connected #statusDot{ box-shadow:0 0 0 3px rgba(var(--accent-rgb),.20),0 0 10px rgba(var(--accent-rgb),.55); } /* ---------- 主题切换：右上角，两段式 ---------- ATK 的做法是右上角一个太阳图标。这里做成两段式（浅/深各一段），原因是 一个图标只能表达「当前是什么」，不能表达「可以选什么」—— 用户点下去之前 不知道会切到哪。两段并把当前项的滑块点亮，是「选择」而不是「开关」。 滑块是 .theme-thumb，靠 data-theme 平移，不做 JS 逐帧计算。 */ .theme-switch{ position:relative;display:flex;align-items:center;gap:2px;padding:3px; border:1px solid var(--line);border-radius:var(--r-pill); background:var(--well); } .theme-switch button{ position:relative;z-index:1; width:30px;height:26px;display:grid;place-items:center; background:transparent;color:var(--dim);border-radius:var(--r-pill); transition:color .3s var(--ease-out); } .theme-switch button:hover{color:var(--text)} .theme-switch button[aria-checked="true"]{color:var(--accent-text)} .theme-switch svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round} .theme-thumb{ position:absolute;z-index:0;top:3px;left:3px;width:30px;height:26px; border-radius:var(--r-pill);background:var(--surface-2); box-shadow:inset 0 1px 0 var(--hi),0 1px 2px rgba(0,0,0,.18); transition:transform .42s var(--ease-out); } html[data-theme="dark"] .theme-thumb{transform:translateX(32px)} /* ---------- 文字层级 ---------- */ .eyebrow{color:var(--accent-text)} .notice>span{color:var(--accent-text)} .gate-chip b,.gate-title em{color:var(--accent-text)} .macro-loading{color:var(--accent-text)} /* 小号标注类文字（eyebrow / 键头 / mono 标签）加一点字距。 大写字母在小字号下会挤成一团，+.14em 左右的字距是这类标签的标准做法。 */ .eyebrow,.brand small{letter-spacing:.14em} /* ui-v2.css 里用 var(--dim) 当文字色的那几处。--dim 只有 2.8~3.3:1， 达不到 AA 的 4.5:1（要达标得暗到跟 --muted 差不多，第三级就失去意义了）。 结论：只保留两级正文色，这几处统一提到 --muted。 */ .brand small,.profiles>span,.section-title>span,.dpi-item span{color:var(--muted)} /* ---------- 连接页容器 ---------- */ .device-gate{background:transparent} /* 让 body 的 mesh 辉光透上来 */ /* ---------- 配置档案切换：胶囊按钮，未选中是玻璃，选中是亮片 ---------- */ .profiles>div{background:transparent;border:0;padding:0;gap:6px;display:flex} .profiles button{ border-radius:var(--r-pill); border:1px solid var(--line); background:var(--surface); color:var(--muted); transition:background .26s var(--ease-out),color .26s var(--ease-out),border-color .26s var(--ease-out); } .profiles button:hover{border-color:var(--line-hi);color:var(--text)} .profiles button.active{ background:var(--accent); color:var(--accent-ink); border-color:transparent; } /* ---------- 卡片：Double-Bezel（外托 + 内芯）---------- soft-skill 的核心手法：卡片不要平铺在背景上，要像「一块玻璃嵌在铝托里」。 两套theme的实现方式不同，但都由这几个槽位描述： --hi 顶部内高光，光从上方来（深色的唯一厚度来源） --hi-edge 一圈极淡的内描边收口 --sh-card 外投影（浅色的主要厚度来源） 表面用「自上而下的极淡渐变 + 半透明底」而不是单一纯色 —— 单色在近黑背景上看起来是「挖了个洞」，渐变才像一块受光的玻璃。 */ .surface{ position:relative; background:var(--card-grad),var(--card-base); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:inset 0 1px 0 var(--hi),inset 0 0 0 1px var(--hi-edge),var(--sh-card); } /* ---------- 设备舞台 ---------- */ .device-view{ background:linear-gradient(158deg,var(--stage-2) 0%,var(--stage) 62%); border:1px solid var(--line); border-radius:var(--r-stage); box-shadow:inset 0 1px 0 var(--hi),var(--sh-stage); color:var(--on-stage); } .device-view .device-heading h2{color:var(--on-stage)} .device-view .eyebrow{color:var(--on-stage-accent)} .device-view .ready-state{color:var(--on-stage-dim)} /* 按键面板标题右边那颗「当前按键」胶囊：编号坐进一个凹槽，名字跟在后面。 编号用 --accent-text 而不是 --accent —— 12px 的字要过 AA，浅色主题下 --accent(#a85812) 在卡片底上只有 4.0:1，--accent-text 是 5.4:1。 */ .key-now{ display:flex;align-items:center;gap:9px; padding:4px 12px 4px 4px;border-radius:var(--r-pill); background:var(--well);box-shadow:inset 0 0 0 1px var(--hi-edge); } .key-now b{ width:26px;height:26px;display:grid;place-items:center;border-radius:var(--r-pill); background:rgba(var(--accent-rgb),.15);color:var(--accent-text); font:600 12px var(--mono); } .key-now i{font-style:normal;font-size:13px;color:var(--muted);white-space:nowrap} .model-switch{border-top:1px solid var(--line)} .model-switch button{color:var(--muted)} /* ui-v2.css 给序号 small 的是 --dim（3.3:1）。9px 的等宽小字在这个对比度上 读不出来，实测没过 AA。--dim 只留去做线条和描边。 */ .model-switch button small{color:var(--muted)} .model-switch button.active{ color:var(--on-stage); background:var(--accent-soft); box-shadow:inset 0 -2px 0 var(--accent); } .model-switch button.active small{color:var(--on-stage-accent)} /* ---------- 表单控件 ---------- */ .dpi-item{ background:var(--well); border:1px solid var(--line); border-radius:var(--r-ctl); } .dpi-item.active{ background:var(--accent-soft); border-color:var(--accent-line); } .dpi-item input[type=checkbox]{accent-color:var(--accent)} .sensor-row select,.field select{ background:var(--well); border:1px solid var(--line); border-radius:var(--r-ctl); color:var(--text); } .sensor-row select:focus,.field select:focus{ border-color:var(--accent); outline:2px solid rgba(var(--accent-rgb),.25); outline-offset:1px; } .debounce-field input{accent-color:var(--accent)} /* 灯效色块的取色框：原生 input[type=color] 的边是浏览器画的灰线， 在深色底上是一道贼亮的白框，所以描边用 --hi-edge 压掉。 */ .color-item input[type=color]::-webkit-color-swatch{border-color:var(--hi-edge)} .map-option{border-radius:var(--r-ctl)} /* ---------- 按钮：Button-in-Button ---------- soft-skill：按钮里的箭头/加号不能裸放在文字旁边，要嵌进自己的圆形底座， 像一块「岛」。好处是悬停时这个底座自己能动 —— 平移＋微放大产生内部张力， 比整颗按钮只换背景色高级得多。 结构不动（还是 文字图标），把 本身做成圆底座。 圆底色的 alpha 走 --accent-ink-soft：深色主题的按钮底是琥珀，圆底要靠 加深来读出来；浅色主题的按钮底是烧赭，圆底反而要提亮。 */ .apply-button b{ display:grid;place-items:center; width:28px;height:28px;border-radius:50%; background:var(--accent-ink-soft); transition:transform .34s var(--ease-out),background .34s var(--ease-out); } .apply-button:hover b,.apply-button:focus-visible b{transform:translateX(3px);background:var(--accent-ink-soft-2)} /* 连接页那颗芯片按钮（.gate-chip）不在这里定义 —— 它是一颗【反色】的深色 药丸，和 .apply-button 的「琥珀实心」不是一套语汇，样式全部归 connect.css。 */ /* ---------- 固件 / 文件按钮 ---------- */ .file-button{ background:var(--well); border:1px solid var(--line); border-radius:var(--r-ctl); color:var(--text); } .file-button:hover{ border-color:var(--accent-line); background:var(--accent-soft); color:var(--accent-text); } /* ---------- 底栏 ---------- */ .text-button{border-radius:var(--r-ctl)} .text-button:hover{color:var(--accent-text)} .apply-button{ border-radius:var(--r-ctl); background:var(--accent); color:var(--accent-ink); border:0; box-shadow:var(--sh-accent); } .apply-button:hover{background:var(--accent-text);color:var(--accent-ink)} .apply-button:disabled{box-shadow:none;opacity:.55} /* ---------- 浮层 ---------- */ #toast{ border-radius:var(--r-ctl); background:var(--text); color:var(--bg); box-shadow:var(--sh-raise); } dialog{ border-radius:var(--r-card); border:1px solid var(--line-hi); background:var(--panel); color:var(--text); box-shadow:var(--sh-raise); } dialog::backdrop{background:var(--backdrop);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)} /* ---------- 焦点可见性（键盘操作）---------- */ :where(button,select,input,a,[tabindex]):focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-ctl); } /* ============================================================ 克制的微交互（全站） ============================================================ */ /* 1) 指针下的卡片聚光：卡片在光标位置透出一团琥珀光。 由 motion.js 把光标位置写成 --mx/--my（卡片内百分比），这里只负责画。 默认 --spot 为 0，所以没鼠标（触屏 / 键盘）时它完全不出现。 实现上刻意【不用】「mask 挖空只剩边框」那套写法。试过： padding:1px + 双层 mask + mask-composite:exclude 本意是只点亮 1px 的边框圈，但多层 mask 简写与 -webkit-mask-composite 在各家实现里对不齐，实测整个伪元素直接不渲染（截图里一点光都没有）。 改成不依赖 mask 的两层，都稳： ::before 内部辉光，跟着光标走，只过渡 opacity :hover inset 内描边，给「边缘亮起来」的那一下 */ .spotlight{position:relative} .spotlight::before{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; opacity:var(--spot,0);transition:opacity .38s var(--ease-out); background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%), var(--accent-wash),rgba(var(--accent-rgb),.045) 46%,transparent 72%); } /* 2) 卡片悬停：边缘亮一下 + 投影加深。 用 box-shadow 而不是 transform 位移 —— 卡片在栅格里一挪会把相邻元素 挤动，整页跟着抖，在工具型界面里很烦。 */ .surface{transition:box-shadow .34s var(--ease-out),border-color .34s var(--ease-out)} .surface:hover,.surface:focus-within{ border-color:var(--accent-line); box-shadow: inset 0 1px 0 var(--hi), inset 0 0 0 1px rgba(var(--accent-rgb),.12), var(--sh-raise); } /* 4) 状态点呼吸。只在已连接时跑 —— 未连接时它是灰的，动起来会误导。 */ @media (prefers-reduced-motion:no-preference){ .connection.connected #statusDot{animation:dotBreath 2.6s var(--ease-io) infinite} /* DPI 选中的那一格：选中瞬间给一次轻微的「落定」脉冲 */ .dpi-item.active{animation:chipSettle .42s var(--ease-out)} } @keyframes dotBreath{ 0%,100%{box-shadow:0 0 0 3px rgba(var(--accent-rgb),.20),0 0 10px rgba(var(--accent-rgb),.55)} 50% {box-shadow:0 0 0 5px rgba(var(--accent-rgb),.08),0 0 16px rgba(var(--accent-rgb),.75)} } @keyframes chipSettle{ from{transform:scale(.965)} to{transform:none} } /* ---------- 自定义光标 ---------- 从新版桌面驱动的 .cur 提取，内联为 data URI。 内联原因：Cloudflare Pages 把 .cur 当 application/octet-stream 下发， 且带 X-Content-Type-Options:nosniff，Chrome 可能拒绝解码成一幅图 → 光标静默失效。热点坐标取自 .cur 文件头的 xHotspot/yHotspot。 （连接页那颗芯片按钮 .gate-chip 的光标在 connect.css 里单独给， 它是 pill 形，焦点区和这套方按钮不一样。） */ button,.apply-button,.file-button,.outline-button, .model-switch button,.profiles button,select, input[type=checkbox],input[type=range],.dpi-item,.theme-switch button {cursor:url("data:image/x-icon;base64,AAACAAEAEBACAAgABQCwAAAAFgAAACgAAAAQAAAAIAAAAAEAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA////AAPwAAAD8AAAB/AAAA/4AAAf+AAAH/wAAD/8AAB3/AAAZ/4AAAf2AAANtgAADbIAABmwAAAZsAAAAYAAAAAAAAD4BwAA+AcAAPAHAADgAwAAwAMAAMABAACAAQAAAAEAAAAAAACQAAAA4AAAAOAAAADABQAAwAcAAOQPAAD+fwAA") 8 4,pointer} button:active,.apply-button:active,.file-button:active, .outline-button:active,.profiles button:active,.theme-switch button:active {cursor:url("data:image/x-icon;base64,AAACAAEAICACAAcAAwAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAgAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAA////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAH4AAAB+AAAA/gAAAf8AAAP/AAAD/4AAA/+AAAD/gAAA/4AAAf6AAAG2AAAAAAAAAAAAAA//////////////////////////////////////////////////////////////////////////////////////////////////////AP///wD///4A///8AH//+AB///gAP//4AD///AA///4AP//8AD///AB///5J////////8=") 7 3,pointer} .text-button,#resetBtn {cursor:url("data:image/x-icon;base64,AAACAAEAICAQAAcAAwDoAgAAFgAAACgAAAAgAAAAQAAAAAEABAAAAAAAAAIAAAAAAAAAAAAAEAAAAAAAAAAAAAAAgICAAP///wAAAP8AQED/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABEAABEAAAAAAAAAAAAAAAAQ0AENAAAAAAAAAAAAAAAAAQ0Q0AAAAAAAAAAAAAAAiIiQzQAAAAAAAAAAAAAAAIiIkM0AAAAAAAAAAAAAAAiIiQ0Q0AAAAAAAAAAAAACIiJDQhQ0AAAAAAAAAAAAIiIiRCIARAAAAAAAAAAAACIiIiIiIAAAAAAAAAAAAAAiIiIiIiAAAAAAAAAAAAAAACIiIiIgAAAAAAAAAAAAAAAiIiIiIAAAAAAAAAAAAAACIiIiICAAAAAAAAAAAAAAAiAiAiAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD//////////////////////////////////////////////////////////////////////////////////////zz///8Y////gf//8AP///AD///gAf//wAD//4AE//+AA///gAP//8AD///gA///wAP//8AH///kn////////w==") 7 3,pointer} /* ---------- 主题切换：一块幕布的淡出 ---------- 试过「给所有大面积元素补 transition」，不行，原因是硬的： .surface 的底是 background:linear-gradient(...),color —— 渐变属于 background-image，background-color 的 transition 根本碰不到它。 结果是底色平滑过渡、卡片却「啪」地硬切一下，比全都硬切还难看。 也试过 View Transitions API（新旧两帧各截一张整屏图，再给新帧一圈 clip-path 圆形揭示）。观感好，但代价是实的，完整理由写在 motion.js 文件头：它必须在动画开始【之前】光栅化两张整屏位图（点下去到画面有 反应之间那段空白就是它），而且逐元素的颜色过渡会和它一起起跑，把整件 事做第二遍。已撤掉。 现在是：一块 fixed 幕布刷上【旧主题的底色】，翻主题，幕布淡出。 唯一在动的是 opacity，纯合成器工作。 */ .theme-veil{ position:fixed;inset:0;pointer-events:none; /* 90：压过所有内容（全项目最大的是 #toast 的 40），但让 body::after 那层颗粒留在上面 —— 换肤期间应该只有颜色在动，质感不该跟着消失。 */ z-index:90; will-change:opacity; } /* 换肤期间关掉逐元素的颜色过渡。平时它们是界面该有的手感（悬停、聚焦、 选中态），但换肤那一刻，每个带颜色过渡的元素都会同时起跑一条 260~380ms 的过渡 —— 配置页上几百个元素，每个都要自己重算样式、自己重绘。而幕布 已经做了整屏的视觉过渡，这些是纯粹的重复劳动。 只留下主题切换按钮自己那两条：它不靠幕布遮蔽，跳变会很明显。 */ html.theming *, html.theming *::before, html.theming *::after{transition:none!important} html.theming .theme-thumb{transition:transform .42s var(--ease-out)!important} html.theming .theme-switch button{transition:color .3s var(--ease-out)!important} /* ---------- 动效偏好 ---------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} }