- Use vertical wide login layout
- Browse files
-
Xdev Host Manager committed a day ago
Showing 1 changed files
with
14 additions
and
17 deletions
+14
-17
scripts/host_manager.pl
@@ -1165,19 +1165,19 @@ sub app_html {
|
||
| 1165 | 1165 |
--login-form-width: calc((var(--otp-size) * 6) + (var(--otp-gap) * 5)); |
| 1166 | 1166 |
background: #fff; |
| 1167 | 1167 |
border-radius: 16px; |
| 1168 |
- padding: 56px; |
|
| 1168 |
+ padding: 54px 64px 48px; |
|
| 1169 | 1169 |
width: 100%; |
| 1170 |
- max-width: 760px; |
|
| 1171 |
- min-height: 420px; |
|
| 1170 |
+ max-width: 680px; |
|
| 1171 |
+ min-height: 500px; |
|
| 1172 | 1172 |
display: grid; |
| 1173 |
- grid-template-columns: minmax(220px, 1fr) minmax(0, var(--login-form-width)); |
|
| 1174 |
- align-items: center; |
|
| 1175 |
- gap: 56px; |
|
| 1173 |
+ align-content: start; |
|
| 1174 |
+ justify-items: center; |
|
| 1175 |
+ gap: 28px; |
|
| 1176 | 1176 |
box-shadow: 0 8px 40px rgba(0,0,0,.28); |
| 1177 | 1177 |
} |
| 1178 |
- .login-card .brand { text-align: left; display: grid; gap: 8px; }
|
|
| 1178 |
+ .login-card .brand { text-align: center; display: grid; gap: 8px; justify-items: center; }
|
|
| 1179 | 1179 |
.login-card .brand .icon {
|
| 1180 |
- margin: 0 0 12px; |
|
| 1180 |
+ margin: 0 0 8px; |
|
| 1181 | 1181 |
width: 64px; height: 64px; border-radius: 18px; |
| 1182 | 1182 |
background: #e8f0fe; display: flex; align-items: center; justify-content: center; |
| 1183 | 1183 |
} |
@@ -1188,8 +1188,8 @@ sub app_html {
|
||
| 1188 | 1188 |
display: grid; |
| 1189 | 1189 |
gap: 16px; |
| 1190 | 1190 |
width: min(100%, var(--login-form-width)); |
| 1191 |
- justify-self: end; |
|
| 1192 |
- padding-bottom: clamp(92px, 12vh, 132px); |
|
| 1191 |
+ justify-self: center; |
|
| 1192 |
+ padding-bottom: clamp(116px, 14vh, 156px); |
|
| 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,22 +1209,19 @@ 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: -88px; grid-column: 2; |
|
| 1212 |
+ min-height: 18px; margin-top: -120px; |
|
| 1213 | 1213 |
} |
| 1214 | 1214 |
@media (max-width: 760px) {
|
| 1215 | 1215 |
.login-card {
|
| 1216 |
- max-width: 424px; |
|
| 1216 |
+ max-width: 520px; |
|
| 1217 | 1217 |
min-height: 0; |
| 1218 | 1218 |
padding: 48px 36px 44px; |
| 1219 |
- grid-template-columns: 1fr; |
|
| 1220 | 1219 |
gap: 26px; |
| 1221 | 1220 |
} |
| 1222 |
- .login-card .brand { text-align: center; }
|
|
| 1223 |
- .login-card .brand .icon { margin: 0 auto 8px; }
|
|
| 1224 | 1221 |
.login-card .brand h1 { font-size: 24px; }
|
| 1225 | 1222 |
.login-card .brand p { font-size: 14px; }
|
| 1226 |
- .login-card form { justify-self: center; padding-bottom: 96px; }
|
|
| 1227 |
- #login-error { grid-column: 1; margin-top: -82px; }
|
|
| 1223 |
+ .login-card form { padding-bottom: 104px; }
|
|
| 1224 |
+ #login-error { margin-top: -90px; }
|
|
| 1228 | 1225 |
} |
| 1229 | 1226 |
@media (max-width: 430px) {
|
| 1230 | 1227 |
#login-screen { padding: 24px 16px 120px; }
|