Waters ChurchandClaude Opus 5
d93162b4c4
The chips looked top-heavy, and measuring said so: the capitals sat 5.12px below the top of the chip and 4.22px above the bottom. Uppercase text has no descenders, so the font's descent allowance below the baseline is empty space the letters never use, while the gap between the ascender line and the cap height sits above them. The padding is now a touch shallower on top and deeper below, which puts the letters themselves in the middle: 4.67px above, 4.68px below. In em, so it holds wherever the tile's text size is set. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
745 lines
23 KiB
CSS
745 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;
|
|
/* 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; }
|