Tweak different captcha

gulp/res/css/nscaptcha.css

@@ -1,6 +1,6 @@
 img {
-	width: 150px;
+	width: 200px;
-	height: 150px;
+	height: 200px;
 	image-rendering: crisp-edges;
 	margin: 0 auto;
 }

gulp/res/css/style.css

@@ -3,6 +3,7 @@
 	--spoiler-img: url('/file/spoiler.png');
 	--audio-img: url('/file/audio.png');
 	--thumbnail-size: 250px;
+	--captcha-size: 200px;
 }
 
 body {
@@ -599,6 +600,41 @@ details.actions div {
 	padding: 2px 0;
 }
 
+div.captchafield {
+	padding: 0px;
+	grid-template-columns: 1fr 1fr 1fr 1fr;
+	display: grid;
+	width: var(--captcha-size);
+	height: var(--captcha-size);
+	margin-left: 1px;
+	box-sizing: border-box;
+	border: 1px solid var(--font-color);
+}
+
+label.captchachecklabel {
+	border: 1px solid var(--font-color);
+	max-width: 50px;
+	padding: 0px;
+}
+
+label.captchachecklabel input {
+	position: absolute;
+	opacity: 0;
+	cursor: pointer;
+	height: 0;
+	width: 0;
+}
+
+label.captchachecklabel input:checked ~ .captchacheckbox {
+	background-color: var(--font-color);
+}
+
+span.captchacheckbox {
+	display: flex;
+	cursor: pointer;
+	height: 100%;
+}
+
 .toggle-summary {
 	padding: 10px;
 	cursor: pointer;
@@ -1035,26 +1071,22 @@ 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;
 }
 
 iframe.bypass {
-	height: 235px; /*probs needs bigger for google captcha*/
+	height: 320px; /*probs needs bigger for google captcha*/
-	width: 330px;
+	width: 450px;
 }
 
 .captcha {
 	border: 1px solid var(--input-borders);
 	background: white;
 	margin-bottom: 1px;
-	width: 100%;
+	width: var(--captcha-size);
+	height: var(--captcha-size);
 	box-sizing: border-box;
 	object-fit: contain;
 	overflow: hidden;

gulp/res/js/captcha.js

@@ -17,7 +17,6 @@ class CaptchaController {
 		if (captcha.form && captcha.form.dataset.captchaPreload == 'true') {
 			this.loadCaptcha(captcha);
 		} else {
-			captcha.placeholder = 'focus to load captcha';
 			captcha.addEventListener('mouseover', () => this.loadCaptcha(captcha), { once: true });
 		}
 	}
@@ -66,13 +65,12 @@ class CaptchaController {
 		const refreshDiv = document.createElement('div');
 		captchaImg.style.margin = '0 auto';
 		captchaImg.style.display = 'flex';
+		captchaImg.style.width = '100%';
 		refreshDiv.classList.add('captcharefresh', 'noselect');
 		refreshDiv.addEventListener('click', (e) => this.refreshCaptchas(e), true);
 		refreshDiv.textContent = '↻';
-		field.placeholder = 'loading';
 		captchaImg.src = '/captcha';
 		captchaImg.onload = function() {
-				field.placeholder = '';
 				captchaDiv.appendChild(captchaImg);
 				captchaDiv.appendChild(refreshDiv);
 				captchaDiv.style.display = '';

gulp/res/js/captchaformsection.js

@@ -6,18 +6,18 @@ var pug_match_html=/["&<>]/;function captchaformsection(locals) {var pug_html =
     (function (googleRecaptchaEnabled, googleRecaptchaSiteKey) {
       pug_mixins["captchaformsection"] = pug_interp = function(){
 var block = (this && this.block), attributes = (this && this.attributes) || {};
-pug_html = pug_html + "\u003Csection class=\"row\"\u003E\u003Cdiv class=\"label\"\u003E\u003Cspan\u003ECaptcha\u003Cspan class=\"required\"\u003E*\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"col\"\u003E";
+pug_html = pug_html + "\u003Cdetails class=\"row label mr-0\"\u003E\u003Csummary class=\"pv-5\"\u003ECaptcha\u003Cspan class=\"required\"\u003E*\u003C\u002Fspan\u003E\u003C\u002Fsummary\u003E\u003Cdiv class=\"catalog\"\u003E";
 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\"\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 noselect\"\u003E";
 for(let i = 0; i < 16; i++) {
-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 + "\u003Clabel class=\"captchachecklabel\"\u003E\u003Cinput" + (" type=\"checkbox\" name=\"captcha\""+pug_attr("value", i, true, false)) + "\u002F\u003E\u003Cspan class=\"captchacheckbox\"\u003E\u003C\u002Fspan\u003E\u003C\u002Flabel\u003E";
 }
 pug_html = pug_html + "\u003C\u002Fdiv\u003E";
 }
-pug_html = pug_html + "\u003C\u002Fdiv\u003E\u003C\u002Fsection\u003E";
+pug_html = pug_html + "\u003C\u002Fdiv\u003E\u003C\u002Fdetails\u003E";
 };
 pug_mixins["captchaformsection"]();
     }.call(this, "googleRecaptchaEnabled" in locals_for_with ?

views/includes/actionfooter.pug

@@ -23,5 +23,6 @@ details.toggle-label#actionform
 			input#report(type='text', name='report_reason', placeholder='Report reason' autocomplete='off')
 	.actions
 		h4.no-m-p Captcha:
+		.catalog
 			include ./captcha.pug
 	input(type='submit', value='submit')

views/includes/banform.pug

@@ -10,8 +10,5 @@ form.form-post(action=`/forms/appeal`, enctype='application/x-www-form-urlencode
 				.row
 					.label Message
 					textarea(rows='5' name='message' required)
-				.row
+				include ./captchafieldrow.pug
-					.label Captcha
-					span.col
-						include ./captcha.pug
 				input(type='submit', value='submit')

views/includes/captcha.pug

@@ -3,8 +3,10 @@ if googleRecaptchaEnabled
 else
 	noscript.no-m-p
 		iframe.captcha(src='/captcha.html' width='150' height='150' scrolling='no' loading='lazy')
-	.jsonly.captcha(style='display:none;')
+	.jsonly.captcha(style='display:none')
-	.captchafield
+	.captchafield.noselect
 		- for(let i = 0; i < 16; i++) {
-		input(type='checkbox' name='captcha' value=i style='width:100%;height:25px;margin:3px;')
+		label.captchachecklabel
+			input(type='checkbox' name='captcha' value=i)
+			span.captchacheckbox
 		- }

views/includes/captchafieldrow.pug

@@ -0,0 +1,5 @@
+details.row.label.mr-0
+	summary.pv-5 Captcha
+		span.required *
+	.catalog
+		include ./captcha.pug

views/includes/postform.pug

@@ -65,11 +65,6 @@ section.form-wrapper.flex-center
 				.label Password
 				input(type='password', name='postpassword', placeholder='Password to delete/spoiler/unlink later' maxlength='50')
 		if ((board.settings.captchaMode === 1 && !isThread) || board.settings.captchaMode === 2) && !modview
-			section.row
+			include ./captchafieldrow.pug
-				.label
-					span Captcha
-						span.required *
-				.col
-					include ./captcha.pug
 		input#submitpost(type='submit', value=`New ${isThread ? 'Reply' : 'Thread'}`)
 	a.toggle-summary.no-decoration(href='#postform') [New Post]

views/mixins/captchaformsection.pug

@@ -1,7 +1,2 @@
 mixin captchaformsection()
-	section.row
+	include ../includes/captchafieldrow.pug
-		.label
-			span Captcha
-				span.required *
-		.col
-			include ../includes/captcha.pug

views/pages/bypass.pug

@@ -9,9 +9,7 @@ block content
 		if message
 			p.title #{message}
 		form.form-post(action='/forms/blockbypass' method='POST' data-captcha-preload='true')
-			.row
+			.catalog
-				.label Captcha
-				span.col
 				include ../includes/captcha.pug
 			if minimal
 				input(type='hidden' name='minimal' value='1')

views/pages/changepassword.pug

@@ -19,10 +19,7 @@ block content
 			.row
 				.label Confirm New Password
 				input(type='password', name='newpasswordconfirm', maxlength='100' required)
-			.row
+			include ../includes/captchafieldrow.pug
-				.label Captcha
-				span.col
-					include ../includes/captcha.pug
 			input(type='submit', value='Change Password')
 		p: a(href='/login.html') Login
 		if enableUserAccountCreation

views/pages/create.pug

@@ -19,9 +19,6 @@ block content
 			.row
 				.label Tags
 				textarea(name='tags' placeholder='Newline separated, max 10')
-			.row
+			include ../includes/captchafieldrow.pug
-				.label Captcha
-				span.col
-					include ../includes/captcha.pug
 			input(type='submit', value='submit')
 

views/pages/register.pug

@@ -16,10 +16,7 @@ block content
 			.row
 				.label Confirm Password
 				input(type='password', name='passwordconfirm', maxlength='100' required)
-			.row
+			include ../includes/captchafieldrow.pug
-				.label Captcha
-				span.col
-					include ../includes/captcha.pug
 			input(type='submit', value='Register')
 		p: a(href='/login.html') Login
 		p: a(href='/changepassword.html') Change Password