Tweak different captcha

gulp/res/css/nscaptcha.css

@@ -9,14 +9,22 @@ input {
 	left: -3px;
 	bottom: 0;
 	opacity: 0.9;
-    border: none;
-    background: none;
+	border: none;
+	background: none;
 	font-size: 18px;
 	cursor: pointer;
+	text-shadow: rgb(0, 0, 0) 0px 0px 1px, rgb(0, 0, 0) 0px 0px 1px, rgb(0, 0, 0) 0px 0px 1px, rgb(0, 0, 0) 0px 0px 1px, rgb(0, 0, 0) 0px 0px 1px, rgb(0, 0, 0) 0px 0px 1px;
+	color: white;
 }
 body {
-    font-family: arial, helvetica, sans-serif;
-    font-size: 10pt;
-    margin: 0;
+	font-family: arial, helvetica, sans-serif;
+	font-size: 10pt;
+	margin: 0;
 	padding: 0;
 }
+.flexcenter {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+

gulp/res/css/style.css

@@ -1035,6 +1035,11 @@ input[type="file"] {
 	box-sizing: border-box;
 }
 
+.captchafield {
+	grid-template-columns: 1fr 1fr 1fr 1fr;
+	display: grid;
+}
+
 iframe.captcha, iframe.bypass {
 	/*dumb hack cos of noscript wrapping in unstyleable span*/
 	margin-bottom: -2px;

gulp/res/js/captcha.js

@@ -64,6 +64,8 @@ class CaptchaController {
 		const captchaDiv = field.previousSibling;
 		const captchaImg = document.createElement('img');
 		const refreshDiv = document.createElement('div');
+		captchaImg.style.margin = '0 auto';
+		captchaImg.style.display = 'flex';
 		refreshDiv.classList.add('captcharefresh', 'noselect');
 		refreshDiv.addEventListener('click', (e) => this.refreshCaptchas(e), true);
 		refreshDiv.textContent = '↻';

gulp/res/js/captchaformsection.js

@@ -11,9 +11,9 @@ if (googleRecaptchaEnabled) {
 pug_html = pug_html + "\u003Cdiv" + (" class=\"g-recaptcha captchafield\""+pug_attr("data-sitekey", `${googleRecaptchaSiteKey}`, true, false)+" data-theme=\"dark\" data-size=\"compact\" data-callback=\"recaptchaCallback\"") + "\u003E\u003C\u002Fdiv\u003E";
 }
 else {
-pug_html = pug_html + "\u003Cnoscript class=\"no-m-p\"\u003E\u003Ciframe class=\"captcha\" src=\"\u002Fcaptcha.html\" width=\"150\" height=\"150\" scrolling=\"no\" loading=\"lazy\"\u003E\u003C\u002Fiframe\u003E\u003C\u002Fnoscript\u003E\u003Cdiv class=\"jsonly captcha\" style=\"display:none;\"\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"captchafield\" style=\"grid-template-columns: 1fr 1fr 1fr 1fr;display: grid;\"\u003E";
+pug_html = pug_html + "\u003Cnoscript class=\"no-m-p\"\u003E\u003Ciframe class=\"captcha\" src=\"\u002Fcaptcha.html\" width=\"150\" height=\"150\" scrolling=\"no\" loading=\"lazy\"\u003E\u003C\u002Fiframe\u003E\u003C\u002Fnoscript\u003E\u003Cdiv class=\"jsonly captcha\" style=\"display:none;\"\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"captchafield\"\u003E";
 for(let i = 0; i < 16; i++) {
-pug_html = pug_html + "\u003Cinput" + (" type=\"checkbox\" name=\"captcha\""+pug_attr("value", i, true, false)) + "\u002F\u003E";
+pug_html = pug_html + "\u003Cinput" + (" type=\"checkbox\" name=\"captcha\""+pug_attr("value", i, true, false)+" style=\"width:100%;height:25px;margin:3px;\"") + "\u002F\u003E";
 }
 pug_html = pug_html + "\u003C\u002Fdiv\u003E";
 }

views/includes/captcha.pug

@@ -4,7 +4,7 @@ else
 	noscript.no-m-p
 		iframe.captcha(src='/captcha.html' width='150' height='150' scrolling='no' loading='lazy')
 	.jsonly.captcha(style='display:none;')
-	div.captchafield(style='grid-template-columns: 1fr 1fr 1fr 1fr;display: grid;')
+	.captchafield
 		- for(let i = 0; i < 16; i++) {
-		input(type='checkbox' name='captcha' value=i)
+		input(type='checkbox' name='captcha' value=i style='width:100%;height:25px;margin:3px;')
 		- }

views/pages/captcha.pug

@@ -4,6 +4,6 @@ html
 		meta(charset='utf-8')
 		link(rel='stylesheet', href='/css/nscaptcha.css')
 	body
-		img(src='/captcha')
+		img.flexcenter(src='/captcha')
 		form(action='/forms/newcaptcha', method='POST')
 			input(type='submit' value='↻')