orb: мягкий край фото + убран фон-градиент категории из-под стекла

- растушёвка края фото радиальной маской (--feather-full 62% / --feather-edge 78%):
  фото сливается со стеклом без жёсткого ободка; параметры для подкрутки.
- убран фон-градиент категории на .node-dot (просвечивал через прозрачный центр
  стекла → читался как цветная «обводка»): селектор поднят до (0,4,0), чтобы
  перебить правила категории. Цвет категории остаётся на линиях.
- кластерная аура (box-shadow по категории) отключена.
Не тронуто: кромка PNG, свечение сияющих/фокуса/common, линии.
Версия 1.2.164.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Pixel 2026-06-13 22:55:09 +03:00
parent 69f0fdf120
commit ff584ba5d1
2 changed files with 14 additions and 3 deletions

View File

@ -1,2 +1,2 @@
client.version=1.2.163 client.version=1.2.164
server.version=1.2.144 server.version=1.2.144

View File

@ -143,8 +143,11 @@
и форсит размер 100%). Поэтому opacity/размеры/радиус задаём здесь явно. */ и форсит размер 100%). Поэтому opacity/размеры/радиус задаём здесь явно. */
/* Кромку даёт сам glass_overlay.png убираем остаточный border .node-dot (синее кольцо /* Кромку даёт сам glass_overlay.png убираем остаточный border .node-dot (синее кольцо
старого векторного орба). Только у PNG-хоста; вектор и свечение/box-shadow не трогаем. */ старого векторного орба). Только у PNG-хоста; вектор и свечение/box-shadow не трогаем. */
.fg-orb-host:has(.fg-pngorb) { /* (0,4,0) выше специфичности правил категории `.fg-node.is-family .node-dot` (0,3,0),
иначе их background/border перебивают. */
.fg-node .node-dot.fg-orb-host:has(.fg-pngorb) {
border: none; border: none;
background: none; /* фон-градиент категории не торчит из-под прозрачного стекла (та самая «обводка») */
} }
.fg-orb-host .fg-pngorb { .fg-orb-host .fg-pngorb {
position: absolute; position: absolute;
@ -169,9 +172,15 @@
width: 78%; height: 78%; /* ~78% от бокса оверлея — сидит внутри стеклянной кромки */ width: 78%; height: 78%; /* ~78% от бокса оверлея — сидит внутри стеклянной кромки */
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
opacity: 1; opacity: 1;
border-radius: 50%; border-radius: 50%; /* фолбэк, если mask не поддержан */
object-fit: cover; object-fit: cover;
display: block; display: block;
/* Мягкий край: фото непрозрачно до --feather-full, плавно гаснет к 0 у --feather-edge
сливается со стеклом без жёсткого ободка. Силу растушёвки крутим этими двумя параметрами. */
--feather-full: 62%;
--feather-edge: 78%;
-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 var(--feather-full), transparent var(--feather-edge));
mask-image: radial-gradient(circle at 50% 50%, #000 var(--feather-full), transparent var(--feather-edge));
} }
.fg-orb-host .fg-pngorb-init { .fg-orb-host .fg-pngorb-init {
display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: center;
@ -610,10 +619,12 @@
.fg-node.is-tier2 .fg-node-badge { transform: scale(0.85); } .fg-node.is-tier2 .fg-node-badge { transform: scale(0.85); }
/* Цветовые кластеры: мягкая аура узла по типу связи (визуально группирует «семью/друзей/бизнес») */ /* Цветовые кластеры: мягкая аура узла по типу связи (визуально группирует «семью/друзей/бизнес») */
/* ТЕСТ (откат: раскомментировать блок) кластерная аура скрыта по запросу.
.fg-node.is-family .node-dot { box-shadow: 0 0 16px rgba(255, 159, 94, 0.20); } .fg-node.is-family .node-dot { box-shadow: 0 0 16px rgba(255, 159, 94, 0.20); }
.fg-node.is-friend .node-dot { box-shadow: 0 0 16px rgba(120, 179, 255, 0.20); } .fg-node.is-friend .node-dot { box-shadow: 0 0 16px rgba(120, 179, 255, 0.20); }
.fg-node.is-business .node-dot { box-shadow: 0 0 16px rgba(190, 150, 255, 0.20); } .fg-node.is-business .node-dot { box-shadow: 0 0 16px rgba(190, 150, 255, 0.20); }
.fg-node.is-contact .node-dot { box-shadow: 0 0 16px rgba(170, 190, 220, 0.16); } .fg-node.is-contact .node-dot { box-shadow: 0 0 16px rgba(170, 190, 220, 0.16); }
*/
/* сияющие/фокус — свой эффект свечения (см. выше), ауру кластера не навязываем */ /* сияющие/фокус — свой эффект свечения (см. выше), ауру кластера не навязываем */
.fg-node.is-shine .node-dot, .fg-node.is-focus .node-dot { box-shadow: none; } .fg-node.is-shine .node-dot, .fg-node.is-focus .node-dot { box-shadow: none; }