/* 品牌字体统一(用户裁定 2026-08-27):HarmonyOS Sans SC 可变字重(单文件 100-900,fvar 实证) embed 进 Go 二进制;/static/fonts 服务 immutable——浏览器一次性拉取后永久缓存。 覆写 Tabler 字体变量=单一旋钮,全部组件继承;font-display:swap 先系统字体后换(免白屏)。 */ @font-face{ font-family:'HarmonyOS Sans SC'; src:url('/static/fonts/HarmonyOS_Sans_SC.woff2') format('woff2'); font-weight:100 900; font-display:swap; } :root{--tblr-font-sans-serif:'HarmonyOS Sans SC',system-ui,-apple-system,'Segoe UI',Roboto,'PingFang SC','Microsoft YaHei',sans-serif} /* 显隐单一真相(2026-08-27 mob-audit D1 根治):JS 只挂/摘 .is-off 类,永不写 display 值—— 「恢复成什么 display」由组件自身 CSS 唯一持有(Tabler 实测:.alert/.empty/.card 原生 flex, .row 原生 flex)。家族案底:inline 'block' 恢复值压掉原生 flex 四进宫(view-login@768 左飘 =audit D1;load-fail 2026-08-24 d-flex 常驻横幅;.empty×3 曾各修一次)。!important 确保 隐藏恒胜(含未来误挂的 d-* 工具类——旧案的反向)。原生 display:none 的组件(.modal)可见值 由 :not(.is-off) 在此钉死(bootstrap JS 不在场,inline display 旧通道已废)。 */ .is-off{display:none!important} .modal:not(.is-off){display:block} .avatar-tap{position:relative;cursor:pointer} .avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit} /* 头像圆形单一真相:容器持有圆角(Tabler .avatar-rounded),内容层全量继承——选择器钉 .avatar 全家族 而非只 .avatar-tap(消息行归属头像曾漏继承显方角,2026-08-27 用户报) */ .avatar-tap .tap-icn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.35);border-radius:inherit;color:#fff;opacity:0;transition:opacity .15s;pointer-events:none} .avatar-tap .tap-icn svg{width:1.25rem;height:1.25rem} /* 顶栏拆条带(bing-bg 线定案):navbar 透明无边;右侧图标组收进悬浮玻璃药丸(chip 承载 ghost 钮); 整页零横条,壁纸贯通。正文卡片实底红线不破。 */ header.navbar{background:transparent;border-bottom:0;box-shadow:none} /* Tabler navbar 的「边框」是 inset box-shadow 非 border(线 hunt 实证:inset 0 -1px 0 全宽)——删 border 杀不到它 */ #nav-actions{ background:rgba(25,33,48,.55);border-radius:.75rem;padding:.25rem; -webkit-backdrop-filter:var(--glass-chrome);backdrop-filter:var(--glass-chrome); } [data-bs-theme=light] #nav-actions{background:rgba(255,255,255,.68)} #nav-actions .btn{border:0;box-shadow:none} /* chip 内 ghost 化:药丸已是容器,钮再带描边/影=框中框+分隔线(用户点名删) */ /* chrome 文字可读性单一真相(用户终裁:改文字,不加背景——品牌胶囊/tab 填充全撤,它们本身就是 「线」的来源):暗色下裸浮文字=提亮+投影扛壁纸;浅色文字本就够,不动 */ header.navbar .navbar-brand{background:transparent;padding:0;margin-right:0;-webkit-backdrop-filter:none;backdrop-filter:none} [data-bs-theme=dark] .navbar-brand, [data-bs-theme=dark] #main-tabs .nav-link, [data-bs-theme=dark] .page-title, [data-bs-theme=dark] #lbl-devcount, [data-bs-theme=dark] #media-count{ color:#eef1f5; text-shadow:0 1px 3px rgba(0,0,0,.55), 0 0 8px rgba(0,0,0,.25); } [data-bs-theme=dark] #main-tabs .nav-link{background:transparent} [data-bs-theme=dark] #main-tabs .nav-link.active{background:transparent;color:#fff;font-weight:600} .page-header .btn{border-radius:999px} .page-title > [data-icon]{margin-right:.5rem} /* 三 tab 页头图标间距单一 owner(图标名与 tab 栏同源:inbox/devices/folder) */ #main-tabs{position:sticky;top:0;z-index:100;padding:.25rem 0 0;margin-bottom:.75rem;background:transparent} /* 边线策略单一真相(用户裁定:标题栏/tab 栏/内容间细线=壁纸时代的割裂源):浮件靠填充与影定义, 全线退场——nav-tabs 容器底线删、card 1px 边框删;taps 三颗全胶囊(非 active 也有淡填充,不再是裸字) */ .nav-tabs{border-bottom:0} .card{border:0} #main-tabs .nav-link{border-radius:.375rem;padding:.25rem .75rem;margin-right:.25rem;background:rgba(127,143,166,.12)} #main-tabs .nav-link.active{background:rgba(127,143,166,.28)} #devices-grid>.col{display:flex} #devices-grid>.col>.card{flex:1 1 auto} #devices-grid>.col>.card>.card-body{display:flex;flex-direction:column;height:100%} #devices-grid .card-actions{margin-top:auto} .card-actions{padding:0} /* 左对齐单一真相:Tabler .card-actions 自带 8px padding(为 header 负边距补偿设计), 卡体用法=按钮右缩进不对齐正文(实测 33 vs 25);设备卡+群卡两处同修 */ #devices-grid .flex-fill{min-width:0} .d-name,.d-src,.d-typ,.d-slug{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* 图标化批:meta 拆两行(来源/类型,用户裁定) */ .d-dot{display:inline-flex;vertical-align:-0.2rem;margin-left:.375rem} /* 在线/离线状态圆点(用户裁定,修订 2.6 冻结令):绿=在线/灰=离线 */ .d-dot svg{width:.875rem;height:.875rem} .m-act{white-space:nowrap} /* 动作钮一行排死——窄列换行叠罗汉（用户 2026-08-27 报布局乱套）*/ .m-name,.m-meta{overflow-wrap:anywhere} /* 长文件名（WeChat_xxx 不可断 ASCII 串）允许任意断，列不再被撑爆 */ .m-thumb{width:4.5rem} /* 缩略图列宽单一 owner（th/td 共 class 恒定）——懒加载图迟到不再 重排列宽（rAF 探针实证:1280/1136/768 首帧后 thumb 列 +26px 把文件名列推右,用户报「瞬间右移」;空单元格占位=布局稳定前提） */ .device-icon svg{width:2rem;height:2rem} .brand-icon{width:2rem;height:2rem;border-radius:.375rem;vertical-align:-.5rem} .brand-h{color:#007DFF;font-weight:700} /* 开屏字标同款:鸿蒙系统蓝(module.json5 splash 定稿);图标不动只换字(用户纠正) */ .brand-rest{font-weight:600} [data-icon] svg{width:1.25rem;height:1.25rem;vertical-align:-0.25rem} .btn-icon [data-icon]{display:inline-flex} /* icon-only 钮居中修:svg 的 baseline 对齐偏移(-0.25rem 为图文混排设计) 在纯图标钮里把图标拽离中心——span 收缩包裹后由 .btn-icon 的 flex 居中接管(用户实证「图标不在框中间」) */ #toast{position:fixed;right:1rem;bottom:1rem;z-index:1080; /* 隐藏走 is-off(显隐单一真相);可见=恒挂 .toast.show(Tabler :not(.show) 兜底) */ background:color-mix(in srgb, var(--tblr-bg-surface) 88%, transparent);border:0; -webkit-backdrop-filter:var(--glass-chrome);backdrop-filter:var(--glass-chrome)} /* chrome 浮件玻璃(配方单一真相在 :root 变量族) */ /* 收展动画(2026-08-27 用户裁定):grid-template-rows 0fr→1fr 高度插值——纯 CSS,JS 的 .editing 类 切换零改动;内容层淡入+上移。reduced-motion 全关 */ .edit-form{display:grid;grid-template-rows:0fr;transition:grid-template-rows .22s cubic-bezier(.16,1,.3,1)} .edit-form-in{overflow:hidden;min-height:0;opacity:0;transform:translateY(-6px);transition:opacity .2s ease-out,transform .2s ease-out} /* 动画批(2026-08-27):弹卡进出场——入 200ms expo-out(下移 12px+缩 .98+淡入),出同曲线反向; 显隐走 is-off 类(显隐单一真相,见文件头),动画只动 opacity/transform;.in 类由 modalIn/modalOut 单一真相切换 */ .modal .modal-dialog{opacity:0;transform:translateY(12px) scale(.98);transition:transform .2s cubic-bezier(.16,1,.3,1),opacity .2s cubic-bezier(.16,1,.3,1)} .modal.in .modal-dialog{opacity:1;transform:none} @media (prefers-reduced-motion: reduce){.modal .modal-dialog{transition:none;opacity:1;transform:none}} /* 页头→内容统一呼吸(2026-08-27 用户实证:宽窗计数行→群卡仅 4px 贴死;Tabler .page-header 底边距为 0, 全靠后继元素自觉——三视图同律钉死;窄窗按钮换行态由 btn-list 自身间距兜,两档都 ≥28px) */ .page-wrapper .page-header{margin-bottom:1.5rem} /* 页头→内容间距单一 owner(特异性对齐 Tabler .page-wrapper .page-header);后继元素不再挂 mt——相邻 margin 折叠塌成 max(),两处各设=恒等于大者(实测 16 卡死的第二层根因) */ /* 视图切换动画(2026-08-27 用户裁定补):showTab 单一 owner 加 .view-in 类触发;display 硬切无法 transition,走 keyframes(只动 opacity/transform 不扰布局与 scroll 还原);reduced-motion 关 */ @keyframes viewIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} .view-in{animation:viewIn .18s ease-out} @media (prefers-reduced-motion: reduce){.view-in{animation:none}} /* 玻璃配方单一真相(2026-08-27 收口):blur 半径+saturate 一处定义,分档两变量—— chrome(chip/toast)=12px,弹卡=16px(表单阅读加浓);消费方只引用不写配方。 分层裁定(用户「抽了吧」):①正文卡=纯透一点(92% 面,零 blur):长滚动面 backdrop-filter= 重绘成本,文字对比度不赌当日 Bing 亮度;②弹卡=88% 面+玻璃:短时浮层+自带遮罩, 一次性成本;③chrome=chip 配方。对比度底线=最坏壁纸下正文对比 ≥4.5(mob-06 GLASS 断言)。 */ :root{--glass-sat:saturate(160%); --glass-chrome:blur(12px) var(--glass-sat); --glass-modal:blur(16px) var(--glass-sat); --card-face:88%} /* 浅色卡透 12%(玻璃可见性;深色已显透保 92) */ [data-bs-theme=dark]{--card-face:92%} .card{--tblr-card-bg:color-mix(in srgb, var(--tblr-bg-surface) var(--card-face), transparent)} .modal .modal-content{background-color:color-mix(in srgb, var(--tblr-modal-bg, var(--tblr-bg-surface)) 88%, transparent); -webkit-backdrop-filter:var(--glass-modal);backdrop-filter:var(--glass-modal)} /* 折射档(html.refract-on=theme 域特性检测后挂;Safari 无此类=上式磨砂):面透提到 76% (88% 白面会盖死位移)+specular 高光边(glass.md §3 可直接抄值)——位移链由 JS 按尺寸注入 */ .refract-on .modal .modal-content{background-color:color-mix(in srgb, var(--tblr-bg-surface) 76%, transparent); box-shadow:inset 0 0 4px 0 #fafafa80, var(--tblr-modal-box-shadow)} /* ── 光感层(glass.md §5 已验证路线,2026-08-27 用户要「真玻璃的灵动」)── 灵动=对光/指针的响应,不是更透(位移已双死)。三层全 gradient/box-shadow,零 backdrop 成本: ①卡面顶缘高光=厚度感(玻璃接光在上缘) ②主钮三层层光=光源 ③dark 卡受光 spotlight(pointer 追光,JS 在 10-theme 单监听 rAF)+hover 边光转主色。浅色 spotlight 白卡不可见硬加=灰糊(§5), CSS 钉 dark 域,浅色只享①②;reduced-motion 跳过受光(红线)。 */ .card{box-shadow:inset 0 1px 0 rgba(255,255,255,.10), var(--tblr-card-box-shadow)} .btn-primary{box-shadow:0 0 0 1px rgba(var(--tblr-primary-rgb),.32), 0 4px 16px rgba(var(--tblr-primary-rgb),.35), 0 8px 40px rgba(var(--tblr-primary-rgb),.18)} .btn-primary:hover{box-shadow:0 0 0 1px rgba(var(--tblr-primary-rgb),.45), 0 6px 20px rgba(var(--tblr-primary-rgb),.45), 0 10px 48px rgba(var(--tblr-primary-rgb),.25)} /* 光感配方单一真相(用户「抽工厂」裁定 2026-08-27):CSS 的工厂=变量族(同 --glass-* 同构), 一处定义,卡/弹卡/toast/输入条/环境层消费;JS 拼样式字符串=第二真相,否。 参数=用户三轮裁定:卡内就剩最内圈(80px)/边缘对比度加强(.20)/环境软光 480。 */ /* 光感配方单一真相:指针光晕**单族**(用户裁定外观统一,2026-08-27 曾 env/core 两族两外观=屎山)—— 同半径/浓度/衰减,环境只是宿主不同(--px 视口位 vs --mx 卡内位)。受光层 mix-blend-mode:screen =发光叠加,暗玻璃小面(胶囊/页签)上才看得见。 */ :root{--light-r:80px; --light-falloff:65%; --light-a-base:.13; /* 光球/面斑基准(JS canvas 读 base×gain,--light-a 中间变量已随全局 Canvas 化删除——消费方唯一在 15-light 绘制循环) */ --light-gain:1; /* 光感增益总闸(2026-08-29 面板):JS canvas 读裸数自乘;面板写 inline,分主题 各自生效(浅色档覆盖值) */ --light-edge-base:.20; --light-edge-a:calc(var(--light-edge-base) * var(--light-gain)); /* 边缘单一 真相拆 base 裸数(JS 读 calc 字面会 NaN——JS 读 base 自己乘 gain);消费方=15-light JS 读 base (边缘带段级 α/卡片上缘/focus ring/input 环——.lit::after 伪元素通道 2026-08-29 Canvas 化已退役,清屎山②-3 订正) */ --light-dsurface:.03; /* 卡面补偿 Δ(面板可调):on-surface calc(base×gain+Δ),用户裁定缺省 3% */ --light-rgb:var(--tblr-primary-rgb); /* 受光色独立(2026-08-29 面板):曾借品牌色,调光会连坐按钮/ 链接色——解耦,默认=品牌蓝视觉零变;面板改色 JS 写 inline 裸 rgb 覆盖(var 字面 JS 读不出,fallback 链在 15-light vars) */ --light-recess:inset 0 1px 3px rgba(0,0,0,.15); --light-blend:screen} /* input 受光主体=边缘(用户裁定 2026-08-29):框内斑=「边缘态+一点」——公式唯一在 15-light JS 派生 (edgeA+.08,CSS calc 经 getPropertyValue 读回的是字面量 parseFloat 即 NaN,故 JS 侧派生);裸 input 无伪元素(平台边界)的边缘带=15-light outline 环,α 同用 edge 家——边缘受光强度单一真相。曾立的 --light-input-a/.24 提档与 --light-input-edge-a 双变量=主体错认+配方第三家,均已回退。 */ /* ⚠️var-in-var 冻结陷阱(2026-08-27 用户抓「卡片光晕丢了」):custom property 里引用 var() 会在 **声明元素**代换后继承——per-element 变量(--mx/--my/--light-k)钉死 :root 默认值(alpha 0/50% 0%)。 故受光梯度必须在使用点属性里直接写(var 在属性值里=按元素代换 ✓)。 (扫层 L3 2026-08-28 清尸:--light-spot/--light-env/--light-ring(-a)=历次架构翻转死变量,已删—— 残留不是惰性垃圾是下一代诱饵,var-in-var 事故即同形已爆案例;闸11 定义↔消费对账防复发) */ [data-bs-theme=light]{--light-a-base:.08; --light-blend:normal} /* 浅色档(2026-08-29 面板 CP 修复回归: 浅色 focus 覆盖规则曾把本块整个吞掉=浅色光球 .13 跑成暗色档):--light-a-base .08 用户裁定不动 (页面上已可见;弹卡白玻璃面上淡是 normal 混合本性,弹卡内可见性由 input 档+边缘带承担); blend 换 normal——screen(白,x)=白,screen 在浅色面数学上不可见(曾致浅色光晕全灭,断言只测层存在=假绿) */ [data-bs-theme=light] .form-control:focus,[data-bs-theme=light] .form-select:focus{ box-shadow:var(--light-recess), inset 0 0 0 1px rgba(255,255,255,.07), 0 0 0 .15rem rgba(var(--light-rgb), calc(var(--light-edge-a) - .02))} /* ↑浅色 focus ring 再降档(2026-08-29 用户真机「暗一点」):白底上同 α 感知更亮(同 --light-a-base 浅色降半档先例),edge-.02;暗色不动;色源已换 --light-rgb(面板可调) */ .card{box-shadow:inset 0 1px 0 rgba(255,255,255,var(--light-edge-a)), var(--tblr-card-box-shadow)} /* 受光面(用户「所有元素都加交互式受光」铺满):卡/弹卡/toast/胶囊/页签/头像玻璃球/列表行 通用 ::before 追光(screen 叠亮),双主题(--light-a 分层);非定位面补 position:relative。 受光单位纪律(用户「大消息卡全照亮」2026-08-27):**物件才受光,容器零响应**——#msgs-card 是装 50 行的容器,hover 任意行把整容器点亮=范围假大;行才是单位(镜像设备卡一卡一物)。 */ /* ── 沉浸光感·全局 Canvas 层(2026-08-29 用户裁定四通道归一):光球/面斑/边缘带/input 环+斑全部 由 15-light.js 单一绘制循环画进 #light-canvas——#light-layer div(光球)/.lit::before(面斑)/ #light-edge(边缘带)/input inline(环+斑)四家渲染所有权归一(治技术栈分裂屎山);blend 收敛为 canvas 元素级一处(分层 screen≈合并 screen,低 α 视觉近似);段级 α 阈值+整像素坐标(W13); 保留光感语义:暗色 screen 提亮/浅色 normal;on-surface 补偿/boost 自证在 JS 绘制内实现。 */ #light-canvas{position:fixed;left:0;top:0;z-index:2000;pointer-events:none; mix-blend-mode:var(--light-blend)} /* 尺寸/DPR/绘制全在 15-light;html.noblend 消融见下 */ html.noblend #light-canvas{mix-blend-mode:normal} /* ?light=noblend 真机消融(同 ?glass= 惯例) */ #light-canvas-page{position:fixed;left:0;top:0;z-index:1029;pointer-events:none; mix-blend-mode:var(--light-blend)} /* 页面光层(2026-09-05 翻转):navbar(1025)之上/dropdown(1030)之下 ——浮层物理盖住其墨=遮挡免费(合成器当遮挡引擎);面板自照走 #light-canvas 高层井 */ html.noblend #light-canvas-page{mix-blend-mode:normal} /* ── 受光面通道(2026-08-29 全局 Canvas 化):面斑(.lit::before)/边缘带本注释段全部退役——四通道 渲染唯一在 15-light.js 绘制循环(#light-canvas);.lit/.lit-row 类保留为受光注册标记(JS 名单 消费),CSS 零受光渲染。名单单一真相仍在 15-light 的 SEL(闸6 防元素枚举回流 CSS); --light-edge-scale/--light-edge-falloff 两变量已删——edge 衰减硬编进 JS(15-light span=r×1.4×.7, 视觉锁旧 CSS 的 1.4×/70%,清屎山 F2-3 订正:非「主 falloff 单一衰减」)。 */ /* JS 挂/摘 .lit 纯注册标记(2026-08-29 Canvas 化后 CSS 零受光渲染;绘制统一在 15-light 的 drawEdgeBand——drawEdges 为重构前旧名,清屎山②-3 订正) */ /* ── 文本可选性注册表(单一家,同 15-light SEL 先例;gate 闸7 锁全仓声明仅此两行)── 反转默认:装饰/chrome 文本(页头/label/提示/标题/页签/钮)不可选——可选中出光标=伪可编辑感 (用户 2026-08-28「点文本像在编辑,误导」);内容文本(读者会想复制)在下行白名单开启。 新表面:内容想可复制→进白名单;装饰默认已不可选。边界判据=「读者会不会想复制」。 */ body{user-select:none} .msg-body,.msg-title,.msg-from-name,.d-name,.d-src,.d-slug,#group-name,.m-name,.m-meta,.toast-body,input,textarea,select{user-select:text} .input-icon{border-radius:var(--tblr-border-radius, .375rem)} /* 受光带跟 input 圆角(用户报「input 圆角光感直角」): 容器此前无圆角,::after 边缘带 border-radius:inherit 落 0=方框 */ /* 容器豁免已废:#msgs-card 曾 content:none(给已死的 hover 整圈环打的补丁)——致文件卡侧边亮/ 消息卡侧边不亮(用户报非单一真相);径向局部化边缘带下大卡同律,指针贴哪边哪段亮 */ /* hover 环已删(用户裁定「照那么一小部分而不是整个元素」2026-08-27):环=整元素描边响应, 与部分亮语义冲突,曾读作「整行亮」。物件响应只剩光斑(.lit+--mx/--my)+静态顶缘; 输入框 hover/focus 环保留=控件交互指示非光照。 */ /* 输入条受光:凹面上缘投影(槽深)+内周微高光(边框接光)。hover 环已杀(用户两次点名 「光标悬停整行亮」=整元素响应);自设 :focus 环也删(T5:两轮解析诡异,且回退 Tabler 原生 focus 环即标准交互指示)。光照响应归光感层(#light-canvas,清屎山 F2-2 死 id 订正),输入框与一切表面同律。 */ .form-control{box-shadow:var(--light-recess), inset 0 0 0 1px rgba(255,255,255,.07)} /* focus 态光照环让位(2026-08-29 用户真机「点击 input 外面的框太明显」):15-light 的 outline 光环是 inline style,把 Tabler focus 自带的 outline:0 顶掉,与 .25rem focus ring(box-shadow)双框叠加。 !important 压 inline——focus 环是唯一交互指示(205 行既有裁定),光照环 hover 态照常。 focus ring 同时收进光感体系(用户裁定「调到和径向受光加一点的等级」):Tabler 默认 .25rem/α.25 大蓝晕与光照不成比例——环收细 .15rem,α 与框内斑同公式 calc(edge+.08)=「径向+一点」, 底衬延续 recess+内周高光(focus 不换底)。 */ .form-control:focus,.form-select:focus{ box-shadow:var(--light-recess), inset 0 0 0 1px rgba(255,255,255,.07), 0 0 0 .15rem rgba(var(--light-rgb), calc((var(--light-edge-base) + .08) * var(--light-gain)))} /* ×gain(2026-08-29 用户裁定关灯全灭,coop P3-1: 原 calc(edge-a+.08) 的 +.08 不乘 gain,关灯残留微光—— 整公式乘 gain 与 JS input 通道同律;光照环画在 canvas 层不写 input inline,focus 态绘制循环整面跳过 */ /* 弹卡玻璃面单一 owner=.modal-content:footer 的 Tabler 实底(tertiary)曾把折射盖死 (用户 2026-08-27 报「按钮区没玻璃」)——清底继承玻璃,body 无底是先例;分隔靠留白不靠线(边线退场) */ .modal .modal-footer{background:transparent;border-top:0} .card.editing .edit-form{grid-template-rows:1fr} .card.editing .edit-form-in{opacity:1;transform:none} .edit-form-in > :first-child{margin-top:.75rem} /* 展开后表单与上方内容竖向呼吸(收起时被子层溢出裁剪,零残留;用户实证 10px 太挤) */ /* Bing 每日壁纸层(bing-bg 线,2026-08-27):照片主题无关;主题只拥有纱——同一事实一个家, data-bs-theme 变量覆盖同既有主题机制。窄屏纱加浓(竖屏照片碎,正文对比要更硬)。 */ :root{--scrim:rgba(246, 246, 242, .78)} /* .85→.78(2026-08-27 用户报浅色玻璃不可见):浅色重纱把壁纸 洗到剩 ~15%,卡透无从显;降纱让壁纸呼吸。裸字对比护栏=GLASS 断言双主题最坏壁纸 ≥4.5 */ [data-bs-theme=dark]{--scrim:rgba(10, 10, 26, .6)} @media (max-width: 768px){ :root{--scrim:rgba(246, 246, 242, .84)} /* 窄屏仍加浓(audit 裁定:竖屏照片碎,正文对比要更硬),幅度同步收 */ [data-bs-theme=dark]{--scrim:rgba(10, 10, 26, .68)} } #bg-photo{position:fixed;inset:0;z-index:-2;background-size:cover;background-position:center; opacity:0;transition:opacity 2s ease-in;filter:saturate(.85)} #bg-photo.loaded{opacity:1} #bg-photo.bg-off,#bg-scrim.bg-off{opacity:0} #bg-scrim{position:fixed;inset:0;z-index:-1;background:var(--scrim);pointer-events:none;transition:opacity 2s ease-in} /* 主题切换动画走 View Transitions 快照合成(10-theme;曾试 scrim 色补间+全页通配 transition,用户两轮报撕裂感,已删) */ /* 主题切换动画:View Transitions API(2026-09-01 高 star 调研终态——主流唯一有动画路线,配方源头 vitepress 官方文档;next-themes/shadcn/daisyUI/Tabler 全默认硬切,通配 CSS transition 无先例有反例 [next-themes 专设 disableTransitionOnChange 杀它])。JS 一行包 swap=默认 0.25s 整页 cross-fade, 零 CSS;此处仅 reduced-motion 官方兜底块(web.dev Learn CSS 同款)。 */ @media (prefers-reduced-motion: reduce){ ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){animation:none !important} } /* 圆形揭示·CSS 版(2026-09-01 崩溃根治二改:vitepress 配方的 WAAPI→纯 CSS,动画生命周期浏览器 托管——WAAPI fill:forwards 挂 VT 伪元素=JS 持引用,Edge 狂点渲染进程崩[UAF];坐标/半径经 --vt-x/--vt-y/--vt-r 由 10-theme 写入)。双向统一扩圆(用户真机报「入暗收圆=画面被吸到顶栏 一点,观感天上非手指」2026-09-01;vitepress 配方的方向收圆弃用):新态永远从点击处绽放盖掉旧态。 */ ::view-transition-old(root), ::view-transition-new(root){animation:none; mix-blend-mode:normal} ::view-transition-new(root){ /* 新态(无论亮暗)从点击处扩圆在上盖掉旧态 */ z-index:9999; animation: vt-circle .3s ease-out both; } @keyframes vt-circle{ from{clip-path:circle(0px at var(--vt-x,50%) var(--vt-y,50%))} to{clip-path:circle(var(--vt-r,150vmax) at var(--vt-x,50%) var(--vt-y,50%))} } /* 开关同步:纱与照片同时长**同曲线**(ease-in 对 ease 实测中途 0.75 vs 0.27 仍有裸照窗)——先亮后暗的病根 */ @media (prefers-reduced-motion: reduce){#bg-photo{transition:none}} /* 图标-文字间距单一真相(2026-08-27 用户裁定:20 处   手搓=非单一真相):一切图标后缘统一右距, 实体全清——加新图标钮不再需要拼空格 */ .btn > svg, .btn > [data-icon], .btn > .m-icn, .btn > .mtab-icn, .nav-link > .mtab-icn{margin-right:.375rem} .btn-icon > svg, .btn-icon > [data-icon], .btn-icon > .m-icn{margin-right:0} /* icon-only 钮无后续文字,边距参与居中=左偏 3px(实测 40px 钮 span 落 7 非 10) */ .d-src{margin-top:.25rem} /* 设备卡名字→来源行竖向呼吸(实测 1px 贴死;类型行靠行框 leading) */ .card.editing .card-actions{display:none} @media (prefers-reduced-motion: reduce){.edit-form,.edit-form-in{transition:none}.edit-form-in{opacity:1;transform:none}} /* 空态现代化(用户裁定):图标放大居中,标题缩小降灰放第二行——三处 .empty(设备/消息/文件)同规 */ .empty .empty-icon svg{width:2.5rem;height:2.5rem;opacity:.55} .empty .empty-title{font-size:.875rem;margin-top:.75rem} .empty .empty-subtitle{font-size:.8125rem} .media-thumb{width:2.5rem;height:2.5rem;object-fit:cover;border-radius:.25rem;border:1px solid var(--tblr-border-color,transparent)} .m-icn svg{width:1.25rem;height:1.25rem} /* 图标化审查:按钮内图标归一 1.25(原 1.5 与 [data-icon] 两档漂移) */ .mtab-icn svg{width:1rem;height:1rem;vertical-align:-0.125rem} .msg-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600} /* 截断三件套+悬停 title 全文(P3-3 惯例) */ /* sender 归属首行(对齐 App DeviceMessageCard:身份行在 title 前):小头像+设备名; 孤儿链 devices→from→未命名在 JS;展示性头像不带 tap overlay(core renderAvatar tappable=false) */ .msg-sender{margin-bottom:.125rem} .msg-sender .msg-avatar{width:1.5rem;height:1.5rem;flex:none} .msg-sender .msg-avatar svg{width:1.125rem;height:1.125rem} .msg-from-name{font-size:.8125rem} .msg-body{overflow-wrap:anywhere;white-space:pre-wrap;max-height:8rem;overflow-y:auto} /* 长短信不撑爆行;pre-wrap 保多行 */ .mchip .m-icn{display:inline-flex} /* 图标基线对齐归 CSS(原模板 inline style——显隐纯度断言零 inline display) */ .mchip .mn{display:inline-block;max-width:9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom} /* CP-send:file input 视觉隐藏但可聚焦(键盘/读屏可达——display:none 出 a11y 树);该 input 从不切换显隐,不破显隐单一真相 */ .sr-file{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden} /* ── C1 移动端顶栏单行(mob-audit 2026-08-27,用户已报「图标挤在一起」)── <768 无折叠菜单可借(navbar-expand-md 不带 toggler),Tabler container-xl flex-wrap:inherit 继承 .navbar 的 wrap → 必换行塌两行(实测高 104/146px)。三件套:容器 nowrap+品牌缩纯图标 (文字让位,audit 裁定)+钮 44 触控;chip 内距收紧(gap 8→4/padding 4)换 44 不溢出—— 360 预算=可用 344:44×6+4×5+chip4+品牌32=320 ✓。退出钮 icon-only(88→44)。 ≤350 再收 40 档保 320 单行不横溢(240+20+4+32=296≤304 ✓);「⋯」溢出菜单=audit P4, 待用户声明 320 支持再议,先不做。 */ @media (max-width:767.98px){ header.navbar .container-xl{flex-wrap:nowrap} .navbar-brand{min-width:0} /* 品牌区可让位,但让位链钉死:字标先没→图标保底 */ .navbar-brand .brand-icon{flex-shrink:0} /* 图标本体永不缩(用户报「挤成一个点」根因:品牌区 无 flex 保护被压到 15px[实测],大屏手机字体放大 更狠;图标=品牌最后底线,再不够走药丸横滚不压它) */ .navbar-brand .brand-word{display:none} #nav-actions{flex-wrap:nowrap;gap:.25rem;padding:.125rem;margin-left:auto; flex-shrink:1;min-width:0;overflow-x:auto} /* 真正的溢出口:保底宽(图标32+七钮368+间距)≈376>375 视口,350-375 机型/字体放大必溢出——曾靠压缩 brand 硬扛;钮保底后挤=药丸内横划(挤时才出滚动条,scrollbar 宽 0 化不占位) */ #nav-actions::-webkit-scrollbar{display:none} /* 横滚指示=视觉噪音,触屏划动自然发现 */ #nav-actions .btn{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center; flex-shrink:0} /* 钮永不缩:曾 flex-shrink 默认 1,空间负=七钮压缩叠团 */ #lbl-logout{display:none} /* 退出钮窄屏 icon-only;JS 不切它的显隐,媒体查询持有 */ #btn-logout > [data-icon]{margin-right:0} /* 文字藏后图标归中(.375rem 是图文间距,icon-only 不配) */ } @media (max-width:389.98px){ /* 让位链用户裁定 2026-09-01:字标→logo→钮44保底→横滚(最后手段,按钮滚动 不方便)。实测校准:logo(32)+按钮保底(~376+间距)=~408>389 视口放不下→≤389 logo 整个退场; ≥390(iPhone 标准宽)logo 与钮共存(384<390✓);字体放大再溢=横滚兜底(保底链尽头) */ .navbar-brand{display:none} } @media (max-width:350px){ #nav-actions .btn{min-width:40px;min-height:40px} } /* ── C2 窄屏文件表(mob-audit 2026-08-27)──table-auto 下固定三要素(缩略图 72+大小+动作 146) 吃光名称列(390 实测 73px,长名逐字符竖排不可读)。<576:藏「大小」列(次要信息)+下载钮 icon-only(146→~90,aria-label JS 常挂读屏不瞎)+缩略图收窄——名称列 ≥180@390 验收线。 th/td 共 .m-size class 恒定(m-thumb 同款纪律,列不漂移)。 */ @media (max-width:575.98px){ .m-size{display:none} .m-thumb{width:3rem} .m-act .m-dl{display:none} .m-act .m-icn{margin-right:0} /* 下载文字藏后图标归中(D2 同族补偿) */ .m-act .btn-sm{padding-left:.375rem;padding-right:.375rem} /* 动作钮收横距(icon 20+12+边≈34,竖向 40 由 coarse 档兜) */ .card-table th,.card-table td{padding-left:.5rem;padding-right:.5rem} /* cell 横距 12→8,换名称列余量(实测 178→194) */ } /* ── D3 触控目标(mob-audit 2026-08-27)──coarse 指针最小档:页签/pills 44、btn-sm 40。 inline-flex 自居中——单挂 min-height 会把内容顶到上沿(inline-block 顶部对齐)。删除钮 与下载钮拉开指距(危险操作不贴邻)。 */ @media (pointer:coarse){ .nav-link{min-height:44px} .btn-sm{min-height:2.5rem;display:inline-flex;align-items:center} .m-act .a-dl{margin-right:.5rem} } /* ── 触屏粘滞 hover 修(2026-08-27 用户真机报:按一下按钮「常亮」,点别处才灭)── 病根=平台×vendor 缺口,非屎山:安卓/鸿蒙系浏览器 tap 后 :hover 锁定到下次 tap; Tabler .btn:hover 无 (hover:hover) 守卫直接铺 hover 变量(outline-secondary 的 hover-bg=纯色灰)→ 药丸钮透明底被填灰=「常亮」。「hover 反馈只属真 hover 设备」 此前 0 owner,此处立唯一 owner:touch 档恢复**静息变量**(rest 变量本就 per-variant 挂在元素上,一条规则全体还原);真 hover 设备不动。点按反馈仍由 :active 承担(按住即现)。 */ @media (hover:none){ .btn:hover{color:var(--tblr-btn-color);background-color:var(--tblr-btn-bg);border-color:var(--tblr-btn-border-color)} .nav-link:focus,.nav-link:hover{color:var(--tblr-nav-link-color);text-decoration:none} } @media (hover:hover){ .avatar-tap:hover .tap-icn{opacity:1} /* 自家 hover 规则进守卫:触屏本无 hover,tap 后蒙层粘住同病;触屏的发现性=audit P1 待裁定 */ } /* ── 光感面板(2026-08-29 用户裁定:AI 无视觉,强度终值用户自调——webuipath W12 的交付面)── navbar 调色板钮展开的悬浮玻璃卡:.card 家族自带受光(SEL 名单)与卡面玻璃,面板自身=实时演示面; 桌面=右上锚,<768px 转底部抽屉(同 navbar 折叠断点,拇指可达);显隐走 is-off 单一真相, 开合动画复用 .view-in(showTab 同款)。控件实时写 CSS 变量(--light-gain/r/dsurface/rgb), localStorage 分主题各档(10-theme lpApply);滑杆=原生 range(不进 INPUTS 光感,thumb 自高亮)。 */ #light-panel{position:fixed;z-index:1040;width:19.5rem;max-width:calc(100vw - 1rem); /* z 1040