.drawingCanvas { cursor: url('/pixel-editor/pencil-tool-cursor.png'); border: solid 1px #fff; image-rendering: optimizeSpeed; /* Legal fallback */ image-rendering: -moz-crisp-edges; /* Firefox */ image-rendering: -o-crisp-edges; /* Opera */ image-rendering: -webkit-optimize-contrast; /* Safari */ image-rendering: optimize-contrast; /* CSS3 Proposed */ image-rendering: crisp-edges; /* CSS4 Proposed */ image-rendering: pixelated; /* CSS4 Proposed */ -ms-interpolation-mode: nearest-neighbor; /* IE8+ */ width: 400px; height: 400px; position: fixed; display: none; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.64); background-color: transparent; } #checkerboard { z-index: 1; } #pixel-canvas { z-index: 3; background: transparent; } #pixel-grid { z-index: 5000; background: transparent; } #horizontal-symmetric { z-index: 6001; background: transparent; } #vertical-symmetric { z-index: 6002; background: transparent; } #tmp-canvas { z-index: 5; background: transparent; } #vfx-canvas { z-index: -5000; background: transparent; } #eyedropper-preview { position: absolute; width: 45px; height: 45px; border-radius: 30px; border: solid 10px red; z-index: 1200; display: none; box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.25), inset 0 0 6px 0 rgba(0, 0, 0, 0.2); pointer-events: none; &.dark { box-shadow: 0 0 8px 0 rgba(255, 255, 255, 0.5), inset 0 0 6px 0 rgba(255, 255, 255, 0.5); } } #brush-preview { background-color:black; opacity:0.3; position: absolute; border: solid 1px #fff; z-index: 1200; box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.5), inset 0 0 2px 0 rgba(0, 0, 0, 0.5); pointer-events: none; left: -500px; &.dark { border: solid 1px #000; box-shadow: 0 0 3px 0 rgba(255, 255, 255, 0.8), inset 0 0 3px 0 rgba(255, 255, 255, 0.8); } } #canvas-view { bottom: 0px; left: 64px; right: 48px; top: 48px; cursor: default; position: fixed; display: block; } #canvas-view-shadow { box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, 0.4); position: fixed; bottom: 0px; left: 64px; right: 48px; top: 48px; display: block; pointer-events: none; }