Quoted 6s ago
and once the JS considers the quote past its window:Quoted 48s ago
Quiet by design: fresh is grey text and nothing else — no dot, no icon, no colour. The marker and the warn tint arrive only when the quote has actually gone stale, so the state that matters is the only one that costs the reader any attention. =========================================================== */ .cf-quote { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); line-height: 16px; color: var(--text-4); font-variant-numeric: tabular-nums; } .cf-quote.is-stale { color: var(--warn); } .cf-quote.is-stale::before { content: ''; flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%; background: var(--warn); } .cf-requote { margin-left: auto; flex: 0 0 auto; font-size: var(--fs-xs); line-height: 16px; font-weight: var(--fw-label); color: var(--accent); background: var(--accent-dim); border: 1px solid var(--accent-line); border-radius: var(--r-sm); padding: 2px 8px; transition: background var(--t-fast); } .cf-requote:hover { background: var(--accent-glow); } /* The figures themselves are NOT dimmed when the quote ages. A number a person is about to sign has to stay at full legibility; the staleness goes on the block's edge and on the line that names the age. */ .cf-cost.is-stale { border-color: var(--warn-line); } /* =========================================================== A BUTTON THAT CANNOT BUY MUST NOT LOOK LIKE ONE Watch-only session, audited live at 1440px: Buy and Sell rendered in full green and red, indistinguishable from a signing session. Pressing one raised a toast and opened the connect dialog — the right destination, learned only after committing to the click. This state is deliberately NOT [disabled]: the press is the route out of watch-only, and disabling it would remove the only affordance the state has. So the control stays live and gives up the colour instead — a neutral outlined button that reads as "this does something else". MARKUP — exchange.js adds the class and rewrites the label; it must not add the disabled attribute: (`cant-sign`, not `is-locked`: swap.css already owns .modal-host.is-locked and two different meanings for one state word is how the next reader gets it wrong.) =========================================================== */ .submit-btn.cant-sign, .submit-btn.cant-sign.buy, .submit-btn.cant-sign.sell { background-color: var(--bg-elevated); background-image: none; /* kills the DEPTH pass's gloss gradient */ color: var(--text-2); border: 1px solid var(--border-bright); box-shadow: none; /* and its lift shadow */ font-weight: var(--fw-label); } /* .submit-btn:hover brightens and lifts unconditionally; a button that is not a buy button should not behave like one under the cursor either. */ .submit-btn.cant-sign:hover { background-color: var(--bg-hover); color: var(--text); border-color: var(--accent); filter: none; transform: none; } .submit-btn.cant-sign:active { transform: translateY(1px); } /* The note beside Limit/Market is 10px of --text-3 — right for "simulated · live book", far too quiet to be the only thing between a watch-only session and a click on a green button. When it carries a LIMITATION rather than a description it becomes a chip. MARKUP: watch-only · no signing — exchange.js should drop the `dim` class when it adds is-warn. */ .tt-note.is-warn { font-size: var(--fs-xs); line-height: 16px; font-weight: var(--fw-label); color: var(--warn); background: var(--warn-dim); border: 1px solid var(--warn-line); border-radius: 999px; padding: 1px 8px; } /* =========================================================== DIALOG / TOAST AUDIT AT 1440px Everything below is an existing rule that read as unfinished on the live site, not a new feature. =========================================================== */ /* .toast-host is shrink-to-fit inside a fixed box, so a toast is as wide as its longest line and nothing ever capped it. The 20-second one — "A transaction is still awaiting validation. Do not resubmit — check Open orders or your wallet before placing it again." — is 130 characters and rendered as a single ~810px ribbon across the foot of a 1440px screen. The most important message the app can show was the one that looked least like a message. */ .toast { max-width: min(360px, calc(100vw - 36px)); line-height: 17px; /* Several call sites lead with a coloured ● bullet. Centred, that bullet floats to the middle of a three-line message; top-aligned it sits on the first line where it belongs. */ align-items: flex-start; } /* .toast.ok / .toast.err widen the left border from 1px to 3px, which slid their text 2px right of an unclassed toast stacked above them. */ .toast.ok, .toast.err { padding-left: 13px; } /* The dialog title inherited the 13px body size while a panel title behind the scrim is 14px — the most important heading on screen sat a step below the chrome it was covering. */ .modal-head { font-size: var(--fs-md); line-height: var(--lh-title); } /* A 20px glyph in a 12px-wide box: the close control of a modal dialog had a smaller hit area than an order-book row, and no hover shape at all. */ .modal-x { width: 28px; height: 28px; margin-right: -4px; padding: 0; display: grid; place-items: center; border-radius: var(--r-sm); transition: color var(--t-fast), background var(--t-fast); } /* --bg-surface, not --bg-hover: in light --bg-hover is byte-identical to the --bg-elevated head it sits on, so the chip would not exist there. */ .modal-x:hover { background: var(--bg-surface); } /* .crow:last-of-type means "the last DIV among its siblings", and in the confirm dialog the last div is a .cstep — so the rule matched nothing and the final figure row kept a divider hanging in 12px of air above the step list. This says what it meant: the last crow of a run. swap.css's `#cfFig .crow:last-of-type` override carries an id and still outranks it. */ .crow:not(:has(~ .crow)) { border-bottom: none; } /* .modal-body is a 12px-gap flex column, so adjacent .crow rows sat 12px apart ON TOP of their own 7px padding — a 1px divider with 19px of air on each side, eight times down the order confirmation and six down the wallet panel. They are a table, not eight floating blocks: cancel the gap between neighbours and let the divider do the separating. (A display:none row such as #cfBoundRow is not a flex item, contributes no gap, and is still matched by `+` — so the arithmetic holds either way.) Same idiom as .cf-msg:empty above. */ .modal-body > .crow + .crow { margin-top: -12px; } /* Steps are a sequence; 12px between them broke the run into three cards. */ .modal-body > .cstep + .cstep { margin-top: -6px; } /* The address block's own 12px margin plus the body gap was 24px. */ .modal-body > .wm-addr { margin-bottom: 0; } /* Pending, active and done were three states with two appearances: a step not yet reached rendered at full --text, exactly like the one being worked on. And .cstep.done painted its LABEL with --up, which is the fill token; --up-text is the ink version, per the split in base.css. */ .cstep { color: var(--text-2); } .cstep.active { color: var(--text); } .cstep.done { color: var(--up-text); }