| @@ -5,8 +5,15 @@ html, body { | |||||
| margin: 0; | margin: 0; | ||||
| display: flex; | display: flex; | ||||
| flex-direction: column; | flex-direction: column; | ||||
| background: #111; | |||||
| color: #ddd; | |||||
| } | } | ||||
| input, | |||||
| button { | |||||
| background: #111; | |||||
| color: #ddd; | |||||
| } | |||||
| canvas { | canvas { | ||||
| position: absolute; | position: absolute; | ||||
| } | } | ||||
| @@ -35,12 +42,19 @@ img { | |||||
| #menu.start { | #menu.start { | ||||
| flex-direction: column; | flex-direction: column; | ||||
| min-width: 100vw; | |||||
| min-height: 100vh; | |||||
| justify-content: center; | |||||
| } | |||||
| #menu.start input { | |||||
| font-size: 24pt; | |||||
| } | } | ||||
| #menu.start input, | |||||
| #menu.start button, | |||||
| #menu.start label { | |||||
| font-size: 36pt; | |||||
| #menu.start label, | |||||
| #menu.start button { | |||||
| font-size: 48pt; | |||||
| margin: 16pt; | |||||
| } | } | ||||
| #menu.start input { | #menu.start input { | ||||
| @@ -68,6 +82,11 @@ img { | |||||
| max-width: 72pt; | max-width: 72pt; | ||||
| } | } | ||||
| .large > input[type=checkbox] { | |||||
| width: 1em; | |||||
| height: 1em; | |||||
| } | |||||
| #fill-div { | #fill-div { | ||||
| position: relative; | position: relative; | ||||
| flex: 1 0; | flex: 1 0; | ||||
| @@ -14,14 +14,10 @@ | |||||
| <body> | <body> | ||||
| <div id="menu" class="start"> | <div id="menu" class="start"> | ||||
| <label class="onlystart"> | |||||
| Base: | |||||
| <input type="text" id="base-url" placeholder="URL for base image"> | |||||
| </label> | |||||
| <label class="onlystart"> | |||||
| Overlay: | |||||
| <input type="text" id="overlay-url" placeholder="URL for overlay image"> | |||||
| </label> | |||||
| <label class="onlystart">Base</label> | |||||
| <input class="onlystart" type="text" id="base-url" placeholder="URL for base image"> | |||||
| <label class="onlystart">Overlay</label> | |||||
| <input class="onlystart"type="text" id="overlay-url" placeholder="URL for overlay image"> | |||||
| <button id="load-button" class="onlystart">Load</button> | <button id="load-button" class="onlystart">Load</button> | ||||
| <button id="reset-button" class="nostart large">Reset</button> | <button id="reset-button" class="nostart large">Reset</button> | ||||
| <label class="nostart large"> | <label class="nostart large"> | ||||