diff --git a/ecat.css b/ecat.css index ba4b0ed..f634fee 100644 --- a/ecat.css +++ b/ecat.css @@ -233,6 +233,52 @@ label { display: block; } .node-card.fault { border-color: color-mix(in srgb, var(--danger) 55%, transparent); } .node-card.fault.active { border-color: var(--danger); } .node-card.offline { opacity: .5; } + +/* motor.html 的 N1–N9 紧凑列表项(.node-item/.ni-*)。 + * 与上面 .node-card 是两套东西: .node-card 供 ecat.html 的单从站卡片, + * 这里是 motor.js renderNodeList() 渲染的九行节点。类名对不上时整列表会裸奔。 + * 单行布局: LED | N1 | 故障标签 | 右对齐读数 */ +.node-item { + display: flex; align-items: center; gap: var(--sp-2); + padding: var(--sp-2) var(--sp-3); + border-radius: var(--radius); + border: 1px solid var(--border); + background: var(--bg-root); + cursor: pointer; + opacity: .5; /* 默认离线态; .online 时恢复 */ + transition: border-color .2s, background .2s, opacity .2s, transform .12s; +} +.node-item:hover { border-color: var(--border-strong); transform: translateX(2px); } +.node-item:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; } +.node-item.online { opacity: 1; } +.node-item.active { + border-color: color-mix(in srgb, var(--seed-primary) 55%, transparent); + background: color-mix(in srgb, var(--seed-primary) 6%, var(--bg-root)); +} +.node-item .ni-led { + width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; + background: var(--fg-dim); transition: background .3s, box-shadow .3s; +} +.node-item.online .ni-led { background: var(--ok); box-shadow: 0 0 6px var(--ok); } +.node-item .ni-name { + font-family: var(--font-mono); font-weight: 700; font-size: .9rem; + letter-spacing: -0.02em; min-width: 2.1em; +} +/* 故障标签默认不占位, 有内容(.has)时才显示 */ +.node-item .ni-fault { display: none; } +.node-item .ni-fault.has { + display: inline-block; + font-size: .65rem; padding: 1px 6px; border-radius: 99px; + background: var(--danger-dim); color: var(--danger); + font-weight: 600; letter-spacing: .02em; + max-width: 8em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; +} +.node-item.online:has(.ni-fault.has) { border-color: color-mix(in srgb, var(--danger) 55%, transparent); } +.node-item .ni-sub { + margin-left: auto; + font-family: var(--font-mono); font-size: .68rem; color: var(--fg-muted); + letter-spacing: .01em; white-space: nowrap; +} /* 独立 BOOT 徽章:总线上有电机在 Bootloader(0x103 心跳),不归属任何 Nx * 注意:不要用内联 style="display:none",否则 .show 的 display:flex 盖不过。 */ .boot-badge {