tidy stylesheets and improve replies styling

1 files changed, 71 insertions, 0 deletions

diff --git a/static/form.css b/static/form.css
new file mode 100644
index 0000000..91f755b
--- /dev/null
+++ b/static/form.css
@@ -0,0 +1,71 @@
+form {
+  border: 1px solid #3334;
+  background: #9892;
+  border-radius: 8px;
+  margin: 16px;
+  padding: 16px;
+  display: grid;
+  grid-auto-flow: row;
+  gap: 8px;
+  max-width: max-content;
+
+  label:has(+ input, + textarea) {
+    display: block;
+    font-size: 10pt;
+    color: #555;
+  }
+  input:not([type="checkbox"]),
+  textarea {
+    display: block;
+    border: 1px solid #3334;
+    border-radius: 8px;
+    margin: 8px 0;
+    padding: 8px;
+    font-family: inherit;
+    font-size: inherit;
+    color: inherit;
+    background: #fff;
+    width: min(60vw, 24em, calc(100% - 16px));
+  }
+  textarea {
+    resize: vertical;
+  }
+  button {
+    background: #3b005e;
+    color: #fff;
+    font-family: inherit;
+    font-size: inherit;
+    border-radius: 8px;
+    border: none;
+    width: 100%;
+    padding: 8px;
+    box-sizing: border-box;
+    cursor: pointer;
+    &:disabled {
+      opacity: 80%;
+      cursor: default;
+    }
+  }
+  .error {
+    background: #f004;
+    border: 1px solid #f007;
+    border-radius: 8px;
+    padding: 16px;
+    margin: 0;
+  }
+
+  &.noteReplyForm {
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+    margin-top: 8px;
+    max-width: 100%;
+    input:not([type="checkbox"]),
+    textarea,
+    button {
+      width: 100%;
+      box-sizing: border-box;
+    }
+  }
+}