:root { --top-h: 30px; --palette-w: 101px } body { margin: 0; font-family: Arial, Helvetica, sans-serif; background: #f5f7fa } .topbar { height: var(--top-h); display: flex; align-items: center; gap: 2px; padding: 1px 5px; background: #0a66c2; color: #fff } .toptitlebar { height: 15px; display: flex; align-items: center; gap: 1px; padding: 1px 5px; background: darkslateblue; color: lightpink ; font-size: 8px; justify-content: center; font-style: italic; } .tool-btn { background: transparent; border: 0; color: inherit; padding: 2px 2px; border-radius: 6px; cursor: pointer; margin-top: 4px } .page { display: flex; height: calc(100vh - var(--top-h)); overflow: hidden } .pane-left { width: var(--palette-w); background: #fff; display: flex; flex-direction: column; border-right: 1px solid #eee } .categories { padding: 6px; overflow: auto } .category { margin-bottom: 8px; padding-bottom: 0 } .cat-title { font-size: 12px; font-weight: regular; color: darkslateblue; padding: 1px 1px; margin-left: 0; margin-top: 2px; margin-bottom: 2px; background-color: honeydew } .icons { display: flex; flex-wrap: wrap; gap: 4px; padding-top: 2px } .icon { width: 25px; height: 25px; border-radius: 4px; background: white; display: flex; align-items: center; justify-content: center; cursor: grab } .icon img { max-width: 22px; max-height: 22px; pointer-events: none } .divider { width: 6px; cursor: col-resize; background: transparent; display: flex; align-items: center; justify-content: center } .graph-pane { flex: 1; position: relative; background: linear-gradient(180deg, #fff, #f6f9ff); overflow: hidden } .svg-wrap { width: 100%; height: 100%; overflow: hidden } #svgroot { width: 100%; height: 100%; display: block } .node rect { fill: transparent; stroke: transparent; stroke-width: 1; rx: 8; ry: 8 } .group-box { fill: transparent; stroke: gray; stroke-width: 1; stroke-dasharray: 4 2; pointer-events: all } .group .corner-handle { opacity: 0; pointer-events: none; transition: opacity .08s } .group.is-selected .corner-handle { opacity: 1; pointer-events: all } .node-label, .group-label, .link-label { font: 13px Arial, Helvetica, sans-serif; fill: #1f2937; user-select: none } .node-label { text-anchor: middle; dominant-baseline: hanging } .group-label { text-anchor: middle; dominant-baseline: middle } .link-label { font-size: x-small; font-style: italic; text-anchor: middle; dominant-baseline: middle } .link { stroke: gray; stroke-width: 1; fill: none; marker-end: url(#arrow); cursor: pointer } .link.straight { marker-end: none } .link-hit { stroke: transparent; stroke-width: 14; fill: none; cursor: grab } .link-hit:active { cursor: grabbing } .hotspot { fill: #0a66c2; opacity: 0; transition: opacity .08s } .node:hover .hotspot { opacity: 1 } .tooltip { position: absolute; background: #111; color: #fff; padding: 6px 8px; border-radius: 6px; font-size: 12px; pointer-events: none; z-index: 30; display: none } @media(max-width:720px) { .page { flex-direction: column } .pane-left { order: 2; width: 100% } } .tool-btn { position: relative; cursor: pointer } .tool-btn::after { content: attr(data-tooltip); visibility: hidden; opacity: 0; background: #000; color: #fff; padding: 4px 8px; font-size: 12px; border-radius: 3px; white-space: nowrap; position: absolute; z-index: 999; top: 100%; left: 100%; margin-top: 5px; margin-left: -100%; pointer-events: none; display: block; transition: opacity .2s ease } .tool-btn:hover::after { visibility: visible; opacity: 1 }