summaryrefslogtreecommitdiff
path: root/pixeled.css
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--pixeled.css177
1 files changed, 119 insertions, 58 deletions
diff --git a/pixeled.css b/pixeled.css
index 5f02f19..1cef83a 100644
--- a/pixeled.css
+++ b/pixeled.css
@@ -2,36 +2,26 @@ html, body {
margin: 0;
padding: 0;
user-select: none;
- font-size: 1vmin;
+ font-size: 10px;
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;
+body {
+ overflow: hidden;
}
#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;
+ background: #1e3526 linear-gradient(to right, #000000 -7%, transparent 8%, transparent 92%, #000000 107%);
display: grid;
overflow: scroll;
- grid-template-rows: calc(100% - 7rem) 1fr;
+ z-index: 1;
}
/* the canvas we're drawing on in the app */
@@ -43,7 +33,7 @@ button {
background: #888;
aspect-ratio: 1;
box-shadow: 0 0 3.2rem #000;
- z-index: 1;
+ z-index: 10;
height: 75vmin;
align-self: center;
justify-self: center;
@@ -61,93 +51,164 @@ button {
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;
+ background: #00000088;
+ border: 1px solid #000;
+ border-radius: 8px;
display: grid;
box-sizing: border-box;
- padding: 0 1em 1em 1em;
- font-size: 3rem;
+ 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;
- z-index: 2;
- gap: 2rem;
- grid-template-rows: 10vh 15vh 20vh 1fr 1fr 1fr 1fr 1fr;
+ 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: 3em;
+ font-size: 1.3em;
text-align: center;
text-shadow: 0 0 3px #000;
- align-self: center;
- justify-self: center;
+ line-height: 26px;
}
-#color_picker {
- display: grid;
- grid-template-columns: 1fr 1fr 1fr;
+#tool_palette {
+ display: flex;
+ flex-flow: row wrap;
+ gap: 3px;
}
-#color_picker > div {
+#tool_palette div {
+ background: url("./ui/green-button.png") no-repeat top left transparent;
display: grid;
- grid-template-rows: 70% 30%;
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;
}
-#color_picker > div.selected {
- background: rgba(255,255,255, 0.4);
+#tool_palette div.selected .swatch,
+#tool_palette div.active .swatch {
+ margin-top: 9px;
}
-#color_picker > div > .swatch {
+#tool_palette > div > .swatch {
aspect-ratio: 1;
- margin: 0.4em auto 0.2em auto;
+ margin: 4px auto 0 auto;
display: block;
- height: 4rem;
+ width: 32px;
+ height: 32px;
}
#black_pick > .swatch {
- background: #000;
+ background: url("./ui/black-pen.png") no-repeat center center;
+ background-size: contain;
+ image-rendering: crisp-edges;
}
#white_pick > .swatch {
- background: #fff;
+ 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;
}
-#canvas_opts {
- display: grid;
- grid-template-rows: 2.5rem 1fr 1fr;
+#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;
}
-#rainbow {
- background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
- border: 2px solid rgba(0,0,0,0.4);
+#canvas_opts {
+ display: grid;
+ grid-template-areas:
+ "lbl lbl"
+ "num slider"
+ ;
+ grid-template-columns: 2.5em auto;
+ gap: 0 4px;
}
-#darken {
- background: #0b3a1d;
+#canvas_opts > label {
+ grid-area: lbl;
}
-#lighten {
- background: #20964a;
+#canvas_opts input[type=range] {
+ grid-area: slider;
+ width: 100%;
}
-button.selected {
- border: 4px solid #fff !important;
+#canvas_opts input[type=text] {
+ grid-area: num;
+ text-align: center;
+ background: #fff8;
+ border: 0;
+ border-radius: 5px;
}
-#btn_overlay {
+#canvas_opts input[type=text]:focus {
+ border: 1px solid #fff;
}