Center timeline bar at 80% width with rounded corners

Replace full-width bar with centered floating pill that clears both the
left sidebar and right controls. Uses left/right: 10% with border-radius
and a small bottom offset. Icons remain left-aligned inside the track.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-25 00:35:32 +01:00
parent 95cbcd4f6c
commit e554dc9973

View File

@@ -882,12 +882,13 @@ const CSS = `
}
.snap-timeline {
position: absolute;
bottom: 0;
left: 0;
right: 0;
bottom: 4px;
left: 10%;
right: 10%;
height: 32px;
background: rgba(15, 23, 42, 0.85);
border-top: 1px solid var(--border-color, #334155);
border: 1px solid var(--border-color, #334155);
border-radius: 8px;
display: flex;
align-items: center;
padding: 0 16px;
@@ -1441,16 +1442,6 @@ function buildTimeline() {
bar.appendChild(track);
bar.appendChild(snapBtn);
// Offset timeline to avoid floating sidebar overlap
const leftToolbar = document.querySelector(".comfyui-body-left .side-tool-bar-container");
const rightToolbar = document.querySelector(".comfyui-body-right .side-tool-bar-container");
if (leftToolbar && !leftToolbar.classList.contains("connected-sidebar")) {
bar.style.paddingLeft = "calc(var(--sidebar-width, 48px) + 16px)";
}
if (rightToolbar && !rightToolbar.classList.contains("connected-sidebar")) {
bar.style.paddingRight = "calc(var(--sidebar-width, 48px) + 16px)";
}
canvasParent.appendChild(bar);
timelineEl = bar;