diff --git a/shine-UI/js/pages/network-view.js b/shine-UI/js/pages/network-view.js index 8b840bc..822687c 100644 --- a/shine-UI/js/pages/network-view.js +++ b/shine-UI/js/pages/network-view.js @@ -92,7 +92,14 @@ function spread(count, start, end) { function buildNodeElement({ login, kind = 'friend', isCenter = false, mark = null }) { const node = document.createElement('button'); node.type = 'button'; - node.className = `node ${isCenter ? 'center' : ''} ${kind === 'relative' ? 'is-relative' : 'is-friend'}`.trim(); + const classes = [ + 'node', + isCenter ? 'center' : '', + kind === 'relative' ? 'is-relative' : 'is-friend', + mark?.shine ? 'is-shine' : '', + mark?.official ? 'is-official' : '', + ].filter(Boolean); + node.className = classes.join(' '); node.dataset.nodeLogin = login; const metaParts = []; @@ -101,7 +108,9 @@ function buildNodeElement({ login, kind = 'friend', isCenter = false, mark = nul const metaText = metaParts.join(', '); node.title = metaText ? `${login}\n${metaText}` : login; + const officialBadge = mark?.official ? '' : ''; node.innerHTML = ` + ${officialBadge} ${(login[0] || '?').toUpperCase()} ${login} `; diff --git a/shine-UI/styles/components.css b/shine-UI/styles/components.css index a6f4254..380c46b 100644 --- a/shine-UI/styles/components.css +++ b/shine-UI/styles/components.css @@ -951,9 +951,11 @@ textarea.input { text-align: center; color: inherit; cursor: pointer; + z-index: 1; } .node-dot { + position: relative; width: 52px; height: 52px; margin: 0 auto 4px; @@ -966,6 +968,41 @@ textarea.input { box-shadow: 0 8px 16px rgba(4, 8, 15, 0.35); } +.node-badge-official { + position: absolute; + left: 50%; + top: -8px; + transform: translateX(-50%); + min-width: 26px; + height: 18px; + padding: 0 6px; + border-radius: 999px; + border: 1px solid rgba(255, 214, 130, 0.95); + background: linear-gradient(180deg, rgba(255, 219, 145, 0.98), rgba(232, 165, 64, 0.98)); + color: #3a2003; + font-size: 10px; + line-height: 16px; + font-weight: 800; + letter-spacing: 0.3px; + text-transform: uppercase; + box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3); + z-index: 2; +} + +.node.is-shine .node-dot::before { + content: ''; + position: absolute; + inset: -7px; + border-radius: 50%; + background: radial-gradient(circle, rgba(130, 235, 255, 0.45) 0%, rgba(130, 235, 255, 0.18) 45%, rgba(130, 235, 255, 0) 72%); + filter: blur(1px); + z-index: -1; +} + +.node.is-shine .node-dot { + box-shadow: 0 0 0 2px rgba(143, 231, 255, 0.38), 0 0 16px rgba(102, 220, 255, 0.38), 0 8px 16px rgba(4, 8, 15, 0.35); +} + .node.is-friend .node-dot { background: linear-gradient(165deg, #2f4f80, #2a3f62); }