theater/tendrils
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Unify hover bubble styling across network, Dante, and Art-Net modes

Browse Source 
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Ian Gulliver
2026-01-26 13:05:46 -08:00
parent 0aa20ac6bf
commit e43982df4e
1 changed files with 123 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

173
static/index.html
View File

@@ -126,7 +126,7 @@
top: -8px;
left: 50%;
transform: translateX(-50%);
font-size: 9px;
font-size: 10px;
font-weight: normal;
background: #444;
color: #fff;
@@ -142,12 +142,30 @@
.node .switch-port .error-info,
.node .uplink .error-info {
display: none;
font-size: 8px;
opacity: 0.8;
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
margin-bottom: 4px;
font-size: 10px;
white-space: pre;
text-align: left;
margin-top: 2px;
padding-bottom: 2px;
background: #333;
border: 1px solid #555;
border-radius: 6px;
padding: 6px 8px;
line-height: 1.4;
}
.node .switch-port::after,
.node .uplink::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 120px;
}
.node .switch-port:hover .error-info,
@@ -167,7 +185,7 @@
top: -8px;
left: 50%;
transform: translateX(-50%);
font-size: 9px;
font-size: 10px;
font-weight: normal;
background: #444;
color: #fff;
@@ -181,7 +199,7 @@
top: -8px;
left: 50%;
transform: translateX(-50%);
font-size: 9px;
font-size: 10px;
font-weight: normal;
background: #753;
color: #fff;
@@ -306,38 +324,49 @@
top: -8px;
left: 50%;
transform: translateX(-50%);
font-size: 9px;
font-size: 10px;
font-weight: normal;
padding: 1px 6px;
border-radius: 8px;
white-space: nowrap;
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
background: #444;
color: #fff;
z-index: 10;
cursor: default;
}
.node:has(.dante-info:hover) {
z-index: 1000;
.node .dante-info .dante-detail {
display: none;
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
margin-bottom: 4px;
font-size: 10px;
white-space: pre;
text-align: left;
background: #333;
border: 1px solid #555;
border-radius: 6px;
padding: 6px 8px;
line-height: 1.4;
}
.node .dante-info::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 120px;
}
.node .dante-info:hover {
white-space: pre;
max-width: none;
width: max-content;
z-index: 100;
padding: 4px 8px;
}
.node .dante-info.tx-info {
background: #753;
color: #fff;
}
.node .dante-info.rx-info {
background: #357;
color: #fff;
.node .dante-info:hover .dante-detail {
display: block;
}
body.dante-mode .node.dante-tx .dante-info,
@@ -354,6 +383,13 @@
bottom: -8px;
}
body.dante-mode .node.dante-tx.dante-rx .dante-info.rx-info .dante-detail {
bottom: auto;
top: 100%;
margin-bottom: 0;
margin-top: 4px;
}
body.artnet-mode .node {
opacity: 0.3;
}
@@ -384,38 +420,49 @@
top: -8px;
left: 50%;
transform: translateX(-50%);
font-size: 9px;
font-size: 10px;
font-weight: normal;
padding: 1px 6px;
border-radius: 8px;
white-space: nowrap;
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
background: #444;
color: #fff;
z-index: 10;
cursor: default;
}
.node:has(.artnet-info:hover) {
z-index: 1000;
.node .artnet-info .artnet-detail {
display: none;
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
margin-bottom: 4px;
font-size: 10px;
white-space: pre;
text-align: left;
background: #333;
border: 1px solid #555;
border-radius: 6px;
padding: 6px 8px;
line-height: 1.4;
}
.node .artnet-info::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 120px;
}
.node .artnet-info:hover {
white-space: pre;
max-width: none;
width: max-content;
z-index: 100;
padding: 4px 8px;
}
.node .artnet-info.out-info {
background: #375;
color: #fff;
}
.node .artnet-info.in-info {
background: #357;
color: #fff;
.node .artnet-info:hover .artnet-detail {
display: block;
}
body.artnet-mode .node.artnet-out .artnet-info,
@@ -432,6 +479,13 @@
bottom: -8px;
}
body.artnet-mode .node.artnet-out.artnet-in .artnet-info.in-info .artnet-detail {
bottom: auto;
top: 100%;
margin-bottom: 0;
margin-top: 4px;
}
.node.has-error {
box-shadow: 0 0 0 3px #f66;
}
@@ -458,11 +512,12 @@
background: #333;
border: 1px solid #555;
border-radius: 6px;
padding: 8px;
padding: 6px 8px;
font-size: 10px;
white-space: nowrap;
z-index: 1000;
text-align: left;
line-height: 1.4;
}
.node .node-info::before {
@@ -1135,28 +1190,46 @@
if (danteInfo && danteInfo.isTx) {
const txEl = document.createElement('div');
txEl.className = 'dante-info tx-info';
txEl.textContent = '→ ' + danteInfo.txTo.join('\n\n→ ');
const firstDest = danteInfo.txTo[0].split('\n')[0];
txEl.textContent = '→ ' + firstDest;
const detail = document.createElement('div');
detail.className = 'dante-detail';
detail.textContent = '→ ' + danteInfo.txTo.join('\n\n→ ');
txEl.appendChild(detail);
div.appendChild(txEl);
}
if (danteInfo && danteInfo.isRx) {
const rxEl = document.createElement('div');
rxEl.className = 'dante-info rx-info';
rxEl.textContent = '← ' + danteInfo.rxFrom.join('\n\n← ');
const firstSource = danteInfo.rxFrom[0].split('\n')[0];
rxEl.textContent = '← ' + firstSource;
const detail = document.createElement('div');
detail.className = 'dante-detail';
detail.textContent = '← ' + danteInfo.rxFrom.join('\n\n← ');
rxEl.appendChild(detail);
div.appendChild(rxEl);
}
if (artnetInfo && artnetInfo.isOut) {
const outEl = document.createElement('div');
outEl.className = 'artnet-info out-info';
outEl.textContent = '→ ' + artnetInfo.outputs.join('\n→ ');
outEl.textContent = '← ' + artnetInfo.outputs[0];
const detail = document.createElement('div');
detail.className = 'artnet-detail';
detail.textContent = '← ' + artnetInfo.outputs.join('\n← ');
outEl.appendChild(detail);
div.appendChild(outEl);
}
if (artnetInfo && artnetInfo.isIn) {
const inEl = document.createElement('div');
inEl.className = 'artnet-info in-info';
inEl.textContent = '← ' + artnetInfo.inputs.join('\n← ');
inEl.textContent = '→ ' + artnetInfo.inputs[0];
const detail = document.createElement('div');
detail.className = 'artnet-detail';
detail.textContent = '→ ' + artnetInfo.inputs.join('\n→ ');
inEl.appendChild(detail);
div.appendChild(inEl);
}