/* Hand-written, no build step. Two themes via [data-theme] on . */ :root { --bg: #0f1216; --panel: #161b22; --panel-2: #1c232c; --line: #2a323d; --text: #e6edf3; --muted: #93a1b1; --accent: #4c8dff; --ok: #3fb950; --bad: #f85149; --radius: 8px; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } :root[data-theme="light"] { --bg: #f6f8fa; --panel: #ffffff; --panel-2: #f0f3f6; --line: #d7dee6; --text: #1c2128; --muted: #5b6672; --accent: #0a66c2; } * { box-sizing: border-box; } body { margin: 0; font-family: var(--sans); background: var(--bg); color: var(--text); font-size: 14px; } /* ---------- top bar ---------- */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--panel); position: sticky; top: 0; z-index: 10; } .brand strong { font-size: 15px; } .brand .sub { color: var(--muted); margin-left: 8px; font-family: var(--mono); font-size: 12px; } .actions { display: flex; gap: 6px; flex-wrap: wrap; } .btn { border: 1px solid transparent; background: var(--accent); color: #fff; padding: 6px 12px; border-radius: var(--radius); font: inherit; cursor: pointer; } .btn:hover { filter: brightness(1.1); } .btn.ghost { background: transparent; border-color: var(--line); color: var(--text); } .btn.ghost:hover { background: var(--panel-2); } .btn.small { padding: 4px 10px; font-size: 13px; } .btn.icon { width: 32px; padding: 6px 0; } /* ---------- layout ---------- */ .layout { display: grid; grid-template-columns: 200px minmax(0, 1fr) minmax(320px, 34%); gap: 0; height: calc(100vh - 53px); } .sidebar { border-right: 1px solid var(--line); overflow-y: auto; padding: 12px 8px; } .nav { display: flex; flex-direction: column; gap: 2px; } .nav a { color: var(--muted); text-decoration: none; padding: 6px 10px; border-radius: var(--radius); font-size: 13px; } .nav a:hover { background: var(--panel-2); color: var(--text); } .form { overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; } .output { border-left: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; min-width: 0; } .output-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--line); } .wrap-toggle { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 6px; } .status { font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); } .status.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); } .status.bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); } .preview { flex: 1; margin: 0; padding: 12px; overflow: auto; font-family: var(--mono); font-size: 12px; line-height: 1.5; white-space: pre; } .problems { border-top: 1px solid var(--line); max-height: 30%; overflow: auto; padding: 8px 12px; } .problems summary { cursor: pointer; color: var(--muted); font-size: 12px; } .problems ul { margin: 8px 0 0; padding-left: 18px; } .problems li { font-size: 12px; margin-bottom: 4px; } .problems a { color: var(--accent); font-family: var(--mono); } .count { color: var(--bad); font-family: var(--mono); } /* ---------- cards + fields ---------- */ .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; } .card-head { display: flex; align-items: center; gap: 8px; } .card-head h2 { font-size: 15px; margin: 0; } .card-desc { color: var(--muted); font-size: 12px; margin: 6px 0 12px; line-height: 1.5; } .pill { font-size: 11px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); } .pill.req { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); } .fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; } .fields.nested { grid-template-columns: 1fr; } .field { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .field label { font-size: 12px; color: var(--muted); font-weight: 500; } .req-dot { color: var(--accent); margin-left: 3px; } .input { width: 100%; padding: 6px 9px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); font: inherit; } .input:focus { outline: 2px solid color-mix(in srgb, var(--accent) 50%, transparent); outline-offset: -1px; } .input.mono { font-family: var(--mono); font-size: 12px; } .checkbox { width: 16px; height: 16px; accent-color: var(--accent); } .help { color: var(--muted); font-size: 11px; line-height: 1.45; margin: 0; } .err { color: var(--bad); font-size: 11px; margin: 0; min-height: 0; } .group { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; margin: 0; grid-column: 1 / -1; } .group legend { font-size: 12px; color: var(--text); padding: 0 6px; font-weight: 600; } .advanced { grid-column: 1 / -1; border-top: 1px dashed var(--line); padding-top: 8px; } .advanced summary { cursor: pointer; color: var(--muted); font-size: 12px; } .advanced .fields { margin-top: 10px; } .array { display: flex; flex-direction: column; gap: 10px; } .item { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; background: var(--panel-2); } .item-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .item-title { font-size: 12px; font-weight: 600; } /* ---------- dialogs ---------- */ .dialog { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--text); max-width: 640px; width: 92vw; padding: 18px; } .dialog::backdrop { background: rgba(0, 0, 0, 0.55); } .dialog h3 { margin: 0 0 6px; } .dialog-actions { display: flex; gap: 8px; margin-top: 12px; } .template-menu { display: grid; gap: 8px; margin: 14px 0; } .template { text-align: left; display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); color: var(--text); cursor: pointer; font: inherit; } .template:hover { border-color: var(--accent); } .template span { color: var(--muted); font-size: 12px; } .toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--panel-2); border: 1px solid var(--line); padding: 8px 16px; border-radius: var(--radius); opacity: 0; pointer-events: none; transition: opacity 0.18s, transform 0.18s; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .toast.bad { border-color: var(--bad); color: var(--bad); } .fatal { padding: 24px; color: var(--bad); font-family: var(--mono); } @media (max-width: 1100px) { .layout { grid-template-columns: 1fr; height: auto; } .sidebar { display: none; } .output { border-left: 0; border-top: 1px solid var(--line); height: 60vh; } }