nikrozman/air-mouse
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects 2 Releases Activity

Initial physical button mapping implementation #4

Browse Source
This commit is contained in:
Nik Rozman
2026-03-03 11:44:38 +01:00
parent dcc50150b8
commit 5c36aa041e
8 changed files with 321 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/style.css
+25 -1
View File
@@ -148,10 +148,32 @@
.chg-badge.full { border-color:var(--ok); color:var(--ok); }
.chg-badge.show { display:flex; }
main { max-width:1100px; margin:0 auto; padding:32px 20px 80px; display:grid; grid-template-columns:1fr 380px; gap:16px; align-items:start; }
main { max-width:1440px; margin:0 auto; padding:32px 20px 80px; display:grid; grid-template-columns:1fr 1fr 380px; gap:16px; align-items:start; }
.col-left { display:grid; gap:12px; }
.col-mid { display:grid; gap:12px; }
.col-right { display:grid; gap:12px; position:sticky; top:80px; }
/* ── XIAO pin diagram ─────────────────────────────────────── */
.xiao-wrap { display:flex; flex-direction:column; align-items:center; padding:8px 0 14px; }
.pin-legend { display:flex; gap:20px; justify-content:center; font-family:var(--mono); font-size:9px; margin-top:10px; letter-spacing:0.08em; }
.pleg.left { color:var(--ok); }
.pleg.right { color:var(--accent2); }
.pleg.mid { color:var(--accent); }
.xiao-divider { border:none; border-top:1px solid var(--border); margin:0 -20px 12px; }
/* ── Responsive ───────────────────────────────────────────── */
@media (max-width:1100px) {
main { grid-template-columns:1fr 380px; grid-template-rows:auto auto; }
.col-left { grid-column:1; grid-row:1; }
.col-mid { grid-column:1; grid-row:2; }
.col-right { grid-column:2; grid-row:1/3; }
}
@media (max-width:700px) {
main { grid-template-columns:1fr; }
.col-left, .col-mid, .col-right { grid-column:1; grid-row:auto; }
.col-right { position:static; }
}
.section-label { font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:0.3em; text-transform:uppercase; color:var(--label); padding:4px 0; border-bottom:1px solid var(--border); margin-bottom:4px; display:flex; align-items:center; gap:8px; }
.section-label::before { content:'//'; color:var(--accent); font-family:var(--mono); font-size:10px; }
@@ -304,6 +326,8 @@
.mod-btn input:disabled + span { opacity:0.35; cursor:not-allowed; }
.restart-note { color:var(--warn); font-family:var(--mono); font-size:9px; }
.pin-select { background:var(--bg); color:var(--text); border:1px solid var(--border); font-family:var(--mono); font-size:11px; padding:3px 6px; cursor:pointer; min-width:80px; }
.pin-select:disabled { color:var(--dim); border-color:var(--dim); cursor:not-allowed; }
.tap-flash { position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity 0.25s; }
.tap-flash.left { background:radial-gradient(circle at center, var(--tap-left) 0%, transparent 70%); }