html, body {
margin: 0;
padding: 0;
user-select: none;
font-size: 1vmin;
color: #fff;
}
button {
border: 0;
font-size: inherit;
font-family: inherit;
color: inherit;
font-size: 3rem;
margin-collapse: collapse;
text-shadow: 0 0 3px #000;
}
#app_area {
display: grid;
grid-template-areas:
"bar editor";
grid-template-columns: minmax(50rem,30vw) auto;
height: 100vh;
width: 100vw;
}
/* The area behind the grid */
#workspace {
background: #1e3526 linear-gradient(to right, #000000 -7%, transparent 8%);
grid-area: editor;
display: grid;
overflow: scroll;
grid-template-rows: calc(100% - 7rem) 1fr;
}
/* 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: 1;
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;
}
#grid_caption {
align-self: center;
justify-self: center;
font-size: 4rem;
}
#toolbox {
grid-area: bar;
background: #00762a;
border-right: 3px solid #0b3a1d;
display: grid;
box-sizing: border-box;
padding: 0 1em 1em 1em;
font-size: 3rem;
font-family: "PT Mono", "Envy Code R", "Liberation Mono", "DejaVu Sans", monospace;
font-weight: bold;
z-index: 2;
gap: 2rem;
grid-template-rows: 10vh 15vh 20vh 1fr 1fr 1fr 1fr 1fr;
}
#toolbox > header {
margin: 0;
padding: 0;
font-size: 3em;
text-align: center;
text-shadow: 0 0 3px #000;
align-self: center;
justify-self: center;
}
#color_picker {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
#color_picker > div {
display: grid;
grid-template-rows: 70% 30%;
text-align: center;
font-weight: bold;
font-size: 1.3em;
}
#color_picker > div.selected {
background: rgba(255,255,255, 0.4);
}
#color_picker > div > .swatch {
aspect-ratio: 1;
margin: 0.4em auto 0.2em auto;
display: block;
height: 4rem;
}
#black_pick > .swatch {
background: #000;
}
#white_pick > .swatch {
background: #fff;
}
#custom_pick > .swatch {
}
#canvas_opts {
display: grid;
grid-template-rows: 2.5rem 1fr 1fr;
}
#rainbow {
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
border: 2px solid rgba(0,0,0,0.4);
}
#darken {
background: #0b3a1d;
}
#lighten {
background: #20964a;
}
button.selected {
border: 4px solid #fff !important;
}
#btn_overlay {
}