Vito
dc345671ae
* feat(workspace): inspect and send positive and negative prompts * docs(workspace): capture complete inspector and viewer previews * docs(inspector): explain the subprocess cleanup race * fix(workspace): defer observed gallery layout writes (#207) * fix(inspector): keep path-only prompt associations unverified
103 lines
8.4 KiB
CSS
103 lines
8.4 KiB
CSS
.sidebar { position: sticky; inset-block-start: 0; block-size: 100dvh; align-self: start; }
|
|
.brand-mark { position: relative; }
|
|
.brand-mark small { position: absolute; inset-inline-end: 4px; inset-block-end: 2px; font-size: 9px; color: white; }
|
|
main.images-main { max-inline-size: none; padding: 28px; }
|
|
.image-filters { display: flex; flex-wrap: wrap; gap: 12px; padding: 16px; border: 1px solid var(--ca-line); border-radius: 9px; background: var(--ca-surface); }
|
|
.image-filters .ca-field { display: flex; flex: 1 1 140px; flex-direction: column; align-items: stretch; gap: 5px; }
|
|
.image-filters .ca-field:first-child { flex: 3 1 260px; }
|
|
.image-filters .ca-field-label { font-size: 11px; }
|
|
.image-filters :where(input, select) { inline-size: 100%; min-block-size: 36px; }
|
|
.image-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-block: 18px; }
|
|
.image-toolbar p { margin: 0; flex: 1 1 160px; font-size: 12px; }
|
|
.image-layouts { display: inline-flex; gap: 3px; }
|
|
.ca-tools .image-layouts button[aria-pressed="true"] { background: var(--ca-accent); color: white; border-color: var(--ca-accent); }
|
|
.image-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 22px; align-items: start; }
|
|
.image-collection { min-inline-size: 0; }
|
|
.image-grid { position: relative; inline-size: 100%; }
|
|
.image-card { position: absolute; border: 1px solid var(--ca-line); border-radius: 9px; background: var(--ca-surface); display: grid; grid-template-rows: minmax(0, 1fr) 72px; }
|
|
.image-card.selected { border-color: var(--ca-focus); box-shadow: 0 0 0 1px var(--ca-focus); }
|
|
.image-card .image-open { display: block; padding: 0; inline-size: 100%; block-size: 100%; min-block-size: 0; border: 0; border-radius: 8px 8px 0 0; background: var(--ca-field); }
|
|
.image-open :where(img, video) { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: inherit; }
|
|
.image-card-footer { position: relative; min-inline-size: 0; padding: 12px 45px 10px 12px; }
|
|
.image-card-footer strong { display: block; font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.image-card-footer small { display: block; color: var(--ca-muted); font-size: 10px; margin-block-start: 4px; }
|
|
.image-card-footer button { position: absolute; inset-inline-end: 8px; inset-block-start: 16px; }
|
|
.image-grid[data-layout="list"] .image-card { grid-template-columns: 125px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
|
|
.image-grid[data-layout="list"] .image-open { border-radius: 8px 0 0 8px; }
|
|
.image-grid[data-layout="list"] .image-card-footer { align-self: center; }
|
|
.image-details { position: sticky; inset-block-start: 18px; padding: 18px; max-block-size: calc(100dvh - 36px); overflow: auto; scrollbar-gutter: stable; }
|
|
.image-details h2 { font-size: 15px; overflow-wrap: anywhere; margin-block: 8px 16px; }
|
|
.image-details > :where(img, video) { display: block; inline-size: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--ca-field); border-radius: 6px; }
|
|
.image-facts { font-size: 11px; margin-block: 18px; }
|
|
.image-facts > div { padding-block: 8px; border-block-end: 1px solid var(--ca-line); }
|
|
.image-facts dt { color: var(--ca-muted); margin-block-end: 4px; }
|
|
.image-facts dd { margin: 0; overflow-wrap: anywhere; }
|
|
.image-details .workspace-link { display: flex; font-size: 11px; }
|
|
.image-continuation { text-align: center; padding-block: 24px; font-size: 12px; }
|
|
.image-continuation [role="alert"] { color: var(--ca-error-text); }
|
|
.image-preview { background: var(--ca-surface); color: var(--ca-text); border: 1px solid var(--ca-border); border-radius: 10px; inline-size: min(1200px, calc(100% - 32px)); max-inline-size: none; padding: 0; }
|
|
.image-preview::backdrop { background: #000b; }
|
|
.image-preview header { padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
|
|
.image-preview h2 { font-size: 15px; margin: 0; overflow-wrap: anywhere; }
|
|
.image-preview-stage { position: relative; block-size: min(75dvh, 850px); background: var(--ca-field); }
|
|
.image-preview-stage > video { display: block; inline-size: 100%; block-size: 100%; object-fit: contain; }
|
|
.image-preview-stage .viewer-container { inline-size: 100% !important; block-size: 100% !important; }
|
|
@media (max-width: 1150px) {
|
|
.image-workspace { grid-template-columns: minmax(0, 1fr) 250px; gap: 16px; }
|
|
main.images-main { padding: 24px 18px; }
|
|
}
|
|
@media (max-width: 780px) {
|
|
.sidebar { position: static; block-size: auto; }
|
|
.image-workspace { grid-template-columns: minmax(0, 1fr); }
|
|
.image-details { position: static; max-block-size: none; }
|
|
.image-details > :where(img, video) { max-block-size: 280px; }
|
|
.image-filters { gap: 10px; padding: 12px; }
|
|
.image-filters .ca-field { flex-basis: 120px; }
|
|
.image-layouts { flex-wrap: wrap; }
|
|
}
|
|
.image-continuation button[aria-disabled="true"] { opacity: .55; cursor: wait; }
|
|
.options-status { font-size: 12px; padding-inline: 4px; }
|
|
|
|
.prompt-inspector { margin-block-start: 22px; min-inline-size: 0; }
|
|
.prompt-block { border: 1px solid var(--ca-line); border-inline-start: 3px solid var(--prompt-role); border-radius: 7px; padding: 14px; margin-block-end: 14px; min-inline-size: 0; }
|
|
.prompt-positive { --prompt-role: #6bd6a4; }
|
|
[data-ca-theme="light"] .prompt-positive { --prompt-role: #14784f; }
|
|
.prompt-negative { --prompt-role: #ff7f7f; }
|
|
[data-ca-theme="light"] .prompt-negative { --prompt-role: #b51d2d; }
|
|
.prompt-block h3 { font-size: 12px; margin: 0 0 8px; color: var(--prompt-role); }
|
|
.prompt-source, .prompt-empty, .prompt-block > .muted { font-size: 11px; }
|
|
.prompt-text { font: inherit; font-size: 12px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; margin-block: 12px; }
|
|
.prompt-text:focus-visible { outline: 2px solid var(--ca-focus); outline-offset: 3px; }
|
|
.prompt-actions { display: flex; flex-wrap: wrap; gap: 8px; }
|
|
.prompt-actions button { font-size: 11px; }
|
|
.prompt-copy-status { font-size: 11px; margin-block-end: 0; }
|
|
.prompt-copy-status:empty { display: none; }
|
|
.image-preview-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, 340px); }
|
|
.image-preview-details { padding: 0 18px 18px; max-block-size: 75dvh; overflow: auto; min-inline-size: 0; }
|
|
.image-preview-details .prompt-inspector { margin-block-start: 0; }
|
|
.image-preview > header { border-block-end: 1px solid var(--ca-line); }
|
|
.prompt-send-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; color: var(--ca-focus); }
|
|
.prompt-send-button svg { inline-size: 16px; block-size: 16px; flex-shrink: 0; }
|
|
.prompt-sender { background: var(--ca-surface); color: var(--ca-text); border: 1px solid var(--ca-line); border-radius: 12px; padding: 22px; inline-size: min(760px, calc(100% - 32px)); max-inline-size: none; max-block-size: calc(100dvh - 32px); overflow: auto; }
|
|
.prompt-sender::backdrop { background: #000b; }
|
|
.prompt-sender-header, .prompt-sender-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
|
|
.prompt-sender-header h2 { font-size: 20px; margin: 0; }
|
|
.prompt-sender-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-block: 20px; }
|
|
.prompt-sender-options .ca-field { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
|
|
.prompt-sender select { inline-size: 100%; min-block-size: 38px; }
|
|
.prompt-sender-status { font-size: 13px; line-height: 1.6; }
|
|
.prompt-sender-status[role="alert"] { color: var(--ca-error-text); }
|
|
.prompt-sender-preview { margin-block: 20px; min-inline-size: 0; }
|
|
.prompt-sender-field { border: 1px solid var(--ca-line); border-radius: 7px; padding: 14px; margin-block: 12px; min-inline-size: 0; }
|
|
.prompt-sender-field :where(pre, textarea), .prompt-sender-composition { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 12px; line-height: 1.65; max-inline-size: 100%; }
|
|
.prompt-sender-field textarea { inline-size: 100%; min-block-size: 100px; resize: vertical; }
|
|
.prompt-sender-composition { padding: 12px; background: var(--ca-field); border-radius: 6px; }
|
|
.prompt-sender-actions { justify-content: flex-end; margin-block-start: 18px; }
|
|
@media (max-width: 780px) {
|
|
.image-preview-body { grid-template-columns: minmax(0, 1fr); }
|
|
.image-preview-stage { block-size: 52dvh; }
|
|
.image-preview-details { max-block-size: none; }
|
|
.image-preview { max-block-size: calc(100dvh - 24px); overflow: auto; }
|
|
.prompt-sender-options { grid-template-columns: minmax(0, 1fr); }
|
|
}
|