diff --git a/web/static/app.css b/web/static/app.css index 27bc028..3677f93 100644 --- a/web/static/app.css +++ b/web/static/app.css @@ -89,24 +89,24 @@ code,kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono background:#f8fafc; } .topbar{ - max-width:1100px;margin:0 auto;padding:14px 16px; /* thicker */ + max-width:1100px;margin:0 auto;padding:14px 16px; display:flex;align-items:center;gap:14px;justify-content:space-between; - font-size:17px; /* slightly larger */ + font-size:17px; } /* Brand: separate clickable title + version link */ .brand{ display:flex; align-items:baseline; - gap:0.35em; /* tighter spacing */ - white-space:nowrap; /* keep on one line */ + gap:.35em; + white-space:nowrap; } .brand-title{ color:#111827; text-decoration:none; font-weight:600; letter-spacing:.2px; - font-size:1.05em; /* subtle bump */ + font-size:1.05em; } .brand-title:hover{ text-decoration:underline; } @@ -117,7 +117,6 @@ code,kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono } .version-link:hover{ color:#7f8a94; } -.brand .tagline{color:var(--ink-muted);font-weight:500;font-size:15px} .nav-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .user-chip{ padding:6px 10px;border-radius:999px;border:1px solid var(--border); @@ -160,7 +159,7 @@ code,kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono .empty-subtitle{color:var(--ink-muted)} /* =============================== - Result view (search results page) + Result view =============================== */ .result-wrap{max-width:1100px;margin:18px auto;padding:0 16px} @@ -201,72 +200,61 @@ code,kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono .meta-value.small{font-size:14px;color:#475569} /* =============================== - Edit Entry page (form UI) + Modern Edit/Add form (new) =============================== */ -.entry-edit-page{ - max-width:1100px;margin:18px auto;padding:0 16px; -} -.entry-form{ +/* Page wrapper for edit */ +.entry-edit-page{max-width:1100px;margin:18px auto;padding:0 16px} + +/* Card that holds the form */ +.form-card{ + max-width:1100px; + margin:0 auto; + padding:20px 22px; background:#fff;border:1px solid var(--border);border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.06); - padding:20px; } -/* group title (optional) */ -.form-title{ - margin:0 0 12px;font-size:22px;font-weight:700;color:#0f172a; -} - -/* two-column grid on wide screens */ -.form-grid{ - display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px; -} -.form-row{display:flex;flex-direction:column;gap:6px} -.form-row.full{grid-column:1/-1} - +/* Blocks */ +.form-group{margin-bottom:18px} .form-label{ - font-size:13px; - text-transform:uppercase; - letter-spacing:.06em; - color:#64748b; + display:block; + font-weight:600; + margin-bottom:6px; + color:#0f172a; } -/* inputs + textareas */ -.form-input, -.form-textarea, -.form-select{ +/* Controls */ +.form-control{ width:100%; - appearance:none; + font-size:16px; + line-height:1.5; padding:10px 12px; border:1px solid #d1d5db; border-radius:10px; background:#fff; color:#111827; - font-size:16px; + resize:vertical; } -.form-input:focus, -.form-textarea:focus, -.form-select:focus{ - outline:none; border-color:#2f6cab; box-shadow:0 0 0 3px rgba(47,108,171,.15); +.form-control:focus{ + outline:none; + border-color:#2f6cab; + box-shadow:0 0 0 3px rgba(47,108,171,.15); } -.form-textarea{ min-height:120px; resize:vertical; } - -/* small help text (optional) */ -.form-help{ - font-size:12px; color:#6b7280; -} - -/* validation errors */ -.form-error{ - margin-top:4px; - color:#b91c1c; - font-size:13px; -} - -/* action row */ +.form-textarea-tall{ min-height:260px } .form-actions{ - margin-top:16px; - display:flex; gap:10px; flex-wrap:wrap; + display:flex;justify-content:flex-end;gap:10px;margin-top:6px; +} + +/* Grids */ +.form-grid-2{ + display:grid; + grid-template-columns: 1fr 1fr; + gap:16px; +} +.form-grid-3{ + display:grid; + grid-template-columns: 1fr 1fr 1fr; + gap:16px; } /* =============================== @@ -283,7 +271,8 @@ code,kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono .rt-right{justify-content:space-between} .meta-grid{grid-template-columns:1fr} - .form-grid{grid-template-columns:1fr} + .form-grid-2{grid-template-columns:1fr} + .form-grid-3{grid-template-columns:1fr} .subject-title{font-size:24px} .lead-text{font-size:17px} } @@ -291,67 +280,7 @@ code,kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono /* =============================== Theming (gradient pages) =============================== */ -.login-page{ - min-height:100vh; - background: - linear-gradient(110deg, - #d7b592 0%, /* soft tan (left) */ - #e7e3db 30%, /* light neutral blend */ - #8fbfe0 100% /* gentle blue (right) */ - ); - background-attachment: fixed; -} - -.login-hero{ - min-height:100vh; - display:flex; align-items:center; justify-content:center; - padding:32px 16px; -} - -.login-card{ - width:100%; max-width:420px; - background:#ffffff; /* solid behind fields */ - border:1px solid #e5e7eb; - border-radius:16px; - box-shadow:0 10px 30px rgba(0,0,0,.08); - padding:22px 22px 20px; -} - -.login-title{ - margin:4px 0 16px; - font-size:22px; font-weight:700; color:#0f172a; -} - -.login-label{ - display:block; margin:10px 0 6px; - font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:#64748b; -} - -.login-input{ - width:100%; - appearance:none; - padding:10px 12px; - border:1px solid #d1d5db; - border-radius:10px; - background:#fff; color:#111827; - font-size:16px; -} -.login-input:focus{ - outline:none; border-color:#2f6cab; box-shadow:0 0 0 3px rgba(47,108,171,.15); -} - -.login-submit{ width:100%; margin-top:16px; } - -.login-alert{ - margin:0 0 10px; - padding:10px 12px; - border:1px solid #fecaca; background:#fef2f2; color:#7f1d1d; - border-radius:10px; font-size:14px; -} - -.login-field-error{ color:#b91c1c; font-size:13px; margin:6px 0 0; } - -/* Themed page background (tan → blue) */ +.login-page, .themed-bg{ min-height:100vh; background: @@ -367,91 +296,59 @@ code,kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono .themed-bg .card, .themed-bg .result-card, .themed-bg .search-form, -.themed-bg .entry-form{ +.themed-bg .form-card{ background:#ffffff; border:1px solid var(--border); 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 */ +/* Translucent topbar over gradient */ .themed-bg .topbar-wrap{ - background:rgba(248,250,252,.85); /* subtle translucency */ + background:rgba(248,250,252,.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-bottom:1px solid rgba(229,231,235,.9); -} \ No newline at end of file +} + +/* ----- Login page bits (unchanged behavior) ----- */ +.login-hero{ + min-height:100vh; + display:flex; align-items:center; justify-content:center; + padding:32px 16px; +} +.login-card{ + width:100%; max-width:420px; + background:#ffffff; + border:1px solid #e5e7eb; + border-radius:16px; + box-shadow:0 10px 30px rgba(0,0,0,.08); + padding:22px 22px 20px; +} +.login-title{ + margin:4px 0 16px; + font-size:22px; font-weight:700; color:#0f172a; +} +.login-label{ + display:block; margin:10px 0 6px; + font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:#64748b; +} +.login-input{ + width:100%; + appearance:none; + padding:10px 12px; + border:1px solid #d1d5db; + border-radius:10px; + background:#fff; color:#111827; + font-size:16px; +} +.login-input:focus{ + outline:none; border-color:#2f6cab; box-shadow:0 0 0 3px rgba(47,108,171,.15); +} +.login-submit{ width:100%; margin-top:16px; } +.login-alert{ + margin:0 0 10px; + padding:10px 12px; + border:1px solid #fecaca; background:#fef2f2; color:#7f1d1d; + border-radius:10px; font-size:14px; +} +.login-field-error{ color:#b91c1c; font-size:13px; margin:6px 0 0; } \ No newline at end of file