2ro
94d0c0edba
The hosted /pay page now shows the wallet's grin1 Slatepack address (with a QR and the exact amount) as a payment method alongside the Goblin/Nostr option. A payer sends the amount from any Grin wallet via the Slatepack or file method, pastes the S1 into the existing paste box, receives an S2, and finalizes to complete the payment. Reuses the existing offline receive_tx flow bound to the invoice token; the Nostr gift-wrap path, the invoice matcher, and the proof/confirm logic are unchanged. No Tor listener. The grin1 address is the wallet's stable index-0 address.
115 lines
3.4 KiB
CSS
115 lines
3.4 KiB
CSS
/* GoblinPay checkout + admin styles. One hand-written file, no build step,
|
|
no JavaScript. Mobile-first (a 390px phone is the primary surface). */
|
|
|
|
:root {
|
|
--bg: #14140f;
|
|
--panel: #1e1e17;
|
|
--ink: #f4f1e6;
|
|
--dim: #a8a294;
|
|
--accent: #e9c542; /* Goblin yellow */
|
|
--green: #57b894;
|
|
--red: #d97070;
|
|
--line: #33322a;
|
|
--radius: 14px;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
body {
|
|
margin: 0;
|
|
background: var(--bg);
|
|
color: var(--ink);
|
|
font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
|
-webkit-text-size-adjust: 100%;
|
|
}
|
|
|
|
main {
|
|
max-width: 30rem;
|
|
margin: 0 auto;
|
|
padding: 1.5rem 1.25rem 3rem;
|
|
}
|
|
|
|
main.admin { max-width: 60rem; }
|
|
|
|
.brand { display: block; }
|
|
.brandmark { height: 30px; width: auto; display: block; margin: 0 0 1.25rem; }
|
|
|
|
h1 { font-size: 1.5rem; margin: 0 0 0.5rem; }
|
|
h2 { font-size: 1.05rem; margin: 1.75rem 0 0.5rem; color: var(--dim); text-transform: uppercase; letter-spacing: 0.04em; }
|
|
|
|
.amount {
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
color: var(--accent);
|
|
margin: 0.25rem 0 1rem;
|
|
}
|
|
|
|
.status { font-weight: 600; margin: 0.5rem 0 1rem; }
|
|
.status.open { color: var(--dim); }
|
|
.status.paid, .status-confirmed, .status-replied { color: var(--green); }
|
|
.status.expired { color: var(--red); }
|
|
.status-received { color: var(--accent); }
|
|
|
|
.qr {
|
|
background: #fff;
|
|
border-radius: var(--radius);
|
|
padding: 0.75rem;
|
|
width: 100%;
|
|
max-width: 18rem;
|
|
margin: 0 auto 1rem;
|
|
}
|
|
.qr svg { display: block; width: 100%; height: auto; }
|
|
|
|
.hint { color: var(--dim); font-size: 0.9rem; }
|
|
.memo { color: var(--ink); background: var(--panel); padding: 0.5rem 0.75rem; border-radius: 10px; }
|
|
|
|
label { display: block; font-size: 0.85rem; color: var(--dim); margin: 0.75rem 0 0.25rem; }
|
|
|
|
.copybox, textarea {
|
|
width: 100%;
|
|
background: var(--panel);
|
|
color: var(--ink);
|
|
border: 1px solid var(--line);
|
|
border-radius: 10px;
|
|
padding: 0.6rem 0.7rem;
|
|
font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
|
|
font-size: 0.8rem;
|
|
resize: vertical;
|
|
word-break: break-all;
|
|
}
|
|
|
|
button {
|
|
margin-top: 0.75rem;
|
|
background: var(--accent);
|
|
color: #201d09;
|
|
border: 0;
|
|
border-radius: 999px;
|
|
padding: 0.7rem 1.4rem;
|
|
font-weight: 700;
|
|
font-size: 1rem;
|
|
cursor: pointer;
|
|
}
|
|
button:hover { filter: brightness(1.05); }
|
|
|
|
details.manual { margin-top: 1.5rem; border-top: 1px solid var(--line); padding-top: 0.75rem; }
|
|
details.manual summary { cursor: pointer; color: var(--accent); font-weight: 600; }
|
|
details.manual ol { color: var(--dim); font-size: 0.9rem; padding-left: 1.2rem; }
|
|
|
|
/* Each first-class way to pay (Goblin/Nostr, Slatepack/grin1). */
|
|
.pay-method { margin-top: 1.5rem; border-top: 1px solid var(--line); padding-top: 0.75rem; }
|
|
.pay-method:first-of-type { border-top: none; padding-top: 0; }
|
|
.pay-method ol { color: var(--dim); font-size: 0.9rem; padding-left: 1.2rem; }
|
|
|
|
a { color: var(--accent); }
|
|
|
|
.footer { margin-top: 2rem; color: var(--dim); font-size: 0.78rem; text-align: center; }
|
|
|
|
/* Admin tables */
|
|
table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
|
|
th, td { text-align: left; padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--line); }
|
|
th { color: var(--dim); font-weight: 600; }
|
|
.mono { font-family: ui-monospace, monospace; font-size: 0.75rem; color: var(--dim); word-break: break-all; }
|
|
.config ul { list-style: none; padding: 0; }
|
|
.config li { padding: 0.2rem 0; color: var(--dim); }
|
|
code { color: var(--ink); background: var(--panel); padding: 0.05rem 0.35rem; border-radius: 6px; }
|