user authentication in browser

1 files changed, 68 insertions, 0 deletions

diff --git a/public/app.css b/public/app.css
index cca57b3..927cdf2 100644
--- a/public/app.css
+++ b/public/app.css
@@ -3,3 +3,71 @@
   padding: 0;
   box-sizing: border-box;
 }
+
+body, html {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  line-height: 1.5;
+  font-size: 15px;
+}
+
+h1 {
+  margin: 0 0 10px;
+}
+
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(255,255,255,0.9);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.1s;
+}
+
+.modal.visible {
+  pointer-events: auto;
+  opacity: 1;
+}
+
+.inner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%) translateZ(0);
+  background: white;
+  box-shadow: 0 1px 1px #888;
+  padding: 20px;
+}
+
+.modal .close {
+  position: absolute;
+  top: 5px;
+  right: 10px;
+  background: white;
+  cursor: pointer;
+}
+
+input, input[type=submit], button {
+  border: 1px solid #888;
+  color: black;
+  background: white;
+  font-size: 15px;
+  line-height: 1;
+  padding: 5px;
+  margin: 5px;
+}
+
+input[type=submit], button {
+  border-color: black;
+  border-radius: 4px;
+}
+
+.error {
+  color: red;
+}