| :root{ |
| --toolbar-height: 44px; |
| --bg: #111; |
| --fg: #ddd; |
| --accent: #0ab; |
| } |
| html,body{ |
| height:100%; |
| margin:0; |
| background:var(--bg); |
| color:var(--fg); |
| font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif; |
| } |
| #toolbar{ |
| height:var(--toolbar-height); |
| display:flex; |
| align-items:center; |
| gap:8px; |
| padding:6px 10px; |
| background:rgba(0,0,0,0.4); |
| position:fixed; |
| top:0; |
| left:0; |
| right:0; |
| z-index:10; |
| } |
| #canvas-wrap{ |
| position: absolute; |
| top:var(--toolbar-height); |
| bottom:0; |
| left:0; |
| right:0; |
| } |
| canvas#grid{ |
| width:100%; |
| height:100%; |
| display:block; |
| background: #0a0a0a; |
| cursor:crosshair; |
| touch-action: none; |
| } |
| button, input[type="file"], label { |
| background: #222; |
| color: var(--fg); |
| border: 1px solid #333; |
| padding: 6px 8px; |
| border-radius: 4px; |
| } |
| input[type="checkbox"]{ |
| margin-right:6px; |
| } |
| #status{ |
| margin-left:12px; |
| font-size:0.9rem; |
| opacity:0.9; |
| } |
