Spaces:
Running
Running
| /* SPDX-License-Identifier: MIT */ | |
| /* mindx.pythai.net/bankml: a quiet dark page; the field is the instrument. The palette is the field's | |
| (UltimateInputField.css): candle green for Send and what went well, bitcoin orange for work in progress, stop red | |
| for Stop and failures, terminal green on black in T mode. Panels and response windows are the same glass. */ | |
| html, body { margin: 0; min-height: 100%; } | |
| html { -webkit-text-size-adjust: 100%; color-scheme: dark; } | |
| body { background: radial-gradient(circle at 50% 0%, #0f1d1a, #0b0f14 60%) fixed, #0b0f14; color: #e5e7eb; | |
| font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } | |
| .mx-page { min-height: 100vh; overflow-x: clip; --mx-left: 0px; --mx-right: 0px; } | |
| .mx-page :focus-visible { outline: 2px solid var(--btc-orange); outline-offset: 2px; } | |
| /* the expression: a mark, one line, the links */ | |
| .mx-head, .mx-who { box-sizing: border-box; max-width: 720px; margin: 0 auto; | |
| padding-left: max(16px, calc(var(--mx-left) + 16px)); padding-right: max(16px, calc(var(--mx-right) + 16px)); } | |
| @media (min-width: 641px) { | |
| .mx-head, .mx-who { max-width: calc(720px + var(--mx-left) + var(--mx-right)); } | |
| } | |
| .mx-head { padding-top: clamp(28px, 8vh, 96px); text-align: center; } | |
| .mx-mark { margin: 0; font: 700 clamp(40px, 7vw, 64px)/1 system-ui, -apple-system, sans-serif; letter-spacing: -0.035em; color: #f8fafc; } | |
| .mx-mark::after { content: ""; display: block; width: 44px; height: 3px; margin: 14px auto 0; border-radius: 2px; background: var(--candle-green); } | |
| .mx-line { margin: 14px 0 0; color: #cbd5e1; font-size: 17px; } | |
| .mx-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin-top: 14px; } | |
| .mx-links a { color: #5eead4; font-size: 14px; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; } | |
| .mx-links a:hover { text-decoration: underline; } | |
| .mx-who { padding-top: 18px; padding-bottom: 8px; font-size: 13px; color: #cbd5e1; } | |
| .mx-choose { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; } | |
| .mx-choose > span { color: #94a3b8; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; } | |
| .mx-choose select { flex: 0 1 20rem; min-width: 0; max-width: 100%; min-height: 44px; padding: 0 12px; border-radius: 10px; | |
| font: 600 15px system-ui, -apple-system, sans-serif; color: var(--uif-field-text); background: var(--uif-field-bg); | |
| border: 1px solid var(--btc-orange); } | |
| .mx-choose option:disabled { color: #94a3b8; } | |
| .mx-counter { margin: 8px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 14px; color: #94a3b8; font-size: 12px; } | |
| .mx-counter i { color: #94a3b8; } | |
| .mx-counter b { color: #e2e8f0; font-weight: 600; } | |
| .mx-live { color: var(--btc-orange); } | |
| /* the pills beside the field */ | |
| .mx-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.mx-pill { cursor: pointer; } | |
| .mx-pill.is-answerer { color: var(--btc-orange); border-color: var(--btc-orange); } | |
| .mx-pill .mx-dot { color: #94a3b8; } | |
| .mx-pill .mx-dot.ok { color: var(--candle-green); } | |
| .mx-pill.ok { color: var(--candle-green); border-color: var(--candle-green); } | |
| .mx-pill.bad { color: var(--stop-red); border-color: var(--stop-red); } | |
| .mx-pill.working { color: var(--btc-orange); border-color: var(--btc-orange); } | |
| /* glass: panels, the ghost, the menu — as the response windows (solid where backdrop-filter is not supported) */ | |
| .mx-glass-surface { background: var(--uif-glass-solid); color: #e5e7eb; } | |
| @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { | |
| .mx-glass-surface { background: var(--uif-glass); backdrop-filter: var(--uif-glass-blur); -webkit-backdrop-filter: var(--uif-glass-blur); } | |
| } | |
| /* the sidebars: fixed to the edges, shown only when they hold a panel, their panels stacked and scrolled */ | |
| .mx-side { position: fixed; top: 0; bottom: 0; z-index: 800; box-sizing: border-box; display: flex; } | |
| .mx-side.is-left { left: 0; flex-direction: row; } | |
| .mx-side.is-right { right: 0; flex-direction: row-reverse; } | |
| .mx-side-stack { flex: 1; min-width: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 10px 180px; display: flex; flex-direction: column; gap: 10px; } | |
| .mx-side-resize { flex: none; width: 8px; cursor: col-resize; touch-action: none; background: transparent; position: relative; } | |
| .mx-side-resize::after { content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 2px; background: rgba(148, 163, 184, 0.18); } | |
| .mx-side-resize:hover::after, .mx-side-resize:focus-visible::after { background: var(--btc-orange); } | |
| .mx-centre { position: static; } | |
| /* a panel: a title bar (the handle) over its body */ | |
| .mx-panel { border: 1px solid rgba(148, 163, 184, 0.25); border-radius: 10px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35); | |
| display: flex; flex-direction: column; min-height: 0; box-sizing: border-box; font-size: 13px; } | |
| .mx-panel.is-docked { flex: none; } | |
| .mx-panel.is-center { position: fixed; z-index: 900; } | |
| .mx-panel.is-dragged { opacity: 0.35; } | |
| .mx-panel-title { display: flex; align-items: center; gap: 6px; padding: 0 2px 0 10px; min-height: 36px; cursor: grab; | |
| touch-action: none; user-select: none; -webkit-user-select: none; border-bottom: 1px solid rgba(148, 163, 184, 0.18); } | |
| .mx-panel.is-collapsed .mx-panel-title { border-bottom: 0; } | |
| .mx-panel-title:active { cursor: grabbing; } | |
| .mx-grip { color: #64748b; font-size: 14px; } | |
| .mx-panel-icon { width: 1.2em; text-align: center; } | |
| .mx-panel-name { font-weight: 650; color: #f1f5f9; } | |
| .mx-panel-id { color: #94a3b8; font: 11px ui-monospace, monospace; margin-right: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } | |
| .mx-icon-btn { flex: none; width: 32px; height: 32px; border: 0; border-radius: 6px; background: none; color: #cbd5e1; cursor: pointer; font-size: 14px; } | |
| .mx-icon-btn:hover { background: rgba(148, 163, 184, 0.2); color: #fff; } | |
| .mx-panel-body { padding: 10px 12px 12px; overflow: auto; min-height: 0; flex: 1; } | |
| .mx-panel-resize { position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; cursor: nwse-resize; touch-action: none; | |
| background: linear-gradient(135deg, transparent 50%, rgba(148, 163, 184, 0.5) 50%); border-bottom-right-radius: 10px; } | |
| /* the drop's place in a sidebar: a line in the gap before (or after) a panel, drawn on that panel, so nothing moves */ | |
| .mx-panel.is-docked { position: relative; } | |
| .mx-drop-before::before, .mx-drop-after::after { content: ""; position: absolute; left: 0; right: 0; height: 4px; border-radius: 2px; | |
| background: var(--btc-orange); box-shadow: 0 0 10px var(--btc-orange); pointer-events: none; } | |
| .mx-drop-before::before { top: -7px; } | |
| .mx-drop-after::after { bottom: -7px; } | |
| /* dragging: the three drop zones, the one under the pointer lit */ | |
| .mx-drop { position: fixed; inset: 0; z-index: 2100; pointer-events: none; } | |
| .mx-drop-zone { position: absolute; top: 0; bottom: 0; box-sizing: border-box; display: flex; align-items: center; justify-content: center; | |
| border: 2px dashed rgba(148, 163, 184, 0.45); background: rgba(13, 17, 23, 0.25); } | |
| .mx-drop-zone span { max-width: 86%; text-align: center; font: 700 12px ui-monospace, monospace; letter-spacing: .1em; color: #cbd5e1; background: #0d1117; padding: 6px 10px; border-radius: 6px; } | |
| .mx-drop-zone.is-hot { border: 2px solid var(--btc-orange); background: rgba(247, 147, 26, 0.12); } | |
| .mx-drop-zone.is-hot span { color: var(--btc-orange); } | |
| .mx-ghost { position: fixed; z-index: 2101; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--btc-orange); border-radius: 10px; | |
| font-weight: 650; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45); } | |
| /* a narrow panel (a tablet's sidebar): the title keeps its buttons, the rows put the name over the value */ | |
| .mx-panel { container-type: inline-size; container-name: mxpanel; } | |
| @container mxpanel (max-width: 250px) { | |
| .mx-panel-id, .mx-panel-title .mx-grip, .mx-panel-title .mx-panel-icon { display: none; } | |
| .mx-panel-name { margin-right: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } | |
| .mx-panel .mx-row { flex-direction: column; gap: 0; padding: 3px 0; } | |
| .mx-panel .mx-row dt { flex: none; } | |
| } | |
| /* the panel bodies */ | |
| .mx-diag h3 { margin: 10px 0 4px; font: 700 11px system-ui, sans-serif; text-transform: uppercase; letter-spacing: .08em; color: #94a3b8; } | |
| .mx-diag h3:first-child { margin-top: 0; } | |
| .mx-diag dl { margin: 0; } | |
| .mx-row { display: flex; gap: 10px; padding: 2px 0; } | |
| .mx-row dt { flex: 0 0 8.5em; color: #94a3b8; } | |
| .mx-row dd { margin: 0; min-width: 0; overflow-wrap: anywhere; color: #e2e8f0; } | |
| .mx-panel .is-ok { color: var(--candle-green) ; } | |
| .mx-panel .is-bad { color: var(--stop-red) ; } | |
| .mx-panel .is-working { color: var(--btc-orange) ; } | |
| .mx-hash { font: 11px/1.4 ui-monospace, monospace; word-break: break-all; } | |
| .mx-glass { display: flex; align-items: center; gap: 10px; margin-top: 12px; color: #cbd5e1; } | |
| .mx-glass input { flex: 1; min-width: 0; accent-color: var(--btc-orange); min-height: 28px; } | |
| .mx-fine { color: #94a3b8; font-size: 12px; margin: 8px 0 0; } | |
| .mx-receipts { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 10px; } | |
| .mx-receipts pre, .mx-cmd { font: 11px/1.45 ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere; background: #0d1117; | |
| border: 1px solid #1f2933; border-radius: 8px; padding: 8px; color: #a7f3d0; margin: 6px 0 0; } | |
| .mx-receipts summary { cursor: pointer; color: #cbd5e1; font-size: 12px; margin-top: 4px; } | |
| .mx-notes { box-sizing: border-box; width: 100%; min-height: 140px; height: 100%; resize: vertical; border-radius: 8px; padding: 8px 10px; | |
| border: 1px solid #334155; background: var(--uif-field-bg); color: var(--uif-field-text); font: 14px/1.5 system-ui, sans-serif; } | |
| .mx-notes::placeholder { color: var(--uif-field-placeholder); } | |
| .mx-engine .mx-choose { justify-content: flex-start; } | |
| .mx-engine .mx-choose select { flex: 1 1 12rem; } | |
| .mx-note { margin: 8px 0 0; color: #e2e8f0; } | |
| .mx-connect { display: flex; gap: 8px; margin-top: 8px; } | |
| .mx-connect input { flex: 1; min-width: 0; min-height: 36px; border-radius: 8px; border: 1px solid #334155; padding: 0 10px; | |
| background: var(--uif-field-bg); color: var(--uif-field-text); font: 13px ui-monospace, monospace; } | |
| .mx-btn { min-height: 36px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--btc-orange); background: #111820; | |
| color: var(--btc-orange); font: 600 13px system-ui, sans-serif; cursor: pointer; margin-top: 8px; } | |
| .mx-connect .mx-btn { margin-top: 0; } | |
| .mx-engine > p.is-ok, .mx-engine > p.is-bad { margin: 6px 0 0; font: 12px ui-monospace, monospace; overflow-wrap: anywhere; } | |
| /* the ◧ menu: the panel kinds */ | |
| .mx-menu { position: fixed; z-index: 2050; box-sizing: border-box; border: 1px solid rgba(148, 163, 184, 0.3); border-radius: 12px; | |
| padding: 8px; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45); } | |
| .mx-menu-head { font: 700 11px system-ui, sans-serif; text-transform: uppercase; letter-spacing: .08em; color: #94a3b8; padding: 4px 6px 6px; } | |
| .mx-menu-item { display: flex; gap: 10px; align-items: flex-start; width: 100%; min-height: 44px; text-align: left; border: 0; border-radius: 8px; | |
| background: none; color: #e5e7eb; padding: 6px; cursor: pointer; font: 13px system-ui, sans-serif; } | |
| .mx-menu-item:hover { background: rgba(148, 163, 184, 0.15); } | |
| .mx-menu-item b { display: block; color: #f1f5f9; } | |
| .mx-menu-item small { display: block; color: #94a3b8; font-size: 12px; } | |
| .mx-menu-zones { display: flex; gap: 6px; padding: 6px; border-top: 1px solid rgba(148, 163, 184, 0.18); margin-top: 4px; } | |
| .mx-menu-zones button { flex: 1; min-height: 44px; border-radius: 8px; border: 1px solid #334155; background: #111820; color: #cbd5e1; cursor: pointer; font: 600 13px system-ui, sans-serif; } | |
| .mx-menu-zones button.is-on { border-color: var(--btc-orange); color: var(--btc-orange); } | |
| /* touch: 44 px targets */ | |
| @media (pointer: coarse) { | |
| .mx-panel-title { min-height: 44px; } | |
| .mx-icon-btn { width: 44px; height: 44px; } | |
| .mx-side-resize { width: 16px; } | |
| .mx-side-resize::after { left: 7px; } | |
| .mx-panel-resize { width: 28px; height: 28px; } | |
| .mx-btn, .mx-connect input { min-height: 44px; } | |
| .mx-pill { min-height: 44px; } | |
| .mx-glass input { min-height: 44px; } | |
| /* the sidebar's edge: a 16 px line with a 44 px reach */ | |
| .mx-side-resize::before { content: ""; position: absolute; top: 0; bottom: 0; left: -14px; right: -14px; } | |
| } | |
| /* phone (≤ 640 px): the sidebars are tabs in the page, the panels full width; the field docked at the bottom */ | |
| @media (max-width: 640px) { | |
| .mx-head { padding-top: 24px; } | |
| .mx-line { font-size: 16px; } | |
| .mx-phone-panels { padding: 8px 16px 260px; } | |
| .mx-tabs { display: flex; gap: 8px; } | |
| .mx-tab { flex: 1; min-height: 44px; border-radius: 10px; border: 1px solid #334155; background: #111820; color: #cbd5e1; | |
| font: 600 14px system-ui, sans-serif; cursor: pointer; } | |
| .mx-tab.is-on { border-color: var(--btc-orange); color: var(--btc-orange); } | |
| .mx-sheet { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; } | |
| .mx-panel { width: 100%; font-size: 14px; } | |
| .mx-row dt { flex-basis: 7.5em; } | |
| /* dragging on a phone: the zone names at the top, clear of the thumb and the ghost under it */ | |
| .mx-drop-zone { align-items: flex-start; padding-top: max(16px, env(safe-area-inset-top, 0px)); } | |
| .mx-drop-zone span { font-size: 11px; letter-spacing: .04em; padding: 6px; } | |
| } | |
| /* a command's passing line ("spawned …", "closed …") sits in the strip along the field's top edge instead of taking the | |
| button row's room (it pushed ⊞ ◧ + out of sight); a narrow field hides it, as the field does everywhere */ | |
| .mx-page .ultimate-input-field .uif-status { position: absolute; right: 14px; top: 3px; max-width: 60%; line-height: 1.4; | |
| padding: 0 8px; border-radius: 999px; background: var(--uif-glass-solid); color: #cbd5e1; pointer-events: none; } | |
| .mx-page .ultimate-input-field .uif-status.is-err { color: #fca5a5; } | |
| /* a narrow field hides its side modules; here who answers and the receipt's state stay in sight, just above it */ | |
| @container uif (max-width: 460px) { | |
| .mx-page .uif-modules.uif-modules-left, .mx-page .uif-modules.uif-modules-right { | |
| display: flex; position: absolute; bottom: calc(100% + 6px); border: 0; padding: 0; background: none; } | |
| .mx-page .uif-modules.uif-modules-left { left: 0; } | |
| .mx-page .uif-modules.uif-modules-right { right: 0; } | |
| .mx-page .uif-modules .mx-pill { background: var(--uif-glass-solid); } | |
| } | |
| /* a phone, the field docked at the bottom: floating above it the pills covered whatever the page had scrolled under | |
| them (the phone panels' tabs, the not-found card's buttons). There they sit in a strip inside the field, which grows | |
| by that strip (content-box: its set height stays the input's and the button row's, the strip is added on top). */ | |
| @media (max-width: 640px) { | |
| .mx-page .ultimate-input-field.is-handheld.docked-bottom { box-sizing: content-box; padding-top: 52px; } | |
| @container uif (max-width: 460px) { | |
| .mx-page .ultimate-input-field.docked-bottom .uif-modules.uif-modules-left, | |
| .mx-page .ultimate-input-field.docked-bottom .uif-modules.uif-modules-right { bottom: auto; top: 6px; flex-direction: row; max-width: 60%; } | |
| .mx-page .ultimate-input-field.docked-bottom .uif-modules.uif-modules-left { left: 8px; } | |
| .mx-page .ultimate-input-field.docked-bottom .uif-modules.uif-modules-right { right: 8px; max-width: 36%; } | |
| .mx-page .ultimate-input-field.docked-bottom .uif-modules .mx-pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } | |
| } | |
| } | |
| .mx-page .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; | |
| } | |
| @media (prefers-reduced-motion: reduce) { .mx-page *, .mx-drop * { transition: none ; animation: none ; } } | |
| /* who answers: the tabs, left-aligned in the middle column */ | |
| .mx-who .bk-answerers { text-align: left; } | |
| .mx-who .bk-tabs { justify-content: flex-start; } | |
| /* centred while they fit, and never past the left edge when they do not: auto margins on the ends centre a strip that | |
| fits and collapse to 0 when it overflows (justify-content: center would spill the first tab past scrollLeft 0) */ | |
| @media (min-width: 641px) { | |
| .mx-who .bk-tabs > .bk-tab:first-child { margin-left: auto; } | |
| .mx-who .bk-tabs > .bk-tab:last-child { margin-right: auto; } | |
| } | |
| /* the licence line, below everything, clear of the field */ | |
| .mx-foot { box-sizing: border-box; max-width: 720px; margin: 0 auto; padding: 16px 16px 240px; color: #94a3b8; font-size: 12px; overflow-wrap: anywhere; } | |
| @media (min-width: 641px) { .mx-foot { max-width: calc(720px + var(--mx-left) + var(--mx-right)); padding-left: calc(16px + var(--mx-left)); padding-right: calc(16px + var(--mx-right)); } } | |