style: add .form-input/.form-label CSS classes for dark-theme form fields (#22)

Org templates use class="form-input" and class="form-label" which had no
CSS definition — browsers fell back to white-box defaults, clashing with
the dark teal theme.

- .form-input: dark bg (--bg2), teal border, accent focus ring + glow,
  placeholder dimming, file input button styling
- .form-label: uppercase micro-label style (11px, --text3) matching the
  existing card section headers throughout the app
- textarea.form-input: resize:vertical, min-height, line-height
- select option / .form-input option: dark background on dropdown items
- Keep .form-group label unchanged so existing non-org templates are unaffected

Co-authored-by: Gonçalo Rodrigues <guga@Goncalos-MacBook-Pro.local>
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Gonçalo Rodrigues 2026-06-14 16:03:45 +01:00 committed by GitHub
parent 07e3525dae
commit ceeee2a46a

View File

@ -345,9 +345,19 @@
margin-bottom: 5px;
letter-spacing: 0.3px;
}
.form-label {
display: block;
font-size: 11px;
font-weight: 700;
color: var(--text3);
margin-bottom: 5px;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.form-group input,
.form-group select,
.form-group textarea {
.form-group textarea,
.form-input {
width: 100%;
padding: 9px 12px;
border: 1px solid var(--border2);
@ -355,16 +365,41 @@
font-size: 13.5px;
background: var(--bg2);
color: var(--text);
transition: border-color 0.18s ease, box-shadow 0.18s ease;
transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
outline: none;
box-sizing: border-box;
font-family: inherit;
}
.form-group input:focus,
.form-group select:focus {
.form-group select:focus,
.form-group textarea:focus,
.form-input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-glow);
background: var(--bg3);
}
.form-group input::placeholder,
.form-input::placeholder { color: var(--text3); opacity: 0.7; }
.form-input[type="file"] {
padding: 7px 10px;
cursor: pointer;
color: var(--text2);
}
.form-input[type="file"]::-webkit-file-upload-button {
background: var(--bg3);
border: 1px solid var(--border2);
border-radius: 4px;
color: var(--text2);
font-size: 12px;
padding: 4px 10px;
margin-right: 10px;
cursor: pointer;
font-family: inherit;
}
input[type="color"] { padding: 4px; height: 38px; cursor: pointer; }
select option { background: var(--bg2); color: var(--text); }
select option,
.form-input option { background: var(--bg2); color: var(--text); }
textarea.form-input { resize: vertical; min-height: 72px; line-height: 1.5; }
/* ── Badges ──────────────────────────────────────────────────────── */
.badge {