Связи - интересно но надо дорабатывать

This commit is contained in:
AidarKC
2026-09-10 14:52:20 +03:00
parent d83f1d4cce
commit 849250bfa8
9 changed files with 613 additions and 131 deletions
+29 -61
View File
@@ -200,6 +200,24 @@
background: #454b55; color: #ffffff; font-weight: 600; font-size: 20px;
}
/* Маленький знак официального пользователя. Он находится внутри .node-dot, поэтому автоматически
масштабируется вместе с аватаркой при focus/zoom/анимациях графа. */
.fg-official-badge {
position: absolute;
left: -2%;
bottom: 0;
width: 15%;
height: 15%;
min-width: 8px;
min-height: 8px;
object-fit: contain;
display: block;
z-index: 5;
pointer-events: none;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.42));
}
.fg-node.is-family .node-dot {
background: linear-gradient(165deg, #785038, #5f3e2c);
border-color: rgba(255, 194, 143, 0.6);
@@ -241,15 +259,17 @@
.fg-node.is-pressed .node-dot { transform: none; }
}
/* «Сияние» — постоянное живое свечение НА УЗЛЕ (аватарке), а не на линии связи.
Пульсация остаётся мягкой, но нижняя точка теперь не проваливается почти в ноль:
визуально сияющий пользователь всегда остаётся явно сияющим. */
/* «Сияние» на аватарке теперь стационарное. Интенсивность зафиксирована примерно на 2/3 пути
от прежнего минимального состояния к максимальному: заметно, но без постоянного «дыхания». */
.fg-node.is-shine .node-dot {
border-color: rgba(150, 240, 255, 0.62);
animation: fg-shine-glow 3.6s ease-in-out infinite;
box-shadow:
0 0 8.3px rgba(146, 243, 255, 0.57),
0 0 18.3px rgba(121, 235, 255, 0.39),
0 0 33px rgba(100, 220, 255, 0.24);
}
/* размытый радиальный ореол позади аватарки; внешний SVG-фильтр даёт мягкое гауссово размытие */
/* Статичный размытый ореол позади аватарки — та же промежуточная интенсивность ~2/3. */
.fg-node.is-shine .node-dot::before {
content: '';
position: absolute;
@@ -259,34 +279,8 @@
filter: url(#fg-shine-glow);
z-index: -1;
pointer-events: none;
animation: fg-shine-halo 3.6s ease-in-out infinite;
}
/* пульсация многослойной тени: компактное приглушённое → широкое мягкое свечение */
@keyframes fg-shine-glow {
0%, 100% {
box-shadow:
0 0 7px rgba(138, 239, 255, 0.48),
0 0 15px rgba(118, 232, 255, 0.32),
0 0 27px rgba(100, 220, 255, 0.19);
}
50% {
box-shadow:
0 0 9px rgba(150, 245, 255, 0.62),
0 0 20px rgba(122, 236, 255, 0.42),
0 0 36px rgba(100, 220, 255, 0.26);
}
}
/* ореол дышит размером и прозрачностью синхронно с тенью (мягко, без рывков) */
@keyframes fg-shine-halo {
0%, 100% { transform: scale(0.98); opacity: 0.72; }
50% { transform: scale(1.12); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.fg-node.is-shine .node-dot { animation: none; }
.fg-node.is-shine .node-dot::before { animation: none; }
transform: scale(1.07);
opacity: 0.91;
}
/* мягкое свечение вокруг фокуса (статичное; «дышит» вместе с размером узла ниже) */
@@ -524,37 +518,11 @@
background: transparent;
}
/* === Партия 2: бейдж-счётчик связей, поиск, хлебные крошки, цветовые кластеры ============ */
/* Бейдж числа связей — маленькая пилюля в правом-верхнем углу аватарки */
.fg-node-badge {
position: absolute;
top: -2px;
right: -2px;
min-width: 16px;
height: 16px;
padding: 0 4px;
border-radius: 999px;
background: rgba(16, 24, 40, 0.92);
border: 1px solid rgba(150, 200, 255, 0.5);
color: #d9ecff;
font-size: 9px;
font-weight: 700;
line-height: 14px;
text-align: center;
pointer-events: none;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.fg-node.is-focus .fg-node-badge {
background: rgba(61, 196, 223, 0.95);
border-color: rgba(220, 245, 255, 0.8);
color: #06131c;
}
.fg-node.is-tier2 .fg-node-badge { transform: scale(0.85); }
/* === Партия 2: поиск, хлебные крошки, цветовые кластеры ============================== */
/* Кластерная аура по категории удалена (цветной фон/обводка узла убраны). Сияющим/фокусу
box-shadow не навязываем — у них свой эффект свечения (is-shine/is-focus выше). */
.fg-node.is-shine .node-dot, .fg-node.is-focus .node-dot { box-shadow: none; }
.fg-node.is-focus:not(.is-shine) .node-dot { box-shadow: none; }
/* Строка поиска (оверлей вверху, под панелью фильтров) */
.fg-search {