christianandClaude Opus 5.5
df2f0494f8
The Macs at NA are also on Wi-Fi and the Dante networks, and Bonjour lists each MIDI session once per network. On 2026-10-20 the Tracks and Companion senders were set to Wi-Fi addresses, so the lighting MIDI ProdDash hears rode Wi-Fi. With "Wired network" set (This machine; e.g. 10.1.0.0/16, several with commas), a sender typed as a name or as an address outside it, and a session that joins us from outside it, turn the admin status line and the tile's sender chip red, naming the sender. It still joins, so the cues keep showing. Empty (the default) changes nothing; a typo in the setting fails the module in /admin with a plain message. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
188 lines
6.3 KiB
CSS
188 lines
6.3 KiB
CSS
/* Vista Cues. Sizes hang off the tile (container units) times the tile's
|
||
own text scale (--vc-scale, the title bar's − / +), so one tile reads the
|
||
same at 3×2 on a laptop as at 8×5 on a wall. Colours are the shell's. */
|
||
|
||
[data-module="vista-cues"] .vc-root {
|
||
--tone: var(--text);
|
||
--vc-scale: 1;
|
||
position: absolute;
|
||
inset: 0;
|
||
container-type: size;
|
||
overflow: hidden;
|
||
color: var(--text);
|
||
font-variant-numeric: tabular-nums;
|
||
user-select: none;
|
||
-webkit-user-select: none;
|
||
}
|
||
[data-module="vista-cues"] .vc-root[data-tone="ok"] { --tone: var(--accent); }
|
||
[data-module="vista-cues"] .vc-root[data-tone="warn"] { --tone: var(--warn); }
|
||
[data-module="vista-cues"] .vc-root[data-tone="muted"] { --tone: var(--muted); }
|
||
[data-module="vista-cues"] [hidden] { display: none !important; }
|
||
|
||
[data-module="vista-cues"] .vc-body {
|
||
position: absolute;
|
||
inset: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: calc(clamp(3px, 2.5cqh, 14px) * var(--vc-scale));
|
||
padding: clamp(6px, 3.5cqmin, 22px);
|
||
min-width: 0;
|
||
}
|
||
|
||
[data-module="vista-cues"] .vc-offline {
|
||
position: absolute;
|
||
top: clamp(4px, 3cqmin, 14px);
|
||
right: clamp(6px, 3.5cqmin, 22px);
|
||
z-index: 2;
|
||
font-size: calc(clamp(9px, 4.5cqmin, 14px) * var(--vc-scale));
|
||
font-weight: 700;
|
||
letter-spacing: 0.05em;
|
||
text-transform: uppercase;
|
||
color: var(--danger);
|
||
}
|
||
[data-module="vista-cues"] .vc-root.is-offline .vc-now { opacity: 0.45; filter: grayscale(0.6); }
|
||
|
||
/* ── now ── */
|
||
|
||
[data-module="vista-cues"] .vc-now {
|
||
flex: 0 0 auto;
|
||
min-width: 0;
|
||
padding-left: clamp(6px, 2cqmin, 14px);
|
||
border-left: clamp(3px, 1.1cqmin, 7px) solid var(--tone);
|
||
}
|
||
[data-module="vista-cues"] .vc-kicker {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.6em;
|
||
font-size: calc(clamp(10px, 5cqmin, 18px) * var(--vc-scale));
|
||
color: var(--muted);
|
||
}
|
||
[data-module="vista-cues"] .vc-pill {
|
||
padding: 0.05em 0.55em;
|
||
border-radius: 999px;
|
||
font-weight: 800;
|
||
letter-spacing: 0.06em;
|
||
text-transform: uppercase;
|
||
background: var(--tone);
|
||
color: var(--accent-text);
|
||
}
|
||
[data-module="vista-cues"] .vc-root[data-tone="warn"] .vc-pill { color: var(--bg); }
|
||
[data-module="vista-cues"] .vc-ago { font-weight: 600; }
|
||
[data-module="vista-cues"] .vc-name-wrap { min-width: 0; }
|
||
[data-module="vista-cues"] .vc-name {
|
||
font-size: calc(clamp(16px, 14cqmin, 96px) * var(--vc-scale));
|
||
line-height: 1.12;
|
||
font-weight: 800;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
color: var(--text);
|
||
}
|
||
[data-module="vista-cues"] .vc-root[data-tone="muted"] .vc-name { color: var(--muted); font-weight: 600; }
|
||
[data-module="vista-cues"] .vc-meta {
|
||
font-size: calc(clamp(10px, 4.6cqmin, 18px) * var(--vc-scale));
|
||
color: var(--muted);
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
[data-module="vista-cues"] .vc-meta:empty { display: none; }
|
||
|
||
/* ── other live lists ── */
|
||
|
||
[data-module="vista-cues"] .vc-active {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.4em;
|
||
flex: 0 0 auto;
|
||
font-size: calc(clamp(10px, 4.4cqmin, 17px) * var(--vc-scale));
|
||
}
|
||
[data-module="vista-cues"] .vc-chip {
|
||
display: inline-flex;
|
||
align-items: baseline;
|
||
gap: 0.5em;
|
||
max-width: 100%;
|
||
padding: 0.2em 0.65em;
|
||
border-radius: 6px;
|
||
border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
|
||
background: color-mix(in srgb, var(--accent) 14%, transparent);
|
||
}
|
||
[data-module="vista-cues"] .vc-chip.is-paused {
|
||
border-color: color-mix(in srgb, var(--warn) 55%, transparent);
|
||
background: color-mix(in srgb, var(--warn) 14%, transparent);
|
||
}
|
||
[data-module="vista-cues"] .vc-chip-name {
|
||
font-weight: 700;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
[data-module="vista-cues"] .vc-chip-ago,
|
||
[data-module="vista-cues"] .vc-chip-group { color: var(--muted); }
|
||
[data-module="vista-cues"] .vc-chip-group { font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.04em; }
|
||
|
||
/* ── recent ── */
|
||
|
||
[data-module="vista-cues"] .vc-recent {
|
||
flex: 1 1 auto;
|
||
min-height: 0;
|
||
overflow: hidden;
|
||
font-size: calc(clamp(10px, 3.8cqmin, 15px) * var(--vc-scale));
|
||
border-top: 1px solid var(--border);
|
||
padding-top: 0.35em;
|
||
}
|
||
[data-module="vista-cues"] .vc-row {
|
||
display: grid;
|
||
grid-template-columns: auto 6.2em minmax(0, 1fr) auto;
|
||
gap: 0.8em;
|
||
align-items: baseline;
|
||
padding: 0.12em 0;
|
||
white-space: nowrap;
|
||
}
|
||
[data-module="vista-cues"] .vc-row > span { overflow: hidden; text-overflow: ellipsis; }
|
||
[data-module="vista-cues"] .vc-row-time,
|
||
[data-module="vista-cues"] .vc-row-source { color: var(--muted); }
|
||
[data-module="vista-cues"] .vc-row-action { font-weight: 700; color: var(--accent); }
|
||
[data-module="vista-cues"] .vc-row[data-action="release"] .vc-row-action,
|
||
[data-module="vista-cues"] .vc-row[data-action="releaseAll"] .vc-row-action,
|
||
[data-module="vista-cues"] .vc-row[data-action="cleared"] .vc-row-action { color: var(--muted); }
|
||
[data-module="vista-cues"] .vc-row[data-action="pause"] .vc-row-action { color: var(--warn); }
|
||
[data-module="vista-cues"] .vc-row[data-action="flash"] .vc-row-action { color: var(--text); }
|
||
[data-module="vista-cues"] .vc-row.is-unmapped { opacity: 0.6; }
|
||
[data-module="vista-cues"] .vc-row.is-unmapped .vc-row-action { color: var(--muted); font-weight: 500; }
|
||
|
||
@container (max-width: 300px) {
|
||
[data-module="vista-cues"] .vc-row { grid-template-columns: 5.2em minmax(0, 1fr); }
|
||
[data-module="vista-cues"] .vc-row-time,
|
||
[data-module="vista-cues"] .vc-row-source { display: none; }
|
||
}
|
||
@container (max-height: 140px) {
|
||
[data-module="vista-cues"] .vc-recent,
|
||
[data-module="vista-cues"] .vc-active { display: none; }
|
||
}
|
||
|
||
/* ── senders ── */
|
||
|
||
[data-module="vista-cues"] .vc-sources {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.9em;
|
||
margin-top: auto;
|
||
font-size: calc(clamp(9px, 3.4cqmin, 13px) * var(--vc-scale));
|
||
color: var(--muted);
|
||
}
|
||
[data-module="vista-cues"] .vc-src { display: inline-flex; align-items: center; gap: 0.4em; }
|
||
[data-module="vista-cues"] .vc-dot {
|
||
width: 0.65em;
|
||
height: 0.65em;
|
||
border-radius: 50%;
|
||
background: var(--danger);
|
||
}
|
||
[data-module="vista-cues"] .vc-src.is-on { color: var(--text); }
|
||
[data-module="vista-cues"] .vc-src.is-on .vc-dot { background: var(--accent); }
|
||
[data-module="vista-cues"] .vc-src.is-off-network { color: var(--danger); }
|
||
[data-module="vista-cues"] .vc-src.is-off-network .vc-dot { background: var(--danger); }
|
||
@container (max-height: 140px) {
|
||
[data-module="vista-cues"] .vc-sources { display: none; }
|
||
}
|