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:
parent
07e3525dae
commit
ceeee2a46a
@ -345,9 +345,19 @@
|
|||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
letter-spacing: 0.3px;
|
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 input,
|
||||||
.form-group select,
|
.form-group select,
|
||||||
.form-group textarea {
|
.form-group textarea,
|
||||||
|
.form-input {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 9px 12px;
|
padding: 9px 12px;
|
||||||
border: 1px solid var(--border2);
|
border: 1px solid var(--border2);
|
||||||
@ -355,16 +365,41 @@
|
|||||||
font-size: 13.5px;
|
font-size: 13.5px;
|
||||||
background: var(--bg2);
|
background: var(--bg2);
|
||||||
color: var(--text);
|
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;
|
outline: none;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: inherit;
|
||||||
}
|
}
|
||||||
.form-group input:focus,
|
.form-group input:focus,
|
||||||
.form-group select:focus {
|
.form-group select:focus,
|
||||||
|
.form-group textarea:focus,
|
||||||
|
.form-input:focus {
|
||||||
border-color: var(--accent);
|
border-color: var(--accent);
|
||||||
box-shadow: 0 0 0 3px var(--accent-glow);
|
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; }
|
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 ──────────────────────────────────────────────────────── */
|
/* ── Badges ──────────────────────────────────────────────────────── */
|
||||||
.badge {
|
.badge {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user