digital-garbageandClaude Sonnet 5.5
aa31b95ea5
- Header: view toggles (Assets/Preview/Properties/Auto-hide) move to the top bar; progress, the prompt warning and scene actions (rate, upscale, interpolate) move to the row under the toolbar; the timeline head never wraps from 1000px up and never clips its controls. The top bar grows a line instead of spilling when it wraps. - Kit: every literal pixel size in element CSS is a token (the ratchet test is now zero); Composer's text box follows the viewport; the catalogue shows the component sizes. - test:viewport adds a fake ComfyUI queue and socket for the render-running state and asserts the header is one row. - Auto Montage removed (button, window, code, README/docs, tests). Saved projects holding pieces it made still load: the reused flag is kept. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
108 lines
5.3 KiB
CSS
108 lines
5.3 KiB
CSS
.cx-chip {
|
|
display: inline-flex; align-items: center; gap: var(--sp-2);
|
|
height: var(--ctl-h-sm); padding: 0 var(--sp-4);
|
|
border: var(--bw) solid var(--line); border-radius: var(--r-pill);
|
|
font-size: var(--fs-6); color: var(--muted); white-space: nowrap;
|
|
}
|
|
.cx-chip-dot { width: var(--sp-3); height: var(--sp-3); border-radius: var(--r-pill); background: currentColor; }
|
|
.cx-chip-good { color: var(--good); border-color: color-mix(in srgb, var(--good) 30%, var(--line)); }
|
|
.cx-chip-warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, var(--line)); }
|
|
.cx-chip-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, var(--line)); }
|
|
.cx-chip-info { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
|
|
|
|
.cx-dot { width: var(--sp-4); height: var(--sp-4); border-radius: var(--r-pill); background: var(--muted); display: inline-block; flex: none; }
|
|
.cx-dot-good { background: var(--good); }
|
|
.cx-dot-warn { background: var(--warn); }
|
|
.cx-dot-danger { background: var(--danger); }
|
|
.cx-dot-info { background: var(--accent); }
|
|
|
|
.cx-banner {
|
|
display: flex; align-items: center; gap: var(--sp-4);
|
|
padding: var(--sp-4) var(--sp-5);
|
|
border: var(--bw) solid var(--line); border-radius: var(--r-3);
|
|
background: var(--elev-2); font-size: var(--fs-5);
|
|
}
|
|
.cx-banner-info { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
|
|
.cx-banner-info .cx-dot { background: var(--accent); }
|
|
.cx-banner-warn { border-color: color-mix(in srgb, var(--warn) 30%, var(--line)); }
|
|
.cx-banner-warn .cx-dot { background: var(--warn); }
|
|
.cx-banner-danger { border-color: color-mix(in srgb, var(--danger) 30%, var(--line)); }
|
|
.cx-banner-danger .cx-dot { background: var(--danger); }
|
|
.cx-banner-text { flex: 1; }
|
|
|
|
.cx-inline-error { font-size: var(--fs-6); color: var(--danger); }
|
|
|
|
.cx-progress {
|
|
width: 100%; height: var(--sp-2); border-radius: var(--r-pill);
|
|
background: var(--line); overflow: hidden;
|
|
}
|
|
.cx-progress-fill {
|
|
height: 100%; width: 0; background: var(--accent); border-radius: var(--r-pill);
|
|
transition: width var(--dur-2) var(--ease-standard);
|
|
}
|
|
.cx-progress-indeterminate .cx-progress-fill {
|
|
width: 35%; animation: cx-slide 1.2s var(--ease-standard) infinite;
|
|
}
|
|
@keyframes cx-slide { from { transform: translateX(-100%); } to { transform: translateX(320%); } }
|
|
|
|
.cx-spinner {
|
|
display: inline-block; border-radius: var(--r-pill);
|
|
border: var(--bw-2) solid color-mix(in srgb, var(--muted) 30%, transparent);
|
|
border-top-color: var(--accent);
|
|
animation: cx-spin 800ms linear infinite;
|
|
}
|
|
.cx-spinner-md { width: var(--sp-7); height: var(--sp-7); }
|
|
.cx-spinner-sm { width: var(--sp-6); height: var(--sp-6); }
|
|
|
|
.cx-empty {
|
|
display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
|
|
padding: var(--sp-10) var(--sp-6); text-align: center; color: var(--muted);
|
|
}
|
|
.cx-empty-icon { font-size: var(--fs-d3); color: var(--faint); line-height: 1; }
|
|
.cx-empty-title { font-size: var(--fs-4); color: var(--text); }
|
|
|
|
.cx-dropzone {
|
|
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
|
gap: var(--sp-2); padding: var(--sp-9) var(--sp-6); text-align: center;
|
|
border: var(--bw) dashed var(--line); border-radius: var(--r-4);
|
|
background: var(--elev-1); color: var(--muted); cursor: pointer;
|
|
transition: border-color var(--dur-1) var(--ease-standard), background var(--dur-1) var(--ease-standard);
|
|
}
|
|
.cx-dropzone:hover, .cx-dropzone.cx-over { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
|
|
.cx-dropzone-label { font-size: var(--fs-4); }
|
|
|
|
.cx-skeleton { display: flex; gap: var(--sp-3); }
|
|
.cx-skeleton-line, .cx-skeleton-block { flex-direction: column; }
|
|
.cx-skeleton-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
|
|
.cx-skeleton-cell {
|
|
border-radius: var(--r-2);
|
|
background: linear-gradient(90deg, var(--elev-2), var(--hover), var(--elev-2));
|
|
background-size: 200% 100%;
|
|
animation: cx-shimmer 1.4s linear infinite;
|
|
}
|
|
.cx-skeleton-line .cx-skeleton-cell { height: var(--sp-5); }
|
|
.cx-skeleton-line .cx-skeleton-cell:last-child { width: 60%; }
|
|
.cx-skeleton-block .cx-skeleton-cell { height: var(--lane-h-audio); }
|
|
.cx-skeleton-grid .cx-skeleton-cell { aspect-ratio: 16 / 10; }
|
|
@keyframes cx-shimmer { to { background-position: -200% 0; } }
|
|
|
|
.cx-toasts {
|
|
position: fixed; left: 50%; bottom: var(--sp-9); transform: translateX(-50%);
|
|
display: flex; flex-direction: column; gap: var(--sp-3); align-items: center;
|
|
}
|
|
.cx-toast {
|
|
display: flex; align-items: center; gap: var(--sp-4);
|
|
padding: var(--sp-4) var(--sp-6);
|
|
border: var(--bw) solid var(--line); border-radius: var(--r-pill);
|
|
background: var(--elev-3); color: var(--text);
|
|
box-shadow: var(--shadow-2); font-size: var(--fs-5);
|
|
animation: cx-rise var(--dur-2) var(--ease-standard);
|
|
}
|
|
.cx-toast-good { border-color: color-mix(in srgb, var(--good) 45%, var(--line)); }
|
|
.cx-toast-warn { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
|
|
.cx-toast-danger { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
|
|
@keyframes cx-rise { from { opacity: 0; transform: translateY(var(--sp-4)); } }
|
|
|
|
.cx-progress-inline { display: inline-flex; align-items: center; gap: var(--sp-4); min-inline-size: 0; }
|
|
.cx-progress-inline .cx-progress { inline-size: var(--skeleton-w); flex: none; }
|