web: EntryProposal form implementation.

web/src/App.scss

@@ -0,0 +1,73 @@
+@import "~@/styles/forSize.mixin";
+
+html { font-size: 16px; }
+
+#app {
+  font-family: "Segoe UI", Helvetica, Arial, sans-serif;
+  box-sizing: border-box;
+
+  button, input, select, textarea {
+    font-size: inherit;
+
+    &:disabled { cursor: not-allowed; }
+  }
+
+  button {
+    color: #1084AC;
+    background-color: #1084AC0A;
+    border: solid thin #1084AC;
+    border-radius: 0.25em;
+    font-weight: bold;
+    font-size: 125%;
+    padding: 0.5em;
+
+    &:not(:disabled) {
+      &:hover, &:focus {
+        color: white;
+        background-color: #1084AC;
+        box-shadow: 0.125em 0.125em 0.25em #aaa;
+      }
+
+      &:active {
+        box-shadow: 0 0 0.125em #999;
+        position: relative;
+        top: 0.125em;
+        left: 0.125em;
+      }
+    }
+
+    &:disabled { opacity: 0.75; }
+  }
+}
+
+.spin {
+  animation-name: spin;
+  animation-duration: 1000ms;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.tumble {
+  animation-name: spin;
+  animation-duration: 2000ms;
+  animation-iteration-count: infinite;
+  animation-timing-function: ease-in-out;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(180deg); }
+}
+
+@include forSize(mobile) {
+  body { margin: 0; }
+}
+
+@include forSize(ultrawide) {
+  html { font-size: 24px; }
+}