node-theme.css (9071B)
1 /* Node palette; responsive wallet layout. */ 2 :root { --bg:#0f1012; --panel:#181b1f; --line:#2a3035; --ink:#e8edf0; --muted:#99a3aa; --lime:#d5f55f; } 3 body { background:var(--bg); }.ambient { display:none; } 4 .shell { padding:24px 22px 116px; } 5 .brand { font:800 18px/1.2 system-ui,sans-serif; letter-spacing:-.03em; gap:9px; white-space:nowrap; } 6 .brand-mark { flex:none; width:36px; height:36px; margin:0; border-radius:9px; background:#22291a; color:var(--lime); } 7 .brand-mark svg { width:28px; height:28px; display:block; } 8 .mark-loop { fill:none; stroke:currentColor; stroke-width:4.2; stroke-linecap:round; stroke-linejoin:round; }.mark-dot { fill:currentColor; } 9 .topbar { gap:10px; padding-bottom:22px; margin-bottom:30px; border-bottom:1px solid var(--line); } 10 .network { font-size:11px; font-weight:650; }.dot.live { background:var(--lime); box-shadow:0 0 0 3px #d5f55f12; } 11 .icon-button { flex:none; border-radius:8px; width:40px; height:40px; background:transparent; border-color:var(--line); color:var(--muted); } 12 .ui-icon { width:20px; height:20px; display:block; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } 13 .balance,.hero h1,.lock-card h1,.view-title,.section-head h2 { font-family:inherit; } 14 .balance { font-size:clamp(30px,8.5vw,44px); font-weight:750; letter-spacing:-.05em; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }.balance span { font-size:15px; font-weight:650; letter-spacing:0; } 15 .eyebrow { font-size:10px; font-weight:750; letter-spacing:.13em; }.subbalance { font-size:12px; line-height:1.7; } 16 .view-title { font-size:28px; line-height:1.2; font-weight:750; letter-spacing:-.035em; margin:10px 0; }.view-copy { font-size:13px; line-height:1.7; margin-bottom:24px; } 17 .button { min-height:48px; border:1px solid var(--lime); border-radius:9px; font-family:inherit; font-size:13px; font-weight:750; } 18 .button:hover { background:#e4ff83; }.button.secondary { background:#202328; border-color:#3a4248; }.button.ghost { background:transparent; border-color:var(--line); } 19 .button.secondary:hover,.button.ghost:hover,.icon-button:hover { color:var(--lime); border-color:var(--lime); background:#202328; } 20 .button.danger { background:#231718; border-color:#62312d; color:#ffb1a8; } 21 button:focus-visible { outline:2px solid var(--lime); outline-offset:3px; } 22 .panel { padding:18px; border-radius:12px; background:var(--panel); box-shadow:none; backdrop-filter:none; } 23 .section-head h2 { font-size:15px; font-weight:700; }.section-head button { font-size:12px; padding:8px 0 8px 12px; } 24 .activity { appearance:none; width:100%; grid-template-columns:36px minmax(0,1fr) auto 12px; gap:10px; padding:15px 0; border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer; } 25 .activity:last-child { border-bottom:0; }.activity:hover .activity-title,.activity:focus-visible .activity-title { color:var(--lime); }.activity:focus-visible { outline:2px solid var(--lime); outline-offset:2px; border-radius:5px; } 26 .activity-icon { width:34px; height:34px; border-radius:9px; background:#22291a; color:var(--lime); } 27 .activity-title { display:block; font-size:12px; }.activity-meta { display:block; font-size:10px; line-height:1.6; }.activity-amount { font-size:12px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; max-width:135px; }.activity-amount.in { color:var(--lime); } 28 .activity-chevron { color:var(--muted); font-size:19px; line-height:1; } 29 .transaction-filters { display:flex; flex-wrap:wrap; gap:7px; margin:0 0 14px; } 30 .transaction-filter { appearance:none; border:1px solid var(--line); border-radius:999px; background:var(--panel); color:var(--muted); padding:8px 12px; font:700 11px/1 inherit; cursor:pointer; } 31 .transaction-filter.active { border-color:#d5f55f70; background:#252b20; color:var(--lime); } 32 .activity-loader { display:flex; align-items:center; justify-content:center; gap:10px; padding:20px 8px 8px; color:var(--muted); font-size:11px; } 33 .activity-retry { appearance:none; display:block; margin:16px auto 2px; border:0; background:transparent; color:var(--lime); padding:8px; font:700 11px/1 inherit; cursor:pointer; } 34 .activity-sentinel { height:1px; } 35 .empty { padding:30px 8px; font-size:13px; line-height:1.9; } 36 .bottom-nav { border-radius:13px; padding:6px; background:#15171af5; border-color:#30363c; box-shadow:0 8px 30px #0005; } 37 .nav-item { min-height:52px; border-radius:8px; font-size:10px; font-weight:650; gap:6px; }.nav-item.active { background:#252b20; color:var(--lime); } 38 .field { margin-bottom:20px; gap:9px; }.field label { color:#b4bec4; font-size:12px; font-weight:600; } 39 input,textarea { font-family:inherit; font-size:16px; border-radius:8px; padding:14px; background:#101215; border-color:#3a4248; color:var(--ink); } 40 input::placeholder,textarea::placeholder { color:#68737c; }input:focus,textarea:focus { border-color:var(--lime); box-shadow:0 0 0 3px #d5f55f12; } 41 textarea { line-height:1.8; }.amount-wrap input { font-family:inherit; font-size:28px; font-weight:650; }.amount-wrap span { font-size:12px; top:22px; } 42 .fee-line,.detail-line { font-size:12px; line-height:1.6; padding:12px 0; }.detail-line + .detail-line { border-top:1px solid var(--line); }.detail-line strong { overflow-wrap:anywhere; min-width:0; } 43 .transaction-total { margin:0 0 20px; color:var(--ink); font-size:24px; font-weight:750; font-variant-numeric:tabular-nums; }.transaction-total.in { color:var(--lime); } 44 .transaction-detail { display:grid; }.address-detail { display:grid; gap:8px; padding:14px 0; border-bottom:1px solid var(--line); }.address-detail:first-child { padding-top:0; }.address-detail > span,.transaction-id > span { color:var(--muted); font-size:11px; }.address-detail > div { display:grid; gap:6px; }.address-detail code,.transaction-id code { color:var(--ink); font-size:11px; line-height:1.7; overflow-wrap:anywhere; word-break:break-word; }.address-detail small { color:var(--lime); font-size:11px; font-weight:700; }.status-value { text-transform:capitalize; }.transaction-id { display:grid; grid-template-columns:minmax(0,1fr) 40px; gap:8px 12px; align-items:center; padding-top:14px; border-top:1px solid var(--line); }.transaction-id > span { grid-column:1 / -1; }.transaction-id .icon-button { grid-column:2; grid-row:2; }.transaction-id code { grid-column:1; grid-row:2; } 45 .address-box { align-items:flex-start; border-radius:9px; padding:16px; background:#101215; border-color:var(--line); }.address-box code { white-space:normal; overflow:visible; overflow-wrap:anywhere; line-height:1.9; color:var(--ink); } 46 .receive-emblem { display:grid; place-items:center; margin:12px auto 28px; width:88px; height:88px; border:1px solid #d5f55f30; border-radius:24px; background:#22291a; color:var(--lime); }.receive-emblem .ui-icon { width:36px; height:36px; } 47 .setting { padding:18px 0; }.setting:first-child { padding-top:0; }.setting:last-child { padding-bottom:0; }.setting h3 { font-size:12px; }.setting p { font-size:12px; line-height:1.8; overflow-wrap:anywhere; } 48 .onboarding { min-height:calc(100dvh - 160px); }.onboarding .hero { padding:7vh 0 40px; }.hero h1 { font-size:clamp(36px,10vw,48px); line-height:1.12; font-weight:750; letter-spacing:-.055em; margin:38px 0 20px; }.hero p { font-size:14px; line-height:1.8; }.onboarding-actions { padding-top:28px; } 49 .lock-card .brand { margin-bottom:40px; }.lock-card .brand-mark { margin:0; }.lock-card h1 { font-size:30px; line-height:1.25; letter-spacing:-.04em; } 50 .security-note { padding:0; margin:20px 0 0; font-size:11px; line-height:1.8; overflow-wrap:anywhere; }.back { display:inline-flex; align-items:center; min-height:44px; font-size:12px; margin:0 0 18px; } 51 .seed-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }.seed-word { background:#101215; border-color:var(--line); padding:11px 6px; font-size:11px; border-radius:7px; }.seed-word::before { width:18px; font-size:9px; } 52 .warning { border-radius:9px; background:#292315; border-color:#594926; color:#e6cb8e; line-height:1.8; } 53 .toast { border-radius:9px; background:var(--ink); color:var(--bg); line-height:1.6; }.toast.error { background:#ffb1a8; } 54 .spinner { border-color:#d5f55f30; border-top-color:var(--lime); margin:auto; }.button .spinner { border-color:#15171a30; border-top-color:#15171a; margin:0; } 55 @media(min-width:700px) { body { padding:32px; background:#111316; }.shell { min-height:calc(100dvh - 64px); border-radius:18px; border-color:var(--line); background:var(--bg); padding:28px 26px 116px; }.onboarding { min-height:calc(100dvh - 208px); } } 56 @media(max-width:360px) { .shell { padding-inline:14px; }.brand { font-size:16px; }.network { font-size:10px; }.activity { grid-template-columns:28px minmax(0,1fr) auto 10px; gap:7px; }.activity-amount { font-size:11px; max-width:100px; }.activity-icon { width:28px; height:28px; }.panel { padding:13px; } } 57 @media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }