/* ========================================================================= Wallet Modal — style.css (AppKit-style grid) - "All Wallets" grid of tiles, search bar, QR/WalletConnect button. - Light theme by default (matches the reference); dark via or the in-modal toggle. - Mobile-first: bottom sheet on phones, centered card on desktop. ========================================================================= */ /* ---- LIGHT theme (default) -------------------------------------------- */ :root { --wm-page-bg: radial-gradient(1100px 600px at 15% -10%, #e6ebf7, transparent 60%), radial-gradient(900px 500px at 100% 0%, #edf1fb, transparent 55%), #eef0f6; --wm-text: #14151a; --wm-muted: #6b7280; --wm-faint: #9aa1b2; --wm-card-bg: #ffffff; --wm-card-border: rgba(17, 20, 30, 0.07); --wm-shadow: 0 30px 70px -22px rgba(20, 22, 45, 0.4); --wm-tile-bg: #f4f5f8; --wm-tile-hover: #eceef3; --wm-field-bg: #f1f2f6; --wm-close-bg: #f1f2f6; --wm-icon-frame: #ffffff; --wm-overlay: rgba(20, 22, 32, 0.35); --wm-accent: #4f7cff; --wm-accent-2: #6d5efc; --wm-accent-grad: linear-gradient(135deg, #6d5efc, #4f8cff); --wm-green: #12b76a; --wm-green-bg: rgba(18, 183, 106, 0.12); --wm-danger: #e5484d; --wm-danger-bg: rgba(229, 72, 77, 0.1); --wm-scroll: rgba(0, 0, 0, 0.16); --wm-radius-card: 24px; --wm-radius-tile: 16px; --wm-ease: cubic-bezier(0.16, 1, 0.3, 1); } /* ---- DARK theme ------------------------------------------------------- */ [data-theme="dark"] { --wm-page-bg: radial-gradient(1100px 600px at 15% -10%, rgba(109, 94, 252, 0.22), transparent 60%), radial-gradient(900px 500px at 100% 0%, rgba(79, 140, 255, 0.18), transparent 55%), #0b0d12; --wm-text: #f4f6fb; --wm-muted: #9aa1b2; --wm-faint: #6b7284; --wm-card-bg: rgba(22, 24, 32, 0.92); --wm-card-border: rgba(255, 255, 255, 0.09); --wm-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.7); --wm-tile-bg: rgba(255, 255, 255, 0.045); --wm-tile-hover: rgba(255, 255, 255, 0.09); --wm-field-bg: rgba(255, 255, 255, 0.05); --wm-close-bg: rgba(255, 255, 255, 0.06); --wm-icon-frame: #0e1017; --wm-overlay: rgba(6, 7, 11, 0.62); --wm-accent: #4f8cff; --wm-green: #35c98a; --wm-green-bg: rgba(53, 201, 138, 0.16); --wm-danger: #ff6b6b; --wm-danger-bg: rgba(255, 107, 107, 0.12); --wm-scroll: rgba(255, 255, 255, 0.16); } /* box-sizing is scoped to the modal ONLY, so this stylesheet is safe to drop onto any page — it never touches the host page's body, layout, or classes. (Demo-page styles for index.html now live inline in that file.) */ .wm-root, .wm-root *, .wm-root *::before, .wm-root *::after { box-sizing: border-box; } /* ============================================================= THE MODAL */ .wm-root { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: flex-end; /* mobile-first: sheet at the bottom */ justify-content: center; } .wm-root[hidden] { display: none; } .wm-overlay { position: absolute; inset: 0; background: var(--wm-overlay); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.28s ease; } .wm-root.is-open .wm-overlay { opacity: 1; } .wm-card { position: relative; width: 100%; max-width: 448px; max-height: 90vh; display: flex; flex-direction: column; background: var(--wm-card-bg); -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%); border: 1px solid var(--wm-card-border); border-bottom: 0; border-radius: var(--wm-radius-card) var(--wm-radius-card) 0 0; box-shadow: var(--wm-shadow); padding: 6px 18px calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateY(101%); /* mobile: slide up */ transition: transform 0.38s var(--wm-ease); will-change: transform; } .wm-root.is-open .wm-card { transform: translateY(0); } .wm-handle { width: 40px; height: 4px; border-radius: 999px; background: var(--wm-card-border); margin: 8px auto 2px; } /* ---------------------------------------------------------- Top bar */ .wm-topbar { display: grid; grid-template-columns: 36px 1fr 36px; /* back · title · close */ align-items: center; padding: 8px 0 14px; } .wm-title { grid-column: 2; margin: 0; text-align: center; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; } .wm-iconbtn { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; border: 0; background: transparent; color: var(--wm-muted); cursor: pointer; transition: background 0.15s, color 0.15s, transform 0.12s; } .wm-iconbtn:hover { background: var(--wm-close-bg); color: var(--wm-text); } .wm-iconbtn:active { transform: scale(0.92); } .wm-iconbtn:focus-visible { outline: 2px solid var(--wm-accent); outline-offset: 2px; } .wm-back { grid-column: 1; justify-self: start; } .wm-back[hidden] { display: none; } .wm-close { grid-column: 3; justify-self: end; } /* ---------------------------------------------------------- Views */ .wm-view { flex: 1; min-height: 0; display: flex; flex-direction: column; } .wm-view--qr { display: none; } .wm-card[data-view="qr"] .wm-view--list { display: none; } .wm-card[data-view="qr"] .wm-view--qr { display: flex; animation: wm-fade 0.25s ease; } @keyframes wm-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* ---------------------------------------------------------- Controls row */ .wm-controls { display: flex; align-items: center; gap: 10px; padding: 2px 2px 14px; } .wm-search { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 9px; height: 46px; padding: 0 14px; background: var(--wm-field-bg); border: 1px solid transparent; border-radius: 13px; transition: border-color 0.15s; } .wm-search:focus-within { border-color: var(--wm-accent); } .wm-search svg { flex: 0 0 auto; color: var(--wm-faint); } .wm-search input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; color: var(--wm-text); font: inherit; font-size: 16px; /* 16px prevents iOS zoom on focus */ outline: none; } .wm-search input::placeholder { color: var(--wm-faint); } /* theme toggle (pill switch) */ .wm-toggle { flex: 0 0 auto; width: 58px; height: 34px; border-radius: 999px; border: 1px solid var(--wm-card-border); background: var(--wm-field-bg); position: relative; cursor: pointer; padding: 0; transition: background 0.2s; } .wm-toggle-knob { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); display: grid; place-items: center; color: #f6a723; transition: transform 0.24s var(--wm-ease), color 0.2s; } [data-theme="dark"] .wm-toggle-knob { transform: translateX(24px); color: #cbd2e0; background: #2a2d38; } .wm-toggle:focus-visible { outline: 2px solid var(--wm-accent); outline-offset: 2px; } /* QR / WalletConnect button */ .wm-qr-btn { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px; border: 0; background: var(--wm-accent); color: #fff; display: grid; place-items: center; cursor: pointer; transition: transform 0.12s, filter 0.15s; } .wm-qr-btn:hover { filter: brightness(1.06); } .wm-qr-btn:active { transform: scale(0.94); } .wm-qr-btn:focus-visible { outline: 2px solid var(--wm-accent); outline-offset: 2px; } /* ---------------------------------------------------------- Wallet grid */ .wm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 2px 2px 4px; align-content: start; } .wm-grid::-webkit-scrollbar { width: 8px; } .wm-grid::-webkit-scrollbar-thumb { background: var(--wm-scroll); border-radius: 999px; } .wm-grid::-webkit-scrollbar-track { background: transparent; } .wm-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 6px 10px; border: 1px solid transparent; border-radius: var(--wm-radius-tile); background: var(--wm-tile-bg); color: var(--wm-text); font: inherit; cursor: pointer; transition: background 0.16s var(--wm-ease), transform 0.16s var(--wm-ease), border-color 0.16s var(--wm-ease); } .wm-tile:hover { background: var(--wm-tile-hover); border-color: var(--wm-card-border); transform: translateY(-2px); } .wm-tile:active { transform: translateY(-1px) scale(0.98); } .wm-tile:focus-visible { outline: 2px solid var(--wm-accent); outline-offset: 2px; } .wm-tile[disabled] { opacity: 0.5; pointer-events: none; } .wm-tile-icon-wrap { position: relative; width: 56px; height: 56px; } .wm-tile-icon { width: 56px; height: 56px; border-radius: 15px; overflow: hidden; display: grid; place-items: center; background: var(--wm-icon-frame); border: 1px solid var(--wm-card-border); } .wm-tile-icon svg, .wm-tile-icon img { width: 56px; height: 56px; display: block; } .wm-tile-icon img { object-fit: cover; } /* real logo (from the Reown registry) with a colored letter fallback behind it — if the logo 404s, onerror removes the img and the letter shows. */ .wm-icon-real { position: relative; width: 56px; height: 56px; display: grid; place-items: center; } .wm-icon-real .wm-icon-letter { color: #fff; font-weight: 700; font-size: 23px; font-family: "Inter", "Segoe UI", system-ui, sans-serif; } .wm-icon-real img { position: absolute; inset: 0; } /* corner badge = installed indicator */ .wm-tile-badge { position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; border-radius: 50%; background: var(--wm-green); border: 2.5px solid var(--wm-card-bg); display: grid; place-items: center; color: #fff; } .wm-tile-name { width: 100%; text-align: center; font-size: 12.5px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wm-tile-status { font-size: 10.5px; font-weight: 600; line-height: 1; min-height: 11px; /* reserved so tiles stay uniform */ color: var(--wm-faint); } .wm-tile-status--installed { color: var(--wm-green); } .wm-tile-status--recent { color: var(--wm-accent); font-weight: 700; } .wm-tile-status--qr { color: var(--wm-accent); } .wm-tile-status--mobile { color: #d98a2b; } .wm-empty { padding: 40px 10px; text-align: center; color: var(--wm-faint); font-size: 14px; } .wm-empty[hidden] { display: none; } /* registry status line under the grid */ .wm-registry-note { padding: 12px 8px 2px; text-align: center; font-size: 12px; line-height: 1.5; color: var(--wm-faint); } .wm-registry-note[hidden] { display: none; } .wm-registry-note a { color: var(--wm-accent); text-decoration: none; } .wm-registry-note a:hover { text-decoration: underline; } .wm-registry-note .wm-spinner { display: inline-block; vertical-align: -3px; margin-right: 6px; } /* ---------------------------------------------------------- QR view */ .wm-qr-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 6px 6px 8px; } .wm-qr-frame { width: 100%; max-width: 260px; aspect-ratio: 1 / 1; margin: 8px auto 18px; border-radius: 20px; border: 2px dashed var(--wm-card-border); background: var(--wm-field-bg); display: grid; place-items: center; color: var(--wm-faint); /* Real WalletConnect QR mounts inside #wm-qr-slot; see wallet-modal.js */ } .wm-qr-slot { display: grid; place-items: center; gap: 12px; padding: 20px; } .wm-qr-slot .wm-qr-hint { font-size: 12.5px; color: var(--wm-faint); max-width: 180px; } .wm-qr-heading { font-size: 15px; font-weight: 700; margin: 4px 0 6px; color: var(--wm-text); } .wm-qr-text { font-size: 13px; color: var(--wm-muted); line-height: 1.5; max-width: 300px; margin: 0 auto; } .wm-qr-note { margin-top: 16px; font-size: 12px; color: var(--wm-faint); background: var(--wm-field-bg); border-radius: 12px; padding: 10px 12px; line-height: 1.5; max-width: 320px; } .wm-qr-note code { font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--wm-accent); } /* ---------------------------------------------------------- Status line */ .wm-status { min-height: 0; margin-top: 10px; padding: 0 12px; border-radius: 12px; font-size: 13px; display: none; align-items: center; gap: 10px; } .wm-status.is-visible { display: flex; padding: 11px 12px; } .wm-status--info { color: var(--wm-muted); background: var(--wm-field-bg); } .wm-status--error { color: var(--wm-danger); background: var(--wm-danger-bg); } .wm-status--busy { color: var(--wm-text); background: var(--wm-field-bg); } .wm-status a { color: inherit; text-decoration: underline; } .wm-spinner { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--wm-card-border); border-top-color: var(--wm-accent); animation: wm-spin 0.7s linear infinite; } @keyframes wm-spin { to { transform: rotate(360deg); } } /* ========================================================= Desktop layout */ @media (min-width: 640px) { .wm-root { align-items: center; padding: 24px; } .wm-card { max-height: 82vh; border: 1px solid var(--wm-card-border); border-radius: var(--wm-radius-card); padding: 14px 20px 20px; transform: translateY(14px) scale(0.97); opacity: 0; transition: transform 0.3s var(--wm-ease), opacity 0.25s ease; } .wm-root.is-open .wm-card { transform: none; opacity: 1; } .wm-handle { display: none; } } /* ---------------------------------------------------- Reduced motion */ @media (prefers-reduced-motion: reduce) { .wm-overlay, .wm-card, .wm-tile, .connect-btn, .wm-toggle-knob { transition: none !important; animation: none !important; } .wm-card { transform: none !important; opacity: 1 !important; } }