|
|
|
|
|
:root{ |
|
|
--bg:#0d1117;--bg2:#161b22;--surface:#21262d;--border:#30363d; |
|
|
--text:#c9d1d9;--muted:#8b949e;--accent:#58a6ff;--accent2:#79c0ff; |
|
|
--r:8px;--mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace; |
|
|
--tr:.2s ease |
|
|
} |
|
|
*{box-sizing:border-box;margin:0} |
|
|
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; |
|
|
background:var(--bg);color:var(--text);line-height:1.6} |
|
|
header{text-align:center;padding:2rem 1rem 1rem} |
|
|
header h1{font-size:2rem;margin-bottom:.3rem} |
|
|
header p{color:var(--muted)} |
|
|
main{max-width:960px;margin:0 auto 4rem;padding:0 1rem;display:flex;flex-direction:column;gap:2rem} |
|
|
section{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:1.5rem} |
|
|
h2{font-size:1.25rem;margin:0 0 1rem} |
|
|
|
|
|
|
|
|
label{font-weight:600;margin:.5rem 0;display:block} |
|
|
select,input[type=file],input[type=url],textarea{ |
|
|
width:100%;padding:.75rem;border:1px solid var(--border);border-radius:var(--r); |
|
|
background:var(--surface);color:var(--text);font-size:1rem;transition:border-color var(--tr) |
|
|
} |
|
|
select:focus,input:focus,textarea:focus{outline:none;border-color:var(--accent)} |
|
|
textarea{resize:vertical;min-height:140px;font-family:var(--mono)} |
|
|
|
|
|
|
|
|
.tabs{display:flex;gap:.5rem;margin-bottom:1rem} |
|
|
.tabs button{background:transparent;border:1px solid var(--border);border-radius:var(--r); |
|
|
padding:.4rem 1rem;color:var(--muted);cursor:pointer;transition:background var(--tr),color var(--tr)} |
|
|
.tabs button[aria-selected=true]{background:var(--accent);color:var(--bg);border-color:var(--accent)} |
|
|
.tabs button:hover:not([aria-selected=true]){background:var(--surface);color:var(--text)} |
|
|
|
|
|
|
|
|
.actions{display:flex;gap:.75rem;justify-content:flex-end;flex-wrap:wrap} |
|
|
button{border:none;border-radius:var(--r);font-size:1rem;cursor:pointer;padding:.7rem 1.5rem;transition:background var(--tr)} |
|
|
#clear{background:var(--border);color:var(--text)}#clear:hover{background:var(--surface)} |
|
|
#generate{background:var(--accent);color:var(--bg)}#generate:hover{background:var(--accent2)} |
|
|
#generate:disabled{opacity:.6;cursor:progress} |
|
|
|
|
|
|
|
|
pre{background:var(--surface);border:1px solid var(--border);border-radius:var(--r); |
|
|
padding:1rem;overflow-x:auto;font-family:var(--mono);font-size:.9rem} |
|
|
iframe{width:100%;height:420px;border:1px solid var(--border);border-radius:var(--r);background:#fff} |
|
|
|
|
|
|
|
|
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} |
|
|
@media(max-width:640px){header{padding-top:1.5rem}section{padding:1.2rem}.actions{flex-direction:column}} |
|
|
|
