diff --git a/index.html b/index.html index ab7c251..9ab817f 100644 --- a/index.html +++ b/index.html @@ -4,10 +4,14 @@ Tile Painter + + -
+ + +
-
-
- +
- - \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..df90c37 --- /dev/null +++ b/styles.css @@ -0,0 +1,100 @@ +/* reset */ +body { + margin: 0; + font-family: sans-serif; + overflow: hidden; + background: #303030; +} + +/* canvas */ +canvas { + margin: 20px; + + object-fit: contain; +} + +/* bottom control bar */ +.controls { + position: fixed; + bottom: 0; + left: 0; + width: 100%; + + display: flex; + flex-wrap: wrap; + gap: 8px; + + padding: 10px; + box-sizing: border-box; + + align-items: center; + + background: rgba(97, 97, 97, 0.68); + backdrop-filter: blur(6px); + + z-index: 10; +} + +.controls label { + display: flex; + align-items: center; + gap: 6px; + + font-size: 12px; + color: #ccc; + opacity: 0.8; +} + +.controls input, +.controls button { + font: inherit; + font-size: 12px; + + padding: 4px; + + background: #70707023; + color: #eee; + + border: 1px solid #444; + border-radius: 4px; +} + +.controls input:hover, +.controls button:hover { + background: #99999934; +} + +/* number inputs */ +.controls input[type="number"] { + width: 60px; + -moz-appearance: textfield; +} + +.controls input::-webkit-outer-spin-button, +.controls input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} + +/* color picker */ +.controls input[type="color"] { + width: 32px; + height: 24px; + padding: 2px; +} + +/* buttons */ +.controls button { + cursor: pointer; + background-color: #26869c94; +} + +.controls button:hover { + color: #ffffff; + background-color: #135e6ea8; +} + +.controls button:active { + color: #ffffff; + background-color: #06677cef; +} \ No newline at end of file