/* Yadha Relay Directory — theme + components. * * Token architecture follows the house tokens.css convention: * 1. Explicit user choice: * (set by /static/theme.js, persisted in localStorage.prefs.theme) * 2. OS preference via prefers-color-scheme * 3. Default: dark * Square-radius aesthetic per the house design direction * (cards/inputs/buttons = 0, round pills = 99px). * * Body text uses the system font stack; Press Start 2P (self-hosted, * OFL) is used ONLY for the logo wordmark. */ /* ------------------------------------------------------------------ Self-hosted pixel font (latin subset) — LOGO ONLY. Body text uses the system font stack (operator decision: the pixel font is hard to read at body sizes; it stays on the wordmark). ------------------------------------------------------------------ */ @font-face { font-family: 'Press Start 2P'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/press-start-2p-latin.woff2') format('woff2'); } /* ------------------------------------------------------------------ DARK (default theme — Void system, amber accent) ------------------------------------------------------------------ */ :root, [data-theme="dark"] { color-scheme: dark; /* Surfaces */ --bg: #0D0D1A; --card: #1A1A2E; --hover: #2A2A3E; --border: #2A2A3E; --border-strong:#3A3A4E; /* Accents */ --accent: #FFB300; --accent-hover: #E5A000; --accent-soft: rgba(255, 179, 0, 0.16); /* Status */ --success: #00C8B4; --success-soft: rgba(0, 200, 180, 0.18); --error: #FF3B30; --error-soft: rgba(255, 59, 48, 0.16); --warning: #FFB300; --warning-soft: rgba(255, 179, 0, 0.16); /* Text */ --text: #F0F0E8; --muted: #888899; /* Modal backdrop */ --backdrop: rgba(0, 0, 0, 0.70); } /* ------------------------------------------------------------------ LIGHT (Classic Blue system) ------------------------------------------------------------------ */ [data-theme="light"] { color-scheme: light; --bg: #FFFFFF; --card: #F6F7F9; --hover: #ECEEF1; --border: #D1D5DB; --border-strong:#B0B6BE; --accent: #0066CC; --accent-hover: #0052A3; --accent-soft: rgba(0, 102, 204, 0.10); --success: #1A7F4B; --success-soft: rgba(26, 127, 75, 0.12); --error: #C81E1E; --error-soft: rgba(200, 30, 30, 0.10); --warning: #B25F00; --warning-soft: rgba(178, 95, 0, 0.12); --text: #0F1419; --muted: #5B6770; --backdrop: rgba(15, 20, 25, 0.45); } /* OS-preference auto-detect — only when the user has NOT made an explicit choice (theme.js sets data-theme on ). */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; --bg: #FFFFFF; --card: #F6F7F9; --hover: #ECEEF1; --border: #D1D5DB; --border-strong:#B0B6BE; --accent: #0066CC; --accent-hover: #0052A3; --accent-soft: rgba(0, 102, 204, 0.10); --success: #1A7F4B; --success-soft: rgba(26, 127, 75, 0.12); --error: #C81E1E; --error-soft: rgba(200, 30, 30, 0.10); --warning: #B25F00; --warning-soft: rgba(178, 95, 0, 0.12); --text: #0F1419; --muted: #5B6770; --backdrop: rgba(15, 20, 25, 0.45); } } /* Shared scales */ :root { --radius: 0; /* square aesthetic */ --radius-pill: 99px; --transition: 0.15s ease; --font-pixel: 'Press Start 2P', monospace; /* logo only */ --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* ------------------------------------------------------------------ Base ------------------------------------------------------------------ */ * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.6 var(--font-body); transition: background var(--transition), color var(--transition); } /* Anti-FOUC: paint the correct background before theme.js runs. */ :root:not([data-theme]) body { background-color: #0D0D1A; color: #F0F0E8; } @media (prefers-color-scheme: light) { :root:not([data-theme]) body { background-color: #FFFFFF; color: #0F1419; } } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); text-decoration: underline; } h1, h2 { font-family: inherit; font-weight: 700; letter-spacing: 0.01em; line-height: 1.4; } h1 { font-size: 22px; margin: 0 0 8px; } button { background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: 7px 12px; cursor: pointer; font: 500 13px var(--font-body); transition: color var(--transition), border-color var(--transition); } button:hover { border-color: var(--accent); color: var(--accent); } /* ------------------------------------------------------------------ Header bar ------------------------------------------------------------------ */ .site-header { position: sticky; top: 0; z-index: 5; background: var(--bg); border-bottom: 1px solid var(--border); } .header-inner { max-width: 1100px; margin: 0 auto; padding: 12px 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; } .brand { display: flex; align-items: center; gap: 12px; color: var(--text); } .brand:hover { text-decoration: none; } .brand-mark { width: 34px; height: 34px; display: block; flex: none; } .mark-body { fill: var(--accent); } .mark-pixels { fill: var(--bg); } .brand-text { display: flex; flex-direction: column; gap: 2px; } .brand-name { font-family: var(--font-pixel); font-size: 12px; color: var(--accent); letter-spacing: 1px; } .brand-sub { font-size: 10px; color: var(--muted); letter-spacing: 3px; font-weight: 600; } .nav-right { display: flex; gap: 12px; align-items: center; } .nav-right a { font-size: 13px; } .who { color: var(--muted); font-size: 12px; font-family: var(--font-mono); } /* ------------------------------------------------------------------ Theme toggle (bottom-left dock — house convention) ------------------------------------------------------------------ */ .theme-dock { position: fixed; bottom: 16px; left: 16px; z-index: 10; } .theme-toggle { width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--border); border-radius: var(--radius); color: var(--muted); cursor: pointer; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--border); transition: color var(--transition), border-color var(--transition), box-shadow var(--transition); } .theme-toggle:hover { color: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--accent); } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .theme-toggle svg { display: block; } /* ------------------------------------------------------------------ Layout ------------------------------------------------------------------ */ main { max-width: 1100px; margin: 0 auto; padding: 24px 24px 64px; } footer { max-width: 1100px; margin: 0 auto; padding: 16px 24px 32px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12px; } /* ------------------------------------------------------------------ Stats bar ------------------------------------------------------------------ */ .stats { display: flex; flex-wrap: wrap; gap: 24px; padding: 14px 20px; background: var(--card); border: 1px solid var(--border); margin-bottom: 18px; color: var(--muted); font-size: 13px; } .stats b { color: var(--text); font-size: 16px; margin-right: 4px; } .stats .ok b { color: var(--success); } .stats .bad b { color: var(--error); } /* ------------------------------------------------------------------ Filters ------------------------------------------------------------------ */ .filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .filters input[type="search"] { flex: 1; min-width: 200px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); padding: 8px 10px; font: 13px var(--font-body); } .filters input[type="search"]::placeholder { color: var(--muted); } .filters select { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); padding: 8px; font: 13px var(--font-body); } .filters button { padding: 8px 14px; } /* ------------------------------------------------------------------ Relay table ------------------------------------------------------------------ */ /* Long unbreakable strings (relay URLs, git+https software strings) were pushing the table wider than its container — it spilled right instead of wrapping. The wrapper scrolls as a last resort; the cell wrap rules are the real fix. */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } table.relays { width: 100%; border-collapse: collapse; font-size: 13.5px; } .relays th, .relays td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; } .relays th { color: var(--muted); font-weight: 600; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; } .relays tbody tr:hover { background: var(--hover); } .relays .col-c, .relays th.col-c { text-align: center; } .relay-cell a { font-weight: 600; overflow-wrap: anywhere; } .relay-cell .muted { display: block; font-size: 11.5px; font-family: var(--font-mono); overflow-wrap: anywhere; } .cell-wrap { overflow-wrap: anywhere; min-width: 90px; } /* Software column: let it shrink before the relay column does. */ .relays td[data-label="software"] { max-width: 260px; } .muted { color: var(--muted); } .mono { font-family: var(--font-mono); word-break: break-all; } /* Pills */ .pill { display: inline-block; padding: 2px 10px; border-radius: var(--radius-pill); border: 1px solid var(--border); font-size: 11px; color: var(--muted); margin-right: 4px; white-space: nowrap; } .pill-online { color: var(--success); border-color: var(--success); background: var(--success-soft); } .pill-offline { color: var(--error); border-color: var(--error); background: var(--error-soft); } .pill-unprobeable { color: var(--warning); border-color: var(--warning); background: var(--warning-soft); } .pill-nip { font-size: 10px; } .pill-muted { font-size: 11px; } .pill-premium { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); } /* Premium zap glyph (after relay name) */ .premium-icon { width: 12px; height: 12px; fill: var(--accent); margin-left: 5px; vertical-align: baseline; } /* Favorite star */ .star { border: none; background: none; color: var(--muted); font-size: 16px; padding: 0 4px; } .star:hover { border: none; color: var(--warning); } .star.on { color: var(--warning); } .pager { display: flex; gap: 20px; justify-content: center; margin: 20px 0; color: var(--muted); font-size: 13px; } /* ------------------------------------------------------------------ Detail page ------------------------------------------------------------------ */ .detail-head { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 20px; } .relay-icon { width: 64px; height: 64px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); } .detail-head h1 { margin: 0 0 6px; } .detail-head p { margin: 4px 0; } .detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; } .card { background: var(--card); border: 1px solid var(--border); padding: 16px 20px; } .card h3 { margin: 0 0 12px; font-size: 14px; font-weight: 700; color: var(--accent); } .card h4 { margin: 16px 0 6px; font-size: 11px; color: var(--muted); font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; } dl { display: grid; grid-template-columns: 140px 1fr; gap: 4px 12px; margin: 0; font-size: 13px; } dt { color: var(--muted); } dd { margin: 0; word-break: break-word; } dl.compact { grid-template-columns: 190px 1fr; font-size: 12px; } .sparkline { display: flex; align-items: flex-end; gap: 2px; height: 34px; } .sparkline .bar { width: 5px; height: 100%; background: var(--border); } .sparkline .bar-ok { background: var(--success); } .sparkline .bar-bad { background: var(--error); } .nip-list { line-height: 2.1; } .json { background: var(--bg); border: 1px solid var(--border); padding: 10px; font: 11px/1.6 var(--font-mono); overflow-x: auto; white-space: pre-wrap; word-break: break-all; } details summary { cursor: pointer; color: var(--muted); font-size: 12px; margin-top: 12px; } table.reports { width: 100%; border-collapse: collapse; font-size: 12.5px; } .reports th, .reports td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--border); } .reports .col-c, .reports th.col-c { text-align: center; } .reports th { color: var(--muted); font-weight: 600; font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase; } .favorites-list { display: grid; gap: 8px; } .favorites-list .fav { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; background: var(--card); border: 1px solid var(--border); font-size: 13px; } /* ------------------------------------------------------------------ Relay preferences (NIP-65) + legacy migration banner ------------------------------------------------------------------ */ .relay-pref { flex-wrap: wrap; } .pref-main { min-width: 0; } .pref-main a { font-weight: 600; overflow-wrap: anywhere; } .pref-url { display: block; font-size: 11px; font-family: var(--font-mono); overflow-wrap: anywhere; } .pref-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .mode-badge { border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--muted); font-size: 10px; letter-spacing: 1px; padding: 1px 9px; text-transform: uppercase; } .mode-badge.mode-both { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); } .discover-btn { font-size: 11px; padding: 3px 10px; } .discover-btn:disabled { opacity: 0.6; cursor: default; } .banner { border: 1px solid var(--warning); background: var(--warning-soft); padding: 12px 16px; margin-bottom: 12px; font-size: 12.5px; } .banner p { margin: 0 0 8px; } .banner p:last-of-type { margin-bottom: 0; } .banner-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .btn-accent { border-color: var(--accent); color: var(--accent); } .btn-accent:hover { background: var(--accent-soft); } .publish-results { margin-top: 10px; font-size: 12px; font-family: var(--font-mono); } .publish-results .pub-ok { color: var(--success); } .publish-results .pub-fail { color: var(--error); } /* ------------------------------------------------------------------ Modal (publish confirmation) ------------------------------------------------------------------ */ .modal-backdrop { position: fixed; inset: 0; background: var(--backdrop); display: flex; align-items: center; justify-content: center; z-index: 20; padding: 16px; } .modal { background: var(--bg); border: 1px solid var(--border-strong); max-width: 460px; width: 100%; padding: 20px; font-size: 13px; } .modal h3 { margin: 0 0 12px; font-size: 15px; } .modal-list { margin: 0 0 10px; padding-left: 18px; max-height: 200px; overflow-y: auto; font-family: var(--font-mono); font-size: 11.5px; word-break: break-all; } /* ------------------------------------------------------------------ Responsive ------------------------------------------------------------------ */ /* Phones: relay table becomes a card stack (thead hidden, each row a card, cells become label/value pairs via td::before + data-label). The star cell and relay name share the card's first line; every other cell is a full-width label-left / value-right row. */ @media (max-width: 720px) { table.relays { font-size: 13px; } .relays thead { display: none; } .relays tbody tr { display: flex; flex-wrap: wrap; background: var(--card); border: 1px solid var(--border); padding: 10px 14px; margin-bottom: 10px; } .relays tbody tr:hover { background: var(--card); } .relays tbody tr td { display: block; border-bottom: none; padding: 3px 0; text-align: right; flex: 1 1 100%; } .relays td[data-label]:not([data-label=""]):not(.relay-cell)::before { content: attr(data-label); float: left; color: var(--muted); font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; } .relays td.col-c { text-align: right; } /* First line: star button + relay name side by side. */ .relays td[data-label=""] { flex: 0 0 auto; align-self: center; padding: 0 8px 0 0; } .relays td.relay-cell { flex: 1 1 auto; text-align: left; padding: 0 0 8px; border-bottom: 1px solid var(--border); margin-bottom: 6px; align-self: center; } .relays td.relay-cell::before { content: none; } .relays td.relay-cell .muted { font-size: 11px; } .relays .star { font-size: 18px; } } /* Small phones and general tightening. */ @media (max-width: 600px) { .header-inner { padding: 10px 16px; gap: 10px; } .brand { gap: 9px; } .brand-mark { width: 28px; height: 28px; } .brand-name { font-size: 10px; } .brand-sub { font-size: 8.5px; letter-spacing: 1.5px; } .nav-right { gap: 8px; } main { padding: 16px 16px 64px; } footer { padding: 14px 16px 28px; } .stats { gap: 14px; padding: 12px 16px; font-size: 12px; } .stats b { font-size: 14px; } /* Filters: search gets its own row, selects pair up 2-per-row. */ .filters input[type="search"] { flex: 1 1 100%; min-width: 0; } .filters select { flex: 1 1 calc(50% - 6px); min-width: 0; } .filters button { flex: 1 1 100%; } } @media (max-width: 480px) { .detail-head { gap: 12px; } .relay-icon { width: 48px; height: 48px; } .detail-head h1 { font-size: 18px; } /* Limitations list: label column stacks above its value. */ dl.compact { grid-template-columns: 1fr; } dl.compact dt { margin-top: 6px; } .detail-grid { grid-template-columns: 1fr; } /* Reports table on the detail page stacks like the relay cards. */ .reports thead { display: none; } .reports tbody tr { display: block; background: var(--card); border: 1px solid var(--border); padding: 8px 12px; margin-bottom: 8px; } .reports tbody tr td { display: block; border-bottom: none; padding: 2px 0; text-align: right; } .reports td[data-label]::before { content: attr(data-label); float: left; color: var(--muted); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; } .reports td.mono { word-break: break-all; } } /* Sparkline (~100 bars) can exceed its card; scroll within the card. */ .sparkline { overflow-x: auto; padding-bottom: 2px; } /* Notched phones: keep the theme dock out of the home indicator. */ .theme-dock { bottom: max(16px, env(safe-area-inset-bottom, 0px)); left: max(16px, env(safe-area-inset-left, 0px)); }