- Tighten login bottom spacing
- Browse files
-
Xdev Host Manager committed a day ago
Showing 1 changed files
with
10 additions
and
10 deletions
+10
-10
scripts/host_manager.pl
@@ -1161,14 +1161,14 @@ sub app_html {
|
||
| 1161 | 1161 |
} |
| 1162 | 1162 |
.login-card {
|
| 1163 | 1163 |
--otp-size: 48px; |
| 1164 |
- --otp-gap: 14px; |
|
| 1164 |
+ --otp-gap: 18px; |
|
| 1165 | 1165 |
--login-form-width: calc((var(--otp-size) * 6) + (var(--otp-gap) * 5)); |
| 1166 | 1166 |
background: #fff; |
| 1167 | 1167 |
border-radius: 16px; |
| 1168 | 1168 |
padding: 54px 64px 48px; |
| 1169 | 1169 |
width: 100%; |
| 1170 | 1170 |
max-width: 680px; |
| 1171 |
- min-height: 500px; |
|
| 1171 |
+ min-height: 440px; |
|
| 1172 | 1172 |
display: grid; |
| 1173 | 1173 |
align-content: start; |
| 1174 | 1174 |
justify-items: center; |
@@ -1188,7 +1188,7 @@ sub app_html {
|
||
| 1188 | 1188 |
display: grid; |
| 1189 | 1189 |
width: min(100%, var(--login-form-width)); |
| 1190 | 1190 |
justify-self: center; |
| 1191 |
- padding-bottom: clamp(76px, 9vh, 108px); |
|
| 1191 |
+ padding-bottom: clamp(44px, 6vh, 64px); |
|
| 1192 | 1192 |
} |
| 1193 | 1193 |
.login-card form.busy { opacity: .72; pointer-events: none; }
|
| 1194 | 1194 |
/* 6 separate OTP digit boxes */ |
@@ -1207,7 +1207,7 @@ sub app_html {
|
||
| 1207 | 1207 |
.otp-row input.filled { border-color: #b3c6f0; background: #fff; }
|
| 1208 | 1208 |
#login-error {
|
| 1209 | 1209 |
color: var(--bad); font-size: 13px; text-align: center; |
| 1210 |
- min-height: 18px; margin-top: -84px; |
|
| 1210 |
+ min-height: 18px; margin-top: -52px; |
|
| 1211 | 1211 |
} |
| 1212 | 1212 |
@media (max-width: 760px) {
|
| 1213 | 1213 |
.login-card {
|
@@ -1218,24 +1218,24 @@ sub app_html {
|
||
| 1218 | 1218 |
} |
| 1219 | 1219 |
.login-card .brand h1 { font-size: 24px; }
|
| 1220 | 1220 |
.login-card .brand p { font-size: 14px; }
|
| 1221 |
- .login-card form { padding-bottom: 78px; }
|
|
| 1222 |
- #login-error { margin-top: -68px; }
|
|
| 1221 |
+ .login-card form { padding-bottom: 52px; }
|
|
| 1222 |
+ #login-error { margin-top: -42px; }
|
|
| 1223 | 1223 |
} |
| 1224 | 1224 |
@media (max-width: 430px) {
|
| 1225 | 1225 |
#login-screen { padding: 24px 16px 120px; }
|
| 1226 | 1226 |
.login-card {
|
| 1227 | 1227 |
--otp-size: 42px; |
| 1228 |
- --otp-gap: 10px; |
|
| 1228 |
+ --otp-gap: 12px; |
|
| 1229 | 1229 |
padding: 36px 22px 34px; |
| 1230 | 1230 |
} |
| 1231 | 1231 |
.otp-row input { height: 52px; }
|
| 1232 |
- .login-card form { padding-bottom: 70px; }
|
|
| 1232 |
+ .login-card form { padding-bottom: 48px; }
|
|
| 1233 | 1233 |
} |
| 1234 | 1234 |
@media (max-height: 720px) {
|
| 1235 | 1235 |
#login-screen { padding-top: 28px; padding-bottom: 96px; }
|
| 1236 | 1236 |
.login-card { padding-top: 34px; padding-bottom: 34px; gap: 20px; }
|
| 1237 |
- .login-card form { padding-bottom: 58px; }
|
|
| 1238 |
- #login-error { margin-top: -46px; }
|
|
| 1237 |
+ .login-card form { padding-bottom: 40px; }
|
|
| 1238 |
+ #login-error { margin-top: -32px; }
|
|
| 1239 | 1239 |
} |
| 1240 | 1240 |
|
| 1241 | 1241 |
/* ── App shell (hidden until authenticated) ── */ |