Automatic SQL updates

static/css/login.css

@@ -8,9 +8,8 @@
   margin-bottom: 32px;
   width: 100%;
   border: 0px;
-  border-bottom: 1px solid #fff;
+  border-bottom: 1px solid #444;
   font-size: 18pt;
-  color: #fff;
   background-color: #fff;
 }
 #login input:focus {
@@ -20,11 +19,14 @@
   max-width: 300px;
   border: 1px solid #666;
   background: #fff;
-  color: #fff;
+  color: #444;
   padding: 16px 32px;
-  font-size: 0.8em;
+  font-size: 1em;
   align-self: center;
 }
+#login button:hover {
+  background: #ddd;
+}
 #login .auth-failed {
   margin-top: 32px;
   color: #a00;

static/css/main.css

@@ -24,9 +24,48 @@ h1 {
   display: grid;
   color: #fff;
 }
+#menu-blackout {
+  display: none;
+  position: absolute;
+  left: 0px;
+  right: 0px;
+  top: 0px;
+  bottom: 0px;
+  z-index: 1024;
+  background: rgba(0, 0, 0, 0.35);
+}
+#menu-blackout.show {
+  display: initial;
+}
+#menu {
+  display: none;
+  position: absolute;
+  top: 24px;
+  right: 24px;
+  background: #fff;
+  color: #000;
+  border: 2px solid #000;
+  box-shadow: 5px 5px 8px 0px rgba(0, 0, 0, 0.5);
+  z-index: 1025;
+}
+#menu.show {
+  display: initial;
+}
+#menu .item {
+  padding: 16px;
+  border-bottom: 1px solid #aaa;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
+#menu .item:hover {
+  background: #ddd;
+}
+#menu .item:last-child {
+  border-bottom: none;
+}
 header {
   display: grid;
-  grid-template-columns: 1fr min-content;
+  grid-template-columns: 1fr min-content min-content;
   align-items: center;
   background: #ecbf00;
   padding: 0px;
@@ -45,6 +84,13 @@ header .add {
   padding-right: 16px;
   cursor: pointer;
 }
+header .menu {
+  font-size: 1.25em;
+  padding-right: 16px;
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
 .crumbs {
   display: flex;
   flex-wrap: wrap;
@@ -98,7 +144,7 @@ header .add {
 }
 .node-content {
   justify-self: center;
-  padding: 0px 32px 32px 32px;
+  padding: 0px 32px;
   white-space: pre-wrap;
   font-size: 0.85em;
   color: #333;
@@ -107,9 +153,13 @@ header .add {
 .node-content[contenteditable] {
   outline: 0px solid transparent;
 }
+.node-content:empty {
+  background: #ddd;
+  height: 48px;
+}
 @media only screen and (max-width: 100ex) {
   .node-content {
-    width: initial;
+    width: 100%;
     justify-self: start;
   }
 }