/* ================================================================ style.css — profile.fanmart.org Place at: /var/www/profile/assets/style.css Served with: Cache-Control: public, max-age=31536000, immutable Cache-bust via filemtime() query string in _head.php Dark mode: duplicated @media + [data-theme] blocks eliminated. Rules are written ONCE under .is-dark (set on by app.js and by the flash-prevention snippet in _head.php). OS preference (@media) also adds .is-dark via app.js on load. ================================================================ */ /* ── Dark mode: CSS custom properties ───────────────────────── */ /* Written once — .is-dark is toggled by app.js and pre-set by */ /* the flash-prevention inline script in _head.php. */ html.is-dark { --bg: #0d1117; --surface: #161b22; --border: #30363d; --navy: #e6edf3; --blue: #58a6ff; --blue-lt: #1c2a3f; --blue-mid: #1f3358; --muted: #8b949e; --text: #e6edf3; --green: #3fb950; --red: #f85149; --amber: #d29922; --shadow: 0 1px 4px rgba(0,0,0,.5); --shadow-md:0 4px 20px rgba(0,0,0,.6); } /* ── OS dark-mode preference: activates before JS runs ──────── */ /* Ensures no flash for users whose OS is in dark mode and who */ /* have not set a manual override (no data-theme attribute). */ /* app.js adds .is-dark on load, which then takes over entirely. */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { --bg: #0d1117; --surface: #161b22; --border: #30363d; --navy: #e6edf3; --blue: #58a6ff; --blue-lt: #1c2a3f; --blue-mid: #1f3358; --muted: #8b949e; --text: #e6edf3; --green: #3fb950; --red: #f85149; --amber: #d29922; --shadow: 0 1px 4px rgba(0,0,0,.5); --shadow-md:0 4px 20px rgba(0,0,0,.6); } } /* ── Dark mode: component overrides ─────────────────────────── */ /* Written once — same .is-dark class on . */ /* html/body must be top-level rules (cannot be nested in CSS */ /* nesting without Baseline-2024 support). All others use nesting.*/ html.is-dark, html.is-dark body { background: var(--bg); color: var(--text); } html.is-dark .page-header h1 { color: var(--navy); } html.is-dark .page-header p { color: var(--muted); } html.is-dark .card { background: var(--surface); border-color: var(--border); } html.is-dark .card-header { border-bottom-color: var(--border); } html.is-dark .card-header h2 { color: var(--navy); } html.is-dark .card-header p { color: var(--muted); } html.is-dark .sec-label { color: var(--muted); } html.is-dark .divider { background: var(--border); } html.is-dark .field label { color: #c9d1d9; } html.is-dark .field input[type=text], html.is-dark .field input[type=password], html.is-dark .field select { background: #0d1117; color: var(--text); border-color: var(--border); } html.is-dark .field input[type=text]::placeholder, html.is-dark .field input[type=password]::placeholder { color: #484f58; } html.is-dark .hint { color: #8b949e; } html.is-dark .provider-btn { background: var(--surface); color: var(--text); border-color: var(--border); } html.is-dark .provider-btn:hover, html.is-dark .provider-btn.active { background: var(--blue-lt); border-color: var(--blue); color: var(--text); } html.is-dark .proto-btn { background: var(--surface); border-color: var(--border); } html.is-dark .proto-btn:hover, html.is-dark .proto-btn.active { background: var(--blue-lt); border-color: var(--blue); } html.is-dark .proto-text strong { color: var(--navy); } html.is-dark .proto-text span { color: var(--muted); } html.is-dark .scope-btn { background: #1c2a1c; color: #8b949e; border-color: #30363d; } html.is-dark .scope-btn:hover { background: #1a3a1a; color: #3fb950; border-color: #238636; } html.is-dark .scope-btn.active { background: #1a3a1a; color: #3fb950; border-color: #238636; box-shadow: 0 0 0 3px rgba(63,185,80,.18); } html.is-dark .toggle .sl { background: #30363d; } html.is-dark .toggle input:checked + .sl { background: #238636; } html.is-dark .banner.ok { background:#0f2b0f; border-color:#238636; color:#3fb950; } html.is-dark .banner.err { background:#2b0f0f; border-color:#da3633; color:#f85149; } html.is-dark .banner.info { background:#0d1f38; border-color:#1f6feb; color:#58a6ff; } html.is-dark .banner code { background: rgba(255,255,255,.08); color: #c9d1d9; } html.is-dark .v-list li { color: #c9d1d9; } html.is-dark .url-box { background:#1c2a3f; border-color:#1f6feb; color:#58a6ff; } html.is-dark .url-box a { color:#79c0ff; } html.is-dark .copy-btn { background:#388bfd; color:#fff; } html.is-dark .copy-btn:hover { background:#58a6ff; color:#fff; } html.is-dark .cert-warn { background:#2d1a00; border-color:#9e6a03; color:#e3b341; } html.is-dark .cert-ok { background:#0f2b0f; border-color:#238636; color:#3fb950; } html.is-dark .prog-bar-bg { background:#21262d; } html.is-dark .prog-header { color: var(--text); } html.is-dark .prog-domain { color: #c9d1d9; } html.is-dark .prog-results-list { border-color: var(--border); } html.is-dark .prog-result-row { border-bottom-color: var(--border); color: #e6edf3; } html.is-dark .probe-toggle-btn { color: var(--blue); } html.is-dark .card-generating-notice { color: #8b949e; } html.is-dark .probe-table th { background:#30363d; color:#e6edf3; } html.is-dark .probe-table td { color:#e6edf3; } html.is-dark .probe-ok td { background:rgba(63,185,80,.12); } html.is-dark .probe-fail td { background:rgba(248,81,73,.12); } html.is-dark .probe-table code { color:#c9d1d9; } html.is-dark .lang-btn { border-color:var(--border); color:#8b949e; } html.is-dark .lang-btn:hover,.lang-btn.active { border-color:var(--blue); color:var(--blue); background:var(--blue-lt); } html.is-dark .theme-btn { border-color:var(--border); color:#8b949e; } html.is-dark .theme-btn:hover { border-color:var(--blue); color:var(--blue); background:var(--blue-lt); } html.is-dark .expiry-badge { background:#2d1a00; border-color:#9e6a03; color:#e3b341; } html.is-dark .share-dl { background:#388bfd; } html.is-dark .share-dl:hover { background:#58a6ff; } html.is-dark .qr-wrap { background: var(--surface); border-color: var(--border); } html.is-dark .qr-wrap p { color: var(--muted); } html.is-dark .btn-dl-qr { background: var(--blue-lt); color: var(--blue); border-color:#1f6feb; } html.is-dark #ref-table-wrap { border-color: var(--border); } html.is-dark .ref-table th { background:#21262d; color:#c9d1d9; } html.is-dark .ref-table td { border-bottom-color: var(--border); color: var(--text); } html.is-dark .ref-table tr:nth-child(even) td { background:#0d1117; } html.is-dark .ref-table .pname { color:#58a6ff; } html.is-dark .ref-table code { color:#c9d1d9; } html.is-dark .ref-toggle { color: var(--blue); } html.is-dark .share-row { background:#1c2a3f; border-color:#1f6feb; color:#c9d1d9; } html.is-dark .share-row input { color:#79c0ff; } html.is-dark .share-row button { background:#1f6feb; } html.is-dark .share-row button:hover { background:#388bfd; } html.is-dark .profile-name { color: var(--text); } html.is-dark .profile-meta { color: var(--muted); } html.is-dark .profile-meta a { color: var(--blue) !important; } html.is-dark .btn-dl { background:#1c2a3f; color:var(--blue); border-color:#1f6feb; } html.is-dark .btn-dl:hover { background:#1f3358; } html.is-dark .btn-del { background:#2b0f0f; color:#f85149; border-color:#da3633; } html.is-dark .btn-del:hover { background:#da3633; color:#fff; border-color:#da3633; } html.is-dark .btn-del-all { background:#2b0f0f; color:#f85149; border-color:#da3633; } html.is-dark .btn-del-all:hover { background:#da3633; color:#fff; border-color:#da3633; } html.is-dark .btn-dl-zip { background:#1f6feb; } html.is-dark .btn-dl-zip:hover { background:#388bfd; } html.is-dark .badge-pill { background: var(--blue-lt); color: var(--blue); } html.is-dark .install-tabs { border-bottom-color: var(--border); } html.is-dark .install-tab { color: var(--muted); } html.is-dark .install-tab:hover { color: var(--text); } html.is-dark .install-tab.active { color: var(--blue); border-bottom-color: var(--blue); } html.is-dark .install-block li { color: #c9d1d9; } html.is-dark .install-block li span { color: #c9d1d9; } html.is-dark .step-n { background: #1f6feb; color: #000; } html.is-dark .compat-tag { background: var(--blue-lt); color: var(--blue); border-color:#1f6feb; } html.is-dark .modal-ov { background: rgba(0,0,0,.75); } html.is-dark .modal { background: var(--surface); } html.is-dark .modal h2 { color: var(--navy); } html.is-dark .modal p { color: #c9d1d9; } html.is-dark .modal-notice { background:#2d1a00; border-color:#9e6a03; color:#e3b341; } html.is-dark .btn-cancel { background:#21262d; color:#c9d1d9; border-color: var(--border); } html.is-dark .btn-cancel:hover { background:#30363d; } html.is-dark .btn-del-confirm { background:#da3633; } html.is-dark .btn-del-confirm:hover { background:#b91c1c; } html.is-dark .footer { color: #484f58; } html.is-dark .btn-reset { color: var(--text); border-color: var(--muted); background: transparent; } html.is-dark .btn-reset:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-lt); } html.is-dark .btn-primary:hover { background: #1e40af; } html.is-dark .btn-primary:disabled { background: #374151; color: #6b7280; } /* ================================================================ Light-mode base styles ================================================================ */ /* ── Dark mode toggle button ─────────────────────────────────── */ .theme-btn { background:none; border:1.5px solid var(--border); border-radius:5px; padding:3px 8px; font-size:.82rem; cursor:pointer; color:var(--muted); line-height:1.6; transition:border-color .15s,color .15s,background .15s; } .theme-btn:hover { border-color:var(--blue); color:var(--blue); background:var(--blue-lt); } /* ── Cert expiry banner (#15) ───────────────────────────────── */ .cert-warn { background:#fef3c7; border:1px solid #d97706; border-radius:8px; padding:10px 16px; margin-bottom:16px; font-size:.82rem; line-height:1.5; color:#92400e; display:flex; align-items:center; gap:8px; } .cert-ok { background:#f0fdf4; border:1px solid #16a34a; border-radius:8px; padding:8px 16px; margin-bottom:16px; font-size:.78rem; line-height:1.5; color:#166534; display:flex; align-items:center; gap:8px; } /* ── Scope selector (#3) ────────────────────────────────────── */ .scope-row { display:flex; gap:8px; } .scope-btn { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 8px; border:1.5px solid #d1d5db; border-radius:8px; background:#f9fafb; cursor:pointer; font-size:.78rem; font-weight:600; color:#6b7280; transition:border-color .15s, background .15s, color .15s, box-shadow .15s; } .scope-btn:hover { border-color:#16a34a; color:#15803d; background:#f0fdf4; } .scope-btn.active { border-color:#16a34a; background:#f0fdf4; color:#15803d; box-shadow:0 0 0 3px rgba(22,163,74,.15); } .scope-btn .scope-ico { font-size:1.2rem; } .scope-btn input { display:none; } /* iOS-style toggle — green when on, grey when off */ .toggle-row{display:flex;align-items:center;gap:10px;padding:6px 0} .toggle-row span{font-size:.84rem;color:var(--text);cursor:pointer;-webkit-user-select:none;user-select:none} .toggle{position:relative;width:40px;height:22px;flex-shrink:0} .toggle input{opacity:0;width:0;height:0} .toggle .sl{ position:absolute;inset:0;background:#d1d5db; border-radius:22px;cursor:pointer;transition:background .2s; } .toggle .sl::before{ content:'';position:absolute;width:16px;height:16px;left:3px;top:3px; background:#fff;border-radius:50%;transition:transform .2s; box-shadow:0 1px 2px rgba(0,0,0,.2); } .toggle input:checked+.sl { background:#16a34a; } .toggle input:checked+.sl::before { transform:translateX(18px); } /* ── Probe progress bar (#11) ───────────────────────────────── */ .prog-wrap { margin-top:12px; } .prog-header { display:flex; justify-content:space-between; align-items:center; font-size:.78rem; font-weight:600; color:var(--text); margin-bottom:6px; } .prog-bar-bg { height:6px; background:#e2e8f0; border-radius:4px; overflow:hidden; } .prog-bar-fill { height:6px; background:var(--blue); border-radius:4px; width:0%; transition:width .2s ease; } .prog-domain { font-size:.72rem; color:var(--muted); margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .prog-result-row { display:flex; align-items:center; gap:6px; font-size:.74rem; padding:2px 0; border-bottom:1px solid var(--border); animation:rowIn .15s ease; } .prog-result-row:last-child { border-bottom:none; } .prog-results-list { max-height:160px; overflow-y:auto; margin-top:6px; border:1px solid var(--border); border-radius:6px; padding:4px 8px; } /* ── Probe card ─────────────────────────────────────────────── */ .probe-card-progress { padding: 0 0 10px 0; } .probe-card-body { overflow:hidden; max-height:0; transition:max-height .3s ease; } /* NOTE: actual open-state max-height is set inline by JS (expandProbeBody() in app.js), sized to the panel's real content height via scrollHeight. A fixed value here (previously 600px) clipped the panel once all 45 probe result rows render — their combined height comfortably exceeds any one hardcoded number. This class only marks the open/closed state for other selectors (e.g. .probe-toggle-btn) that key off it; it intentionally sets no max-height of its own. */ .probe-card-body.open { } .probe-toggle-btn { background:none; border:none; cursor:pointer; font-size:.76rem; color:var(--blue); font-weight:600; padding:6px 0 0 0; display:inline-flex; align-items:center; gap:4px; text-decoration:underline; text-underline-offset:2px; } /* ── Card 1 collapse state ──────────────────────────────────── */ .card-collapsible-body { opacity:1; transition:opacity .25s ease; } .card-collapsible-body.card-collapsed { opacity:0; height:0; overflow:hidden; pointer-events:none; } .card-generating-notice { display:none; padding:14px 22px 14px; font-size:.82rem; color:var(--muted); text-align:center; } .card-generating-notice.visible { display:block; } /* ── QR code card (#13) ─────────────────────────────────────── */ .qr-wrap { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:18px; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; } .qr-wrap p { font-size:.78rem; color:var(--muted); line-height:1.4; max-width:220px; } #qr-canvas { border-radius:6px; } .btn-dl-qr { background:var(--blue-lt); color:var(--blue); border:1px solid #bfdbfe; border-radius:6px; padding:6px 14px; font-size:.76rem; font-weight:600; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:4px; transition:background .15s; } .btn-dl-qr:hover { background:#dbeafe; } /* ── Share link (#5) ─────────────────────────────────────────── */ .share-row { display:flex; align-items:center; gap:8px; margin-top:8px; background:var(--blue-lt); border:1px solid #bfdbfe; border-radius:7px; padding:9px 13px; font-size:.79rem; color:var(--navy); } .share-row input { flex:1; border:none; background:transparent; font-size:.79rem; font-family:'SFMono-Regular',Consolas,monospace; color:inherit; outline:none; min-width:0; } .share-row button { background:var(--navy); color:#fff; border:none; border-radius:5px; padding:5px 10px; font-size:.72rem; font-weight:600; cursor:pointer; white-space:nowrap; flex-shrink:0; transition:background .15s; } .share-row button:hover { background:#1e3a6e; } .share-row button.copied { background:#16a34a; } /* ── Install tabs (#4 tvOS) ──────────────────────────────────── */ .install-tabs { display:flex; gap:0; border-bottom:1px solid var(--border); margin-bottom:18px; } .install-tab { padding:8px 16px; font-size:.8rem; font-weight:600; color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .15s, border-color .15s; background:none; border-top:none; border-left:none; border-right:none; } .install-tab:hover { color:var(--text); } .install-tab.active { color:var(--blue); border-bottom-color:var(--blue); } .install-pane { display:none; } .install-pane.active { display:block; } /* ── CSS variables ───────────────────────────────────────────── */ :root { --bg: #f8fafc; --surface: #ffffff; --border: #e2e8f0; --navy: #0f172a; --blue: #2563eb; --blue-lt: #eff6ff; --blue-mid: #dbeafe; --muted: #64748b; --text: #1e293b; --green: #16a34a; --red: #dc2626; --amber: #d97706; --radius: 12px; --shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06); --shadow-md:0 4px 16px rgba(0,0,0,.10); --max-w: min(80vw, 1200px); --gutter: clamp(16px, 5vw, 40px); } html { background: var(--bg); } body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; background:var(--bg); color:var(--text); min-height:100vh; position:relative; padding: 50px var(--gutter) 80px; display:flex; flex-direction:column; align-items:center; gap:24px; box-sizing:border-box; overflow-x:hidden; } /* ── Background wallpaper ──────────────────────────────────── A fixed, full-viewport tiled icon pattern sitting behind every card. Each tile is an 80px square containing one of 4 DNS icons (server / globe / shield / user) at a fixed, never-distorted size, randomly assigned per tile with no overlap. The 1280x1280 SVG is a 16x16 grid of those tiles; the browser repeats it edge-to-edge via background-repeat, so it covers any viewport size without ever re-scaling a tile. z-index:-1 keeps it above the body's solid background colour but behind every card and piece of text. */ body::before { content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; /* Versioned via a CSS custom property set in views/_head.php's inline theme-init script (see its comment for why not a plain