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>
63 lines
2.9 KiB
CSS
63 lines
2.9 KiB
CSS
/* The ring is an INSET shadow, not a border. A border pushes every absolutely
|
|
* positioned child inward by its own width, which put the hub a pixel past the
|
|
* screen edge on an edge panel -- the one place a pixel shows. */
|
|
.cx-wheel {
|
|
position: fixed; pointer-events: auto; border-radius: var(--r-pill);
|
|
background: color-mix(in srgb, var(--elev-3) 92%, transparent);
|
|
box-shadow: var(--shadow-3), inset 0 0 0 var(--bw) var(--line);
|
|
backdrop-filter: blur(var(--blur-sm));
|
|
animation: cx-wheel-in var(--dur-1) var(--ease-standard);
|
|
}
|
|
@keyframes cx-wheel-in { from { opacity: 0; transform: scale(.9); } }
|
|
|
|
/* The lit shape IS the region that picks the item, so the target is legible
|
|
* instead of implied by a box around a label. */
|
|
.cx-wheel-canvas { position: absolute; inset: 0; pointer-events: none; }
|
|
.cx-wheel-wedge {
|
|
fill: transparent;
|
|
stroke: color-mix(in srgb, var(--line) 70%, transparent);
|
|
stroke-width: 1;
|
|
transition: fill var(--dur-1) var(--ease-standard), stroke var(--dur-1) var(--ease-standard);
|
|
}
|
|
.cx-wheel-wedge.cx-on { fill: var(--accent-soft); stroke: var(--accent); }
|
|
|
|
.cx-wheel-item {
|
|
position: absolute; transform: translate(-50%, -50%);
|
|
display: flex; flex-direction: column; align-items: center; gap: var(--sp-1);
|
|
width: var(--wheel-item-w); padding: var(--sp-1) 0; line-height: 1.15; overflow-wrap: anywhere; /* long names wrap inside the ring instead of sticking out of it */
|
|
background: transparent; border: 0; color: var(--muted);
|
|
font-size: var(--fs-7); cursor: pointer; text-align: center;
|
|
transition: color var(--dur-1) var(--ease-standard),
|
|
transform var(--dur-1) var(--ease-standard);
|
|
}
|
|
.cx-wheel-item .cx-wheel-icon { font-size: var(--fs-2); line-height: 1; }
|
|
.cx-wheel-item.cx-on {
|
|
color: var(--accent-text);
|
|
transform: translate(-50%, -50%) scale(1.06);
|
|
}
|
|
|
|
/* Sized to the dead zone exactly (radius 42), so the cancel target you can see
|
|
* is the cancel target you can hit. */
|
|
/* left/top/size come from the geometry so the drawn hub and the cancel region
|
|
* are the same circle. */
|
|
.cx-wheel-hub {
|
|
position: absolute; transform: translate(-50%, -50%);
|
|
border-radius: var(--r-pill);
|
|
border: var(--bw) dashed var(--line);
|
|
display: flex; align-items: center; justify-content: center;
|
|
color: var(--faint);
|
|
transition: border-color var(--dur-1) var(--ease-standard),
|
|
color var(--dur-1) var(--ease-standard),
|
|
background var(--dur-1) var(--ease-standard);
|
|
}
|
|
.cx-wheel-hub-glyph { font-size: var(--fs-2); line-height: 1; }
|
|
.cx-wheel-hub.cx-on {
|
|
border-color: var(--danger); color: var(--danger);
|
|
background: color-mix(in srgb, var(--danger) 12%, transparent);
|
|
}
|
|
|
|
/* Half wheels sit ON the edge: the off-screen half is simply clipped by the
|
|
* viewport, which is what gives the edge-panel silhouette. The flat side gets a
|
|
* straight edge so it reads as pinned rather than cropped by accident. */
|
|
.cx-wheel-half { backdrop-filter: blur(var(--blur-md)); }
|