weichenandCursor
e251ce325a
Add loopback-only HTTP server with startup token, Host/Origin/CSP guards, embedded live UI, CLI serve/export, and safe single-file HTML. Co-authored-by: Cursor <cursoragent@cursor.com>
96 lines
4.1 KiB
CSS
96 lines
4.1 KiB
CSS
:root {
|
|
--bg: #0f1419;
|
|
--panel: #1a222c;
|
|
--text: #e7ecf1;
|
|
--muted: #9aa7b5;
|
|
--accent: #3d8bfd;
|
|
--warn: #d4a017;
|
|
--bad: #d64545;
|
|
--ok: #3d9a6a;
|
|
--border: #2b3642;
|
|
--font: "IBM Plex Sans", "Noto Sans SC", sans-serif;
|
|
--mono: "IBM Plex Mono", ui-monospace, monospace;
|
|
}
|
|
* { box-sizing: border-box; }
|
|
body {
|
|
margin: 0;
|
|
font-family: var(--font);
|
|
background: radial-gradient(1200px 600px at 10% -10%, #1b2735, var(--bg));
|
|
color: var(--text);
|
|
min-height: 100vh;
|
|
}
|
|
.skip {
|
|
position: absolute; left: -9999px;
|
|
}
|
|
.skip:focus { left: 1rem; top: 1rem; background: #fff; color: #000; padding: .5rem; z-index: 9; }
|
|
.top {
|
|
display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
|
|
padding: 1rem 1.25rem; border-bottom: 1px solid var(--border);
|
|
background: rgba(26,34,44,.85); backdrop-filter: blur(6px);
|
|
}
|
|
.top h1 { margin: 0; font-size: 1.35rem; letter-spacing: .02em; }
|
|
.meta { margin: .35rem 0 0; color: var(--muted); font-size: .85rem; font-family: var(--mono); }
|
|
.banner { margin: 0; color: var(--warn); font-size: .85rem; max-width: 28rem; }
|
|
.layout { display: grid; grid-template-columns: 16rem 1fr; min-height: calc(100vh - 5rem); }
|
|
.nav-toggle { display: none; margin: .75rem; }
|
|
nav {
|
|
border-right: 1px solid var(--border); padding: 1rem; background: var(--panel);
|
|
}
|
|
nav ul { list-style: none; margin: 0; padding: 0; }
|
|
nav li { margin: 0 0 .35rem; }
|
|
.nav-btn {
|
|
width: 100%; text-align: left; background: transparent; color: var(--text);
|
|
border: 1px solid transparent; padding: .5rem .65rem; border-radius: .35rem; cursor: pointer;
|
|
}
|
|
.nav-btn.active, .nav-btn:hover, .nav-btn:focus-visible {
|
|
border-color: var(--accent); background: #243041;
|
|
}
|
|
.search-label { display: block; margin-top: 1rem; font-size: .8rem; color: var(--muted); }
|
|
#q {
|
|
width: 100%; margin-top: .35rem; padding: .45rem .55rem; border-radius: .35rem;
|
|
border: 1px solid var(--border); background: #10161d; color: var(--text);
|
|
}
|
|
.source-strip { margin-top: 1rem; font-size: .75rem; color: var(--muted); }
|
|
.source-strip .chip {
|
|
display: inline-block; margin: .15rem .2rem 0 0; padding: .15rem .4rem;
|
|
border: 1px solid var(--border); border-radius: .25rem;
|
|
}
|
|
.chip.ok { border-color: var(--ok); }
|
|
.chip.stale, .chip.degraded { border-color: var(--warn); color: var(--warn); }
|
|
.chip.error { border-color: var(--bad); color: var(--bad); }
|
|
main { padding: 1rem 1.25rem 2rem; overflow: auto; }
|
|
.view-status { min-height: 1.25rem; color: var(--muted); font-size: .85rem; margin-bottom: .75rem; }
|
|
.panel {
|
|
background: rgba(26,34,44,.7); border: 1px solid var(--border); border-radius: .5rem;
|
|
padding: 1rem; margin-bottom: 1rem;
|
|
}
|
|
.panel h2 { margin: 0 0 .75rem; font-size: 1.05rem; }
|
|
.table-wrap { overflow-x: auto; }
|
|
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
|
|
th, td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--border); vertical-align: top; }
|
|
th { color: var(--muted); font-weight: 600; }
|
|
.badge {
|
|
display: inline-block; padding: .1rem .4rem; border-radius: .25rem;
|
|
border: 1px solid var(--border); font-size: .75rem; margin-right: .25rem;
|
|
}
|
|
.badge.warn { border-color: var(--warn); color: var(--warn); }
|
|
.badge.bad { border-color: var(--bad); color: var(--bad); }
|
|
.pre {
|
|
white-space: pre-wrap; word-break: break-word; font-family: var(--mono);
|
|
font-size: .82rem; background: #0c1117; padding: .75rem; border-radius: .35rem;
|
|
border: 1px solid var(--border); max-height: 28rem; overflow: auto;
|
|
}
|
|
.axes { display: grid; grid-template-columns: repeat(4, minmax(8rem, 1fr)); gap: .5rem; }
|
|
.axis { border: 1px solid var(--border); border-radius: .35rem; padding: .5rem; font-size: .8rem; }
|
|
.axis strong { display: block; color: var(--muted); margin-bottom: .25rem; }
|
|
a, button.linkish {
|
|
color: var(--accent); background: none; border: none; cursor: pointer; padding: 0; font: inherit;
|
|
}
|
|
@media (max-width: 860px) {
|
|
.layout { grid-template-columns: 1fr; }
|
|
.nav-toggle { display: inline-block; }
|
|
nav { display: none; border-right: 0; border-bottom: 1px solid var(--border); }
|
|
nav.open { display: block; }
|
|
.axes { grid-template-columns: 1fr 1fr; }
|
|
}
|