diff options
| author | Adam Soltys <[email protected]> | 2026-09-15 21:25:37 -0700 |
|---|---|---|
| committer | Adam Soltys <[email protected]> | 2026-09-15 21:25:37 -0700 |
| commit | 0f6fd7f06d27fa9860bd04bde13fb4ae3794fdf8 (patch) | |
| tree | 28cd8a47425487c9307600fc80071491e71738af /src/style.css | |
| parent | 229dea361b719128cf2657b6ab51aad9aca463b1 (diff) | |
| download | coinosv3-0f6fd7f06d27fa9860bd04bde13fb4ae3794fdf8.tar.gz coinosv3-0f6fd7f06d27fa9860bd04bde13fb4ae3794fdf8.zip | |
Spending coins as a headed table instead of chip rows.
Every row repeated "expiry", "exit cost", "renewal cost" as pills. The
labels now sit once in a header row over right-aligned tabular figures;
the table's wrapper scrolls sideways on a screen too narrow for it (the
page never does), and it fits a 390px phone without scrolling. A tap
anywhere on a row toggles it. A sub-satoshi renewal share reads "< 1 sat".
Co-Authored-By: Claude Fable 5.1 <[email protected]>
Claude-Session: https://claude.ai/code/session_01JuwQqNWtDJcxPWtEm9134z
Diffstat (limited to 'src/style.css')
| -rw-r--r-- | src/style.css | 22 |
1 files changed, 15 insertions, 7 deletions
diff --git a/src/style.css b/src/style.css index bcec4a5..dd90ec1 100644 --- a/src/style.css +++ b/src/style.css @@ -284,14 +284,22 @@ textarea { resize: vertical; min-height: 84px; font-family: var(--mono); font-si .coin { display: flex; align-items: center; gap: 11px; padding: 11px 2px; border-top: 1px solid var(--line); } .coin:first-child { border-top: 0; } .coin input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); } -/* per-coin fact pills: each datum wears its own little labeled chip */ -.coin-chips { display: flex; gap: 6px; flex-wrap: wrap; } -.coin-chip { - display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; - border: 1px solid var(--line); border-radius: 999px; - font-size: 11.5px; color: var(--muted); white-space: nowrap; +/* the Spending coins table: labels once in the header, numbers right- + aligned in tabular figures; on a narrow screen the WRAPPER scrolls + sideways so the page itself never does */ +.coin-scroll { overflow-x: auto; margin: 4px -2px 0; -webkit-overflow-scrolling: touch; } +.coin-table { border-collapse: collapse; width: 100%; font-size: 13.5px; white-space: nowrap; } +.coin-table th { + text-align: left; font-weight: 600; font-size: 12px; color: var(--muted); + padding: 4px 5px 8px; border-bottom: 1px solid var(--line-strong); } -.coin-chip.warn { color: var(--accent-ink); border-color: var(--accent); } +.coin-table td { padding: 10px 5px; border-top: 1px solid var(--line); vertical-align: middle; } +.coin-table tbody tr:first-child td { border-top: 0; } +.coin-table th:first-child, .coin-table td:first-child { width: 22px; padding-left: 2px; padding-right: 2px; } +.coin-table .num { text-align: right; font-variant-numeric: tabular-nums; } +.coin-table td.warn { color: var(--accent-ink); font-weight: 600; } +.coin-table tr.clickable { cursor: pointer; } +.coin-table input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; display: block; } /* ---- review / summary ---- */ .summary { background: var(--surface2); border: 1px solid var(--line); border-radius: 12px; padding: 14px; } |