58 lines
4.5 KiB
CSS
58 lines
4.5 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; }
|
|
@media (max-width: 700px) {
|
|
.image-details { position: static; max-block-size: none; padding: 17px; }
|
|
.image-details > :where(img, video) { block-size: 200px; }
|
|
}
|
|
@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; }
|
|
.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); }
|
|
}
|