/* ============================================================ gesture.css —— 手势控制的预览面板与虚拟光标注意：这两个元素挂在上、用 position:fixed，不能放进 #screen —— 那里有 transform:scale()，会让坐标系和视口对不上。 ============================================================ */ .gs-panel{ position:fixed;left:18px;bottom:18px;z-index:90;width:268px; display:none;flex-direction:column; background:linear-gradient(168deg,rgba(14,40,70,.96),rgba(5,16,31,.97)); border:1px solid var(--line-hi); box-shadow:0 18px 50px rgba(0,0,0,.6),inset 0 0 30px rgba(28,110,180,.12); } .gs-panel.on{display:flex;animation:dtRise .2s cubic-bezier(.2,.8,.3,1)} .gs-head{display:flex;align-items:center;gap:7px;padding:6px 9px; border-bottom:1px solid var(--line); background:linear-gradient(90deg,rgba(30,102,168,.42),transparent)} .gs-head>i{width:5px;height:5px;background:var(--cy);transform:rotate(45deg);box-shadow:0 0 7px var(--cy)} .gs-head b{font-size:12.5px;letter-spacing:.1em;color:#DFF4FF;font-weight:600} .gs-head span{margin-left:auto;font-size:10.5px;letter-spacing:.04em;color:var(--tx-2); max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .gs-head span.ok{color:var(--grn)} .gs-head span.warn{color:var(--am)} .gs-head span.err{color:var(--red)} .gs-head a{cursor:pointer;color:var(--tx-2);font-size:12px;padding:0 2px} .gs-head a:hover{color:var(--cy)} .gs-view{position:relative;width:100%;aspect-ratio:4/3;background:#04101d;overflow:hidden} .gs-view video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transform:scaleX(-1);opacity:.42} /* 镜像，像照镜子一样好对准 */ .gs-view canvas{position:absolute;inset:0;width:100%;height:100%} .gs-badge{position:absolute;right:6px;top:6px;padding:1px 8px;font-size:10.5px;letter-spacing:.06em; color:var(--tx-2);border:1px solid var(--line);background:rgba(5,16,32,.85)} .gs-badge.on{color:#04121f;background:var(--cy);border-color:var(--cy);font-weight:600} .gs-help{display:flex;flex-wrap:wrap;gap:3px 10px;padding:7px 9px; border-top:1px solid rgba(46,116,176,.22);background:rgba(5,16,32,.5)} .gs-help span{font-size:10.5px;color:var(--tx-3);letter-spacing:.02em} .gs-help b{color:var(--cy);font-weight:600} /* 虚拟光标 */ .gs-cursor{ position:fixed;left:-100px;top:0;z-index:95;width:34px;height:34px;margin:-17px 0 0 -17px; border:2px solid var(--cy);border-radius:50%;pointer-events:none;opacity:0; box-shadow:0 0 16px rgba(53,224,255,.6),inset 0 0 10px rgba(53,224,255,.25); transition:opacity .2s,width .12s,height .12s,margin .12s,background .12s; } .gs-cursor.on{opacity:1} .gs-cursor i{position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px; border-radius:50%;background:var(--cy);box-shadow:0 0 8px var(--cy)} .gs-cursor.point{width:24px;height:24px;margin:-12px 0 0 -12px;border-color:var(--grn)} .gs-cursor.point i{background:var(--grn);box-shadow:0 0 8px var(--grn)} .gs-cursor.press{width:20px;height:20px;margin:-10px 0 0 -10px; background:rgba(255,172,51,.28);border-color:var(--am); box-shadow:0 0 20px rgba(255,172,51,.7)} .gs-cursor.press i{background:var(--am)}