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 4a40e8d676ae34bb217630046d1f97f512d35195..98bcf51addde3857545c84a198a14c9f7da59c35 100644 (file)
--- 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 {