feat: Tapo platform page

2026-07-28 12:57:49 +01:00
parent f10e61cde4
commit 97dc6feaca
3 changed files with 559 additions and 0 deletions
@@ -1234,3 +1234,109 @@ table.cmp {
 .foot__in a:hover {
    color: var(--ink);
 }
+
+/* ---------- Topology diagram ---------- */
+
+.topo {
+    margin: 2rem 0 0;
+    border: 1px solid var(--rule);
+    border-radius: 10px;
+    background: var(--panel-2);
+    overflow: hidden;
+}
+
+.topo__head {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.9rem 1.2rem;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.75rem 0.9rem;
+    border-bottom: 1px solid var(--rule);
+    background: var(--panel);
+}
+
+.topo__seg {
+    display: inline-flex;
+    border: 1px solid var(--rule);
+    border-radius: 6px;
+    overflow: hidden;
+}
+
+.topo__btn {
+    appearance: none;
+    border: 0;
+    background: transparent;
+    color: var(--ink-2);
+    font: inherit;
+    font-size: 0.85rem;
+    padding: 0.42rem 0.85rem;
+    cursor: pointer;
+}
+
+.topo__btn + .topo__btn {
+    border-left: 1px solid var(--rule);
+}
+
+.topo__btn:hover {
+    color: var(--ink);
+}
+
+.topo__btn.is-on {
+    background: var(--accent);
+    color: var(--accent-ink);
+}
+
+.topo__btn:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: -2px;
+}
+
+.topo__key {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    flex-wrap: wrap;
+    margin: 0;
+    color: var(--ink-3);
+    font-family: var(--mono);
+    font-size: 0.72rem;
+}
+
+.topo__dot {
+    width: 7px;
+    height: 7px;
+    border-radius: 999px;
+    display: inline-block;
+}
+
+.topo__dot--out {
+    background: var(--up);
+}
+
+.topo__dot--in {
+    background: var(--accent);
+    margin-left: 0.8rem;
+}
+
+.topo__canvas {
+    display: block;
+    width: 100%;
+    height: 380px;
+}
+
+.topo__note {
+    margin: 0;
+    padding: 0.8rem 0.95rem;
+    border-top: 1px solid var(--rule);
+    background: var(--panel);
+    color: var(--ink-2);
+    font-size: 0.88rem;
+    max-width: 78ch;
+}
+
+@media (max-width: 660px) {
+    .topo__canvas {
+        height: 460px;
+    }
+}