| :root { --bg:#10141a; --panel:#1a212b; --line:#2a3442; --fg:#dbe4f0; --dim:#8696aa; --acc:#4aa3ff; --ok:#3ddc84; --warn:#ffb347; } |
| * { box-sizing: border-box; } |
| html, body { margin:0; background:var(--bg); color:var(--fg); font:14px/1.4 system-ui, "Noto Sans TC", sans-serif; } |
| header { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; padding:8px 12px; background:var(--panel); border-bottom:1px solid var(--line); } |
| h1 { margin:0; font-size:18px; } h1 small { color:var(--dim); font-weight:400; font-size:12px; margin-left:8px; } |
| #toolbar { display:flex; flex-wrap:wrap; gap:6px; align-items:center; } |
| button, select, input[type=text], input:not([type]) { background:#243040; color:var(--fg); border:1px solid var(--line); border-radius:6px; padding:5px 10px; font:inherit; } |
| button { cursor:pointer; } button:hover { background:#2d3c50; } button.primary { background:#1f5fa8; border-color:#2b78cc; } button.primary:hover { background:#2670c4; } |
| .chk { color:var(--dim); display:inline-flex; gap:4px; align-items:center; } |
| .stat { color:var(--dim); font-variant-numeric: tabular-nums; font-size:12px; } |
| main { display:flex; flex-wrap:wrap; gap:12px; padding:12px; align-items:flex-start; } |
| #left { flex:1 1 680px; min-width:320px; } #right { flex:1 1 320px; min-width:280px; max-width:560px; } |
| #screenWrap { position:relative; background:#000; border:2px solid var(--line); border-radius:8px; outline:none; overflow:hidden; } |
| #screenWrap.focus { border-color:var(--acc); box-shadow:0 0 0 2px #4aa3ff44; } |
| #screen { display:block; width:100%; aspect-ratio:4/3; image-rendering:pixelated; background:#000; } |
| #screen.native { aspect-ratio:auto; } |
| #noSignal { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#456; font-size:20px; pointer-events:none; } |
| #capHint { position:absolute; left:0; right:0; bottom:0; text-align:center; font-size:11px; background:#000a; color:var(--acc); padding:2px; display:none; } |
| #screenWrap.focus #capHint { display:block; } |
| .row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:8px 0; } |
| #vkbd { user-select:none; touch-action:manipulation; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:6px; } |
| .krow { display:flex; gap:3px; margin-bottom:3px; } |
| .key { flex:1 1 0; min-width:0; height:36px; display:flex; align-items:center; justify-content:center; background:#27323f; border:1px solid #3a4758; border-bottom-width:3px; border-radius:5px; font-size:12px; cursor:pointer; color:var(--fg); padding:0; } |
| .key:active, .key.down { background:#3f6aa3; border-color:#5b8fd0; } |
| .key.mod.latched { background:#7a5a1c; border-color:#d9a640; } |
| .key.sp { visibility:hidden; } |
| details { background:var(--panel); border:1px solid var(--line); border-radius:8px; margin-bottom:10px; padding:6px 10px; } |
| summary { cursor:pointer; color:var(--acc); font-weight:600; } |
| #serial { height:200px; overflow:auto; background:#05080c; color:#c8f0c8; padding:6px; border-radius:6px; margin:8px 0; white-space:pre-wrap; word-break:break-all; font:12px/1.35 ui-monospace, Menlo, Consolas, monospace; } |
| #serialIn { flex:1; } |
| #board { width:100%; background:#0b1a12; border:1px solid #1e4a30; border-radius:6px; } |
| #gpioGrid { display:grid; grid-template-columns:repeat(10, 1fr); gap:3px; margin:6px 0; } |
| .pin { font-size:9px; text-align:center; padding:2px 0; border-radius:3px; background:#202a36; color:var(--dim); border:1px solid #2c3949; } |
| .pin.hi { background:#1f6f3d; color:#fff; } .pin.drv { border-color:var(--warn); } |
| .note { color:var(--dim); font-size:11px; margin-top:6px; } |
| table { width:100%; border-collapse:collapse; font-size:12px; } th, td { text-align:left; padding:3px 4px; border-bottom:1px solid var(--line); } |
| td input { width:90px; font-family:ui-monospace, monospace; } |
| footer { color:var(--dim); font-size:11px; padding:10px 14px; } |
| @media (max-width: 760px) { .key { height:30px; font-size:10px; } h1 small { display:none; } } |
| #screenWrap:fullscreen { display:flex; align-items:center; justify-content:center; background:#000; } |
| #screenWrap:fullscreen #screen { max-height:100vh; width:auto; height:100vh; } |
|
|
