sky form inputs: form-control look (gold border, pill, page-bg fill, focus glow); login email label matches sky-field label style

.sky-field input now mirrors .form-control's priUser fill / secUser border & text / pill border-radius / terUser focus glow — same look as the login email input. Readonly inputs (lat/lon) keep opacity:0.6. .input-group label (the "enter email for login" line above the email input) now adopts .sky-field label styling: 0.6rem uppercase, 0.1em letter-spacing, quaUser at 0.8 — so the login form's label/input pair reads as the same component as the sky-field rows.

Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Disco DeDisco
2026-05-08 11:53:05 -04:00
parent 4f2c7d9577
commit 9e68cfd8e4
2 changed files with 29 additions and 2 deletions

View File

@@ -89,9 +89,17 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.25rem;
z-index: 50; z-index: 50;
// Match .sky-field label — small, gold, uppercase, tracked.
label {
font-size: 0.6rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(var(--quaUser), 0.8);
}
.form-control { .form-control {
width: 24rem; width: 24rem;
text-align: center; text-align: center;

View File

@@ -191,9 +191,28 @@ html.sky-open .sky-modal-wrap {
color: rgba(var(--quaUser), 0.8); color: rgba(var(--quaUser), 0.8);
} }
// Match the .form-control look used by the login email input —
// priUser fill, secUser gold border + text, pill rounding, terUser focus glow.
input { input {
width: 100%; width: 100%;
// inherits global input styles background-color: rgba(var(--priUser), 1);
color: rgba(var(--secUser), 1);
border: 0.1rem solid rgba(var(--secUser), 0.5);
--_pad-v: 0.5rem;
padding: var(--_pad-v) 0.75rem;
border-radius: calc((var(--_pad-v) * 2 + 1em) / 3);
font-family: inherit;
&:focus {
outline: none;
border-color: rgba(var(--terUser), 0.75);
box-shadow: 0 0 0.75rem rgba(var(--terUser), 0.5);
}
&[readonly] {
opacity: 0.6;
cursor: default;
}
} }
small { small {