From 2f185deee7e374f219f75a01e5e18b9cc625fccb Mon Sep 17 00:00:00 2001
From: Thomas Lynch <tom@69420.me>
Date: Fri, 21 Aug 2020 02:39:54 +0000
Subject: [PATCH] Tweak different captcha

---
 gulp/res/css/nscaptcha.css        | 18 +++++++++++++-----
 gulp/res/css/style.css            |  5 +++++
 gulp/res/js/captcha.js            |  2 ++
 gulp/res/js/captchaformsection.js |  4 ++--
 views/includes/captcha.pug        |  4 ++--
 views/pages/captcha.pug           |  2 +-
 6 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/gulp/res/css/nscaptcha.css b/gulp/res/css/nscaptcha.css
index ccf4a6e2..70b6166f 100644
--- a/gulp/res/css/nscaptcha.css
+++ b/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;
+}
+
diff --git a/gulp/res/css/style.css b/gulp/res/css/style.css
index 13febde3..5fcb3591 100644
--- a/gulp/res/css/style.css
+++ b/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;
diff --git a/gulp/res/js/captcha.js b/gulp/res/js/captcha.js
index 1305ab8e..655ae226 100644
--- a/gulp/res/js/captcha.js
+++ b/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 = '↻';
diff --git a/gulp/res/js/captchaformsection.js b/gulp/res/js/captchaformsection.js
index aab7fd0e..cb04aacc 100644
--- a/gulp/res/js/captchaformsection.js
+++ b/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";
 }
diff --git a/views/includes/captcha.pug b/views/includes/captcha.pug
index 218b7af6..42ca8707 100644
--- a/views/includes/captcha.pug
+++ b/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;')
 		- }
diff --git a/views/pages/captcha.pug b/views/pages/captcha.pug
index 64de269c..52a60bac 100644
--- a/views/pages/captcha.pug
+++ b/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='↻')