implement settings editor page

2 files changed, 40 insertions, 1 deletions

diff --git a/static/form.css b/static/form.css
index a109c7f..79509d7 100644
--- a/static/form.css
+++ b/static/form.css
@@ -26,7 +26,7 @@ form {
     font-size: inherit;
     color: inherit;
     background: var(--clr-field-background);
-    width: min(60vw, 24em, 100%);
+    width: min(24em, 100%);
     box-sizing: border-box;
   }
   textarea {
@@ -57,4 +57,29 @@ form {
       box-sizing: border-box;
     }
   }
+
+  &.settings {
+    padding: 0;
+    gap: 0;
+    .row {
+      display: grid;
+      grid-template-columns: 1fr 16em;
+      grid-auto-flow: column;
+      gap: var(--spacing-double);
+      align-items: center;
+      padding: var(--spacing-single) var(--spacing-double);
+      &:not(:last-child) {
+        border-bottom: var(--border);
+      }
+      @media (width < 600px) {
+        grid-template-columns: 1fr;
+        grid-auto-flow: row;
+        gap: var(--spacing-single);
+      }
+    }
+    label {
+      color: var(--clr-foreground);
+      font-size: var(--font-normal-size);
+    }
+  }
 }
diff --git a/static/misc.css b/static/misc.css
index ff9fe99..9bf9490 100644
--- a/static/misc.css
+++ b/static/misc.css
@@ -93,6 +93,20 @@ pre {
   text-wrap: wrap;
 }
 
+.temporaryIndicator {
+  color: var(--clr-positive);
+  animation: fadeOut 1s forwards;
+  animation-delay: 2s;
+}
+@keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
 [hidden] {
   display: none;
 }