pixel-editor/css/_canvas.scss

.drawingCanvas {
	cursor: url('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;
}

#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: 48px;
	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: 48px;
	right: 48px;
	top: 48px;
	display: block;
	pointer-events: none;
}