christianandClaude Opus 5.5
e59629694e
Photos. Sync fell back to the Planning Center headshot whenever two
library photos matched a person equally ("Mike" and "mike"), and had no
way to know "Rose" is Rosaliz — so the booth dragged those in by hand
every week. Now:
- Several equally good library photos is not a reason to use PCO's; the
first of them is used. PCO's headshot is only for someone with no photo.
- Dropping a library photo onto the synced person already in that spot
(same name, same first name, or a nickname sharing its first three
letters) makes it their photo: they keep their Planning Center name and
spot, and it is remembered (settings.json photoFor) for every later
Sync. Photos already dragged in by hand for this plan are learned the
same way on the next Sync.
- A synced person's library photo is read live, so replacing that photo
updates the board without a re-sync.
Dragging. The editor was one scrolling column, so a photo found far down
the list had to be carried back up to its spot, and every drop redrew the
editor back to the top. The spots are now pinned in their own pane above
the photos, each pane auto-scrolls when a drag nears its edge, both keep
their scroll position through redraws, and a search box filters the
photos by name.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
264 lines
11 KiB
CSS
264 lines
11 KiB
CSS
/* Band Lineup — scoped to the tile, themed only through the shell's variables. */
|
|
|
|
[data-module="band-lineup"] .bl-board {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
display: grid;
|
|
grid-template-columns: repeat(var(--bl-cols, 7), minmax(0, 1fr));
|
|
grid-template-rows: repeat(var(--bl-rows, 2), minmax(0, 1fr));
|
|
gap: 6px;
|
|
padding: 6px;
|
|
}
|
|
|
|
[data-module="band-lineup"] .bl-message {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
color: var(--muted);
|
|
padding: 16px;
|
|
font-size: 0.95em;
|
|
}
|
|
|
|
[data-module="band-lineup"] .bl-slot {
|
|
min-width: 0;
|
|
min-height: 0;
|
|
}
|
|
|
|
[data-module="band-lineup"] .bl-tile {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
background: var(--panel);
|
|
border: 1px solid var(--border);
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
[data-module="band-lineup"] .bl-photo {
|
|
position: relative;
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
background: color-mix(in srgb, var(--bg) 70%, black);
|
|
}
|
|
|
|
[data-module="band-lineup"] .bl-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
object-position: center top;
|
|
display: block;
|
|
transition: transform 0.12s ease-out;
|
|
will-change: transform;
|
|
}
|
|
|
|
[data-module="band-lineup"] .bl-initials {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 2.4em;
|
|
font-weight: 800;
|
|
color: color-mix(in srgb, var(--muted) 70%, transparent);
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
[data-module="band-lineup"] .bl-name {
|
|
position: absolute;
|
|
top: 6px;
|
|
left: 6px;
|
|
right: 6px;
|
|
max-width: calc(100% - 12px);
|
|
padding: 3px 7px;
|
|
border-radius: 6px;
|
|
background: color-mix(in srgb, var(--bg) 82%, transparent);
|
|
color: var(--text);
|
|
font-size: 0.74em;
|
|
font-weight: 700;
|
|
line-height: 1.12;
|
|
z-index: 5;
|
|
/* Show the whole name — wrap onto more lines rather than clipping with an ellipsis. */
|
|
white-space: normal;
|
|
overflow-wrap: break-word;
|
|
word-break: break-word;
|
|
hyphens: auto;
|
|
}
|
|
|
|
[data-module="band-lineup"] .bl-label {
|
|
padding: 5px 6px;
|
|
font-size: 0.72em;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
color: var(--text);
|
|
background: color-mix(in srgb, var(--bg) 60%, transparent);
|
|
border-top: 1px solid var(--border);
|
|
min-height: 1.6em;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
word-break: break-word;
|
|
}
|
|
|
|
[data-module="band-lineup"] .bl-empty {
|
|
border-style: dashed;
|
|
opacity: 0.55;
|
|
}
|
|
[data-module="band-lineup"] .bl-empty .bl-label {
|
|
background: transparent;
|
|
border-top: none;
|
|
margin: auto;
|
|
color: var(--muted);
|
|
}
|
|
|
|
/* ---- Birthday effects (confetti canvas + gold glow ring) ---- */
|
|
[data-module="band-lineup"] .bl-confetti {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 3;
|
|
pointer-events: none;
|
|
}
|
|
[data-module="band-lineup"] .bl-birthday-subtle {
|
|
animation: bl-glow-subtle 3.4s ease-in-out infinite;
|
|
}
|
|
[data-module="band-lineup"] .bl-birthday-full {
|
|
animation: bl-glow-full 2.2s ease-in-out infinite;
|
|
}
|
|
@keyframes bl-glow-subtle {
|
|
0%, 100% { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 14px color-mix(in srgb, var(--accent) 20%, transparent); }
|
|
50% { box-shadow: inset 0 0 0 2px var(--accent), 0 0 20px color-mix(in srgb, var(--accent) 34%, transparent); }
|
|
}
|
|
@keyframes bl-glow-full {
|
|
0%, 100% { box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--accent) 80%, transparent), 0 0 20px color-mix(in srgb, var(--accent) 42%, transparent); }
|
|
50% { box-shadow: inset 0 0 0 3px var(--accent), 0 0 34px color-mix(in srgb, var(--accent) 66%, transparent); }
|
|
}
|
|
|
|
/* ---- Editor (Edit button): board drop-targets + uploaded-photo library ---- */
|
|
[data-module="band-lineup"] .bl-btn {
|
|
border: 1px solid var(--border);
|
|
background: var(--panel);
|
|
color: var(--text);
|
|
border-radius: 6px;
|
|
padding: 5px 11px;
|
|
font: inherit;
|
|
font-size: 0.82em;
|
|
cursor: pointer;
|
|
}
|
|
[data-module="band-lineup"] .bl-btn.primary { background: var(--accent); color: var(--accent-text); border-color: transparent; }
|
|
[data-module="band-lineup"] .bl-btn:hover { border-color: var(--accent); }
|
|
|
|
[data-module="band-lineup"] .bl-editor {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 20;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--bg);
|
|
}
|
|
[data-module="band-lineup"] .bl-editor-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 10px;
|
|
border-bottom: 1px solid var(--border);
|
|
flex: 0 0 auto;
|
|
}
|
|
[data-module="band-lineup"] .bl-editor-bar b { color: var(--text); }
|
|
[data-module="band-lineup"] .bl-editor-spacer { flex: 1; }
|
|
[data-module="band-lineup"] .bl-folder { display: flex; align-items: center; gap: 6px; min-width: 0; }
|
|
[data-module="band-lineup"] .bl-folder-path { font-size: 0.72em; color: var(--muted); max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
[data-module="band-lineup"] .bl-editor-body { flex: 1; min-height: 0; overflow: auto; padding: 10px; }
|
|
|
|
[data-module="band-lineup"] .bl-edit-board {
|
|
display: grid;
|
|
grid-template-columns: repeat(var(--bl-cols, 7), minmax(0, 1fr));
|
|
gap: 6px;
|
|
margin-bottom: 12px;
|
|
}
|
|
[data-module="band-lineup"] .bl-edit-slot {
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
background: var(--panel);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
[data-module="band-lineup"] .bl-edit-slot.bl-drop-over { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
|
|
[data-module="band-lineup"] .bl-edit-photo { position: relative; aspect-ratio: 3 / 4; background: color-mix(in srgb, var(--bg) 70%, black); overflow: hidden; }
|
|
[data-module="band-lineup"] .bl-edit-photo .bl-img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
|
|
[data-module="band-lineup"] .bl-edit-drop {
|
|
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
|
|
color: var(--muted); font-size: 1.6em; border: 1px dashed var(--border);
|
|
}
|
|
[data-module="band-lineup"] .bl-edit-namerow { display: flex; align-items: center; gap: 2px; padding: 2px; }
|
|
[data-module="band-lineup"] .bl-edit-name {
|
|
flex: 1; min-width: 0; text-align: left; background: transparent; border: 0;
|
|
color: var(--text); font: inherit; font-size: 0.72em; font-weight: 600; padding: 3px 4px;
|
|
cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 4px;
|
|
}
|
|
[data-module="band-lineup"] .bl-edit-name:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
|
|
[data-module="band-lineup"] .bl-edit-clear {
|
|
flex: 0 0 auto; width: 20px; height: 20px; border: 0; border-radius: 4px;
|
|
background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); cursor: pointer; font-size: 0.9em; line-height: 1;
|
|
}
|
|
[data-module="band-lineup"] .bl-edit-label { padding: 3px 5px 5px; font-size: 0.64em; color: var(--muted); text-align: center; border-top: 1px solid var(--border); word-break: break-word; }
|
|
|
|
[data-module="band-lineup"] .bl-library {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
|
|
gap: 6px;
|
|
border-top: 1px solid var(--border);
|
|
padding-top: 10px;
|
|
}
|
|
[data-module="band-lineup"] .bl-lib-empty { grid-column: 1 / -1; color: var(--muted); font-size: 0.85em; padding: 10px 2px; }
|
|
[data-module="band-lineup"] .bl-lib-item {
|
|
position: relative; border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
|
|
background: var(--panel); cursor: grab; display: flex; flex-direction: column;
|
|
}
|
|
[data-module="band-lineup"] .bl-lib-item:active { cursor: grabbing; }
|
|
[data-module="band-lineup"] .bl-lib-selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
|
|
[data-module="band-lineup"] .bl-lib-photo { position: relative; aspect-ratio: 3 / 4; background: color-mix(in srgb, var(--bg) 70%, black); overflow: hidden; }
|
|
[data-module="band-lineup"] .bl-lib-img { width: 100%; height: 100%; object-fit: cover; object-position: center top; pointer-events: none; }
|
|
[data-module="band-lineup"] .bl-lib-name {
|
|
border: 0; background: transparent; color: var(--text); font: inherit; font-size: 0.68em; font-weight: 600;
|
|
padding: 3px 4px; text-align: center; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
|
}
|
|
[data-module="band-lineup"] .bl-lib-del {
|
|
position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border: 0; border-radius: 4px;
|
|
background: color-mix(in srgb, var(--bg) 60%, transparent); color: var(--text); cursor: pointer; font-size: 0.85em; line-height: 1;
|
|
}
|
|
[data-module="band-lineup"] .bl-lib-del:hover { background: var(--danger); color: #fff; }
|
|
|
|
/* Drag: the floating photo that follows the pointer (appended to <body>, so it scopes itself). */
|
|
[data-module="band-lineup"].bl-drag-ghost {
|
|
position: fixed; left: 0; top: 0; z-index: 10000; pointer-events: none;
|
|
width: 72px; aspect-ratio: 3 / 4; margin: -48px 0 0 -36px; border-radius: 8px; overflow: hidden;
|
|
border: 2px solid var(--accent); background: var(--panel, #222); color: var(--text); font-size: 11px;
|
|
display: flex; align-items: center; justify-content: center; text-align: center;
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); opacity: 0.92;
|
|
}
|
|
[data-module="band-lineup"].bl-drag-ghost img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
|
|
[data-module="band-lineup"] .bl-lib-item,
|
|
[data-module="band-lineup"] .bl-edit-slot { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
|
|
[data-module="band-lineup"] .bl-edit-slot img,
|
|
[data-module="band-lineup"] .bl-lib-item img { -webkit-user-drag: none; pointer-events: none; }
|
|
[data-module="band-lineup"] .bl-dragging { opacity: 0.35; }
|
|
[data-module="band-lineup"].bl-is-dragging, [data-module="band-lineup"] .bl-is-dragging { cursor: grabbing; }
|
|
[data-module="band-lineup"] .bl-is-dragging .bl-edit-slot { transition: box-shadow 0.08s; }
|
|
|
|
/* Editor as two panes that scroll on their own: spots pinned on top, photos below. */
|
|
[data-module="band-lineup"] .bl-editor-split { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
|
|
[data-module="band-lineup"] .bl-pane { overflow: auto; overscroll-behavior: contain; padding: 8px 10px; }
|
|
[data-module="band-lineup"] .bl-board-pane { flex: 0 0 auto; max-height: 55%; border-bottom: 2px solid var(--border); }
|
|
[data-module="band-lineup"] .bl-lib-pane { flex: 1 1 0; min-height: 30%; }
|
|
[data-module="band-lineup"] .bl-lib-search {
|
|
display: block; width: 100%; box-sizing: border-box; margin: 0 0 8px; padding: 6px 10px;
|
|
border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--text); font: inherit; font-size: 0.85em;
|
|
}
|
|
[data-module="band-lineup"] .bl-lib-search:focus { outline: none; border-color: var(--accent); }
|
|
[data-module="band-lineup"] .bl-board-pane .bl-edit-board { margin: 0; }
|
|
[data-module="band-lineup"] .bl-lib-pane .bl-library { border-top: 0; padding-top: 0; }
|
|
[data-module="band-lineup"] .bl-board-pane .bl-edit-photo { aspect-ratio: 1 / 1; }
|