/* ═══ Диаграммы React Flow — стили узлов, рёбер и контейнеров ═══ Палитра тем синхронизирована с scripts/build_diagrams.py (ALLOWED_THEMES) и THEME_COLORS в исходнике react-flow-viewer.js. */ .react-flow-figure .react-flow-root { width: 100%; height: 600px; border: 1px solid #1f2937; border-radius: 12px; overflow: hidden; background: radial-gradient(circle at 30% 20%, rgba(87, 199, 185, 0.04), transparent 60%), transparent; } @media (max-width: 720px) { .react-flow-figure .react-flow-root { height: 460px; } } .flow-loading { color: #8b98a9; padding: 24px; font-size: 13px; letter-spacing: 0.3px; } .flow-static-fallback { display: block; width: 100%; height: 100%; object-fit: contain; padding: 16px; background: #0b0f14; } /* --- полноэкранный режим схемы --- Селектор без привязки к .react-flow-figure: в развёрнутом виде контейнер переносится напрямую в . */ .react-flow-root.flow-expanded { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; z-index: 10000 !important; border-radius: 0 !important; border: none !important; background: #0b0f14 !important; } body.flow-expanded-lock { overflow: hidden; } .flow-fullscreen-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-family: 'Inter', system-ui, sans-serif; font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: 0.2px; color: #c7d0dc; background: rgba(18, 22, 29, 0.92); border: 1px solid #2a3441; border-radius: 8px; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .flow-fullscreen-btn:hover { color: #57c7b9; border-color: #57c7b9; background: #12161d; } /* --- узлы --- */ .custom-node { padding: 10px 15px; border-radius: 8px; border: 1px solid #333; background: linear-gradient(180deg, #14181f 0%, #0f1319 100%); color: #fff; font-size: 12px; font-weight: 500; text-align: center; min-width: 120px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35); display: flex; flex-direction: column; gap: 4px; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .custom-node.clickable:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45); } .custom-node .node-title { font-size: 9px; text-transform: uppercase; letter-spacing: 0.6px; opacity: 0.75; } .custom-node .node-label { font-size: 13px; font-weight: 600; line-height: 1.35; } /* --- темы --- */ .node-user { border-color: #57c7b9; background: linear-gradient(180deg, #0e1c1a 0%, #0a1514 100%); } .node-user .node-title { color: #57c7b9; } .node-security { border-color: #a78bfa; background: linear-gradient(180deg, #161122 0%, #100c19 100%); } .node-security .node-title { color: #a78bfa; } .node-gateway { border-color: #ec6e8a; background: linear-gradient(180deg, #1d1016 0%, #150b10 100%); } .node-gateway .node-title { color: #ec6e8a; } .node-runtime { border-color: #d3b36a; background: linear-gradient(180deg, #1e1a10 0%, #16130b 100%); } .node-runtime .node-title { color: #d3b36a; } .node-data { border-color: #8aa2c0; background: linear-gradient(180deg, #11161d 0%, #0c1015 100%); } .node-data .node-title { color: #8aa2c0; } .node-tools { border-color: #e8926b; background: linear-gradient(180deg, #1d150f 0%, #150f0a 100%); } .node-tools .node-title { color: #e8926b; } .node-enterprise { border-color: #6fbf8f; background: linear-gradient(180deg, #0f1b14 0%, #0a140e 100%); } .node-enterprise .node-title { color: #6fbf8f; } .node-ops { border-color: #5b8def; background: linear-gradient(180deg, #101827 0%, #0b111c 100%); } .node-ops .node-title { color: #5b8def; } .node-default { border-color: #3d4652; } .node-default .node-title { color: #8b98a9; } /* --- рёбра --- */ .react-flow__edge-path { stroke: #3d4b60; stroke-width: 1.5; } /* подписи на рёбрах */ .react-flow__edge-text { fill: #aab6c4; font-size: 10px; letter-spacing: 0.2px; } .react-flow__edge-textbg { fill: #0d1117; fill-opacity: 0.9; } /* --- легенда тем (architecture.html) --- */ .diagram-legend i.legend-user { background: #57c7b9; } .diagram-legend i.legend-security { background: #a78bfa; } .diagram-legend i.legend-gateway { background: #ec6e8a; } .diagram-legend i.legend-runtime { background: #d3b36a; } .diagram-legend i.legend-data { background: #8aa2c0; } .diagram-legend i.legend-tools { background: #e8926b; } .diagram-legend i.legend-enterprise { background: #6fbf8f; } .diagram-legend i.legend-ops { background: #5b8def; } .react-flow__edge.animated .react-flow__edge-path { stroke: #57c7b9; stroke-width: 2; stroke-dasharray: 5; animation: dashdraw 0.5s linear infinite; } @keyframes dashdraw { from { stroke-dashoffset: 10; } } /* --- служебные элементы React Flow в тёмной теме --- */ .react-flow__controls { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); border-radius: 8px; overflow: hidden; } .react-flow__controls-button { background: #12161d; border-bottom: 1px solid #1f2937; } .react-flow__controls-button:hover { background: #1a212c; } .react-flow__controls-button svg { fill: #8b98a9; } .react-flow__attribution { background: transparent; color: #4b5563; }