diff options
| author | Adam Soltys <[email protected]> | 2026-07-06 08:09:57 -0700 |
|---|---|---|
| committer | Adam Soltys <[email protected]> | 2026-07-06 08:09:57 -0700 |
| commit | 45a4a9d5cec8eafc7e98ebd7ca2a9790c0ee94b4 (patch) | |
| tree | f50350fc32126bb93a42a733b24da32fc131f205 /src/style.css | |
| parent | 60f267c5c8b240dbb80f6d567cf2801579b85585 (diff) | |
| download | coinosv3-45a4a9d5cec8eafc7e98ebd7ca2a9790c0ee94b4.tar.gz coinosv3-45a4a9d5cec8eafc7e98ebd7ca2a9790c0ee94b4.zip | |
Icons in the receive selector and on silent-payment history rows
The receive address-type picker was a native <select>, which can't
render SVG in <option>s. Replace it with a lightweight custom dropdown
(icon-select) that shows a glyph per rail — ₿ Bitcoin, ⚡ Lightning,
the Second mark for Ark, 🕶️ Silent payment — closing on select or an
outside tap. Receive modes gained an icon field; the address option is
built in app.js. Silent-payment receipts (which merge into history as
on-chain-looking rows) now get a rail glyph + SP tag via a
decorateTxRow so they're distinguishable, matching how ark/gift rows
already decorate.
Co-Authored-By: Claude Fable 5 <[email protected]>
Diffstat (limited to 'src/style.css')
| -rw-r--r-- | src/style.css | 21 |
1 files changed, 21 insertions, 0 deletions
diff --git a/src/style.css b/src/style.css index 545891c..4fe0394 100644 --- a/src/style.css +++ b/src/style.css @@ -289,3 +289,24 @@ hr.divider { margin: 16px 0; } .words { grid-template-columns: repeat(2, 1fr); } .balance .amt { font-size: 28px; } } + +/* Icon dropdown (receive mode) — a <select> can't render SVG in options. */ +.icon-select-btn { + width: 100%; display: flex; align-items: center; gap: 9px; + font: inherit; color: var(--ink); background: var(--paper); + border: 1px solid var(--line-strong); border-radius: 11px; padding: 11px 13px; cursor: pointer; +} +.icon-select-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; } +.icon-select-menu { + background: var(--paper); border: 1px solid var(--line-strong); border-radius: 11px; + padding: 5px; box-shadow: 0 10px 28px rgba(0,0,0,.18); display: flex; flex-direction: column; gap: 2px; +} +.icon-select-item { + display: flex; align-items: center; gap: 9px; width: 100%; + font: inherit; color: var(--ink); background: transparent; + border: 0; border-radius: 8px; padding: 10px 10px; cursor: pointer; text-align: left; +} +.icon-select-item:hover { background: var(--hover, rgba(128,128,128,.12)); } +.icon-select-item.active { background: var(--accent-soft, rgba(247,147,26,.14)); } +.sel-ico { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; font-size: 16px; line-height: 1; } +.sel-ico svg { display: block; } |