Waters ChurchandClaude Opus 5
ece2c0a2c3
Re-measuring the badges properly changed the answer. The earlier reading
that said the type badge sat 0.52px high was measuring the wrong glyphs: it
fed the canvas the element's raw text ("Song", "Media") while the page
renders text-transform: uppercase ("SONG", "MEDIA"), and a lowercase 'd' or
'g' has an ascender and a descender the capitals never draw.
Measured against the text as actually rendered, the type badge is within
0.10px of centred and wants nothing. The NOW tag was the one off, by 0.59px,
the same way the section chips were. So: the badge padding added in the last
commit is reverted, and the NOW tag gets the correction instead.
That line now reads, in px off centre: NOW 0.01, type badge 0.10, key badge
0.16, section chip -0.01.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
747 lines
24 KiB
CSS
747 lines
24 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;
|
|
/* Optically centred like the section chips: uppercase has no descenders,
|
|
so the capitals sat 0.59px low in the pill. */
|
|
padding: 0.018em 0.45em 0.082em;
|
|
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;
|
|
/* Uppercase text has no descenders, so the font's descent allowance below
|
|
the baseline leaves the caps sitting high in the box — measured at 0.9px
|
|
too much headroom. The padding is a touch shallower on top and deeper
|
|
below to centre the letters themselves; in em, so it holds at any text
|
|
size. */
|
|
padding: 0.095em 0.55em 0.185em;
|
|
/* 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; }
|