digital-garbageandClaude Sonnet 5.5
b59d90ebae
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
45 lines
3.0 KiB
CSS
45 lines
3.0 KiB
CSS
/* The frame's proportions, as v4 had them: fixed side columns and a fixed-height timeline across the bottom. */
|
|
:root { --media-w: 280px; --properties-w: 340px; --timeline-h: 320px; }
|
|
.fp-main { flex-direction: column; }
|
|
.fp-row { flex: 1 1 auto; flex-direction: row; min-block-size: 0; }
|
|
.fp-row > * { min-inline-size: 0; border-inline-end: var(--bw) solid var(--line); }
|
|
.fp-row > :first-child { flex: 0 0 var(--media-w); }
|
|
.fp-row > :nth-child(2) { flex: 1 1 auto; }
|
|
.fp-row > :last-child { flex: 0 0 var(--properties-w); border-inline-end: 0; }
|
|
.fp-main > :last-child { flex: 0 0 var(--timeline-h); min-block-size: 200px; border-block-start: var(--bw) solid var(--line); }
|
|
.cx-frame-head { padding-inline: calc(var(--sp-6) + var(--sp-1)); }
|
|
.cx-frame-head > .cx-toolbar { gap: calc(var(--sp-6) + var(--sp-3)); }
|
|
/* A zone body is a scroller of rows: they keep their height instead of squashing, and a tab strip spans the zone. */
|
|
.cx-zone .cx-panel-body > :not(.cx-stack-fill):not(.cx-viewer) { flex-shrink: 0; }
|
|
.cx-zone .cx-stack-fill > :not(.cx-viewer):not(.cx-stack-fill) { flex-shrink: 0; }
|
|
.cx-zone .cx-stack-fill > .cx-segmented { display: flex; }
|
|
.cx-zone .cx-stack-fill > .cx-segmented .cx-segment { flex: 1 1 0; }
|
|
[hidden] { display: none !important; }
|
|
/* An empty zone says so in the middle of it, with the controls kept at its foot. */
|
|
.cx-zone .cx-stack-fill > .cx-empty { flex: 1 1 auto; justify-content: center; }
|
|
|
|
/* Simple mode: one prompt and one Generate. The timeline, splitters and dock go; Assets and Properties slide over the preview. */
|
|
.fp-row { position: relative; }
|
|
:root[data-ui-mode="simple"] .fp-main > :last-child,
|
|
:root[data-ui-mode="simple"] .fp-simple-hide { display: none !important; }
|
|
:root[data-ui-mode="simple"] .fp-row > :first-child,
|
|
:root[data-ui-mode="simple"] .fp-row > :last-child {
|
|
position: absolute; top: 0; bottom: 0; z-index: 60; inline-size: min(var(--properties-w), 82vw);
|
|
background: var(--bg, var(--elev-1)); box-shadow: 0 0 40px -8px var(--shadow-ink, #000);
|
|
transition: transform .18s cubic-bezier(.22, .61, .36, 1);
|
|
}
|
|
:root[data-ui-mode="simple"] .fp-row > :first-child { left: 0; transform: translateX(-101%); }
|
|
:root[data-ui-mode="simple"] .fp-row > :last-child { right: 0; transform: translateX(101%); }
|
|
:root[data-ui-mode="simple"] .fp-row.fp-show-assets > :first-child,
|
|
:root[data-ui-mode="simple"] .fp-row.fp-show-props > :last-child { transform: none; }
|
|
|
|
/* Splitters: thin hit areas straddling the zone borders. */
|
|
.fp-main { position: relative; }
|
|
.fp-split { position: absolute; z-index: 20; background: transparent; touch-action: none; }
|
|
.fp-split:hover { background: var(--accent, var(--line)); opacity: .5; }
|
|
.fp-split-left, .fp-split-right { top: 0; bottom: 0; inline-size: 7px; cursor: col-resize; }
|
|
.fp-split-left { left: calc(var(--media-w) - 3px); }
|
|
.fp-split-right { right: calc(var(--properties-w) - 3px); }
|
|
.fp-split-bottom { left: 0; right: 0; block-size: 7px; bottom: calc(var(--timeline-h) - 3px); cursor: row-resize; }
|
|
:root[data-ui-mode="simple"] .fp-split { display: none; }
|