aidar/SHiNE-server
SHA256
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Связи: финальный вид сияющих связей — плазма (поле+трубка+ядро, screen-blend) + цвет связи у обычных

Browse Source 
Промежуточные итерации линий схлопнуты в один коммит. Убран мёртвый фильтр fg-plasma-turb. Лаборатория (/network-view/lab) и автотесты сохранены. Версия 1.2.158.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Pixel
2026-06-10 16:09:33 +03:00
co-authored by Claude Opus 4.8
parent 519bce6b78
commit 2559f1e66b
5 changed files with 88 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
shine-UI/styles/network-graph.css
+27 -22
View File
@@ -60,38 +60,43 @@
transition: opacity 420ms ease; /* плавное появление линий при перестройке */
}
/* Сияющая связь = двухслойный неоновый «световод» (Neon Layering): изящно, но объёмно (как OLED).
GLOW — широкий размытый ореол неонового оттенка под линией; CORE — тонкий чёткий светлый контур. */
.fg-edge-glow {
/* Сияющая связь = плазменный композитинг (3 слоя на ОДНОМ S-пути, см. renderEdges).
Настоящий НЕОН: яркое светлое ядро + ВИДИМЫЙ голубой ореол вокруг. Слои поля/трубки идут в режиме
mix-blend-mode: screen → свет складывается аддитивно с тёмным фоном (как реальное свечение), а в точках
пересечения нитей у центра — ярче (энергетический хаб). Прозрачность слоёв — inline (×spotlight/глубину). */
.fg-plasma-flare { /* нижний: широкое насыщенное голубое плазменное свечение (по референсу) */
fill: none;
stroke: rgba(110, 225, 255, 1);
stroke-width: 4;
stroke: #00bfff; /* глубокий голубой */
stroke-width: 16;
stroke-linecap: round;
filter: blur(2px); /* мягкое объёмное свечение вокруг нити */
/* синхро-пульс: нить «дышит» толщиной/размытием в том же ритме (3.6с), что и ободок сияющего узла —
в покое SVG не перерисовывается, поэтому все нити стартуют синхронно и пульсируют вместе. */
animation: fg-edge-pulse 3.6s ease-in-out infinite;
filter: url(#fg-plasma-blur6); /* мягкое объёмное свечение (гладкие края — как на референсе) */
mix-blend-mode: screen; /* аддитивное свечение поверх тёмного фона */
/* синхро-«дыхание» поля толщиной в такт ободку сияющего узла (3.6с); прозрачность не трогаем (inline) */
animation: fg-plasma-breath 3.6s ease-in-out infinite;
}
.fg-edge-core {
.fg-plasma-tube { /* средний: яркая толстая неоновая трубка */
fill: none;
stroke: #e0f7fc; /* ультра-светлый голубой — чёткий контур луча */
stroke-width: 1.5;
stroke: #00e5ff; /* яркий циан */
stroke-width: 6;
stroke-linecap: round;
filter: url(#fg-plasma-blur2); /* SVG feGaussianBlur stdDeviation=2 */
mix-blend-mode: screen; /* аддитивное свечение */
}
.fg-plasma-core { /* верхний: яркое чёткое ядро (светло-голубо-белое) */
fill: none;
stroke: #dffaff; /* светло-голубо-белое — «жидкое» ядро */
stroke-width: 2;
stroke-linecap: round;
animation: fg-edge-core-pulse 3.6s ease-in-out infinite;
}
/* пульс «световода» в такт дыханию сияющего ободка (та же длительность 3.6с) */
@keyframes fg-edge-pulse {
0%, 100% { stroke-width: 3.4; filter: blur(1.6px); }
50% { stroke-width: 5.2; filter: blur(2.8px); }
}
@keyframes fg-edge-core-pulse {
0%, 100% { stroke-width: 1.3; }
50% { stroke-width: 1.9; }
/* мягкое «дыхание» плазменного облака толщиной, синхронно с пульсом сияющего ободка (3.6с) */
@keyframes fg-plasma-breath {
0%, 100% { stroke-width: 14; }
50% { stroke-width: 19; }
}
@media (prefers-reduced-motion: reduce) {
.fg-edge-glow, .fg-edge-core { animation: none; }
.fg-plasma-flare { animation: none; }
}
.fg-node {