diff --git a/app/static/css/cassandra.css b/app/static/css/cassandra.css index aaa420e..541ae6d 100644 --- a/app/static/css/cassandra.css +++ b/app/static/css/cassandra.css @@ -2300,129 +2300,203 @@ a.btn-secondary:hover { color: var(--accent); border-color: var(--accent); } outline: none; } -/* ---------- Dashboard portfolio edit mode ----------------------------- */ +/* ---------- Dashboard portfolio edit mode ----------------------------- + * + * Inline composer that sits above the portfolio table. Aesthetic: + * terminal-style command line, no boxed-form chrome, ghost controls, + * tinted-neutral palette pulled from --border / --dim / --muted, accent + * is theme-aware (deep teal in light, electric cyan in dark). + */ -/* The EDIT button — same shape as .settings-icon-btn but smaller. */ +/* EDIT / Done toggle buttons in the panel header. */ .pf-edit-btn, .pf-done-btn { display: inline-flex; align-items: center; gap: 4px; background: transparent; - border: 1px solid var(--neu-dim, #444); - color: var(--text, #ccc); + border: 1px solid var(--border); + color: var(--dim); padding: 2px 8px; - border-radius: 4px; + border-radius: 2px; cursor: pointer; - font-size: 12px; + font-family: var(--font-mono); + font-size: 11px; + letter-spacing: 0.04em; + text-transform: lowercase; margin-left: auto; + transition: color 120ms ease-out, border-color 120ms ease-out; } .pf-edit-btn:hover, .pf-done-btn:hover { - background: var(--surface-2, #2a2a2a); - border-color: var(--accent, #5af); + color: var(--accent); + border-color: var(--accent); } -/* × button on each row — hidden by default, visible only in edit mode. */ -.pf-row-del-cell { width: 24px; text-align: center; } +/* × button per row — hidden by default, visible only in edit mode. */ +.pf-row-del-cell { width: 20px; text-align: center; } .pf-row-del { display: none; background: transparent; border: none; - color: var(--neu-dim, #888); + color: var(--dim); cursor: pointer; font-size: 14px; padding: 0 4px; + font-family: inherit; + transition: color 120ms ease-out; } #portfolio-panel.pf-editing .pf-row-del { display: inline; } -#portfolio-panel.pf-editing .pf-row-del:hover { color: var(--err, #f55); } +#portfolio-panel.pf-editing .pf-row-del:hover { color: var(--negative); } -/* Add-position form — compact inline strip that visually sits above the - portfolio table rather than as a separate boxed form. */ -.pf-add-form { +/* ---------- Inline add-position composer ----------------------------- */ + +.pf-add { + padding: 6px 0 8px; + border-bottom: 1px dashed var(--border); margin-bottom: 6px; -} -.pf-add-strip { - display: flex; - gap: 6px; - align-items: center; - flex-wrap: nowrap; + font-family: var(--font-mono); font-size: 12px; } -.pf-add-input { - background: var(--surface, #111); - border: 1px solid var(--neu-dim, #444); - color: var(--text, #ccc); - padding: 3px 6px; - border-radius: 3px; +.pf-add__line { + display: flex; + align-items: center; + gap: 6px; + flex-wrap: wrap; +} +.pf-add__prompt { + color: var(--accent); + font-weight: 600; + user-select: none; + margin-right: 2px; +} +.pf-add__div { + width: 1px; + height: 14px; + background: var(--border); + margin: 0 2px; +} +.pf-add__at { + color: var(--dim); + font-size: 11px; + user-select: none; +} +.pf-add__line input[type="text"], +.pf-add__line input[type="number"], +.pf-add__line input[type="date"] { + background: transparent; + border: none; + border-bottom: 1px solid var(--border); + color: var(--text); + padding: 2px 4px; font-family: inherit; font-size: 12px; - min-width: 0; + line-height: 1.4; + font-variant-numeric: tabular-nums; + border-radius: 0; } -.pf-add-input:focus { +.pf-add__line input:focus { outline: none; - border-color: var(--accent, #5af); + border-bottom-color: var(--accent); + background: color-mix(in srgb, var(--accent) 6%, transparent); } -.pf-add-input--ticker { width: 90px; text-transform: uppercase; } -.pf-add-input--qty { width: 70px; } -.pf-add-input--cost { width: 100px; } -.pf-add-input--date { width: 130px; } - -.pf-add-cost-wrap { - display: inline-flex; - align-items: center; - gap: 4px; +.pf-add__line input::placeholder { + color: var(--dim); + font-style: italic; } -.pf-add-currency { - color: var(--neu-dim, #888); - font-size: 11px; - min-width: 28px; -} -.pf-add-icon-btn { - background: transparent; - border: 1px solid var(--neu-dim, #444); - color: var(--neu-dim, #888); - padding: 2px 4px; - border-radius: 3px; - cursor: pointer; - display: inline-flex; - align-items: center; -} -.pf-add-icon-btn:hover { - color: var(--text, #ccc); - border-color: var(--accent, #5af); -} -.pf-add-submit { - background: var(--accent, #5af); - color: var(--bg, #000); - border: none; - width: 26px; - height: 26px; - border-radius: 3px; - cursor: pointer; +.pf-add__ticker { + width: 80px; + text-transform: uppercase; + letter-spacing: 0.05em; font-weight: 600; - font-size: 16px; - line-height: 1; +} +.pf-add__num--qty { width: 56px; text-align: right; } +.pf-add__num--cost { width: 76px; text-align: right; } +.pf-add__date { width: 128px; margin-left: 4px; } + +/* Tiny pill that shows after a successful validate: "172.40 USD". */ +.pf-add-currency { + color: var(--muted); + font-size: 11px; + min-width: 24px; + letter-spacing: 0.02em; +} +.pf-add-currency:empty { display: none; } + +/* Calendar-icon button — ghost, square, terminal-feel. */ +.pf-add__icon { + background: transparent; + border: 1px solid var(--border); + color: var(--dim); + width: 22px; + height: 22px; + padding: 0; + border-radius: 2px; + cursor: pointer; display: inline-flex; align-items: center; justify-content: center; + transition: color 120ms ease-out, border-color 120ms ease-out; } -.pf-add-submit:disabled { - background: var(--neu-dim, #444); +.pf-add__icon:hover { + color: var(--accent); + border-color: var(--accent); +} +.pf-add__icon:focus-visible { + outline: none; + color: var(--accent); + border-color: var(--accent); +} + +/* Submit button — ghost styled to match the EDIT pill. Lights up to + * solid accent only when an add is actually possible. */ +.pf-add__submit { + margin-left: auto; + background: transparent; + border: 1px solid var(--accent); + color: var(--accent); + padding: 3px 14px; + border-radius: 2px; + cursor: pointer; + font-family: inherit; + font-size: 12px; + letter-spacing: 0.06em; + text-transform: lowercase; + transition: background 120ms ease-out, color 120ms ease-out, + border-color 120ms ease-out; +} +.pf-add__submit:hover:not(:disabled), +.pf-add__submit:focus-visible:not(:disabled) { + background: var(--accent); + color: var(--bg); + outline: none; +} +.pf-add__submit:disabled { + border-color: var(--border); + color: var(--dim); cursor: not-allowed; } -.pf-add-meta { - display: flex; - gap: 12px; - margin-top: 3px; - min-height: 14px; + +/* Status indicators next to the ticker + below the row. */ +.pf-add-status { font-size: 11px; + color: var(--muted); + font-variant-numeric: tabular-nums; } .pf-add-status:empty { display: none; } -.pf-add-status--pending { color: var(--neu-dim, #888); } -.pf-add-status--ok { color: var(--ok, #6c6); } -.pf-add-status--err { color: var(--err, #f55); } -.pf-add-warning { - color: var(--warn, #fb3); +.pf-add-status--pending { color: var(--dim); font-style: italic; } +.pf-add-status--ok { color: var(--positive); } +.pf-add-status--err { color: var(--negative); } + +/* Secondary line below the main row — only takes space when a child has + * content. Holds the date-lookup status and the duplicate warning. */ +.pf-add__notes { + display: flex; + gap: 14px; + margin-top: 4px; font-size: 11px; - margin-top: 3px; } +.pf-add__notes:has(:empty:only-child) { display: none; } +.pf-add-warning { + color: var(--warning); +} +.pf-add-warning:empty { display: none; } diff --git a/app/templates/dashboard.html b/app/templates/dashboard.html index 8162bea..e99bc74 100644 --- a/app/templates/dashboard.html +++ b/app/templates/dashboard.html @@ -60,37 +60,37 @@