Spaces:
Running
Running
| /* SPDX-License-Identifier: MIT */ | |
| /* bankML on the ultimate input field: quiet, dark, typographic; the field is the instrument */ | |
| html, body { margin: 0; height: 100%; } | |
| html { -webkit-text-size-adjust: 100%; } | |
| body { background: radial-gradient(circle at 30% 15%, #10231f, #0b0f14 70%); color: #e5e7eb; | |
| font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } | |
| .dark { color-scheme: dark; } | |
| .bk-page { min-height: 100vh; overflow-x: clip; } | |
| .bk-head { display: flex; align-items: center; gap: 14px; padding: 14px clamp(16px, 4vw, 40px); border-bottom: 1px solid #1f2933; } | |
| .bk-mark { font-weight: 650; font-size: 19px; letter-spacing: -.01em; } | |
| .bk-mantra { flex: 1; color: #94a3b8; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } | |
| .bk-link { color: #5eead4; font-size: 13px; text-decoration: none; padding: 6px 0; } | |
| /* touch: the header links are 44 px tall targets */ | |
| @media (pointer: coarse) { .bk-link { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0 4px; } } | |
| .bk-link:hover { text-decoration: underline; } | |
| .bk-link:focus-visible { outline: 2px solid var(--btc-orange); outline-offset: 2px; } | |
| /* the answerer: a chooser, a one-line carrier note under it, the environment, the session counter (Savante's pattern). | |
| It scrolls with the page (not sticky): kept on screen it took 200+ px of a 900 px desktop for good; the field's left | |
| pill names the answerer (and switches it) and the right pill counts the stream wherever the page is scrolled. */ | |
| .bk-carrier { position: relative; z-index: 5; max-width: 720px; margin: 0 auto; padding: 10px 16px 8px; | |
| background: rgba(11, 15, 20, 0.88); border-bottom: 1px solid #1f2933; font-size: 13px; color: #cbd5e1; } | |
| @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { | |
| .bk-carrier { background: rgba(11, 15, 20, 0.7); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); } | |
| } | |
| .bk-choose { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } | |
| .bk-choose > span { color: #94a3b8; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; } | |
| .bk-choose select { flex: 1 1 14rem; min-width: 0; max-width: 100%; min-height: 44px; padding: 0 12px; border-radius: 10px; | |
| font: 600 16px system-ui, -apple-system, sans-serif; color: var(--uif-field-text); background: var(--uif-field-bg); | |
| border: 1px solid var(--btc-orange); } | |
| .bk-choose select:focus-visible { outline: 2px solid var(--btc-orange); outline-offset: 2px; } | |
| .bk-choose option:disabled { color: #94a3b8; } | |
| .bk-note { margin: 6px 0 0; color: #e2e8f0; overflow-wrap: anywhere; } | |
| .bk-env, .bk-counter { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 2px 14px; color: #94a3b8; font-size: 12px; overflow-wrap: anywhere; } | |
| .bk-env i, .bk-counter i { color: #94a3b8; } | |
| .bk-env span { min-width: 0; } | |
| .bk-counter b { color: #e2e8f0; font-weight: 600; } | |
| .bk-live { color: var(--btc-orange); } | |
| .bk-examples { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; } | |
| .bk-examples button { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid #334155; background: #111820; | |
| color: #e2e8f0; font: 500 14px system-ui, -apple-system, sans-serif; cursor: pointer; } | |
| .bk-examples button:hover { border-color: var(--btc-orange); } | |
| .bk-examples button:focus-visible { outline: 2px solid var(--btc-orange); outline-offset: 2px; } | |
| .bk-intro { max-width: 720px; margin: 0 auto; padding: 24px 16px 240px; color: #cbd5e1; font-size: 15px; overflow-wrap: anywhere; } | |
| .bk-intro h1 { font-size: 22px; font-weight: 600; letter-spacing: -.01em; color: #f1f5f9; margin: 0 0 14px; } | |
| .bk-intro pre { font: 12.5px/1.5 ui-monospace, Menlo, Consolas, monospace; background: #111820; border: 1px solid #1f2933; | |
| border-radius: 10px; padding: 12px; white-space: pre-wrap; overflow-wrap: anywhere; color: #a7f3d0; } | |
| .bk-intro code { color: #a7f3d0; } | |
| .bk-keys { color: #94a3b8; font-size: 14px; } | |
| .bk-pill { font: 600 12px ui-monospace, monospace; color: #cbd5e1; background: none; border: 1px solid #334155; | |
| border-radius: 999px; padding: 3px 10px; white-space: nowrap; min-height: 28px; } | |
| button.bk-pill { cursor: pointer; } | |
| .bk-pill.is-answerer { color: var(--btc-orange); border-color: var(--btc-orange); } | |
| .bk-pill .bk-dot { color: #94a3b8; } | |
| .bk-pill .bk-dot.ok { color: var(--candle-green); } | |
| .bk-pill.ok { color: var(--candle-green); border-color: var(--candle-green); } | |
| .bk-pill.bad { color: var(--stop-red); border-color: var(--stop-red); } | |
| .bk-pill.working { color: var(--btc-orange); border-color: var(--btc-orange); } | |
| .bk-pill:focus-visible { outline: 2px solid var(--btc-orange); outline-offset: 2px; } | |
| /* phone (≤ 640 px): 16 px gutters, the field docked to the bottom above the safe area and the on-screen keyboard */ | |
| @media (max-width: 640px) { | |
| .bk-mantra { display: none; } | |
| .bk-head { padding: 10px 16px; gap: 12px; } | |
| .bk-carrier { position: static; padding: 10px 16px; } | |
| .bk-intro { padding: 18px 16px 260px; font-size: 16px; } | |
| .bk-intro h1 { font-size: 20px; } | |
| .bk-keys { font-size: 15px; } | |
| } | |
| /* tablet (641–1024 px) */ | |
| @media (min-width: 641px) and (max-width: 1024px) { | |
| .bk-intro { padding-left: 24px; padding-right: 24px; } | |
| } | |
| .ultimate-input-field.is-handheld.docked-bottom { | |
| left: 16px ; | |
| right: 16px ; | |
| margin-bottom: calc(var(--uif-kb, 0px) + env(safe-area-inset-bottom, 0px)); | |
| padding-bottom: 0.5rem; | |
| border-radius: 0.75rem; | |
| } | |
| .ultimate-input-field.is-handheld .bk-pill { min-height: 44px; } | |
| /* THOT window */ | |
| .bk-thot { display: flex; flex-direction: column; gap: 0.4rem; } | |
| .bk-thot-id { color: #e5e7eb; } | |
| .bk-thot-cid { font-size: 0.7rem; color: #a7f3d0; word-break: break-all; } | |
| .bk-thot-facets { width: 100%; border-collapse: collapse; font-size: 0.75rem; } | |
| .bk-thot-facets td { padding: 0.15rem 0.3rem; border-bottom: 1px solid rgba(148, 163, 184, 0.12); } | |
| .bk-thot-facets td.num { text-align: right; color: #94a3b8; } | |
| .bk-thot-roots { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; font-size: 0.72rem; color: #94a3b8; } | |
| .bk-thot-roots code { color: #cbd5e1; } | |
| /* iNFT window */ | |
| .bk-inft-warn { color: #fbbf24; } | |
| .bk-inft-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem 0.6rem; } | |
| .bk-inft-grid label { display: flex; flex-direction: column; gap: 0.2rem; color: #94a3b8; font-size: 0.72rem; } | |
| .bk-inft-grid input[aria-invalid="true"] { border-color: #f87171; } | |
| .bk-inft-plan { display: flex; flex-direction: column; gap: 0.35rem; } | |
| .bk-inft-cast { white-space: pre-wrap; word-break: break-all; } | |