fix comment style

comments.php

@@ -38,20 +38,19 @@
 
               <p>
                 <label for="author" class="required"><?php _e('称呼'); ?></label>
-                <input type="text" name="author" id="author" class="text" value="<?php $this->remember('author'); ?>" required />
+                <input type="text" name="author" id="author" class="text inputbox" value="<?php $this->remember('author'); ?>" required />
             </p>
             <p>
                 <label for="mail"<?php if ($this->options->commentsRequireMail): ?> class="required"<?php endif; ?>><?php _e('邮箱'); ?></label>
-                <input type="email" name="mail" id="mail" class="text" placeholder="<?php _e('name@company.tld'); ?>" value="<?php $this->remember('mail'); ?>"<?php if ($this->options->commentsRequireMail): ?> required<?php endif; ?> />
+                <input type="email" name="mail" id="mail" class="text inputbox" placeholder="<?php _e('name@company.tld'); ?>" value="<?php $this->remember('mail'); ?>"<?php if ($this->options->commentsRequireMail): ?> required<?php endif; ?> />
             </p>
             <p>
                 <label for="url"<?php if ($this->options->commentsRequireURL): ?> class="required"<?php endif; ?>><?php _e('网站'); ?></label>
-                <input type="url" name="url" id="url" class="text" placeholder="<?php _e('https://'); ?>" value="<?php $this->remember('url'); ?>"<?php if ($this->options->commentsRequireURL): ?> required<?php endif; ?> />
+                <input type="url" name="url" id="url" class="text inputbox" placeholder="<?php _e('https://'); ?>" value="<?php $this->remember('url'); ?>"<?php if ($this->options->commentsRequireURL): ?> required<?php endif; ?> />
             </p>
             <?php endif; ?>
             <p>
-                <label for="textarea" class="required"><?php _e('内容'); ?></label>
-                <textarea name="text" id="textarea" class="textarea" required ><?php $this->remember('text'); ?></textarea>
+                <textarea name="text" id="textarea" class="textarea inputbox" required ><?php $this->remember('text'); ?></textarea>
             </p>
             <p>
                 <button type="submit" class="submit"><?php _e('提交评论'); ?></button>

libs/_scss/base.scss

@@ -52,6 +52,13 @@ nav {
 .container {
 	width: 100%;
 }
+button, input, optgroup, select, textarea {
+    padding: 0;
+    line-height: inherit;
+    color: inherit;
+	outline: 0;
+	background-color: white;
+}
 .mx-auto {
 	margin-left: auto;
 	margin-right: auto;

libs/_scss/style.scss

@@ -14,11 +14,15 @@
 	--table-body-even-background-color: #E0E0E0;
 	--code-block-background-color: #E0E0E0;
 	--code-block-color: #004D40;
+	--input-border-radius: 0.5rem;
+	--comment-input-border-color: #9E9E9E;
+	--comment-input-border-focus-color: #3c8baf;
 	--footer-background-color: transparent;
 	--footer-color: #212121;
 	--footer-link-color: #212121;
 	--footer-link-hover-color: #616161;
 }
+
 body {
 	font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Ubuntu", Roboto, "Open Sans", Helvetica, Arial, sans-serif;
 	background-color: var(--global-background-color);
@@ -58,6 +62,7 @@ nav {
 .nav_menu {
 	display: flex;
 	justify-content: flex-end;
+	margin-right: 1rem;
 	li {
 		a {
 			margin: 0 .15rem;
@@ -169,14 +174,53 @@ code {
 	white-space: pre-wrap;
 }
 .comment_form {
+	@media only screen and (min-width: 640px) {
+		width: 450px;
+	}
+	p {
+		display: flex;
+	}
+	label {
+		margin-right: 0.5rem;
+		margin-top: auto;
+		margin-bottom: auto;
+	}
 	.text {
-		width: 400px;
+		flex-grow: 1;
 	}
 	textarea {
-		resize: none !important;
-		width: 400px;
+		resize: none;
+		width: 100%;
 		height: 200px;
 	}
+	.inputbox {
+		-webkit-border-radius: var(--input-border-radius);
+        -moz-border-radius: var(--input-border-radius);
+		border-radius: var(--input-border-radius);
+		border: var(--comment-input-border-color) 2px solid;
+		--webkit-box-shadow: none;
+		box-shadow: none;
+		appearance: none;
+		padding: .5rem;
+		&:focus {
+			border-color: var(--comment-input-border-focus-color);
+			border-style: solid;
+			outline:none;
+		}
+	}
+	.submit {
+		border: none;
+		-webkit-border-radius: var(--input-border-radius);
+        -moz-border-radius: var(--input-border-radius);
+		border-radius: var(--input-border-radius);
+		background-color: #E0E0E0;
+		padding: .75rem 1.5rem;
+		width: 100%;
+		font-weight: 400;
+		&:focus, &:hover {
+			background-color: #90A4AE;
+		}
+	}
 }
 .sidebar_box {
 	font-size: 0.8rem;
@@ -188,6 +232,11 @@ code {
 		}
 	}
 }
+
+.error-page .post-title {
+	text-align: center;
+}
+
 footer {
 	background-color: var(--footer-background-color);
 	color: var(--footer-color);
@@ -202,7 +251,3 @@ footer {
 		}
 	}
 }
-
-.error-page .post-title {
-	text-align: center;
-}