syonad/two
2
0
Fork 0
Code Issues 6 Pull requests 1 Projects Releases 9 Packages Wiki Activity Actions

web: start: simple form component

Browse source 
Signed-off-by: GnomeZworc <nicolas.boufidjeline@g3e.fr>
This commit is contained in:
GnomeZworc 2026-06-01 23:04:49 +02:00
commit 9980e03449
Signed by: nicolas.boufideline
GPG key ID: 4406BBBF8845D632
7 changed files with 513 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

138
web/components/form-vm/form-vm.css Normal file
View file

@ -0,0 +1,138 @@
:host {
display: block;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
color: #cdd6f4;
}
form {
display: flex;
flex-direction: column;
gap: 20px;
}
/* ── Sections ─────────────────────────────────────────────────────────────── */
.section {
display: flex;
flex-direction: column;
gap: 12px;
}
.section-title {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #6c7086;
padding-bottom: 8px;
border-bottom: 1px solid #313244;
}
/* ── Fields ───────────────────────────────────────────────────────────────── */
.field {
display: flex;
flex-direction: column;
gap: 6px;
}
.row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
label {
font-size: 12px;
font-weight: 500;
color: #a6adc8;
text-transform: uppercase;
letter-spacing: 0.06em;
}
input, select {
background: #181825;
border: 1px solid #313244;
border-radius: 6px;
padding: 8px 12px;
color: #cdd6f4;
font-size: 13px;
font-family: monospace;
outline: none;
width: 100%;
box-sizing: border-box;
transition: border-color 0.15s;
}
input:focus, select:focus { border-color: #89b4fa; }
input::placeholder { color: #45475a; }
input[readonly] { color: #6c7086; cursor: not-allowed; }
/* ── Disk list ────────────────────────────────────────────────────────────── */
.disk-row {
display: grid;
grid-template-columns: 80px 1fr auto;
gap: 8px;
align-items: center;
}
.disk-row input { min-width: 0; }
/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
gap: 6px;
border: none;
border-radius: 6px;
padding: 8px 14px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: background 0.12s, opacity 0.12s;
}
.btn-primary { background: #89b4fa; color: #1e1e2e; }
.btn-primary:hover { background: #b4d0fa; }
.btn-danger { background: transparent; border: 1px solid #f38ba8; color: #f38ba8; }
.btn-danger:hover { background: rgba(243,139,168,0.1); }
.btn-ghost { background: #313244; color: #a6adc8; padding: 6px 10px; font-size: 12px; }
.btn-ghost:hover { background: #45475a; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.actions {
display: flex;
gap: 8px;
padding-top: 4px;
}
/* ── Status ───────────────────────────────────────────────────────────────── */
.status {
font-size: 13px;
padding: 10px 14px;
border-radius: 6px;
display: none;
}
.status.error { background: #1e1e2e; border: 1px solid #f38ba8; color: #f38ba8; display: block; }
.status.success { background: #1e1e2e; border: 1px solid #a6e3a1; color: #a6e3a1; display: block; }
.status.loading { color: #6c7086; display: block; }
/* ── Toggle ───────────────────────────────────────────────────────────────── */
.toggle-row {
display: flex;
align-items: center;
gap: 10px;
}
input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: #89b4fa;
cursor: pointer;
}
.toggle-label { font-size: 13px; color: #a6adc8; text-transform: none; letter-spacing: 0; }