Update web/static/app.css

edit to account for table in the edit view
This commit is contained in:
Joshua Laymon 2025-08-13 21:00:43 +00:00
parent 38c4487dad
commit 39752e292d

View File

@ -372,7 +372,82 @@ code,kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono
border:1px solid var(--border); border:1px solid var(--border);
box-shadow:0 10px 30px rgba(0,0,0,.06); box-shadow:0 10px 30px rgba(0,0,0,.06);
} }
/* ===============================
Modern edit form
=============================== */
.modern-form {
padding: 28px 30px;
max-width: 1100px;
margin: 0 auto;
}
.modern-form .f-grid{
display:grid;
grid-template-columns: 220px 1fr; /* roomy label column + wide field column */
gap:18px 18px;
}
/* Labels: pill-like chips to set them off */
.modern-form .f-label{
align-self: start;
padding:8px 12px;
background:#f1f5f9;
color:#334155;
border:1px solid #e2e8f0;
border-radius:10px;
font-size:13px;
font-weight:600;
letter-spacing:.02em;
}
/* Controls fill the center nicely */
.modern-form .f-control{
width:100%;
}
.modern-form input[type="text"],
.modern-form input[type="number"],
.modern-form input[type="date"],
.modern-form textarea,
.modern-form select{
width:100%;
appearance:none;
padding:14px 14px;
border:1px solid #cbd5e1;
border-radius:12px;
background:#fff;
color:#111827;
font-size:16px;
line-height:1.45;
box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.modern-form textarea{
min-height: 260px; /* bigger text areas */
resize: vertical;
}
/* Taller rows (for Illustration / Application) */
.modern-form .f-row.tall textarea{
min-height: 320px;
}
/* Focus look */
.modern-form input:focus,
.modern-form textarea:focus,
.modern-form select:focus{
outline:none;
border-color: var(--brand);
box-shadow: 0 0 0 4px rgba(47,108,171,.16);
}
/* Hide number spinners / neaten number control */
.modern-form input[type="number"]::-webkit-outer-spin-button,
.modern-form input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.modern-form input[type="number"]{ -moz-appearance:textfield; }
/* Bottom action bar is optional; we keep top-right primary actions */
.entry-form .bottom-actions { display:none; }
/* Make the top bar feel lighter on a gradient */ /* Make the top bar feel lighter on a gradient */
.themed-bg .topbar-wrap{ .themed-bg .topbar-wrap{
background:rgba(248,250,252,.85); /* subtle translucency */ background:rgba(248,250,252,.85); /* subtle translucency */