html, body {
margin: 0;
padding: 0;
user-select: none;
font-size: 10px;
color: #fff;
}
body {
overflow: hidden;
}
#app_area {
display: grid;
height: 100vh;
width: 100vw;
}
/* The area behind the grid */
#workspace {
background: #1e3526 linear-gradient(to right, #000000 -7%, transparent 8%, transparent 92%, #000000 107%);
display: grid;
overflow: scroll;
z-index: 1;
}
/* the canvas we're drawing on in the app */
#grid_container {
display: grid;
grid-template-columns: repeat(16, 1fr);
border: 6px solid #000;
/* gap: 1px; */
background: #888;
aspect-ratio: 1;
box-shadow: 0 0 3.2rem #000;
z-index: 10;
height: 75vmin;
align-self: center;
justify-self: center;
}
/* 'pixels' on the canvas itself */
#grid_container > div {
background: white;
aspect-ratio: 1;
}
.show_grid > div {
border-bottom: 1px solid #777;
border-right: 1px solid #777;
border-collapse: collapse;
}
#toolbox {
background: #00000088;
border: 1px solid #000;
border-radius: 8px;
display: grid;
box-sizing: border-box;
box-shadow: 0 0 16px #000;
padding: 6px;
font-size: 14px;
font-family: "PT Mono", "Envy Code R", "Liberation Mono", "DejaVu Sans", monospace;
font-weight: bold;
position: absolute;
z-index: 20;
gap: 8px;
grid-template-rows: 26px 1fr 60px;
top: 16px;
left: 16px;
width: 184px;
}
#toolbox > header {
margin: 0;
padding: 0;
font-size: 1.3em;
text-align: center;
text-shadow: 0 0 3px #000;
line-height: 26px;
}
#tool_palette {
display: flex;
flex-flow: row wrap;
gap: 3px;
}
#tool_palette div {
background: url("./ui/green-button.png") no-repeat top left transparent;
display: grid;
text-align: center;
font-weight: bold;
font-size: 1.3em;
image-rendering: crisp-edges;
flex-basis: 40px;
height: 48px;
}
#tool_palette div:hover {
background-image: url("./ui/cyan-button.png");
}
#tool_palette > div.selected {
background: url("./ui/green-button-pressed.png") no-repeat top left;
image-rendering: crisp-edges;
}
#tool_palette > div.active {
background: url("./ui/yellow-button-pressed.png") no-repeat top left;
image-rendering: crisp-edges;
}
#tool_palette div.selected .swatch,
#tool_palette div.active .swatch {
margin-top: 9px;
}
#tool_palette > div > .swatch {
aspect-ratio: 1;
margin: 4px auto 0 auto;
display: block;
width: 32px;
height: 32px;
}
#black_pick > .swatch {
background: url("./ui/black-pen.png") no-repeat center center;
background-size: contain;
image-rendering: crisp-edges;
}
#white_pick > .swatch {
background: url("./ui/eraser.png") no-repeat center center;
background-size: contain;
image-rendering: crisp-edges;
}
#custom_pick > .swatch {
mask: url("./ui/custom-color-mask.png") no-repeat center center;
mask-size: contain;
border: 0;
padding: 0;
}
#custom_color::-moz-color-swatch {
background: url("./ui/custom-color.png") no-repeat center center;
background-size: contain;
image-rendering: crisp-edges;
border: 0;
margin: 0;
padding: 0;
}
#rainbow > .swatch {
background: url("./ui/rainbow-pen.png") no-repeat center center;
background-size: contain;
image-rendering: crisp-edges;
}
#darken > .swatch {
background: url("./ui/darken-tool.png") no-repeat center center;
background-size: contain;
image-rendering: crisp-edges;
}
#lighten > .swatch {
background: url("./ui/lighten-tool.png") no-repeat center center;
background-size: contain;
image-rendering: crisp-edges;
}
#clear_canvas > .swatch {
background: url("./ui/blank-canvas.png") no-repeat center center;
background-size: contain;
image-rendering: crisp-edges;
}
#grid_toggle > .swatch {
background: url("./ui/grid-toggle.png") no-repeat center center;
background-size: contain;
image-rendering: crisp-edges;
}
#canvas_opts {
display: grid;
grid-template-areas:
"lbl lbl"
"num slider"
;
grid-template-columns: 2.5em auto;
gap: 0 4px;
}
#canvas_opts > label {
grid-area: lbl;
}
#canvas_opts input[type=range] {
grid-area: slider;
width: 100%;
}
#canvas_opts input[type=text] {
grid-area: num;
text-align: center;
background: #fff8;
border: 0;
border-radius: 5px;
}
#canvas_opts input[type=text]:focus {
border: 1px solid #fff;
}