Fix comment form

1 files changed, 58 insertions, 7 deletions

diff --git a/static/css/style.css b/static/css/style.css
index 3328f8c..442af67 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -278,7 +278,7 @@ a:hover {
     border-color: #2e8b57
 }
 
-.comment-form textarea,.form-row input,.search-module input {
+#comment-form textarea,.form-row input,.search-module input {
     flex: 1;
     font-size: 9px;
     border: 1px solid #ccc;
@@ -286,7 +286,7 @@ a:hover {
     font-family: inherit
 }
 
-.comment-form button,.search-module button {
+#comment-form button,.search-module button {
     text-transform: uppercase;
     font-size: 9px;
     cursor: pointer
@@ -392,20 +392,21 @@ hr {
     border: 1px solid #ccc
 }
 
-.comment-form {
+#comment-form {
+    display: flex;
     flex-direction: column
 }
 
-.comment-form,.form-row,.legacy-warning {
+#comment-form,.form-row,.legacy-warning {
     display: flex;
     gap: 8px
 }
 
-.comment-form textarea,.form-row input {
+#comment-form textarea,.form-row input {
     padding: 5px
 }
 
-.comment-form button {
+#comment-form button {
     align-self: flex-start;
     background: #333;
     color: #fff;
@@ -413,10 +414,60 @@ hr {
     padding: 5px 15px
 }
 
-.comment-form button:hover {
+#comment-form button:hover {
     background: #2e8b57
 }
 
+#captcha-image-wrapper img {
+    border: 1px solid #ccc;
+    background: #fff;
+    display: block;
+    max-width: 100%
+}
+
+#captcha-input-wrapper {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+    gap: 8px;
+    margin-top: 12px
+}
+
+#captcha-input-wrapper input {
+    flex: 1;
+    font-size: 9px;
+    border: 1px solid #ccc;
+    padding: 5px
+}
+
+#captcha-challenge-trigger {
+    height: 23px;
+    padding: 0 10px;
+    font-size: 9px;
+    text-transform: uppercase;
+    cursor: pointer;
+    background: #eee;
+    border: 1px solid #ccc
+}
+
+#captcha-alternative-wrapper {
+    align-items: center;
+    gap: 10px;
+}
+
+#captcha-alternative-wrapper button {
+    background: #eee;
+    border: 1px solid #ccc;
+    color: #333;
+    font-size: 9px
+}
+
+#captcha-alternative-wrapper p {
+    font-size: 9px;
+    margin: 0;
+    color: #999
+}
+
 .legacy-warning {
     background: linear-gradient(to bottom,#fff3e0 0,#ffe0b2 100%);
     border: 1px dotted #fb8c00;