html, body { margin: 0; padding: 0; overflow: hidden; } .dhide { display: none !important; } .canvas { cursor: crosshair; position: absolute; top: 0; left: 0; opacity: 1; transition: opacity .2s; transform-origin: top left; } .canvas.white { opacity: 0; } .canvas.moving { cursor: move; } #canvas-images { z-index: 0; } #canvas0 { z-index: 1; box-sizing: border-box; border: 1px solid black; } #canvas1 { z-index: 2; pointer-events: none; opacity: 0.3; } .toolbar { position: fixed; left: 20px; top: 20px; background: #eee; border: 1px solid #ddd; padding: 10px; border-radius: 5px; box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1); display: flex; gap: 10px; z-index: 10; align-items: center; } .toolbar #brush-width { width: 7ch; height: 30px; padding: 5px; box-sizing: border-box; border: none; cursor: crosshair; } .toolbar #brush-color { padding: 0; height: 30px; width: 30px; border: none; cursor: pointer; } #brush-preview { border-radius: 50%; width: 5px; height: 5px; background: black; position: absolute; pointer-events: none; z-index: 11; } .toolbar #brush-color::-moz-color-swatch { border: none; } .floating-image { position: absolute; pointer-events: none; }