Vito Sansevero
831368a600
Cards are the concept media card: .media-art > button.image-open with the image or video, and .media-info with the D10 title (linked title only when the link is confirmed, else the filename; title attribute = path), the D11 subtitle "W x H · EXT · Seed N" (seed shown as the listing's string) and an Inspect info button. The byte size and the Preview button are gone. Activating the image (click, Enter, Space) opens the viewer and focus returns to it on Escape; Info selects the image into the panel (D19). Arrow, Home and End navigation, bounded rendering and scroll restoration are kept. Columns and gap now come from the concept grid's computed style (gridMetrics) instead of a production breakpoint table, so the concept breakpoints apply; a 120px minimum card bounds extreme zoom (D3, D31). images.css card rules are retired into marked overlay rules. The scope chip reads "All output folders" when no folder is chosen (D14).
99 lines
8.4 KiB
CSS
99 lines
8.4 KiB
CSS
.images-main { container: images-page / inline-size; }
|
|
.image-details { position: sticky; inset-block-start: 20px; padding: 17px; border-radius: 7px; min-inline-size: 0; max-block-size: calc(100dvh - 40px); overflow: auto; }
|
|
.image-details h2 { font-size: 14px; overflow-wrap: anywhere; margin-block: 0 12px; }
|
|
.image-details > :where(img, video) { display: block; inline-size: calc(100% + 34px); block-size: 150px; margin: -17px -17px 17px; object-fit: cover; background: var(--ca-field); border-radius: 6px 6px 0 0; }
|
|
.image-facts { font-size: 10px; margin-block: 17px; }
|
|
.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-preview { box-sizing: border-box; background: var(--ca-surface); color: var(--ca-text); border: 1px solid var(--ca-border); border-radius: 9px; inline-size: min(1500px, 96%); block-size: min(940px, 94dvh); max-block-size: 94%; padding: 18px; overflow: hidden; overscroll-behavior: contain; }
|
|
.image-preview[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 20px; }
|
|
.image-preview::backdrop { background: #080b12b8; overflow: hidden; overscroll-behavior: contain; }
|
|
.image-preview-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-inline-size: 0; }
|
|
.image-preview-header > div { min-inline-size: 0; }
|
|
.image-preview-header h2 { font-size: 18px; font-weight: 600; line-height: 1.5; margin: 0; overflow-wrap: anywhere; }
|
|
.image-preview-position { font-size: 12px; line-height: 1.5; margin: 0; overflow-wrap: anywhere; }
|
|
.ca-tools .image-preview-header > button { align-self: start; min-inline-size: 32px; padding: 4px 10px; font-size: 20px; line-height: 1.5; }
|
|
.image-preview-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; min-block-size: 0; min-inline-size: 0; }
|
|
.image-preview-left { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-inline-size: 0; min-block-size: 0; background: var(--ca-field); border: 1px solid var(--ca-line); border-radius: 6px; overflow: hidden; }
|
|
.image-preview-stage { position: relative; min-inline-size: 0; min-block-size: 0; }
|
|
.image-preview-media { position: absolute; inset: 0; }
|
|
.image-preview-media > :where(img, video) { display: block; inline-size: 100%; block-size: 100%; object-fit: contain; }
|
|
.image-preview-media > img[hidden] { display: none; }
|
|
.image-preview-media > .viewer-container { position: absolute; inset: 0; inline-size: 100% !important; block-size: 100% !important; background: var(--ca-field); }
|
|
.image-preview-toolbar { border-block-start: 1px solid var(--ca-line); padding: 10px; }
|
|
.image-preview-controls { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; }
|
|
.ca-tools .image-preview-controls :where(button, a) { display: inline-flex; align-items: center; justify-content: center; min-block-size: 32px; padding: 4px 10px; background: var(--ca-control); border: 1px solid var(--ca-border); border-radius: 4px; color: var(--ca-text); font-size: 12px; line-height: 1.5; text-decoration: none; }
|
|
.image-preview-controls [aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
|
|
.image-preview-reason { text-align: center; font-size: 11px; line-height: 1.6; margin: 8px 0 0; }
|
|
.image-preview-failure { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 20px; background: var(--ca-field); text-align: center; font-size: 12px; }
|
|
.image-preview-failure[hidden] { display: none; }
|
|
.image-preview-details { min-inline-size: 0; min-block-size: 0; overflow: auto; overscroll-behavior: contain; padding: 0 6px 18px; }
|
|
.image-preview :where(button, a, .image-preview-stage):focus-visible { outline: 2px solid var(--ca-focus); outline-offset: -2px; }
|
|
@media (max-width: 1250px) {
|
|
.image-preview-body { grid-template-columns: minmax(0, 1fr) 300px; }
|
|
}
|
|
@media (max-width: 950px) {
|
|
.image-preview-body { grid-template-columns: minmax(0, 1fr) 270px; }
|
|
}
|
|
@media (max-width: 700px) {
|
|
.image-details { position: static; max-block-size: none; padding: 17px; }
|
|
.image-details > :where(img, video) { block-size: 200px; }
|
|
.image-preview { block-size: 94dvh; overflow: auto; }
|
|
.image-preview[open] { grid-template-rows: auto auto; }
|
|
.image-preview-body { grid-template-columns: minmax(0, 1fr); }
|
|
.image-preview-left { block-size: 48dvh; min-block-size: 300px; }
|
|
.image-preview-details { overflow: visible; }
|
|
.ca-tools .image-preview-controls :where(button, a) { font-size: 10px; }
|
|
}
|
|
@container images-page (inline-size < 600px) {
|
|
.image-workspace { grid-template-columns: minmax(0, 1fr); }
|
|
.image-details { position: static; max-block-size: none; }
|
|
}
|
|
.options-status { font-size: 12px; padding-inline: 4px; }
|
|
|
|
.prompt-inspector { margin-block-start: 22px; min-inline-size: 0; }
|
|
.prompt-block { border-block-start: 1px solid var(--ca-line); padding-block: 13px; min-inline-size: 0; }
|
|
.prompt-positive { --prompt-role: #73dda9; }
|
|
[data-ca-theme="light"] .prompt-positive { --prompt-role: #176b46; }
|
|
.prompt-negative { --prompt-role: #ff8c98; }
|
|
[data-ca-theme="light"] .prompt-negative { --prompt-role: #b71931; }
|
|
.prompt-block-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
|
|
.prompt-block h3 { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; margin: 0; color: var(--prompt-role); }
|
|
.prompt-source, .prompt-empty, .prompt-block > .muted { font-size: 10px; }
|
|
.prompt-source { margin-block: 6px 10px; }
|
|
.prompt-text { font: inherit; font-size: 12px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; margin-block: 10px; }
|
|
.prompt-text:focus-visible { outline: 2px solid var(--ca-focus); outline-offset: 3px; }
|
|
.prompt-actions { display: flex; flex-wrap: wrap; gap: 4px; }
|
|
.ca-tools .prompt-actions button { display: inline-flex; align-items: center; justify-content: center; inline-size: 26px; block-size: 26px; min-block-size: 26px; padding: 5px; }
|
|
.prompt-actions .prompt-send-button span { display: none; }
|
|
.prompt-actions .icon { inline-size: 14px; block-size: 14px; }
|
|
.prompt-copy-status { font-size: 11px; margin-block-end: 0; }
|
|
.prompt-copy-status:empty { display: none; }
|
|
.image-preview-details .prompt-inspector { margin-block-start: 0; }
|
|
.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) {
|
|
.prompt-sender-options { grid-template-columns: minmax(0, 1fr); }
|
|
}
|
|
@media (pointer: coarse) {
|
|
.ca-tools .image-preview :is(button, a) { min-inline-size: 40px; min-block-size: 40px; }
|
|
.ca-tools .image-preview .prompt-actions button { min-inline-size: 36px; min-block-size: 36px; }
|
|
}
|