Add dark theme; center and spread out the start screen

5 年前 · a99643e5ac
--- a/xray.css
+++ b/xray.css
@@ -5,8 +5,15 @@ html, body {
    margin: 0;
    display: flex;
    flex-direction: column;
    background: #111;
    color: #ddd;
 }

 input,
 button {
    background: #111;
    color: #ddd;
 }
 canvas {
    position: absolute;
 }
@@ -35,12 +42,19 @@ img {

 #menu.start {
    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 {
@@ -68,6 +82,11 @@ img {
    max-width: 72pt;
 }

 .large > input[type=checkbox] {
    width: 1em;
    height: 1em;
 }

 #fill-div {
    position: relative;
    flex: 1 0;
--- a/xray.html
+++ b/xray.html
@@ -14,14 +14,10 @@

 <body>
    <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="reset-button" class="nostart large">Reset</button>
        <label class="nostart large">