30 lines
1.8 KiB
CSS
30 lines
1.8 KiB
CSS
:root {
|
|
--bg:#f6f8fb; --card:#ffffff; --text:#1f2430; --muted:#60697a; --border:#dbe1ea; --accent:#2d6cdf;
|
|
}
|
|
* { box-sizing:border-box; }
|
|
body { margin:0; font-family:Arial, Helvetica, sans-serif; background:var(--bg); color:var(--text); }
|
|
.page { max-width:1500px; margin:0 auto; padding:24px; }
|
|
.narrow-page { max-width:520px; }
|
|
.hero { background:var(--card); border:1px solid var(--border); border-radius:22px; padding:24px; display:flex; justify-content:space-between; gap:16px; align-items:flex-start; }
|
|
.controls { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
|
|
label { display:block; font-weight:600; }
|
|
input, select { width:100%; margin-top:6px; border:1px solid var(--border); border-radius:10px; padding:10px; font:inherit; background:white; }
|
|
button { border:1px solid var(--border); background:white; border-radius:12px; padding:10px 14px; cursor:pointer; }
|
|
.primary { background:var(--accent); color:white; border-color:var(--accent); }
|
|
.card { background:var(--card); border:1px solid var(--border); border-radius:18px; padding:18px; }
|
|
.narrow { margin-top:60px; }
|
|
.layout { display:grid; gap:16px; }
|
|
.twocol { grid-template-columns:1fr 1fr; }
|
|
.prebox { background:#f7f8fa; border:1px solid var(--border); border-radius:12px; padding:12px; overflow:auto; max-height:460px; }
|
|
.muted { color:var(--muted); }
|
|
.error { color:#b42318; margin-top:10px; }
|
|
.frame-meta { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
|
|
.graph { width:100%; height:auto; border:1px solid var(--border); border-radius:16px; background:#fbfcfe; }
|
|
.svg-label { font-size:12px; fill:#fff; font-weight:bold; }
|
|
.svg-small { font-size:10px; fill:#fff; }
|
|
@media (max-width:1100px) {
|
|
.hero { flex-direction:column; }
|
|
.twocol { grid-template-columns:1fr; }
|
|
.frame-meta { grid-template-columns:1fr; }
|
|
}
|