Add usimp.js

www/res/styles/styles.css

@@ -4,6 +4,7 @@
     --bg-win: rgba(192, 192, 192, 0.25);
     --bg: rgba(224, 224, 224, 0.5);
     --fg-soft: rgba(32, 32, 32, 0.5);
+    --footer-height: 2em;
 }
 
 noscript {
@@ -31,6 +32,18 @@ main {
     margin: 0 auto;
 }
 
+div#wrapper {
+    box-sizing: border-box;
+    width: 100%;
+    height: calc(100vh - var(--footer-height));
+}
+
+@media screen and (max-width: 600px) {
+    div#wrapper {
+        height: 100vh;
+    }
+}
+
 h1, h2, h3, h4, h5, h6 {
     color: #000000;
     font-weight: normal;
@@ -64,35 +77,15 @@ div#welcome-win {
 div#login-win h1,
 div#welcome-win h1 {
     text-align: center;
-}
-
-div#welcome-win a {
-    text-decoration: none;
-    background-color: var(--bg);
-    border: 1px solid var(--bg);
-    padding: 0.5em 1em;
-    margin: 1em auto;
-    border-radius: 4px;
-    display: block;
-    width: 50px;
-    text-align: center;
-    color: #000000;
-}
-
-div#welcome-win a:hover {
-
+    font-size: 1.5rem;
 }
 
 footer {
-    position: fixed;
-    bottom: 0;
-    left: 0;
     width: 100%;
     border-top: 1px solid var(--bg-win);
     background: var(--bg-win);
-    height: 2em;
+    height: var(--footer-height);
     backdrop-filter: blur(32px);
-    margin-top: 1em;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -102,7 +95,9 @@ footer {
 @media screen and (max-width: 600px) {
     footer {
         flex-direction: column;
-        height: 4em;
+    }
+    * {
+        --footer-height: 4em;
     }
 }
 
@@ -116,24 +111,57 @@ footer div {
 
 form {
     max-width: 400px;
-    margin: 2em auto;
+    margin: 1.5em auto;
 }
 
-form input {
+form input,
+form button,
+a.button {
     background-color: var(--bg);
     border: 1px solid var(--bg);
     border-radius: 4px;
     outline: none;
     padding: 0.5em 1em;
     display: block;
-    width: 100%;
     box-sizing: border-box;
-    margin: 1em 0;
+    margin: 1em auto;
     font-size: 1em;
     color: #000000;
+    transition: border-color 0.125s, background-color 0.125s;
+}
+
+a.button {
+    text-decoration: none;
+    text-align: center;
+    display: block;
+    width: 100px;
+}
+
+form input,
+form button {
+    width: 100%;
+}
+
+form button,
+a.button {
+    cursor: pointer;
 }
 
 form input::placeholder {
     color: var(--fg-soft);
     opacity: 1;
 }
+
+form input:focus,
+form input:hover,
+form button:focus,
+form button:hover,
+a.button:focus,
+a.button:hover {
+    border-color: rgba(255, 255, 255, 0.75);
+}
+
+form button:active,
+a.button:active {
+    background-color: rgba(224, 224, 224, 0.75);
+}