From: Tim Düsterhus <duesterhus@woltlab.com>
Date: Fri, 21 Apr 2023 09:36:05 +0000 (+0200)
Subject: Improve visuals for MFA code inputs
X-Git-Tag: 6.0.0_Alpha_1~222^2
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=48b22f85d10f8bcd8133bc787043563113deb0df;p=GitHub%2FWoltLab%2FWCF.git

Improve visuals for MFA code inputs

The `size=""` attribute does not really match the required size for the input,
even with monospace fonts. Use explicit a `width:` attribute with the `ch` unit
for the few field sizes we actually use, because using an attribute value in
calculations is not possible.

This commit also updates the use of the `monospace` font to
`--wcfFontFamilyMonospace` for consistency.
---

diff --git a/wcfsetup/install/files/style/ui/accountSecurity.scss b/wcfsetup/install/files/style/ui/accountSecurity.scss
index 4a40e8d676..98bcf51add 100644
--- a/wcfsetup/install/files/style/ui/accountSecurity.scss
+++ b/wcfsetup/install/files/style/ui/accountSecurity.scss
@@ -30,12 +30,14 @@
 }
 
 .multifactorBackupCode {
-	font-family: monospace;
+	font-family: var(--wcfFontFamilyMonospace) !important;
+
 	&.used {
 		text-decoration: line-through;
 	}
 	.chunk {
 		margin-left: 5px;
+
 		&:first-child {
 			margin-left: 0;
 			font-weight: 600;
@@ -45,15 +47,24 @@
 
 // Just .multifactorTotpCode is not specific enough.
 input.multifactorTotpCode,
-input.multifactorEmailCode {
-	font-family: monospace;
-	font-weight: 600;
-	font-size: 28px;
-}
+input.multifactorEmailCode,
 input.multifactorBackupCode {
-	font-family: monospace;
+	font-family: var(--wcfFontFamilyMonospace) !important;
 	font-weight: 600;
-	font-size: 18px;
+	box-sizing: content-box;
+
+	&[size="6"] {
+		width: 6ch;
+		font-size: 28px;
+	}
+	&[size="8"] {
+		width: 8ch;
+		font-size: 28px;
+	}
+	&[size="23"] {
+		width: 23ch;
+		font-size: 18px;
+	}
 }
 
 .multifactorTotpNewDevice {