- Tune OTP input spacing
- Browse files
-
Xdev Host Manager committed a day ago
Showing 1 changed files
with
9 additions
and
9 deletions
+9
-9
scripts/host_manager.pl
@@ -1161,7 +1161,7 @@ sub app_html {
|
||
| 1161 | 1161 |
} |
| 1162 | 1162 |
.login-card {
|
| 1163 | 1163 |
--otp-size: 48px; |
| 1164 |
- --otp-gap: 8px; |
|
| 1164 |
+ --otp-gap: 14px; |
|
| 1165 | 1165 |
--login-form-width: calc((var(--otp-size) * 6) + (var(--otp-gap) * 5)); |
| 1166 | 1166 |
background: #fff; |
| 1167 | 1167 |
border-radius: 16px; |
@@ -1189,7 +1189,7 @@ sub app_html {
|
||
| 1189 | 1189 |
gap: 16px; |
| 1190 | 1190 |
width: min(100%, var(--login-form-width)); |
| 1191 | 1191 |
justify-self: center; |
| 1192 |
- padding-bottom: clamp(116px, 14vh, 156px); |
|
| 1192 |
+ padding-bottom: clamp(76px, 9vh, 108px); |
|
| 1193 | 1193 |
} |
| 1194 | 1194 |
.login-card form.busy { opacity: .72; pointer-events: none; }
|
| 1195 | 1195 |
.login-card .field-label { font-size: 13px; font-weight: 600; color: var(--ink); }
|
@@ -1209,7 +1209,7 @@ sub app_html {
|
||
| 1209 | 1209 |
.otp-row input.filled { border-color: #b3c6f0; background: #fff; }
|
| 1210 | 1210 |
#login-error {
|
| 1211 | 1211 |
color: var(--bad); font-size: 13px; text-align: center; |
| 1212 |
- min-height: 18px; margin-top: -120px; |
|
| 1212 |
+ min-height: 18px; margin-top: -84px; |
|
| 1213 | 1213 |
} |
| 1214 | 1214 |
@media (max-width: 760px) {
|
| 1215 | 1215 |
.login-card {
|
@@ -1220,24 +1220,24 @@ sub app_html {
|
||
| 1220 | 1220 |
} |
| 1221 | 1221 |
.login-card .brand h1 { font-size: 24px; }
|
| 1222 | 1222 |
.login-card .brand p { font-size: 14px; }
|
| 1223 |
- .login-card form { padding-bottom: 104px; }
|
|
| 1224 |
- #login-error { margin-top: -90px; }
|
|
| 1223 |
+ .login-card form { padding-bottom: 78px; }
|
|
| 1224 |
+ #login-error { margin-top: -68px; }
|
|
| 1225 | 1225 |
} |
| 1226 | 1226 |
@media (max-width: 430px) {
|
| 1227 | 1227 |
#login-screen { padding: 24px 16px 120px; }
|
| 1228 | 1228 |
.login-card {
|
| 1229 | 1229 |
--otp-size: 42px; |
| 1230 |
- --otp-gap: 6px; |
|
| 1230 |
+ --otp-gap: 10px; |
|
| 1231 | 1231 |
padding: 36px 22px 34px; |
| 1232 | 1232 |
} |
| 1233 | 1233 |
.otp-row input { height: 52px; }
|
| 1234 |
- .login-card form { padding-bottom: 88px; }
|
|
| 1234 |
+ .login-card form { padding-bottom: 70px; }
|
|
| 1235 | 1235 |
} |
| 1236 | 1236 |
@media (max-height: 720px) {
|
| 1237 | 1237 |
#login-screen { padding-top: 28px; padding-bottom: 96px; }
|
| 1238 | 1238 |
.login-card { padding-top: 34px; padding-bottom: 34px; gap: 20px; }
|
| 1239 |
- .login-card form { padding-bottom: 72px; }
|
|
| 1240 |
- #login-error { margin-top: -58px; }
|
|
| 1239 |
+ .login-card form { padding-bottom: 58px; }
|
|
| 1240 |
+ #login-error { margin-top: -46px; }
|
|
| 1241 | 1241 |
} |
| 1242 | 1242 |
|
| 1243 | 1243 |
/* ── App shell (hidden until authenticated) ── */ |