恢复成自定义协议了
This commit is contained in:
+81
-596
@@ -1,599 +1,84 @@
|
||||
:root {
|
||||
color-scheme:dark;
|
||||
--bg:#060a10;
|
||||
--panel:#0b1119;
|
||||
--panel2:#101823;
|
||||
--panel3:#151f2c;
|
||||
--line:#1e2b3a;
|
||||
--line2:#2a3b4e;
|
||||
--text:#dce9ff;
|
||||
--muted:#8190a5;
|
||||
--accent:#35e6b2;
|
||||
--accent2:#6bc8ff;
|
||||
--warn:#ffcf82;
|
||||
--danger:#ff6b81;
|
||||
}
|
||||
* {
|
||||
box-sizing:border-box;
|
||||
}
|
||||
html,body,#root {
|
||||
min-height:100%;
|
||||
margin:0;
|
||||
color-scheme: dark;
|
||||
font-family: Inter, "Segoe UI Variable", "Microsoft YaHei UI", sans-serif;
|
||||
--bg: #07090d; --panel: #10141b; --panel2: #151b24; --line: #29313d;
|
||||
--strong: #3b4655; --text: #f2f5f8; --muted: #929eac; --accent: #45ddbe;
|
||||
--blue: #6aa9ff; --warning: #ffd166; --danger: #ff6885;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
html { background: var(--bg); }
|
||||
body {
|
||||
overflow-x:hidden;
|
||||
background:radial-gradient(circle at 18% 0,#102136 0,transparent 30rem),linear-gradient(180deg,#070c13,#05080d 58%,#060a10);
|
||||
color:var(--text);
|
||||
font:13px/1.5 Inter,"Segoe UI","Microsoft YaHei",sans-serif;
|
||||
}
|
||||
button,input,select,textarea {
|
||||
font:inherit;
|
||||
}
|
||||
.rv-app,.cxd-Page,.cxd-Page-body,.cxd-Page-content {
|
||||
min-height:100vh;
|
||||
background:transparent!important;
|
||||
color:var(--text)!important;
|
||||
}
|
||||
.cxd-Page-body,.cxd-Page-content {
|
||||
padding:0!important;
|
||||
}
|
||||
.rv-shell {
|
||||
width:min(1760px,100%);
|
||||
margin:0 auto;
|
||||
padding:18px 22px 44px;
|
||||
}
|
||||
.rv-topbar {
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:space-between;
|
||||
gap:18px;
|
||||
padding:8px 0 18px;
|
||||
}
|
||||
.rv-brand {
|
||||
display:flex;
|
||||
align-items:center;
|
||||
gap:12px;
|
||||
}
|
||||
.rv-brand-mark {
|
||||
display:grid;
|
||||
width:42px;
|
||||
height:42px;
|
||||
place-items:center;
|
||||
border:1px solid #35e6b255;
|
||||
border-radius:10px;
|
||||
color:var(--accent);
|
||||
background:#35e6b20d;
|
||||
box-shadow:inset 0 0 20px #35e6b20a;
|
||||
font:800 13px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
|
||||
}
|
||||
.rv-eyebrow {
|
||||
margin:0 0 4px;
|
||||
color:var(--accent);
|
||||
font:700 10px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;
|
||||
letter-spacing:.15em;
|
||||
text-transform:uppercase;
|
||||
}
|
||||
.rv-brand h1,.rv-hero h2 {
|
||||
margin:0;
|
||||
color:#f2f7ff;
|
||||
font-weight:720;
|
||||
letter-spacing:-.02em;
|
||||
}
|
||||
.rv-brand h1 {
|
||||
font-size:18px;
|
||||
}
|
||||
.rv-top-actions {
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:flex-end;
|
||||
gap:10px;
|
||||
}
|
||||
.rv-connection,.rv-live-status {
|
||||
display:inline-flex;
|
||||
align-items:center;
|
||||
gap:7px;
|
||||
min-width:0;
|
||||
color:var(--muted);
|
||||
font:700 10px/1.25 ui-monospace,SFMono-Regular,Consolas,monospace;
|
||||
}
|
||||
.rv-connection i,.rv-live-status i {
|
||||
width:7px;
|
||||
height:7px;
|
||||
flex:0 0 auto;
|
||||
border-radius:50%;
|
||||
background:#8793a3;
|
||||
box-shadow:0 0 0 3px #8793a312;
|
||||
}
|
||||
.rv-connection-ready i,.rv-live-status-moving i,.rv-live-status-ready i {
|
||||
background:var(--accent);
|
||||
box-shadow:0 0 0 3px #35e6b21a,0 0 12px #35e6b280;
|
||||
}
|
||||
.rv-connection-error i,.rv-live-status-stalled i,.rv-live-status-error i {
|
||||
background:var(--danger);
|
||||
box-shadow:0 0 0 3px #ff6b811a,0 0 12px #ff6b8166;
|
||||
}
|
||||
.rv-live-status-duplicate i {
|
||||
background:var(--warn);
|
||||
}
|
||||
.rv-hero {
|
||||
display:grid;
|
||||
grid-template-columns:minmax(0,1.45fr) minmax(380px,.75fr);
|
||||
gap:20px;
|
||||
padding:22px;
|
||||
border:1px solid var(--line);
|
||||
border-radius:12px;
|
||||
background:linear-gradient(135deg,#0c1420ee,#091019ee);
|
||||
box-shadow:0 16px 50px #00000036;
|
||||
}
|
||||
.rv-hero h2 {
|
||||
margin-top:6px;
|
||||
font-size:25px;
|
||||
}
|
||||
.rv-hero p {
|
||||
margin:10px 0 0;
|
||||
color:var(--muted);
|
||||
}
|
||||
.rv-hero-metrics .cxd-Grid-col {
|
||||
padding:4px!important;
|
||||
}
|
||||
.rv-hero-metric,.rv-metric,.rv-limit-tile,.rv-observer-metric {
|
||||
min-width:0;
|
||||
height:100%;
|
||||
padding:9px 10px;
|
||||
border:1px solid var(--line);
|
||||
border-radius:7px;
|
||||
background:#090f17;
|
||||
}
|
||||
.rv-hero-metric b,.rv-metric b,.rv-observer-metric b {
|
||||
display:block;
|
||||
min-width:0;
|
||||
overflow-wrap:anywhere;
|
||||
color:var(--accent);
|
||||
font:700 11px/1.35 ui-monospace,SFMono-Regular,Consolas,monospace;
|
||||
}
|
||||
.rv-hero-metric b {
|
||||
font-size:18px;
|
||||
}
|
||||
.rv-hero-metric small,.rv-metric small,.rv-observer-metric small {
|
||||
display:block;
|
||||
margin-top:5px;
|
||||
color:var(--muted);
|
||||
font-size:9px;
|
||||
line-height:1.35;
|
||||
}
|
||||
.rv-notice {
|
||||
margin-top:12px;
|
||||
}
|
||||
.rv-filter-form {
|
||||
margin:12px 0 5px;
|
||||
}
|
||||
.rv-filter-form .cxd-Form-row {
|
||||
margin:0!important;
|
||||
}
|
||||
.rv-filter-form .cxd-ButtonGroup {
|
||||
display:flex;
|
||||
flex-wrap:wrap;
|
||||
gap:5px;
|
||||
}
|
||||
.rv-mode-tabs {
|
||||
margin-top:12px;
|
||||
}
|
||||
.rv-mode-tabs>.cxd-Tabs-links {
|
||||
display:grid!important;
|
||||
grid-template-columns:repeat(3,minmax(0,1fr));
|
||||
gap:8px;
|
||||
border:0!important;
|
||||
background:transparent!important;
|
||||
}
|
||||
.rv-mode-tabs>.cxd-Tabs-links>li {
|
||||
margin:0!important;
|
||||
border:1px solid var(--line)!important;
|
||||
border-radius:7px!important;
|
||||
background:#0a111a!important;
|
||||
}
|
||||
.rv-mode-tabs>.cxd-Tabs-links>li>a {
|
||||
padding:10px 12px!important;
|
||||
color:var(--muted)!important;
|
||||
font-weight:700!important;
|
||||
}
|
||||
.rv-mode-tabs>.cxd-Tabs-links>li.is-active {
|
||||
border-color:#35e6b266!important;
|
||||
background:#35e6b20d!important;
|
||||
}
|
||||
.rv-mode-tabs>.cxd-Tabs-links>li.is-active>a {
|
||||
color:var(--accent)!important;
|
||||
}
|
||||
.rv-mode-tabs>.cxd-Tabs-content {
|
||||
padding:10px 0 0!important;
|
||||
border:0!important;
|
||||
background:transparent!important;
|
||||
}
|
||||
.rv-page-header {
|
||||
display:flex;
|
||||
align-items:flex-end;
|
||||
justify-content:space-between;
|
||||
gap:14px;
|
||||
margin:6px 0 12px;
|
||||
padding:0 2px;
|
||||
}
|
||||
.rv-page-header h2 {
|
||||
margin:2px 0 0;
|
||||
color:#f2f7ff;
|
||||
font-size:18px;
|
||||
}
|
||||
.rv-page-header p {
|
||||
max-width:720px;
|
||||
margin:0;
|
||||
color:var(--muted);
|
||||
text-align:right;
|
||||
}
|
||||
.rv-gallery>.cxd-Grid-col {
|
||||
padding:6px!important;
|
||||
}
|
||||
.rv-card {
|
||||
overflow:hidden;
|
||||
min-width:0;
|
||||
height:100%;
|
||||
margin:0!important;
|
||||
border:1px solid var(--line)!important;
|
||||
border-radius:9px!important;
|
||||
background:var(--panel)!important;
|
||||
box-shadow:0 12px 32px #0000002b!important;
|
||||
}
|
||||
.rv-card>.cxd-Panel-body {
|
||||
padding:0!important;
|
||||
background:transparent!important;
|
||||
}
|
||||
.rv-card>.cxd-Panel-footer {
|
||||
display:flex;
|
||||
flex-wrap:wrap;
|
||||
gap:8px;
|
||||
padding:10px!important;
|
||||
border-top:1px solid var(--line)!important;
|
||||
background:#090f17!important;
|
||||
}
|
||||
.rv-card-header {
|
||||
display:flex;
|
||||
align-items:flex-start;
|
||||
justify-content:space-between;
|
||||
gap:12px;
|
||||
padding:12px 13px 10px;
|
||||
}
|
||||
.rv-card-category {
|
||||
display:block;
|
||||
margin-bottom:3px;
|
||||
color:var(--accent2);
|
||||
font:700 9px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;
|
||||
text-transform:uppercase;
|
||||
}
|
||||
.rv-card-title {
|
||||
margin:0;
|
||||
color:#eef5ff;
|
||||
font-size:15px;
|
||||
}
|
||||
.rv-card-statuses {
|
||||
display:flex;
|
||||
flex-wrap:wrap;
|
||||
justify-content:flex-end;
|
||||
gap:8px;
|
||||
}
|
||||
.rv-canvas-shell {
|
||||
position:relative;
|
||||
width:100%;
|
||||
height:clamp(300px,34vw,520px);
|
||||
min-height:0;
|
||||
overflow:hidden;
|
||||
outline:none;
|
||||
border-block:1px solid var(--line);
|
||||
background:#04070b;
|
||||
}
|
||||
.rv-canvas-shell:focus-within {
|
||||
box-shadow:inset 0 0 0 1px #35e6b25c;
|
||||
}
|
||||
.rv-canvas-shell canvas {
|
||||
display:block;
|
||||
width:100%;
|
||||
height:100%;
|
||||
background:#07111f;
|
||||
image-rendering:auto;
|
||||
}
|
||||
.rv-canvas-hint {
|
||||
position:absolute;
|
||||
right:8px;
|
||||
bottom:7px;
|
||||
padding:3px 6px;
|
||||
border:1px solid #ffffff14;
|
||||
border-radius:4px;
|
||||
color:#9cabc0;
|
||||
background:#05090dc7;
|
||||
pointer-events:none;
|
||||
font:9px/1.25 ui-monospace,SFMono-Regular,Consolas,monospace;
|
||||
}
|
||||
.rv-canvas-loading {
|
||||
position:absolute;
|
||||
inset:0;
|
||||
display:grid;
|
||||
place-items:center;
|
||||
color:var(--muted);
|
||||
background:#05090de6;
|
||||
pointer-events:none;
|
||||
}
|
||||
.rv-canvas-ready .rv-canvas-loading {
|
||||
display:none;
|
||||
}
|
||||
.rv-metrics-grid,.rv-limit-grid,.rv-observer-grid,.rv-client-grid {
|
||||
padding:6px;
|
||||
border-bottom:1px solid var(--line);
|
||||
background:#070c12;
|
||||
}
|
||||
.rv-metrics-grid .cxd-Grid-col,.rv-limit-grid .cxd-Grid-col,.rv-observer-grid .cxd-Grid-col,.rv-client-grid .cxd-Grid-col {
|
||||
padding:3px!important;
|
||||
}
|
||||
.rv-limit-tile {
|
||||
color:var(--muted);
|
||||
font:700 9px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;
|
||||
}
|
||||
.rv-limit-tile b {
|
||||
display:block;
|
||||
margin-top:3px;
|
||||
overflow-wrap:anywhere;
|
||||
color:inherit;
|
||||
}
|
||||
.rv-limit-tile[data-active="true"] {
|
||||
border-color:#ffb84d66;
|
||||
color:var(--warn);
|
||||
background:#ff9d170c;
|
||||
}
|
||||
.rv-observer-title {
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:space-between;
|
||||
gap:12px;
|
||||
padding:7px 10px;
|
||||
border-bottom:1px solid var(--line);
|
||||
color:#9ab1cc;
|
||||
background:#07101a;
|
||||
font:700 9px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;
|
||||
}
|
||||
.rv-observer-title b {
|
||||
color:var(--accent);
|
||||
}
|
||||
.rv-card-meta {
|
||||
display:grid;
|
||||
grid-template-columns:repeat(4,minmax(0,1fr));
|
||||
gap:1px;
|
||||
border-top:1px solid var(--line);
|
||||
background:var(--line);
|
||||
}
|
||||
.rv-card-meta div {
|
||||
min-width:0;
|
||||
padding:8px 10px;
|
||||
background:#0a1018;
|
||||
}
|
||||
.rv-card-meta b,.rv-card-meta code {
|
||||
display:block;
|
||||
min-width:0;
|
||||
overflow-wrap:anywhere;
|
||||
color:#c8d7ea;
|
||||
font-size:10px;
|
||||
}
|
||||
.rv-card-meta small {
|
||||
display:block;
|
||||
margin-top:3px;
|
||||
color:var(--muted);
|
||||
font-size:8px;
|
||||
}
|
||||
.rv-menu-host {
|
||||
position:fixed;
|
||||
z-index:10000;
|
||||
inset:0;
|
||||
padding:12px;
|
||||
background:#00000078;
|
||||
backdrop-filter:blur(3px);
|
||||
}
|
||||
.rv-menu-host[hidden] {
|
||||
display:none;
|
||||
}
|
||||
.rv-menu-root {
|
||||
width:min(760px,calc(100vw - 24px));
|
||||
max-height:calc(100vh - 24px);
|
||||
margin-left:auto;
|
||||
overflow:auto;
|
||||
border:1px solid var(--line2);
|
||||
border-radius:10px;
|
||||
background:#0a1018;
|
||||
box-shadow:0 24px 80px #00000099;
|
||||
}
|
||||
.rv-menu-root .cxd-Page,.rv-menu-root .cxd-Page-body,.rv-menu-root .cxd-Page-content {
|
||||
min-height:0!important;
|
||||
}
|
||||
.rv-menu-shell {
|
||||
padding:12px;
|
||||
}
|
||||
.rv-menu-header {
|
||||
display:flex;
|
||||
align-items:flex-start;
|
||||
justify-content:space-between;
|
||||
gap:12px;
|
||||
padding-bottom:10px;
|
||||
border-bottom:1px solid var(--line);
|
||||
}
|
||||
.rv-menu-header h2 {
|
||||
margin:2px 0 4px;
|
||||
color:#f2f7ff;
|
||||
font-size:18px;
|
||||
}
|
||||
.rv-menu-header p {
|
||||
margin:0;
|
||||
color:var(--muted);
|
||||
}
|
||||
.rv-menu-tabs>.cxd-Tabs-links {
|
||||
margin-top:10px!important;
|
||||
border-bottom-color:var(--line)!important;
|
||||
}
|
||||
.rv-menu-tabs>.cxd-Tabs-content {
|
||||
padding:10px 0 0!important;
|
||||
border:0!important;
|
||||
background:transparent!important;
|
||||
}
|
||||
.rv-control-panel {
|
||||
margin:0 0 8px!important;
|
||||
border:1px solid var(--line)!important;
|
||||
background:#0b121b!important;
|
||||
}
|
||||
.rv-control-panel>.cxd-Panel-heading {
|
||||
border-bottom:1px solid var(--line)!important;
|
||||
background:#0d1621!important;
|
||||
color:var(--accent2)!important;
|
||||
font-weight:700!important;
|
||||
}
|
||||
.rv-control-panel>.cxd-Panel-body {
|
||||
padding:8px 10px!important;
|
||||
background:transparent!important;
|
||||
}
|
||||
.rv-control-form {
|
||||
margin:0!important;
|
||||
padding:4px 0!important;
|
||||
border-bottom:1px solid #182331;
|
||||
}
|
||||
.rv-control-form:last-child {
|
||||
border-bottom:0;
|
||||
}
|
||||
.rv-control-form .cxd-Form-row {
|
||||
margin:0!important;
|
||||
}
|
||||
.rv-action-form {
|
||||
margin:0!important;
|
||||
padding:10px 0!important;
|
||||
border-bottom:1px solid #182331;
|
||||
}
|
||||
.rv-action-form:last-child {
|
||||
border-bottom:0;
|
||||
}
|
||||
.rv-action-head {
|
||||
display:flex;
|
||||
align-items:flex-start;
|
||||
justify-content:space-between;
|
||||
gap:12px;
|
||||
margin-bottom:8px;
|
||||
}
|
||||
.rv-action-head>div {
|
||||
min-width:0;
|
||||
}
|
||||
.rv-action-head b {
|
||||
display:block;
|
||||
color:#edf7ff;
|
||||
font-size:12px;
|
||||
}
|
||||
.rv-action-head code {
|
||||
display:block;
|
||||
margin-top:3px;
|
||||
color:var(--accent);
|
||||
font:9px/1.35 ui-monospace,monospace;
|
||||
overflow-wrap:anywhere;
|
||||
}
|
||||
.rv-action-head small {
|
||||
max-width:45%;
|
||||
color:var(--muted);
|
||||
font-size:9px;
|
||||
line-height:1.4;
|
||||
}
|
||||
.rv-json .cxd-JSONField {
|
||||
border-color:var(--line)!important;
|
||||
background:#070c12!important;
|
||||
color:#cddbf0!important;
|
||||
}
|
||||
.cxd-Panel,.cxd-Card,.cxd-Form,.cxd-Tabs-content,.cxd-Drawer-content,.cxd-Modal-content {
|
||||
color:var(--text)!important;
|
||||
}
|
||||
.cxd-Button {
|
||||
border-color:var(--line2)!important;
|
||||
background:#111b27!important;
|
||||
color:#c9d7ea!important;
|
||||
box-shadow:none!important;
|
||||
}
|
||||
.cxd-Button:hover,.cxd-Button.is-active,.cxd-ButtonGroup .cxd-Button.is-active {
|
||||
border-color:#35e6b266!important;
|
||||
background:#35e6b212!important;
|
||||
color:var(--accent)!important;
|
||||
}
|
||||
.cxd-Button--primary {
|
||||
border-color:#35e6b25c!important;
|
||||
background:#12342e!important;
|
||||
color:#75f6d2!important;
|
||||
}
|
||||
.cxd-Form-label,.cxd-Form-itemLabel,.cxd-Form-itemLabel label {
|
||||
color:#c9d7ea!important;
|
||||
}
|
||||
.cxd-Form-description,.cxd-Form-help,.cxd-Form-itemDesc {
|
||||
color:var(--muted)!important;
|
||||
}
|
||||
.cxd-TextControl-input,.cxd-NumberControl-input,.cxd-Select,.cxd-SelectControl,.cxd-ColorPicker,.cxd-InputBox,.cxd-TextControl {
|
||||
border-color:var(--line2)!important;
|
||||
background:#070d14!important;
|
||||
color:var(--text)!important;
|
||||
}
|
||||
.cxd-Select-menu,.cxd-PopOver,.cxd-PopOverAble-popover {
|
||||
border-color:var(--line2)!important;
|
||||
background:#0d1621!important;
|
||||
color:var(--text)!important;
|
||||
}
|
||||
.cxd-Tabs-links>li>a {
|
||||
color:var(--muted)!important;
|
||||
}
|
||||
.cxd-Tabs-links>li.is-active>a {
|
||||
color:var(--accent)!important;
|
||||
}
|
||||
.cxd-Tabs-links>li.is-active>a:after {
|
||||
background:var(--accent)!important;
|
||||
}
|
||||
.cxd-Alert {
|
||||
border-color:var(--line2)!important;
|
||||
background:#0c1420!important;
|
||||
color:#cbd9eb!important;
|
||||
}
|
||||
.cxd-Alert--danger {
|
||||
border-color:#ff6b8159!important;
|
||||
background:#271018!important;
|
||||
color:#ffb2bd!important;
|
||||
}
|
||||
.cxd-Switch.is-checked {
|
||||
background:var(--accent)!important;
|
||||
}
|
||||
@media (max-width:1100px) {
|
||||
.rv-hero {
|
||||
grid-template-columns:1fr;
|
||||
}
|
||||
.rv-card-meta {
|
||||
grid-template-columns:repeat(2,minmax(0,1fr));
|
||||
}
|
||||
}
|
||||
@media (max-width:720px) {
|
||||
.rv-shell {
|
||||
padding:12px 8px 28px;
|
||||
}
|
||||
.rv-topbar,.rv-page-header {
|
||||
align-items:flex-start;
|
||||
flex-direction:column;
|
||||
}
|
||||
.rv-top-actions {
|
||||
width:100%;
|
||||
justify-content:space-between;
|
||||
}
|
||||
.rv-page-header p {
|
||||
text-align:left;
|
||||
}
|
||||
.rv-mode-tabs>.cxd-Tabs-links {
|
||||
grid-template-columns:1fr;
|
||||
}
|
||||
.rv-card-meta {
|
||||
grid-template-columns:1fr;
|
||||
}
|
||||
.rv-menu-host {
|
||||
padding:6px;
|
||||
}
|
||||
.rv-menu-root {
|
||||
width:100%;
|
||||
max-height:calc(100vh - 12px);
|
||||
}
|
||||
}
|
||||
margin: 0; min-width: 320px; min-height: 100vh; color: var(--text);
|
||||
background: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
|
||||
radial-gradient(circle at 16% -10%, rgba(69,221,190,.12), transparent 34rem), var(--bg);
|
||||
background-size: 24px 24px, 24px 24px, auto, auto;
|
||||
}
|
||||
button, input, select { font: inherit; } button { color: inherit; }
|
||||
h1, h2, h3, p { margin-top: 0; }
|
||||
.eyebrow { margin: 0 0 5px; color: var(--accent); font: 700 10px/1.2 ui-monospace, monospace; letter-spacing: .15em; text-transform: uppercase; }
|
||||
.topbar { position: sticky; z-index: 20; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 76px; padding: 12px clamp(18px,4vw,56px); border-bottom: 1px solid #ffffff14; background: #07090dea; backdrop-filter: blur(20px); }
|
||||
.brand, .topbar-actions { display: flex; align-items: center; gap: 14px; }
|
||||
.brand-mark { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; color: #07110f; background: var(--accent); font: 800 16px/1 ui-monospace, monospace; }
|
||||
h1 { margin: 0; font-size: clamp(17px,2vw,23px); }
|
||||
.connection-status, .card-socket { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font: 600 11px/1 ui-monospace, monospace; }
|
||||
.connection-status i, .card-socket i { width: 8px; height: 8px; border-radius: 50%; background: var(--warning); box-shadow: 0 0 12px currentColor; }
|
||||
[data-state="ready"] i { background: var(--accent); } [data-state="error"] i { background: var(--danger); }
|
||||
.card-health { display:flex; align-items:flex-end; flex-direction:column; gap:7px; }
|
||||
.motion-status { display:inline-flex; align-items:center; gap:6px; color:var(--muted); font:600 9px/1 ui-monospace,monospace; }
|
||||
.motion-status i { width:6px; height:6px; border-radius:50%; background:var(--warning); }
|
||||
.motion-status[data-state="moving"] { color:var(--accent); }.motion-status[data-state="moving"] i { background:var(--accent); box-shadow:0 0 10px var(--accent); animation:motion-pulse .9s ease-in-out infinite alternate; }
|
||||
.motion-status[data-state="duplicate"] { color:var(--warning); }.motion-status[data-state="duplicate"] i { background:var(--warning); }
|
||||
.motion-status[data-state="stalled"] { color:var(--danger); }.motion-status[data-state="stalled"] i { background:var(--danger); }
|
||||
@keyframes motion-pulse { to { opacity:.35; transform:scale(.72); } }
|
||||
.quiet-button, .open-menu, .frame-button, .icon-button, .menu-tabs button, .category-filter button, .mode-tabs button, .action-button { border: 1px solid var(--line); border-radius: 8px; background: var(--panel2); cursor: pointer; transition: .16s border-color,.16s background,.16s transform; }
|
||||
button:hover { border-color: var(--accent); } button:active { transform: translateY(1px); }
|
||||
.quiet-button { padding: 9px 13px; font-size: 12px; }
|
||||
.hero { display: grid; grid-template-columns: minmax(300px,1fr) minmax(430px,.9fr); align-items: end; gap: 40px; max-width: 1680px; margin: auto; padding: clamp(32px,5vw,64px) clamp(18px,4vw,56px) 28px; }
|
||||
.hero h2 { margin-bottom: 10px; font-size: clamp(27px,4vw,47px); letter-spacing: -.045em; }
|
||||
.hero > div > p:last-child { margin: 0; max-width: 750px; color: var(--muted); line-height: 1.7; }
|
||||
.metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; margin: 0; border: 1px solid var(--line); background: var(--line); }
|
||||
.metrics div { padding: 17px; background: var(--panel); } .metrics dt { color: var(--text); font: 750 clamp(20px,3vw,33px)/1 ui-monospace,monospace; } .metrics dd { margin: 8px 0 0; color: var(--muted); font-size: 10px; }
|
||||
.mode-tabs { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; max-width: 1680px; margin: auto; padding: 0 clamp(18px,4vw,56px) 18px; }
|
||||
.mode-tabs button { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; color: var(--muted); text-align: left; }
|
||||
.mode-tabs button span { color: var(--text); font-weight: 750; } .mode-tabs button code { font-size: 10px; }
|
||||
.mode-tabs button.active { border-color: var(--accent); background: #123029; box-shadow: inset 0 0 0 1px #45ddbe35; }
|
||||
.category-filter { display: flex; gap: 7px; overflow-x: auto; max-width: 1680px; margin: auto; padding: 0 clamp(18px,4vw,56px) 20px; }
|
||||
.category-filter button { flex: 0 0 auto; padding: 8px 11px; color: var(--muted); font-size: 11px; }
|
||||
.category-filter button.active { color: #06110e; border-color: var(--accent); background: var(--accent); }
|
||||
.pages, .mode-page { max-width: 1680px; margin: auto; }
|
||||
.mode-page[hidden] { display: none; }
|
||||
.page-header { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 3px clamp(18px,4vw,56px) 18px; }
|
||||
.page-header h2 { margin: 0; font-size: 23px; }.page-strategy { margin-bottom: 5px; color: var(--accent); font: 700 10px/1 ui-monospace,monospace; }.page-description { max-width: 650px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; text-align: right; }
|
||||
.gallery { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; padding: 0 clamp(18px,4vw,56px) 70px; }
|
||||
.loading-card { display: grid; place-items: center; gap: 12px; min-height: 360px; margin: 0 clamp(18px,4vw,56px); border: 1px dashed var(--strong); color: var(--muted); }
|
||||
.loader { width: 18px; height: 18px; border: 2px solid var(--strong); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }
|
||||
.plot-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: linear-gradient(180deg,#ffffff08,transparent 30%),var(--panel); box-shadow: 0 20px 55px #0000002e; }
|
||||
.plot-card[data-mode="manual"] { border-top-color: #ffd166aa; }.plot-card[data-mode="low_latency"] { border-top-color: #45ddbeaa; }.plot-card[data-mode="playback"] { border-top-color: #6aa9ffaa; }.plot-card[hidden] { display:none; }
|
||||
.card-header, .card-footer { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:13px 15px; }.card-header { border-bottom:1px solid var(--line); }.card-category { display:block; margin-bottom:4px; color:var(--blue); font:700 9px/1 ui-monospace,monospace; letter-spacing:.1em; }.card-title { margin:0; font-size:17px; }
|
||||
.canvas-shell { position:relative; height:clamp(245px,27vw,350px); outline:none; background:#060a11; cursor:crosshair; }.canvas-shell:focus-visible { box-shadow:inset 0 0 0 2px var(--accent); }.canvas-shell canvas { display:block; width:100%; height:100%; }.canvas-hint { position:absolute; right:9px; bottom:8px; padding:5px 7px; border:1px solid #ffffff1e; border-radius:5px; color:#ffffffa8; background:#04070bc9; font:9px/1 ui-monospace,monospace; pointer-events:none; }.canvas-loading { position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:9px; color:var(--muted); background:#080d15; }.plot-card[data-ready="true"] .canvas-loading { display:none; }
|
||||
.performance-strip { display:grid; grid-template-columns:repeat(auto-fit,minmax(105px,1fr)); gap:1px; margin:0; border-block:1px solid var(--line); background:var(--line); }.performance-strip div { min-width:0; padding:9px 8px; background:#0c1118; }.performance-strip dt { min-width:0; overflow:visible; color:var(--accent); font:700 11px/1.35 ui-monospace,monospace; text-overflow:clip; white-space:normal; overflow-wrap:anywhere; word-break:break-word; }.performance-strip .perf-event,.performance-strip .perf-limit { font-size:10px; }.performance-strip .perf-limit-cell { grid-column:auto; }.performance-strip dd { margin:5px 0 0; color:var(--muted); font-size:8px; line-height:1.35; white-space:normal; overflow-wrap:anywhere; word-break:break-word; }
|
||||
.limit-flags { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; padding:7px 10px; border-bottom:1px solid var(--line); color:var(--muted); background:#090e15; font:9px/1.35 ui-monospace,monospace; }.limit-flags strong { grid-column:1/-1; color:var(--text); }.limit-flags span { min-width:0; padding:6px 7px; border:1px solid var(--line); border-radius:4px; line-height:1.45; white-space:normal; overflow-wrap:anywhere; word-break:break-word; }.limit-flags span[data-active="true"] { border-color:#ffb84d88; color:#ffcf82; background:#ff9d1712; }.limit-flags b { color:inherit; white-space:normal; overflow-wrap:anywhere; }.plot-card:not([data-mode="low_latency"]) .limit-flags { display:none; }
|
||||
.kernel-observer-panel { border-bottom:1px solid var(--line); background:#080d14; font-family:ui-monospace,monospace; }
|
||||
.kernel-observer-panel > header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 11px; border-bottom:1px solid var(--line); color:var(--muted); font-size:8px; flex-wrap:wrap; }
|
||||
.kernel-observer-panel > header div:first-child { display:flex; align-items:center; gap:9px; min-width:0; flex-wrap:wrap; }.kernel-observer-panel > header span { color:var(--accent); letter-spacing:.08em; overflow-wrap:anywhere; }.kernel-observer-panel > header strong,.kernel-observer-panel > header b { color:var(--text); font-weight:700; overflow-wrap:anywhere; }
|
||||
.observer-counters,.latency-summary,.client-summary,.latency-details { display:grid; gap:1px; background:var(--line); }
|
||||
.observer-counters { grid-template-columns:repeat(auto-fit,minmax(90px,1fr)); }.latency-summary,.client-summary { grid-template-columns:repeat(auto-fit,minmax(105px,1fr)); border-top:1px solid var(--line); }.latency-details { grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); border-top:1px solid var(--line); }
|
||||
.observer-counters div,.latency-summary div,.client-summary div,.latency-details div { min-width:0; padding:8px 7px; background:#0b1119; }
|
||||
.kernel-observer-panel small { display:block; min-width:0; overflow:visible; margin-bottom:5px; color:var(--muted); font-size:7px; line-height:1.35; text-overflow:clip; white-space:normal; overflow-wrap:anywhere; word-break:break-word; }
|
||||
.kernel-observer-panel b { display:block; min-width:0; overflow:visible; color:#b7c7dc; font-size:9px; line-height:1.35; text-overflow:clip; white-space:normal; overflow-wrap:anywhere; word-break:break-word; }
|
||||
.latency-summary b { color:var(--accent); font-size:10px; }.latency-summary .critical { background:#10201e; }.latency-summary .critical b { color:#72f3d9; }
|
||||
.plot-card:not([data-mode="low_latency"]) .kernel-observer-panel { display:none; }
|
||||
.card-meta { display:grid; grid-template-columns:1fr auto; gap:17px; padding:13px 15px; }.card-description { margin:0; color:var(--muted); font-size:11px; line-height:1.55; }.card-meta dl { display:flex; margin:0; }.card-meta dl div { min-width:52px; padding-left:11px; border-left:1px solid var(--line); }.card-meta dt { font:700 14px/1 ui-monospace,monospace; }.card-meta dd { margin:5px 0 0; color:var(--muted); font-size:9px; }
|
||||
.card-footer { border-top:1px solid var(--line); background:#0000001e; }.card-footer code { color:var(--accent); font-size:10px; }.card-footer > div { display:flex; gap:7px; }.open-menu,.frame-button { padding:7px 9px; color:var(--muted); font-size:10px; }.frame-button { color:var(--text); }
|
||||
.context-menu { position:fixed; z-index:100; width:min(570px,calc(100vw - 24px)); max-height:min(840px,calc(100vh - 24px)); overflow:hidden; border:1px solid var(--strong); border-radius:12px; background:#0f131afa; box-shadow:0 30px 90px #0000009e; backdrop-filter:blur(22px); }.context-menu[hidden] { display:none; }
|
||||
.menu-header { display:flex; justify-content:space-between; gap:18px; padding:16px 18px 13px; border-bottom:1px solid var(--line); }.menu-header h2 { margin-bottom:6px; font-size:19px; }.menu-header p:last-child { margin:0; color:var(--muted); font-size:10px; line-height:1.5; }.icon-button { flex:0 0 auto; width:31px; height:31px; font-size:20px; }
|
||||
.menu-tabs { display:grid; grid-template-columns:repeat(4,1fr); padding:8px; border-bottom:1px solid var(--line); }.menu-tabs button { padding:8px 4px; border-color:transparent; color:var(--muted); background:transparent; font-size:10px; }.menu-tabs button.active { color:var(--text); border-color:var(--strong); background:var(--panel2); }
|
||||
.menu-body { max-height:calc(min(840px,100vh - 24px) - 190px); overflow:auto; padding:12px; overscroll-behavior:contain; }.control-group + .control-group { margin-top:15px; }.control-group h3 { position:sticky; z-index:1; top:-12px; margin:0 -2px 6px; padding:9px 4px 7px; color:var(--accent); background:#0f131af5; font:700 9px/1 ui-monospace,monospace; letter-spacing:.1em; }
|
||||
.control-row { display:grid; grid-template-columns:minmax(145px,1fr) minmax(130px,.75fr); gap:13px; align-items:center; min-height:49px; padding:8px 9px; border-top:1px solid #ffffff0e; }.control-copy label,.action-copy strong { display:block; margin-bottom:4px; font-size:11px; }.control-copy code,.action-copy code { display:block; overflow:hidden; color:var(--muted); font-size:9px; text-overflow:ellipsis; white-space:nowrap; }.control-input { width:100%; min-width:0; padding:7px 8px; border:1px solid var(--strong); border-radius:6px; outline:none; color:var(--text); background:#090d13; font-size:10px; }.control-input:focus { border-color:var(--accent); }input[type="color"].control-input { height:34px; padding:3px; }input[type="checkbox"].control-input { justify-self:end; width:38px; height:20px; accent-color:var(--accent); }
|
||||
.action-row { display:flex; align-items:center; justify-content:space-between; gap:13px; padding:10px 9px; border-top:1px solid #ffffff0e; }.action-copy { min-width:0; }.action-controls { display:flex; gap:7px; align-items:center; }.action-controls input { width:105px; }.action-button { padding:7px 10px; color:#07110f; border-color:var(--accent); background:var(--accent); font-size:10px; font-weight:700; }
|
||||
.telemetry-grid { display:grid; grid-template-columns:minmax(165px,.7fr) 1fr; margin:0; border:1px solid var(--line); }.telemetry-grid dt,.telemetry-grid dd { margin:0; padding:8px 10px; border-bottom:1px solid var(--line); font:10px/1.4 ui-monospace,monospace; overflow-wrap:anywhere; }.telemetry-grid dt { color:var(--muted); background:#ffffff06; }.telemetry-grid dd { color:var(--accent); }
|
||||
.menu-footer { display:flex; justify-content:space-between; gap:14px; padding:10px 14px; border-top:1px solid var(--line); color:var(--muted); font-size:9px; }.menu-footer code { color:var(--accent); }
|
||||
.toast { position:fixed; z-index:140; left:50%; bottom:22px; max-width:min(560px,calc(100vw - 30px)); padding:11px 15px; border:1px solid var(--strong); border-radius:8px; background:var(--panel2); box-shadow:0 18px 50px #00000073; transform:translateX(-50%); font-size:11px; }.toast[data-error="true"] { border-color:var(--danger); }
|
||||
@media (max-width:980px) { .hero { grid-template-columns:1fr; }.gallery { grid-template-columns:1fr; }.mode-tabs button { flex-direction:column; align-items:flex-start; }.page-header { align-items:flex-start; flex-direction:column; }.page-description { text-align:left; } }
|
||||
@media (max-width:650px) { .topbar { align-items:flex-start; }.topbar-actions { align-items:flex-end; flex-direction:column; }.connection-status span { display:none; }.metrics { grid-template-columns:repeat(2,1fr); }.mode-tabs { grid-template-columns:1fr; }.mode-tabs button { flex-direction:row; }.card-meta { grid-template-columns:1fr; }.performance-strip { grid-template-columns:repeat(auto-fit,minmax(92px,1fr)); }.limit-flags { grid-template-columns:1fr; }.observer-counters { grid-template-columns:repeat(auto-fit,minmax(80px,1fr)); }.latency-summary,.client-summary,.latency-details { grid-template-columns:repeat(auto-fit,minmax(100px,1fr)); }.context-menu { inset:auto 6px 6px!important; width:auto; max-height:calc(100vh - 12px); } }
|
||||
|
||||
Reference in New Issue
Block a user