/* The verdict drives the whole page colour. `data-state` is set on so * the fill reaches the overscroll area and the safe-area insets too, not just * the content box. Every state ships its own palette; text is white on all of * the saturated ones, so contrast never depends on the OS light/dark setting. */ :root { --bg: #0b1020; --fg: #ffffff; --fg-dim: rgba(255, 255, 255, 0.72); --panel: rgba(255, 255, 255, 0.10); --line: rgba(255, 255, 255, 0.18); --accent: #ffffff; --radius: 16px; } html[data-state="online"] { --bg: #0e7a3d; --accent: #b8f5cf; } html[data-state="partial"] { --bg: #14703f; --accent: #ffe08a; } html[data-state="portal"] { --bg: #9a5b00; --accent: #ffd79a; } html[data-state="offline"] { --bg: #a4161a; --accent: #ffc9c9; } html[data-state="checking"] { --bg: #0b1020; --accent: #98a2c4; } * { box-sizing: border-box; } html { background: var(--bg); transition: background-color 0.45s ease; } body { margin: 0; background: transparent; color: var(--fg); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; min-height: 100vh; min-height: 100dvh; } @media (prefers-reduced-motion: reduce) { html { transition: none; } } .wrap { max-width: 560px; margin: 0 auto; padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 20px; } .head h1 { font-size: 1.4rem; margin: 0 0 4px; letter-spacing: -0.01em; } .sub { margin: 0; color: var(--fg-dim); font-size: 0.9rem; } /* ---- verdict card ---- */ .verdict { display: flex; align-items: center; gap: 16px; padding: 22px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); } .verdict-icon { flex: none; width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); display: grid; place-items: center; font-size: 24px; line-height: 1; color: var(--accent); } .verdict-icon::after { content: "…"; } html[data-state="online"] .verdict-icon::after { content: "✓"; } html[data-state="partial"] .verdict-icon::after { content: "✓"; } html[data-state="portal"] .verdict-icon::after { content: "!"; } html[data-state="offline"] .verdict-icon::after { content: "✕"; } html[data-state="checking"] .verdict-icon { animation: pulse 1.1s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .verdict-icon { animation: none !important; } } .verdict-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .verdict-text strong { font-size: 1.3rem; letter-spacing: -0.01em; } .verdict-text span { color: var(--fg-dim); font-size: 0.9rem; } /* ---- button ---- */ .recheck { appearance: none; width: 100%; padding: 15px; font: inherit; font-weight: 600; color: var(--fg); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; -webkit-tap-highlight-color: transparent; } .recheck:active { transform: scale(0.99); } .recheck[disabled] { opacity: 0.55; cursor: default; } /* ---- monitoring toggles ---- */ .controls { display: flex; flex-direction: column; gap: 2px; padding: 6px 4px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); } .toggle { display: flex; align-items: flex-start; gap: 12px; padding: 11px 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; } .toggle + .toggle { border-top: 1px solid var(--line); } .toggle input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: #ffffff; cursor: pointer; } .toggle input:disabled { cursor: default; } .toggle:has(input:disabled) { opacity: 0.5; cursor: default; } .toggle-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .toggle-text b { font-size: 0.94rem; font-weight: 600; } .toggle-text small { font-size: 0.8rem; color: var(--fg-dim); line-height: 1.4; } /* ---- endpoint list ---- */ .targets ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .targets li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; font-size: 0.92rem; } .dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.45); } .dot[data-s="ok"] { background: #7ff0ab; } .dot[data-s="fail"] { background: #ff9a9a; } .dot[data-s="pending"] { background: rgba(255, 255, 255, 0.45); animation: pulse 1.1s ease-in-out infinite; } .targets .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .targets .stat { flex: none; color: var(--fg-dim); font-variant-numeric: tabular-nums; font-size: 0.85rem; } /* ---- install prompt ---- */ .install { padding: 18px; border-radius: var(--radius); background: var(--panel); border: 1px dashed var(--line); } .install-head { display: flex; align-items: flex-start; gap: 12px; } .install-head strong { flex: 1; font-size: 1rem; } .install-x { appearance: none; flex: none; width: 28px; height: 28px; font-size: 20px; line-height: 1; color: var(--fg-dim); background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; } .install p { margin: 8px 0 0; color: var(--fg-dim); font-size: 0.88rem; } .install-steps { margin: 12px 0 0; padding-left: 20px; font-size: 0.88rem; color: var(--fg-dim); display: flex; flex-direction: column; gap: 6px; } .install-steps b { color: var(--fg); font-weight: 600; } .install-go { appearance: none; margin-top: 14px; width: 100%; padding: 13px; font: inherit; font-weight: 600; color: #10131f; background: #ffffff; border: 0; border-radius: 12px; cursor: pointer; } .install-warn { margin-top: 12px !important; padding: 10px 12px; border-radius: 10px; background: rgba(0, 0, 0, 0.22); color: var(--fg) !important; font-size: 0.84rem !important; } /* ---- footer ---- */ .foot { color: var(--fg-dim); font-size: 0.82rem; } .foot p { margin: 0 0 8px; } .foot summary { cursor: pointer; padding: 6px 0; } .foot details p { margin: 8px 0; line-height: 1.55; } .foot code { font-size: 0.95em; } .ver { opacity: 0.7; }