- Adjust login layout for OTP suggestions
- Browse files
-
Xdev Host Manager committed a day ago
Showing 1 changed files
with
37 additions
and
8 deletions
+37
-8
scripts/host_manager.pl
@@ -1152,20 +1152,24 @@ sub app_html {
|
||
| 1152 | 1152 |
/* ── Login screen ── */ |
| 1153 | 1153 |
#login-screen {
|
| 1154 | 1154 |
display: flex; |
| 1155 |
- align-items: center; |
|
| 1155 |
+ align-items: flex-start; |
|
| 1156 | 1156 |
justify-content: center; |
| 1157 | 1157 |
min-height: 100dvh; |
| 1158 |
- padding: 24px; |
|
| 1158 |
+ padding: clamp(48px, 10vh, 96px) 24px clamp(140px, 20vh, 220px); |
|
| 1159 | 1159 |
background: #13182a; |
| 1160 |
+ overflow: auto; |
|
| 1160 | 1161 |
} |
| 1161 | 1162 |
.login-card {
|
| 1163 |
+ --otp-size: 48px; |
|
| 1164 |
+ --otp-gap: 8px; |
|
| 1165 |
+ --login-form-width: calc((var(--otp-size) * 6) + (var(--otp-gap) * 5)); |
|
| 1162 | 1166 |
background: #fff; |
| 1163 | 1167 |
border-radius: 16px; |
| 1164 |
- padding: 44px 36px 36px; |
|
| 1168 |
+ padding: 48px 36px 44px; |
|
| 1165 | 1169 |
width: 100%; |
| 1166 |
- max-width: 380px; |
|
| 1170 |
+ max-width: 424px; |
|
| 1167 | 1171 |
display: grid; |
| 1168 |
- gap: 24px; |
|
| 1172 |
+ gap: 26px; |
|
| 1169 | 1173 |
box-shadow: 0 8px 40px rgba(0,0,0,.28); |
| 1170 | 1174 |
} |
| 1171 | 1175 |
.login-card .brand { text-align: center; display: grid; gap: 6px; }
|
@@ -1177,12 +1181,22 @@ sub app_html {
|
||
| 1177 | 1181 |
.login-card .brand .icon svg { width: 26px; height: 26px; fill: var(--accent); }
|
| 1178 | 1182 |
.login-card .brand h1 { margin: 0; font-size: 22px; font-weight: 700; color: var(--ink); }
|
| 1179 | 1183 |
.login-card .brand p { margin: 0; color: var(--muted); font-size: 13px; }
|
| 1180 |
- .login-card form { display: grid; gap: 16px; }
|
|
| 1184 |
+ .login-card form {
|
|
| 1185 |
+ display: grid; |
|
| 1186 |
+ gap: 16px; |
|
| 1187 |
+ width: min(100%, var(--login-form-width)); |
|
| 1188 |
+ justify-self: center; |
|
| 1189 |
+ } |
|
| 1181 | 1190 |
.login-card .field-label { font-size: 13px; font-weight: 600; color: var(--ink); }
|
| 1182 | 1191 |
/* 6 separate OTP digit boxes */ |
| 1183 |
- .otp-row { display: flex; gap: 8px; justify-content: center; }
|
|
| 1192 |
+ .otp-row {
|
|
| 1193 |
+ display: flex; |
|
| 1194 |
+ gap: var(--otp-gap); |
|
| 1195 |
+ justify-content: center; |
|
| 1196 |
+ margin-bottom: clamp(92px, 13vh, 132px); |
|
| 1197 |
+ } |
|
| 1184 | 1198 |
.otp-row input {
|
| 1185 |
- width: 48px; height: 56px; border: 1.5px solid #dde2ec; border-radius: 10px; |
|
| 1199 |
+ width: var(--otp-size); height: 56px; border: 1.5px solid #dde2ec; border-radius: 10px; |
|
| 1186 | 1200 |
font-size: 22px; font-weight: 600; text-align: center; color: var(--ink); |
| 1187 | 1201 |
background: #f8fafc; caret-color: transparent; outline: none; |
| 1188 | 1202 |
transition: border-color .15s, background .15s; |
@@ -1201,6 +1215,21 @@ sub app_html {
|
||
| 1201 | 1215 |
color: var(--bad); font-size: 13px; text-align: center; |
| 1202 | 1216 |
min-height: 18px; margin-top: -8px; |
| 1203 | 1217 |
} |
| 1218 |
+ @media (max-width: 430px) {
|
|
| 1219 |
+ #login-screen { padding: 24px 16px 120px; }
|
|
| 1220 |
+ .login-card {
|
|
| 1221 |
+ --otp-size: 42px; |
|
| 1222 |
+ --otp-gap: 6px; |
|
| 1223 |
+ padding: 36px 22px 34px; |
|
| 1224 |
+ } |
|
| 1225 |
+ .otp-row input { height: 52px; }
|
|
| 1226 |
+ .otp-row { margin-bottom: 88px; }
|
|
| 1227 |
+ } |
|
| 1228 |
+ @media (max-height: 720px) {
|
|
| 1229 |
+ #login-screen { padding-top: 28px; padding-bottom: 96px; }
|
|
| 1230 |
+ .login-card { padding-top: 34px; padding-bottom: 34px; gap: 20px; }
|
|
| 1231 |
+ .otp-row { margin-bottom: 72px; }
|
|
| 1232 |
+ } |
|
| 1204 | 1233 |
|
| 1205 | 1234 |
/* ── App shell (hidden until authenticated) ── */ |
| 1206 | 1235 |
#app { display: none; }
|