From 71010ef3845c22ff6460918a49396420b2d01132 Mon Sep 17 00:00:00 2001 From: Joshua Laymon Date: Wed, 13 Aug 2025 20:39:38 +0000 Subject: [PATCH] Update web/static/app.css changes to make edit page look nice --- web/static/app.css | 121 ++++++++++++++++++++++++++++++++++++--------- 1 file changed, 99 insertions(+), 22 deletions(-) diff --git a/web/static/app.css b/web/static/app.css index 550376a..86e6093 100644 --- a/web/static/app.css +++ b/web/static/app.css @@ -82,7 +82,7 @@ code,kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono } /* =============================== - Top Navigation (keeps your look) + Top Navigation =============================== */ .topbar-wrap{ border-bottom:1px solid var(--border); @@ -93,10 +93,30 @@ code,kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono display:flex;align-items:center;gap:14px;justify-content:space-between; font-size:17px; /* slightly larger */ } + +/* Brand: separate clickable title + version link */ .brand{ - display:flex;align-items:center;gap:10px;color:#111827; - text-decoration:none;font-weight:600;letter-spacing:.2px; + display:flex; + align-items:baseline; + gap:0.35em; /* tighter spacing */ + white-space:nowrap; /* keep on one line */ } +.brand-title{ + color:#111827; + text-decoration:none; + font-weight:600; + letter-spacing:.2px; + font-size:1.05em; /* subtle bump */ +} +.brand-title:hover{ text-decoration:underline; } + +.version-link{ + font-size:.85em; + color:#9aa3ad; + text-decoration:none; +} +.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{ @@ -180,6 +200,75 @@ code,kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono .meta-value{font-size:15px} .meta-value.small{font-size:14px;color:#475569} +/* =============================== + Edit Entry page (form UI) + =============================== */ +.entry-edit-page{ + max-width:1100px;margin:18px auto;padding:0 16px; +} + +.entry-form{ + 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} + +.form-label{ + font-size:13px; + text-transform:uppercase; + letter-spacing:.06em; + color:#64748b; +} + +/* inputs + textareas */ +.form-input, +.form-textarea, +.form-select{ + width:100%; + appearance:none; + padding:10px 12px; + border:1px solid #d1d5db; + border-radius:10px; + background:#fff; color:#111827; + font-size:16px; +} +.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-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-actions{ + margin-top:16px; + display:flex; gap:10px; flex-wrap:wrap; +} + /* =============================== Responsive =============================== */ @@ -189,17 +278,18 @@ code,kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono .btn{padding:8px 10px} .btn-lg{padding:10px 14px} - .container,.page,.result-wrap{padding:0 12px} + .container,.page,.result-wrap,.entry-edit-page{padding:0 12px} .result-toolbar{flex-direction:column;align-items:stretch} .rt-right{justify-content:space-between} .meta-grid{grid-template-columns:1fr} + .form-grid{grid-template-columns:1fr} .subject-title{font-size:24px} .lead-text{font-size:17px} } /* =============================== - Login page (tan → blue gradient) + Theming (gradient pages) =============================== */ .login-page{ min-height:100vh; @@ -250,9 +340,7 @@ code,kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono outline:none; border-color:#2f6cab; box-shadow:0 0 0 3px rgba(47,108,171,.15); } -.login-submit{ - width:100%; margin-top:16px; -} +.login-submit{ width:100%; margin-top:16px; } .login-alert{ margin:0 0 10px; @@ -262,6 +350,7 @@ code,kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono } .login-field-error{ color:#b91c1c; font-size:13px; margin:6px 0 0; } + /* Themed page background (tan → blue) */ .themed-bg{ min-height:100vh; @@ -277,29 +366,17 @@ code,kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono /* Keep cards floating nicely over gradients */ .themed-bg .card, .themed-bg .result-card, -.themed-bg .search-form{ +.themed-bg .search-form, +.themed-bg .entry-form{ background:#ffffff; border:1px solid var(--border); box-shadow:0 10px 30px rgba(0,0,0,.06); } -.version-link { - font-size: 0.7em; /* half the normal size */ - color: #aaa; /* light grey */ - text-decoration: none; /* no underline */ -} -.version-link:hover { - color: #888; /* slightly darker on hover */ -} /* Make the top bar feel lighter on a gradient */ .themed-bg .topbar-wrap{ background:rgba(248,250,252,.85); /* subtle translucency */ backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-bottom:1px solid rgba(229,231,235,.9); -} -.brand { - display: flex; - align-items: baseline; - gap: 0.5em; /* space between text and version */ } \ No newline at end of file