diff options
Diffstat (limited to 'pixeled.css')
| -rw-r--r-- | pixeled.css | 177 |
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; } |