mirror of
https://github.com/caiwx86/small-packages.git
synced 2026-11-13 19:48:10 +08:00
56 lines
2.8 KiB
CSS
56 lines
2.8 KiB
CSS
@layer page {
|
||
/* LOGIN — themes/footstrap/sysauth.ut's own template, centred card, no chrome. Scoped by
|
||
* `.fs-login`, a class the template puts on the form: replaced
|
||
* `form:has(> .cbi-map input[name="luci_username"])`, 49 chars × 17 rules (~0.8 KB) matching
|
||
* nothing else. Never turn this into a JS-revealed modal: the view runs pre-session, RPCs answer
|
||
* "Access denied", render() never runs. docs/css.md "Login: a definite width, not max-width". */
|
||
.fs-login {
|
||
/* DEFINITE width, never max-width: a direct flex item of <body> collapses to min-content
|
||
* (~131px) under max-width alone — docs/css.md above. */
|
||
width: min(400px, calc(100% - 32px));
|
||
margin: 7vh auto var(--fs-space-10);
|
||
background: var(--fs-panel); border: var(--fs-hairline); border-radius: var(--fs-radius-lg);
|
||
/* the token, not a literal 45%-black 60px halo: that ignored the palette. */
|
||
padding: var(--fs-space-6); box-shadow: var(--fs-shadow-pop);
|
||
}
|
||
/* router hostname as the card title, at the 20px page-title step; not the eyebrow tokens: those
|
||
* force uppercase and a hostname is a name (case tells two similar ones apart). docs/css.md above. */
|
||
.fs-login-host {
|
||
margin: 0 0 var(--fs-space-6); text-align: center;
|
||
font-size: var(--fs-type-xl); font-weight: var(--fs-weight-bold); letter-spacing: -.01em;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
.fs-login .cbi-map,
|
||
.fs-login .cbi-section,
|
||
.fs-login .cbi-section-node {
|
||
background: none; border: 0; padding: 0; margin: 0; box-shadow: none;
|
||
}
|
||
.fs-login .cbi-value {
|
||
display: block; border: 0; padding: 0 0 var(--fs-space-4); margin: 0;
|
||
}
|
||
.fs-login .cbi-value-title {
|
||
display: block; text-align: start; width: auto; max-width: none; padding: 0 0 var(--fs-space-1-5);
|
||
font-size: var(--fs-type-xs); font-weight: var(--fs-eyebrow-weight); letter-spacing: var(--fs-eyebrow-tracking); text-transform: uppercase; color: var(--fs-eyebrow-color);
|
||
}
|
||
.fs-login .cbi-value-field {
|
||
width: 100%; margin: 0; padding: 0;
|
||
}
|
||
.fs-login .cbi-value-field input {
|
||
width: 100%; margin: 0;
|
||
}
|
||
.fs-login .alert-message { margin: 0 0 var(--fs-space-3-5); border-radius: var(--fs-radius); }
|
||
/* column, not block: an auth plugin's second action (Reset) glues to Login under margin:0 */
|
||
.fs-login .cbi-page-actions {
|
||
display: flex; flex-direction: column; gap: var(--fs-space-2-5);
|
||
background: none; border: 0;
|
||
padding: 0; margin: var(--fs-space-1-5) 0 0; text-align: start;
|
||
}
|
||
.fs-login .cbi-page-actions .btn,
|
||
.fs-login .cbi-page-actions input[type="submit"] {
|
||
width: 100%; min-height: var(--fs-ctl-h-lg); margin: 0; border-radius: var(--fs-radius-lg);
|
||
background: var(--fs-accent); color: var(--fs-on-accent);
|
||
border: 0; font-weight: var(--fs-weight-bold); font-size: var(--fs-type-lg);
|
||
}
|
||
.fs-login .cbi-page-actions .btn:hover { filter: var(--fs-hover-lift); }
|
||
}
|