Waters ChurchandClaude Opus 5
c9d7c02bd6
**Song Key**, a third entry in the ＋ picker: the key of the item ProPresenter has live, as large as the tile allows. It is set as a note — B♭, F♯m rather than Bb and F#m — with the song's name and the next keyed song under it. All three are tile settings: the colour, the name and the next key. There is no new connection; it reads the same streamed state the Plan tile does. The accidental and the quality sit on the same line as the letter. Raising the accidental read as two stacked characters at tile sizes, which is worse than plain at a glance from the back of a room. When the ProPresenter feed that picks the item goes away the key stays up — the band still needs it — but faded, and the tile's dot says it is the last item rather than the current one. **The section chips** on the Plan tile's current item are rounded squares now, with the tinted ground and transparent border the AbleSet module gives its own section pills, so the two read as one family. The chip playing keeps its own ground so its progress fills against the chip rather than against the row behind it. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
740 lines
23 KiB
CSS
740 lines
23 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.14em 0.55em;
|
|
/* The same rounded square, tinted ground and transparent border the AbleSet
|
|
module gives its own section pills, so the two read as one family. */
|
|
border-radius: 0.35em;
|
|
border: 1px solid transparent;
|
|
background: color-mix(in srgb, var(--text) 8%, var(--panel));
|
|
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, background 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. */
|
|
/* The section playing keeps its own ground and fills across it, so the
|
|
progress reads against the chip rather than against the row behind it. */
|
|
[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) 45%, var(--panel)) var(--pp-sec-fill, 0%),
|
|
color-mix(in srgb, var(--text) 8%, var(--panel)) var(--pp-sec-fill, 0%));
|
|
}
|
|
|
|
/* ── the Song Key tile ────────────────────────────────────────────────
|
|
One value, as large as the tile allows. Sizes come from the tile itself
|
|
(container units), like the AbleSet module's single readouts, so a small
|
|
tile and a wall-sized one both read properly. */
|
|
|
|
[data-module="pco-plan"] .pk-wrap {
|
|
--pk-color: #4ea1ff;
|
|
position: absolute;
|
|
inset: 0;
|
|
container-type: size;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.2em;
|
|
padding: 4%;
|
|
text-align: center;
|
|
user-select: none;
|
|
}
|
|
|
|
[data-module="pco-plan"] .pk-key {
|
|
font-size: clamp(18px, 46cqmin, 260px);
|
|
font-weight: 800;
|
|
line-height: 1;
|
|
letter-spacing: -0.01em;
|
|
color: var(--muted);
|
|
white-space: nowrap;
|
|
}
|
|
[data-module="pco-plan"] .pk-wrap.has-key .pk-key { color: var(--pk-color); }
|
|
|
|
/* A key is a note, but it has to read as one word at a glance from the back
|
|
of a room: the accidental and the quality sit on the same line as the
|
|
letter, only smaller. Raising the accidental looked like two stacked
|
|
characters at tile sizes. */
|
|
[data-module="pco-plan"] .pk-accidental {
|
|
font-size: 0.68em;
|
|
margin-left: 0.01em;
|
|
}
|
|
[data-module="pco-plan"] .pk-quality {
|
|
font-size: 0.5em;
|
|
font-weight: 700;
|
|
margin-left: 0.05em;
|
|
opacity: 0.85;
|
|
}
|
|
|
|
[data-module="pco-plan"] .pk-name {
|
|
max-width: 100%;
|
|
font-size: clamp(9px, 9cqmin, 30px);
|
|
font-weight: 600;
|
|
line-height: 1.2;
|
|
color: var(--text);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
[data-module="pco-plan"] .pk-name[hidden] { display: none; }
|
|
|
|
[data-module="pco-plan"] .pk-next {
|
|
max-width: 100%;
|
|
font-size: clamp(8px, 6.5cqmin, 20px);
|
|
font-weight: 600;
|
|
color: var(--muted);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
[data-module="pco-plan"] .pk-next[hidden] { display: none; }
|
|
|
|
[data-module="pco-plan"] .pk-wrap.is-offline { opacity: 0.6; }
|
|
/* The feed that picks the item is gone: the key stays readable, but faded,
|
|
so nobody trusts it as current without looking at the status dot. */
|
|
[data-module="pco-plan"] .pk-wrap.is-stale .pk-key { opacity: 0.55; }
|
|
[data-module="pco-plan"] .pk-wrap.is-stale .pk-name,
|
|
[data-module="pco-plan"] .pk-wrap.is-stale .pk-next { opacity: 0.6; }
|