Waters ChurchandClaude Opus 5
705e40d42a
Three things, the first on its own. **Auto-scroll moves the tile, not the board.** `scrollIntoView` walks up and scrolls every ancestor that can scroll, so bringing the current item into view dragged the whole dashboard with it whenever the board was taller than the window. The list's own `scrollTop` is moved instead, measured from rectangles because the rows' offset parent is the tile rather than the list. **The current item fills as its song plays.** When an AbleSet module is installed, configured and playing a song that IS the item on screen, that item's background fills left to right with the song. The song is tied to a plan item by the same name matching the live ProPresenter document already uses, so a bar can never quietly fill the sermon while the band rehearses something else. **Its sections slide past, bottom right of that item.** Every section of the song as a strip, the played ones dimmed, the one playing filling in turn and kept centred — by moving that strip's own `scrollLeft`, for the same reason as above. The chips are rebuilt only when the song changes; moving to the next section just moves the classes, so the strip keeps its place. Both are switches in the tile's gear, **Song progress** and **Song sections**, and both draw nothing at all unless there is an AbleSet module to follow: the server reports `available: false` for no module, a disabled one, or one with no host, and re-checks every 15 s so installing AbleSet later lights it up without a restart. The server follows the AbleSet module over loopback exactly as it follows ProPresenter's, and republishes a small slice — song, sections, playhead in beats with a stamp — as its own `ableset` SSE event. Its own event because it moves five times a second and must never drag the plan (items, teams) onto the wire with it; the tile carries the playhead forward from the tempo between packets. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
660 lines
20 KiB
CSS
660 lines
20 KiB
CSS
/* PCO Plan module — scoped to its tiles, shell variables only (plus the
|
|
admin-chosen --pp-key color for song keys). Everything scales from
|
|
--pp-size (set from the tile's text-size setting). */
|
|
|
|
[data-module="pco-plan"] .pp-wrap {
|
|
--pp-size: 14px;
|
|
--pp-key: #4ea1ff;
|
|
--pp-header: var(--accent);
|
|
--pp-current: var(--accent);
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-size: var(--pp-size);
|
|
color: var(--text);
|
|
}
|
|
|
|
/* ── top bar ── */
|
|
|
|
[data-module="pco-plan"] .pp-head {
|
|
flex: none;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 1em;
|
|
padding: 0.6em 0.85em 0.5em;
|
|
border-bottom: 1px solid var(--border);
|
|
background: color-mix(in srgb, var(--accent) 6%, transparent);
|
|
}
|
|
[data-module="pco-plan"] .pp-head[hidden] { display: none; }
|
|
|
|
[data-module="pco-plan"] .pp-plan { flex: 1; min-width: 0; }
|
|
|
|
[data-module="pco-plan"] .pp-plan-title {
|
|
font-size: 1.1em;
|
|
font-weight: 700;
|
|
line-height: 1.25;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
[data-module="pco-plan"] .pp-plan-sub {
|
|
margin-top: 0.15em;
|
|
font-size: 0.82em;
|
|
color: var(--muted);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
[data-module="pco-plan"] .pp-plan-sub[hidden] { display: none; }
|
|
|
|
[data-module="pco-plan"] .pp-clock {
|
|
flex: none;
|
|
text-align: right;
|
|
}
|
|
[data-module="pco-plan"] .pp-clock-label {
|
|
font-size: 0.7em;
|
|
font-weight: 700;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: var(--muted);
|
|
white-space: nowrap;
|
|
}
|
|
[data-module="pco-plan"] .pp-clock-value {
|
|
font-size: 1.25em;
|
|
font-weight: 700;
|
|
font-variant-numeric: tabular-nums;
|
|
line-height: 1.1;
|
|
}
|
|
[data-module="pco-plan"] .pp-clock-value:empty,
|
|
[data-module="pco-plan"] .pp-clock-label:empty { display: none; }
|
|
[data-module="pco-plan"] .pp-clock-value.is-behind { color: var(--warn); }
|
|
[data-module="pco-plan"] .pp-clock-value.is-ahead { color: var(--accent); }
|
|
|
|
/* ── list ── */
|
|
|
|
[data-module="pco-plan"] .pp-list {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
padding: 0.35em 0.5em 0.6em;
|
|
overscroll-behavior: contain;
|
|
scroll-padding: 2em;
|
|
}
|
|
|
|
[data-module="pco-plan"] .pp-row {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.6em;
|
|
padding: 0.45em 0.5em;
|
|
border-radius: 0.5em;
|
|
border-left: 3px solid transparent;
|
|
transition: background 0.2s ease, opacity 0.3s ease;
|
|
}
|
|
[data-module="pco-plan"] .pp-row + .pp-row { margin-top: 0.15em; }
|
|
[data-module="pco-plan"] .pp-row:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
|
|
|
|
/* Optional background tint per item type (admin "Background color per item type"). */
|
|
[data-module="pco-plan"] .tint-types .pp-row.is-song { background: color-mix(in srgb, var(--accent) 9%, transparent); }
|
|
[data-module="pco-plan"] .tint-types .pp-row.is-media { background: color-mix(in srgb, var(--warn) 10%, transparent); }
|
|
[data-module="pco-plan"] .tint-types .pp-row.is-item { background: color-mix(in srgb, var(--text) 5%, transparent); }
|
|
[data-module="pco-plan"] .tint-types .pp-row.is-song:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
|
|
[data-module="pco-plan"] .tint-types .pp-row.is-media:hover { background: color-mix(in srgb, var(--warn) 15%, transparent); }
|
|
[data-module="pco-plan"] .tint-types .pp-row.is-item:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
|
|
|
|
/* Section headers: a band that runs edge to edge across the tile (negative
|
|
margins cancel the list padding) so a new part of the service is
|
|
unmistakable — tile-chosen color, solid or fading to the right. The
|
|
left padding keeps the text aligned with the other rows' text. */
|
|
[data-module="pco-plan"] .pp-row.is-header {
|
|
margin: 0.9em -0.5em 0;
|
|
padding: 0.5em 1em 0.45em calc(1em + 3px);
|
|
align-items: center;
|
|
border-left: none;
|
|
border-radius: 0;
|
|
background: color-mix(in srgb, var(--pp-header) 22%, transparent);
|
|
}
|
|
[data-module="pco-plan"] .pp-row.is-header:first-child { margin-top: 0; }
|
|
[data-module="pco-plan"] .pp-row + .pp-row.is-header { margin-top: 0.9em; }
|
|
[data-module="pco-plan"] .pp-row.is-header:hover { background: color-mix(in srgb, var(--pp-header) 28%, transparent); }
|
|
[data-module="pco-plan"] .header-gradient .pp-row.is-header {
|
|
background: linear-gradient(90deg, color-mix(in srgb, var(--pp-header) 30%, transparent), color-mix(in srgb, var(--pp-header) 6%, transparent) 70%, transparent);
|
|
}
|
|
[data-module="pco-plan"] .header-gradient .pp-row.is-header:hover {
|
|
background: linear-gradient(90deg, color-mix(in srgb, var(--pp-header) 36%, transparent), color-mix(in srgb, var(--pp-header) 8%, transparent) 70%, transparent);
|
|
}
|
|
[data-module="pco-plan"] .pp-row.is-header .pp-title {
|
|
font-size: 0.85em;
|
|
font-weight: 800;
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
color: var(--text);
|
|
}
|
|
[data-module="pco-plan"] .pp-row.is-header .pp-col-time,
|
|
[data-module="pco-plan"] .pp-row.is-header .pp-col-num,
|
|
[data-module="pco-plan"] .pp-row.is-header .pp-col-len { visibility: hidden; }
|
|
|
|
[data-module="pco-plan"] .pp-row.is-pre .pp-title,
|
|
[data-module="pco-plan"] .pp-row.is-post .pp-title { color: color-mix(in srgb, var(--text) 75%, var(--muted)); }
|
|
|
|
[data-module="pco-plan"] .pp-row.is-done { opacity: 0.45; }
|
|
[data-module="pco-plan"] .pp-row.is-done:hover { opacity: 0.8; }
|
|
|
|
[data-module="pco-plan"] .pp-row.is-current {
|
|
border-left-color: var(--pp-current);
|
|
background: color-mix(in srgb, var(--pp-current) 16%, transparent);
|
|
opacity: 1;
|
|
}
|
|
|
|
[data-module="pco-plan"] .pp-col-num {
|
|
flex: none;
|
|
width: 1.6em;
|
|
padding-top: 0.1em;
|
|
font-size: 0.8em;
|
|
font-weight: 700;
|
|
font-variant-numeric: tabular-nums;
|
|
color: var(--muted);
|
|
text-align: right;
|
|
}
|
|
|
|
[data-module="pco-plan"] .pp-col-time {
|
|
flex: none;
|
|
width: 4.6em;
|
|
padding-top: 0.1em;
|
|
font-size: 0.85em;
|
|
font-variant-numeric: tabular-nums;
|
|
color: var(--muted);
|
|
text-align: right;
|
|
white-space: nowrap;
|
|
}
|
|
[data-module="pco-plan"] .pp-row.is-current .pp-col-time { color: var(--pp-current); font-weight: 700; }
|
|
|
|
[data-module="pco-plan"] .pp-col-main { flex: 1; min-width: 0; }
|
|
|
|
[data-module="pco-plan"] .pp-title-line {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 0.2em 0.55em;
|
|
min-width: 0;
|
|
}
|
|
|
|
[data-module="pco-plan"] .pp-title {
|
|
font-weight: 600;
|
|
line-height: 1.3;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
/* The song key: right after the title, larger and in the admin-chosen
|
|
color (blue by default) so the band can read it from across the booth. */
|
|
[data-module="pco-plan"] .pp-key {
|
|
font-size: 1.15em;
|
|
font-weight: 800;
|
|
line-height: 1.15;
|
|
letter-spacing: 0.02em;
|
|
padding: 0.05em 0.5em;
|
|
border-radius: 0.4em;
|
|
color: var(--pp-key);
|
|
background: color-mix(in srgb, var(--pp-key) 16%, transparent);
|
|
border: 1px solid color-mix(in srgb, var(--pp-key) 45%, transparent);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
[data-module="pco-plan"] .pp-now-tag {
|
|
display: none;
|
|
padding: 0.05em 0.45em;
|
|
border-radius: 999px;
|
|
background: var(--pp-current);
|
|
color: var(--bg);
|
|
font-size: 0.65em;
|
|
font-weight: 800;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
}
|
|
[data-module="pco-plan"] .pp-row.is-current .pp-now-tag { display: inline-block; }
|
|
|
|
[data-module="pco-plan"] .pp-badge,
|
|
[data-module="pco-plan"] .pp-arr {
|
|
font-size: 0.7em;
|
|
font-weight: 700;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
padding: 0.1em 0.45em;
|
|
border-radius: 0.35em;
|
|
white-space: nowrap;
|
|
}
|
|
[data-module="pco-plan"] .pp-badge {
|
|
color: var(--muted);
|
|
border: 1px solid var(--border);
|
|
}
|
|
[data-module="pco-plan"] .pp-badge.is-song { color: color-mix(in srgb, var(--accent) 80%, var(--text)); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
|
|
[data-module="pco-plan"] .pp-badge.is-media { color: color-mix(in srgb, var(--warn) 85%, var(--text)); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
|
|
[data-module="pco-plan"] .pp-arr { color: var(--muted); text-transform: none; letter-spacing: 0; font-weight: 600; }
|
|
|
|
[data-module="pco-plan"] .pp-author {
|
|
margin-top: 0.1em;
|
|
font-size: 0.78em;
|
|
color: var(--muted);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
[data-module="pco-plan"] .pp-desc {
|
|
margin-top: 0.15em;
|
|
font-size: 0.86em;
|
|
line-height: 1.35;
|
|
color: color-mix(in srgb, var(--text) 80%, var(--muted));
|
|
white-space: pre-line;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
[data-module="pco-plan"] .pp-notes {
|
|
margin-top: 0.3em;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.2em;
|
|
}
|
|
[data-module="pco-plan"] .pp-note {
|
|
font-size: 0.82em;
|
|
line-height: 1.35;
|
|
padding: 0.25em 0.5em;
|
|
border-radius: 0.35em;
|
|
background: color-mix(in srgb, var(--warn) 9%, transparent);
|
|
border-left: 2px solid color-mix(in srgb, var(--warn) 60%, transparent);
|
|
color: var(--text);
|
|
white-space: pre-line;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
[data-module="pco-plan"] .pp-note-cat {
|
|
display: inline-block;
|
|
margin-right: 0.5em;
|
|
font-size: 0.8em;
|
|
font-weight: 800;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: var(--warn);
|
|
}
|
|
|
|
[data-module="pco-plan"] .pp-col-len {
|
|
flex: none;
|
|
min-width: 3.2em;
|
|
text-align: right;
|
|
font-variant-numeric: tabular-nums;
|
|
white-space: nowrap;
|
|
}
|
|
[data-module="pco-plan"] .pp-len {
|
|
font-size: 0.85em;
|
|
color: var(--muted);
|
|
padding-top: 0.1em;
|
|
}
|
|
[data-module="pco-plan"] .pp-elapsed {
|
|
font-size: 0.9em;
|
|
font-weight: 700;
|
|
color: var(--text);
|
|
opacity: 0.8;
|
|
}
|
|
[data-module="pco-plan"] .pp-elapsed:empty { display: none; }
|
|
[data-module="pco-plan"] .pp-elapsed.is-running { color: var(--accent); opacity: 1; }
|
|
[data-module="pco-plan"] .pp-elapsed.is-over { color: var(--warn); opacity: 1; }
|
|
[data-module="pco-plan"] .pp-elapsed.is-over-hard { color: var(--danger); opacity: 1; }
|
|
|
|
/* ── empty / degraded states ── */
|
|
|
|
[data-module="pco-plan"] .pp-empty {
|
|
padding: 12% 1.2em 1em;
|
|
text-align: center;
|
|
color: var(--muted);
|
|
}
|
|
[data-module="pco-plan"] .pp-empty-title {
|
|
font-size: 1.1em;
|
|
font-weight: 700;
|
|
color: var(--text);
|
|
}
|
|
[data-module="pco-plan"] .pp-empty-hint {
|
|
margin-top: 0.4em;
|
|
font-size: 0.9em;
|
|
line-height: 1.4;
|
|
}
|
|
[data-module="pco-plan"] .pp-empty-link {
|
|
display: inline-block;
|
|
margin-top: 0.9em;
|
|
padding: 0.35em 0.9em;
|
|
border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
|
|
border-radius: 999px;
|
|
color: var(--accent);
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
}
|
|
[data-module="pco-plan"] .pp-empty-link:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
|
|
|
|
[data-module="pco-plan"] .pp-wrap.is-offline .pp-head { border-bottom-color: color-mix(in srgb, var(--danger) 50%, transparent); }
|
|
[data-module="pco-plan"] .pp-wrap.is-offline .pp-list { opacity: 0.6; }
|
|
|
|
/* ── footer: ProPresenter match line ── */
|
|
|
|
[data-module="pco-plan"] .pp-foot {
|
|
flex: none;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5em;
|
|
padding: 0.4em 0.85em;
|
|
border-top: 1px solid var(--border);
|
|
font-size: 0.8em;
|
|
font-weight: 600;
|
|
color: var(--muted);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
[data-module="pco-plan"] .pp-foot[hidden] { display: none; }
|
|
[data-module="pco-plan"] .pp-foot::before {
|
|
content: '';
|
|
flex: none;
|
|
width: 0.55em;
|
|
height: 0.55em;
|
|
border-radius: 999px;
|
|
background: var(--border);
|
|
}
|
|
[data-module="pco-plan"] .pp-foot.is-live { color: var(--text); }
|
|
[data-module="pco-plan"] .pp-foot.is-live::before { background: var(--accent); box-shadow: 0 0 0 0.2em color-mix(in srgb, var(--accent) 18%, transparent); }
|
|
[data-module="pco-plan"] .pp-foot.is-unmatched { color: var(--warn); }
|
|
[data-module="pco-plan"] .pp-foot.is-unmatched::before { background: var(--warn); }
|
|
[data-module="pco-plan"] .pp-foot.is-down { color: var(--danger); }
|
|
[data-module="pco-plan"] .pp-foot.is-down::before { background: var(--danger); }
|
|
|
|
/* ── the Teams tile ───────────────────────────────────────────────────
|
|
Who is scheduled, by team. Sizes hang off --pp-size like the Plan tile;
|
|
colours come from the tile's own settings (--tm-team per section,
|
|
--tm-status per person) over the shell's palette. */
|
|
|
|
[data-module="pco-plan"] .tm-wrap {
|
|
--pp-size: 14px;
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-size: var(--pp-size);
|
|
color: var(--text);
|
|
}
|
|
|
|
[data-module="pco-plan"] .tm-head {
|
|
flex: none;
|
|
padding: 0.6em 0.85em 0.5em;
|
|
border-bottom: 1px solid var(--border);
|
|
background: color-mix(in srgb, var(--accent) 6%, transparent);
|
|
}
|
|
[data-module="pco-plan"] .tm-head[hidden] { display: none; }
|
|
|
|
[data-module="pco-plan"] .tm-title {
|
|
font-size: 1.1em;
|
|
font-weight: 700;
|
|
line-height: 1.25;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
[data-module="pco-plan"] .tm-sub {
|
|
margin-top: 0.15em;
|
|
font-size: 0.82em;
|
|
color: var(--muted);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
[data-module="pco-plan"] .tm-sub[hidden] { display: none; }
|
|
|
|
[data-module="pco-plan"] .tm-body {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
padding: 0 0 0.6em;
|
|
overscroll-behavior: contain;
|
|
}
|
|
|
|
/* ── a team ── */
|
|
|
|
[data-module="pco-plan"] .tm-team { --tm-team: var(--accent); }
|
|
|
|
/* The header band runs edge to edge, like the Plan tile's section headers. */
|
|
[data-module="pco-plan"] .tm-team-head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.6em;
|
|
padding: 0.45em 0.9em 0.4em;
|
|
margin-top: 0.7em;
|
|
background: color-mix(in srgb, var(--tm-team) 22%, transparent);
|
|
}
|
|
[data-module="pco-plan"] .tm-team:first-child .tm-team-head { margin-top: 0; }
|
|
[data-module="pco-plan"] .header-gradient .tm-team-head {
|
|
background: linear-gradient(90deg,
|
|
color-mix(in srgb, var(--tm-team) 30%, transparent),
|
|
color-mix(in srgb, var(--tm-team) 6%, transparent) 70%,
|
|
transparent);
|
|
}
|
|
|
|
[data-module="pco-plan"] .tm-team-name {
|
|
flex: 1;
|
|
min-width: 0;
|
|
font-size: 0.85em;
|
|
font-weight: 800;
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
color: var(--text);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
[data-module="pco-plan"] .tm-team-count {
|
|
flex: none;
|
|
font-size: 0.78em;
|
|
font-weight: 700;
|
|
font-variant-numeric: tabular-nums;
|
|
color: var(--muted);
|
|
}
|
|
|
|
[data-module="pco-plan"] .tm-people {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(11em, 1fr));
|
|
gap: 0.15em 0.5em;
|
|
padding: 0.35em 0.6em 0.2em;
|
|
}
|
|
[data-module="pco-plan"] .tm-people.is-fixed-cols {
|
|
grid-template-columns: repeat(var(--tm-cols, 1), minmax(0, 1fr));
|
|
}
|
|
[data-module="pco-plan"] .tm-people.is-sub { padding-top: 0.1em; padding-bottom: 0.1em; }
|
|
|
|
/* Grouped by position: headings span, each position's people form their own grid. */
|
|
[data-module="pco-plan"] .tm-groups { padding-bottom: 0.2em; }
|
|
|
|
[data-module="pco-plan"] .tm-position-head {
|
|
padding: 0.4em 0.9em 0;
|
|
font-size: 0.72em;
|
|
font-weight: 700;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: var(--muted);
|
|
}
|
|
|
|
[data-module="pco-plan"] .tm-team-empty {
|
|
grid-column: 1 / -1;
|
|
padding: 0.2em 0.3em 0.4em;
|
|
font-size: 0.85em;
|
|
font-style: italic;
|
|
color: var(--muted);
|
|
}
|
|
|
|
/* ── one person ── */
|
|
|
|
[data-module="pco-plan"] .tm-person {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.55em;
|
|
min-width: 0;
|
|
padding: 0.3em 0.4em;
|
|
border-radius: 0.45em;
|
|
}
|
|
[data-module="pco-plan"] .tm-person:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
|
|
[data-module="pco-plan"] .tint-rows .tm-person { background: color-mix(in srgb, var(--tm-team) 8%, transparent); }
|
|
[data-module="pco-plan"] .tint-rows .tm-person:hover { background: color-mix(in srgb, var(--tm-team) 16%, transparent); }
|
|
[data-module="pco-plan"] .tm-person.is-declined { opacity: 0.55; }
|
|
|
|
[data-module="pco-plan"] .tm-avatar {
|
|
position: relative;
|
|
flex: none;
|
|
width: 2.1em;
|
|
height: 2.1em;
|
|
border-radius: 999px;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: color-mix(in srgb, var(--tm-team) 28%, var(--panel));
|
|
color: var(--text);
|
|
font-size: 0.78em;
|
|
font-weight: 800;
|
|
letter-spacing: 0.02em;
|
|
user-select: none;
|
|
}
|
|
/* The photo covers the initials; if it fails to load the script drops it. */
|
|
[data-module="pco-plan"] .tm-avatar img {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
background: var(--panel);
|
|
}
|
|
|
|
[data-module="pco-plan"] .tm-person-main { flex: 1; min-width: 0; }
|
|
|
|
[data-module="pco-plan"] .tm-name {
|
|
font-weight: 600;
|
|
line-height: 1.25;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
[data-module="pco-plan"] .tm-person.is-declined .tm-name { text-decoration: line-through; }
|
|
|
|
[data-module="pco-plan"] .tm-position {
|
|
font-size: 0.8em;
|
|
color: var(--muted);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
[data-module="pco-plan"] .tm-note {
|
|
margin-top: 0.1em;
|
|
font-size: 0.78em;
|
|
line-height: 1.3;
|
|
color: color-mix(in srgb, var(--text) 75%, var(--muted));
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
[data-module="pco-plan"] .tm-status {
|
|
flex: none;
|
|
width: 0.55em;
|
|
height: 0.55em;
|
|
border-radius: 999px;
|
|
background: var(--tm-status, var(--muted));
|
|
box-shadow: 0 0 0 0.18em color-mix(in srgb, var(--tm-status, var(--muted)) 18%, transparent);
|
|
}
|
|
|
|
/* ── empty / degraded ── */
|
|
|
|
[data-module="pco-plan"] .tm-empty {
|
|
padding: 12% 1.2em 1em;
|
|
text-align: center;
|
|
color: var(--muted);
|
|
}
|
|
[data-module="pco-plan"] .tm-empty-title { font-size: 1.1em; font-weight: 700; color: var(--text); }
|
|
[data-module="pco-plan"] .tm-empty-hint { margin-top: 0.4em; font-size: 0.9em; line-height: 1.4; }
|
|
[data-module="pco-plan"] .tm-empty-link {
|
|
display: inline-block;
|
|
margin-top: 0.9em;
|
|
padding: 0.35em 0.9em;
|
|
border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
|
|
border-radius: 999px;
|
|
color: var(--accent);
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
}
|
|
[data-module="pco-plan"] .tm-empty-link:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
|
|
|
|
[data-module="pco-plan"] .tm-wrap.is-offline .tm-head { border-bottom-color: color-mix(in srgb, var(--danger) 50%, transparent); }
|
|
[data-module="pco-plan"] .tm-wrap.is-offline .tm-body { opacity: 0.6; }
|
|
|
|
|
|
/* ── AbleSet under the current item ───────────────────────────────────
|
|
Drawn only while an AbleSet module is configured, reachable, and playing
|
|
the song this item is. The fill is a layer behind the row's own content;
|
|
everything else in the row is lifted over it. */
|
|
|
|
[data-module="pco-plan"] .pp-fill {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 0;
|
|
width: 0;
|
|
border-radius: 0.5em 0 0 0.5em;
|
|
background: color-mix(in srgb, var(--pp-current) 26%, transparent);
|
|
/* Packets arrive about five times a second; the glide covers the gaps. */
|
|
transition: width 0.22s linear;
|
|
pointer-events: none;
|
|
}
|
|
[data-module="pco-plan"] .pp-row > *:not(.pp-fill) { position: relative; z-index: 1; }
|
|
|
|
/* The sections strip, bottom right of the current item. */
|
|
[data-module="pco-plan"] .pp-abs-sections {
|
|
display: flex;
|
|
gap: 0.3em;
|
|
/* Bottom right of the item: hug the content and sit against the right edge
|
|
until there are more sections than fit, when it fills the width and
|
|
scrolls instead. */
|
|
width: fit-content;
|
|
max-width: 100%;
|
|
margin-top: 0.35em;
|
|
margin-left: auto;
|
|
padding-bottom: 0.1em;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
scrollbar-width: none;
|
|
overscroll-behavior: contain;
|
|
-webkit-mask-image: linear-gradient(90deg, transparent, #000 1.2em, #000 calc(100% - 1.2em), transparent);
|
|
mask-image: linear-gradient(90deg, transparent, #000 1.2em, #000 calc(100% - 1.2em), transparent);
|
|
}
|
|
[data-module="pco-plan"] .pp-abs-sections::-webkit-scrollbar { display: none; }
|
|
|
|
[data-module="pco-plan"] .pp-abs-sec {
|
|
flex: none;
|
|
padding: 0.1em 0.5em;
|
|
border-radius: 999px;
|
|
border: 1px solid var(--border);
|
|
font-size: 0.72em;
|
|
font-weight: 700;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
white-space: nowrap;
|
|
color: var(--muted);
|
|
transition: color 0.2s ease, border-color 0.2s ease;
|
|
}
|
|
[data-module="pco-plan"] .pp-abs-sec.is-done { opacity: 0.45; }
|
|
|
|
/* The section now playing fills left to right as it goes, like the row. */
|
|
[data-module="pco-plan"] .pp-abs-sec.is-now {
|
|
color: var(--text);
|
|
border-color: color-mix(in srgb, var(--pp-current) 60%, transparent);
|
|
background:
|
|
linear-gradient(90deg,
|
|
color-mix(in srgb, var(--pp-current) 40%, transparent) var(--pp-sec-fill, 0%),
|
|
transparent var(--pp-sec-fill, 0%));
|
|
}
|