2593 lines
50 KiB
CSS
2593 lines
50 KiB
CSS
.homePlaygroundEntry {
|
|
display: grid;
|
|
gap: 22px;
|
|
padding: 28px 0 8px;
|
|
}
|
|
|
|
.homePlaygroundEntry h2 {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
font-size: clamp(26px, 3vw, 40px);
|
|
line-height: 1.2;
|
|
text-align: center;
|
|
}
|
|
|
|
.homePlaygroundEntry h2 button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
border: 0;
|
|
background: transparent;
|
|
color: #0891b2;
|
|
font: inherit;
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
.playgroundComposer {
|
|
display: grid;
|
|
gap: 16px;
|
|
width: min(var(--playground-content-width, 960px), 100%);
|
|
margin: 0 auto;
|
|
padding: 16px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 18px;
|
|
background: var(--surface);
|
|
box-shadow: 0 18px 60px rgba(24, 24, 27, 0.07);
|
|
}
|
|
|
|
.playgroundComposer.compact {
|
|
width: min(1240px, calc(100vw - 120px));
|
|
min-height: 190px;
|
|
padding: 20px;
|
|
border-radius: 22px;
|
|
}
|
|
|
|
.composerBody {
|
|
display: grid;
|
|
grid-template-columns: 54px minmax(0, 1fr);
|
|
gap: 16px;
|
|
}
|
|
|
|
.composerUpload {
|
|
display: grid;
|
|
width: 48px;
|
|
height: 66px;
|
|
place-items: center;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
background: var(--surface-muted);
|
|
color: var(--text-soft);
|
|
transform: rotate(-8deg);
|
|
}
|
|
|
|
.composerUpload:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.58;
|
|
}
|
|
|
|
.composerUploadSpinner {
|
|
animation: composer-upload-spin 0.9s linear infinite;
|
|
}
|
|
|
|
.composerInputStack {
|
|
display: grid;
|
|
min-width: 0;
|
|
gap: 8px;
|
|
}
|
|
|
|
.composerUploadArea {
|
|
display: grid;
|
|
gap: 6px;
|
|
}
|
|
|
|
.composerUploadList {
|
|
display: flex;
|
|
min-width: 0;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
|
|
.composerUploadChip {
|
|
display: inline-flex;
|
|
max-width: min(100%, 320px);
|
|
min-height: 28px;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 4px 7px;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--surface-muted);
|
|
color: var(--text-normal);
|
|
font-size: var(--font-size-xs);
|
|
}
|
|
|
|
.composerUploadChip span {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.composerUploadChip small {
|
|
flex: 0 0 auto;
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.composerUploadChip button {
|
|
display: grid;
|
|
width: 18px;
|
|
height: 18px;
|
|
place-items: center;
|
|
border: 0;
|
|
border-radius: 999px;
|
|
background: transparent;
|
|
color: var(--text-soft);
|
|
padding: 0;
|
|
}
|
|
|
|
.composerUploadChip button:hover {
|
|
background: var(--surface);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.composerUploadMessage {
|
|
color: var(--muted-foreground);
|
|
font-size: var(--font-size-xs);
|
|
line-height: var(--line-height-relaxed);
|
|
}
|
|
|
|
.composerBodyWithReferences {
|
|
grid-template-columns: 120px minmax(0, 1fr);
|
|
align-items: start;
|
|
}
|
|
|
|
.composerBodyWithReferences[data-frame-mode="true"] {
|
|
grid-template-columns: 250px minmax(0, 1fr);
|
|
}
|
|
|
|
.mediaReferenceStack {
|
|
position: relative;
|
|
width: 108px;
|
|
min-height: 106px;
|
|
overflow: visible;
|
|
}
|
|
|
|
.mediaReferenceStack[data-expanded="true"] {
|
|
z-index: 12;
|
|
}
|
|
|
|
.mediaReferenceTooltip {
|
|
position: absolute;
|
|
z-index: 14;
|
|
top: -42px;
|
|
left: 0;
|
|
max-width: min(640px, 54vw);
|
|
overflow: hidden;
|
|
padding: 10px 14px;
|
|
border-radius: 12px;
|
|
background: #20252b;
|
|
color: #fff;
|
|
font-size: var(--font-size-sm);
|
|
line-height: 1.2;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
box-shadow: 0 12px 32px rgba(24, 24, 27, 0.22);
|
|
}
|
|
|
|
.mediaReferenceStackCards {
|
|
position: relative;
|
|
width: 108px;
|
|
min-height: 104px;
|
|
transition: width 160ms ease;
|
|
}
|
|
|
|
.mediaReferenceStack[data-expanded="true"] .mediaReferenceStackCards {
|
|
width: min(calc(var(--reference-count) * 52px + 18px), calc(100vw - 96px));
|
|
}
|
|
|
|
.mediaReferenceCard {
|
|
position: absolute;
|
|
display: grid;
|
|
width: 58px;
|
|
height: 76px;
|
|
place-items: center;
|
|
overflow: visible;
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
background: var(--surface-muted);
|
|
color: var(--text-soft);
|
|
box-shadow: 0 10px 24px rgba(24, 24, 27, 0.12);
|
|
}
|
|
|
|
.mediaReferenceCard {
|
|
left: calc(24px + var(--reference-x, 0px));
|
|
top: calc(7px + var(--reference-y, 0px));
|
|
transform: rotate(var(--reference-tilt, -6deg));
|
|
transition: left 160ms ease, top 160ms ease, transform 160ms ease, z-index 150ms ease, box-shadow 150ms ease;
|
|
}
|
|
|
|
.mediaReferenceStack[data-expanded="true"] .mediaReferenceCard {
|
|
left: calc(2px + var(--reference-index) * 52px);
|
|
top: 8px;
|
|
transform: rotate(var(--reference-tilt, -4deg));
|
|
}
|
|
|
|
.mediaReferenceCard[data-hovered="true"] {
|
|
z-index: 6;
|
|
transform: translateY(-8px) scale(1.04) rotate(0deg);
|
|
box-shadow: 0 16px 36px rgba(24, 24, 27, 0.18);
|
|
}
|
|
|
|
.mediaReferenceCard img,
|
|
.mediaReferenceCard video,
|
|
.frameSlotButton video,
|
|
.frameSlotButton img {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
border-radius: inherit;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.mediaReferencePlaceholder {
|
|
display: grid;
|
|
width: 100%;
|
|
height: 100%;
|
|
place-items: center;
|
|
overflow: hidden;
|
|
border-radius: inherit;
|
|
background: var(--surface-muted);
|
|
color: var(--primary);
|
|
}
|
|
|
|
.mediaReferenceDuration {
|
|
position: absolute;
|
|
left: 6px;
|
|
bottom: 6px;
|
|
padding: 1px 5px;
|
|
border-radius: 999px;
|
|
background: rgba(24, 24, 27, 0.66);
|
|
color: #fff;
|
|
font-size: var(--font-size-xs);
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.mediaReferenceRemove,
|
|
.frameSlotRemove {
|
|
position: absolute;
|
|
z-index: 7;
|
|
display: grid;
|
|
width: 24px;
|
|
height: 24px;
|
|
place-items: center;
|
|
border: 0;
|
|
border-radius: 999px;
|
|
background: #20252b;
|
|
color: #fff;
|
|
padding: 0;
|
|
box-shadow: 0 6px 16px rgba(24, 24, 27, 0.18);
|
|
}
|
|
|
|
.mediaReferenceRemove {
|
|
top: -13px;
|
|
right: -13px;
|
|
}
|
|
|
|
.mediaReferenceUploadCard {
|
|
border-style: dashed;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.mediaReferenceUploadCard span {
|
|
position: absolute;
|
|
bottom: 10px;
|
|
color: inherit;
|
|
font-size: var(--font-size-xs);
|
|
font-weight: var(--font-weight-medium);
|
|
}
|
|
|
|
.mediaReferenceStack:not([data-expanded="true"]) .mediaReferenceUploadCard[data-has-uploads="true"] {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.mediaReferenceStack[data-expanded="true"] .mediaReferenceUploadCard,
|
|
.mediaReferenceUploadCard[data-has-uploads="false"] {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.mediaReferenceUploadCard:not(:disabled):hover {
|
|
color: var(--text-normal);
|
|
background: var(--surface);
|
|
}
|
|
|
|
.mediaReferenceUploadCard:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.64;
|
|
}
|
|
|
|
.mediaReferenceStack:not([data-expanded="true"]) .mediaReferenceUploadCard[data-has-uploads="true"]:disabled {
|
|
opacity: 0;
|
|
}
|
|
|
|
.mediaReferenceAdd {
|
|
position: absolute;
|
|
left: 74px;
|
|
top: 61px;
|
|
z-index: 12;
|
|
display: grid;
|
|
width: 32px;
|
|
height: 32px;
|
|
place-items: center;
|
|
border: 1px solid var(--border);
|
|
border-radius: 999px;
|
|
background: var(--surface-muted);
|
|
color: var(--text-normal);
|
|
padding: 0;
|
|
box-shadow: 0 8px 20px rgba(24, 24, 27, 0.12);
|
|
}
|
|
|
|
.mediaReferenceStack[data-expanded="true"] .mediaReferenceAdd {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transform: scale(0.86);
|
|
}
|
|
|
|
.mediaReferenceAdd:not(:disabled):hover {
|
|
background: var(--surface);
|
|
color: var(--primary);
|
|
}
|
|
|
|
.mediaReferenceAdd:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.64;
|
|
}
|
|
|
|
.firstLastFramePicker {
|
|
display: grid;
|
|
grid-template-columns: 86px 34px 86px;
|
|
align-items: center;
|
|
gap: 10px;
|
|
min-height: 118px;
|
|
}
|
|
|
|
.frameSlot {
|
|
position: relative;
|
|
}
|
|
|
|
.frameSlotButton {
|
|
display: grid;
|
|
width: 78px;
|
|
height: 104px;
|
|
place-items: center;
|
|
overflow: hidden;
|
|
border: 1px dashed var(--border);
|
|
border-radius: 8px;
|
|
background: var(--surface-muted);
|
|
color: var(--text-soft);
|
|
transform: rotate(-7deg);
|
|
}
|
|
|
|
.frameSlot:nth-child(3) .frameSlotButton {
|
|
transform: rotate(6deg);
|
|
}
|
|
|
|
.frameSlotButton[data-filled="true"] {
|
|
border-style: solid;
|
|
}
|
|
|
|
.frameSlotButton span {
|
|
position: absolute;
|
|
bottom: 10px;
|
|
color: inherit;
|
|
font-size: var(--font-size-xs);
|
|
font-weight: var(--font-weight-medium);
|
|
}
|
|
|
|
.frameSlotButton[data-filled="true"] span {
|
|
padding: 1px 6px;
|
|
border-radius: 999px;
|
|
background: rgba(24, 24, 27, 0.62);
|
|
color: #fff;
|
|
}
|
|
|
|
.frameSlotRemove {
|
|
top: -8px;
|
|
right: 0;
|
|
}
|
|
|
|
.frameSwapButton {
|
|
display: grid;
|
|
width: 34px;
|
|
height: 34px;
|
|
place-items: center;
|
|
border: 0;
|
|
border-radius: 999px;
|
|
background: transparent;
|
|
color: var(--text-soft);
|
|
}
|
|
|
|
.frameSwapButton:not(:disabled):hover {
|
|
background: var(--surface-muted);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.frameSwapButton:disabled {
|
|
opacity: 0.42;
|
|
}
|
|
|
|
.promptMentionInput {
|
|
position: relative;
|
|
min-width: 0;
|
|
}
|
|
|
|
.promptMentionEditable {
|
|
position: relative;
|
|
z-index: 1;
|
|
min-height: 88px;
|
|
max-height: 190px;
|
|
overflow-y: auto;
|
|
border: 0;
|
|
outline: 0;
|
|
background: transparent;
|
|
color: var(--text-normal);
|
|
font: inherit;
|
|
font-size: var(--font-size-sm);
|
|
line-height: var(--line-height-relaxed);
|
|
overflow-wrap: anywhere;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.promptMentionPlaceholder {
|
|
position: absolute;
|
|
z-index: 0;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
overflow: hidden;
|
|
color: var(--muted-foreground);
|
|
font: inherit;
|
|
font-size: var(--font-size-sm);
|
|
line-height: var(--line-height-relaxed);
|
|
pointer-events: none;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.playgroundComposer.compact .promptMentionEditable {
|
|
min-height: 104px;
|
|
}
|
|
|
|
.promptMentionChip {
|
|
display: inline-flex;
|
|
max-width: min(260px, 80%);
|
|
align-items: center;
|
|
gap: 5px;
|
|
margin: 0 4px 2px 0;
|
|
padding: 2px 6px 2px 2px;
|
|
border-radius: 7px;
|
|
background: var(--primary);
|
|
color: var(--primary-foreground);
|
|
font-size: var(--font-size-xs);
|
|
line-height: 1.55;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.promptMentionChipThumb {
|
|
display: inline-grid;
|
|
width: 22px;
|
|
height: 22px;
|
|
min-width: 22px;
|
|
place-items: center;
|
|
overflow: hidden;
|
|
border-radius: 5px;
|
|
object-fit: cover;
|
|
background: rgba(255, 255, 255, 0.18);
|
|
}
|
|
|
|
.promptMentionChipThumbPlaceholder {
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
.promptMentionDropdown {
|
|
position: absolute;
|
|
z-index: 20;
|
|
width: min(320px, calc(100vw - 24px));
|
|
max-height: 286px;
|
|
overflow-y: auto;
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
background: var(--surface);
|
|
box-shadow: 0 18px 42px rgba(24, 24, 27, 0.16);
|
|
}
|
|
|
|
.promptMentionItem {
|
|
display: grid;
|
|
grid-template-columns: 36px minmax(0, 1fr) auto;
|
|
width: 100%;
|
|
align-items: center;
|
|
gap: 10px;
|
|
min-height: 54px;
|
|
padding: 8px 10px;
|
|
border: 0;
|
|
background: transparent;
|
|
color: var(--text-normal);
|
|
text-align: left;
|
|
}
|
|
|
|
.promptMentionItem:hover,
|
|
.promptMentionItem[data-active="true"] {
|
|
background: var(--surface-muted);
|
|
}
|
|
|
|
.promptMentionThumb,
|
|
.promptMentionThumbIcon {
|
|
display: grid;
|
|
width: 36px;
|
|
height: 36px;
|
|
place-items: center;
|
|
border-radius: 8px;
|
|
background: var(--surface-muted);
|
|
color: var(--primary);
|
|
object-fit: cover;
|
|
}
|
|
|
|
.promptMentionItem span {
|
|
display: grid;
|
|
min-width: 0;
|
|
gap: 2px;
|
|
}
|
|
|
|
.promptMentionItem strong,
|
|
.promptMentionItem small {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.promptMentionItem strong {
|
|
color: var(--text-strong);
|
|
font-size: var(--font-size-sm);
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
.promptMentionItem small {
|
|
color: var(--muted-foreground);
|
|
font-size: var(--font-size-xs);
|
|
}
|
|
|
|
.promptMentionItem em {
|
|
padding: 2px 6px;
|
|
border-radius: 999px;
|
|
background: var(--surface-muted);
|
|
color: var(--text-soft);
|
|
font-size: var(--font-size-xs);
|
|
font-style: normal;
|
|
}
|
|
|
|
.promptMentionEmpty {
|
|
padding: 12px;
|
|
color: var(--muted-foreground);
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
@keyframes composer-upload-spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.composerBody .shTextarea {
|
|
min-height: 88px;
|
|
border: 0;
|
|
box-shadow: none;
|
|
resize: none;
|
|
}
|
|
|
|
.playgroundComposer.compact .composerBody .shTextarea {
|
|
min-height: 104px;
|
|
}
|
|
|
|
.composerFooter {
|
|
display: flex;
|
|
min-width: 0;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.composerFooter .shSelect {
|
|
width: 132px;
|
|
}
|
|
|
|
.composerFooter .playgroundModelSelect,
|
|
.playgroundModelSelect {
|
|
width: min(320px, 34vw);
|
|
}
|
|
|
|
.composerFooter .playgroundApiKeySelect,
|
|
.playgroundApiKeySelect {
|
|
width: min(260px, 26vw);
|
|
}
|
|
|
|
.composerEstimatedCharge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin-left: auto;
|
|
color: #526170;
|
|
font-size: var(--font-size-base);
|
|
font-weight: var(--font-weight-medium);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.composerEstimatedCharge svg {
|
|
width: 15px;
|
|
height: 15px;
|
|
color: #526170;
|
|
}
|
|
|
|
.composerMediaSendButton.shButton {
|
|
width: 40px;
|
|
height: 40px;
|
|
min-width: 40px;
|
|
border: 0;
|
|
border-radius: 999px;
|
|
background: #0d0f14;
|
|
color: #fff;
|
|
box-shadow: 0 10px 28px rgba(13, 15, 20, 0.18);
|
|
}
|
|
|
|
.composerMediaSendButton.shButton:hover {
|
|
background: #1b1f27;
|
|
}
|
|
|
|
.composerMediaSendButton.shButton svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
stroke-width: 2.5;
|
|
}
|
|
|
|
.playgroundModeCards {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 12px;
|
|
width: min(900px, 100%);
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.playgroundModeCards button {
|
|
display: grid;
|
|
grid-template-columns: 42px minmax(0, 1fr);
|
|
gap: 10px;
|
|
align-items: center;
|
|
min-height: 78px;
|
|
padding: 12px;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--card-radius);
|
|
background: var(--surface);
|
|
text-align: left;
|
|
}
|
|
|
|
.playgroundModeCards button > span {
|
|
display: grid;
|
|
width: 42px;
|
|
height: 42px;
|
|
grid-row: span 2;
|
|
place-items: center;
|
|
border-radius: 12px;
|
|
background: var(--surface-muted);
|
|
}
|
|
|
|
.playgroundModeCards strong,
|
|
.playgroundModeCards small {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.playgroundModeCards small {
|
|
color: var(--muted-foreground);
|
|
font-size: var(--font-size-xs);
|
|
}
|
|
|
|
.publicWorksSection {
|
|
display: grid;
|
|
gap: 16px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.publicWorksHeader {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
}
|
|
|
|
.publicWorksTabs {
|
|
display: inline-flex;
|
|
gap: 4px;
|
|
padding: 4px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 999px;
|
|
background: var(--surface-muted);
|
|
}
|
|
|
|
.publicWorksTabs button {
|
|
min-height: 34px;
|
|
padding: 0 14px;
|
|
border: 0;
|
|
border-radius: 999px;
|
|
background: transparent;
|
|
color: var(--text-soft);
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
.publicWorksTabs button[data-active="true"] {
|
|
background: var(--surface);
|
|
color: var(--text-strong);
|
|
}
|
|
|
|
.publicWorksMasonry {
|
|
column-count: 5;
|
|
column-gap: 10px;
|
|
}
|
|
|
|
.publicWorkCard {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
break-inside: avoid;
|
|
margin: 0 0 10px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 14px;
|
|
background: var(--surface-muted);
|
|
}
|
|
|
|
.publicWorkCard img {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.publicWorkCard div {
|
|
position: absolute;
|
|
inset-inline: 10px;
|
|
bottom: 10px;
|
|
display: grid;
|
|
gap: 6px;
|
|
padding: 10px;
|
|
border-radius: 12px;
|
|
background: rgba(255, 255, 255, 0.86);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.publicWorkCard strong {
|
|
color: var(--text-strong);
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
.contentShell[data-page="playground"] {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100vw;
|
|
height: 100%;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.contentShell[data-page="playground"] > .notice,
|
|
.contentShell[data-page="playground"] > .shBadge {
|
|
position: absolute;
|
|
z-index: 30;
|
|
flex: 0 0 auto;
|
|
box-shadow: 0 12px 34px rgba(154, 52, 18, 0.12);
|
|
}
|
|
|
|
.contentShell[data-page="playground"] > .shBadge {
|
|
top: 10px;
|
|
left: 12px;
|
|
}
|
|
|
|
.contentShell[data-page="playground"] > .notice {
|
|
top: 38px;
|
|
left: 12px;
|
|
width: min(680px, calc(100% - 24px));
|
|
margin: 0;
|
|
}
|
|
|
|
.contentShell[data-page="playground"] > .playgroundPage {
|
|
flex: 1 1 auto;
|
|
height: auto;
|
|
}
|
|
|
|
.playgroundPage {
|
|
--playground-content-width: 960px;
|
|
display: grid;
|
|
grid-template-columns: 220px minmax(0, 1fr);
|
|
height: 100%;
|
|
min-height: 0;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
background: var(--surface-subtle);
|
|
}
|
|
|
|
.playgroundSidebar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
padding: 22px 16px;
|
|
border-right: 1px solid var(--border);
|
|
background: var(--surface);
|
|
}
|
|
|
|
.playgroundSidebarTitle {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.playgroundSidebarNav {
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
.playgroundSideItem {
|
|
display: flex;
|
|
min-height: 38px;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 0 10px;
|
|
border: 0;
|
|
border-radius: var(--radius-md);
|
|
background: transparent;
|
|
color: var(--text-normal);
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
.playgroundSideItem.active,
|
|
.playgroundSideItem:hover {
|
|
background: var(--surface-muted);
|
|
}
|
|
|
|
.playgroundSettingsButton {
|
|
margin-top: auto;
|
|
border-top: 1px solid var(--border);
|
|
border-radius: 0;
|
|
padding-top: 12px;
|
|
}
|
|
|
|
.playgroundSettingsButton:hover {
|
|
border-radius: var(--radius-md);
|
|
}
|
|
|
|
.playgroundSettingsDialog {
|
|
width: min(640px, calc(100vw - 32px));
|
|
}
|
|
|
|
.playgroundSettingsDialogBody {
|
|
grid-template-columns: 1fr;
|
|
gap: 14px;
|
|
padding: 0;
|
|
}
|
|
|
|
.playgroundSettingsField {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
|
|
gap: 24px;
|
|
align-items: center;
|
|
padding: 18px 24px;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.playgroundSettingsFieldCopy {
|
|
display: grid;
|
|
gap: 4px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.playgroundSettingsFieldCopy strong {
|
|
color: var(--text-strong);
|
|
font-size: var(--font-size-base);
|
|
font-weight: var(--font-weight-medium);
|
|
}
|
|
|
|
.playgroundSettingsFieldCopy small {
|
|
color: var(--muted-foreground);
|
|
font-size: var(--font-size-sm);
|
|
line-height: var(--line-height-normal);
|
|
}
|
|
|
|
.playgroundSettingsField .playgroundApiKeySelect {
|
|
width: 100%;
|
|
}
|
|
|
|
.playgroundSettingsNotice {
|
|
display: grid;
|
|
gap: 10px;
|
|
margin: 16px 24px;
|
|
padding: 10px;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
background: var(--surface-muted);
|
|
color: var(--text-soft);
|
|
font-size: var(--font-size-sm);
|
|
line-height: var(--line-height-relaxed);
|
|
}
|
|
|
|
.playgroundSettingsNotice .shButton {
|
|
justify-self: start;
|
|
}
|
|
|
|
.playgroundStage {
|
|
display: grid;
|
|
align-items: stretch;
|
|
min-width: 0;
|
|
height: 100%;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
}
|
|
|
|
.playgroundHero {
|
|
display: grid;
|
|
align-content: center;
|
|
gap: 22px;
|
|
height: 100%;
|
|
min-height: 0;
|
|
align-items: center;
|
|
justify-items: center;
|
|
overflow-y: auto;
|
|
padding: 64px 32px;
|
|
}
|
|
|
|
.playgroundHero[data-chat="true"] {
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 0;
|
|
align-self: stretch;
|
|
align-content: stretch;
|
|
align-items: stretch;
|
|
justify-items: stretch;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
}
|
|
|
|
.playgroundHero[data-media-board="true"] {
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 0;
|
|
align-content: stretch;
|
|
align-items: stretch;
|
|
justify-items: stretch;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
}
|
|
|
|
.playgroundModeSwitch {
|
|
display: inline-flex;
|
|
align-self: center;
|
|
justify-self: center;
|
|
gap: 4px;
|
|
max-width: 100%;
|
|
padding: 4px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 999px;
|
|
background: var(--surface);
|
|
}
|
|
|
|
.playgroundModeSwitch button {
|
|
display: inline-flex;
|
|
flex: 0 0 auto;
|
|
height: 34px;
|
|
min-height: 34px;
|
|
align-items: center;
|
|
gap: 7px;
|
|
padding: 0 13px;
|
|
border: 0;
|
|
border-radius: 999px;
|
|
background: transparent;
|
|
color: var(--text-soft);
|
|
font-size: var(--font-size-sm);
|
|
line-height: 1;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.playgroundModeSwitch button[data-active="true"] {
|
|
background: var(--primary);
|
|
color: var(--primary-foreground);
|
|
}
|
|
|
|
.playgroundGreeting {
|
|
display: grid;
|
|
justify-items: center;
|
|
gap: 6px;
|
|
text-align: center;
|
|
}
|
|
|
|
.playgroundGreeting span {
|
|
color: var(--text-strong);
|
|
font-size: var(--font-size-2xl);
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
.playgroundGreeting strong {
|
|
font-size: var(--font-size-xl);
|
|
}
|
|
|
|
.playgroundGreeting small {
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.playgroundError {
|
|
width: min(860px, 100%);
|
|
margin: 0 auto;
|
|
padding: 10px 12px;
|
|
border: 1px solid #f0d4d4;
|
|
border-radius: var(--radius-md);
|
|
background: #fff7f7;
|
|
color: #9f2f2f;
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
.assistantShell {
|
|
display: grid;
|
|
grid-template-rows: minmax(0, 1fr);
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
border: 0;
|
|
border-radius: 0;
|
|
background: var(--surface-subtle);
|
|
}
|
|
|
|
.assistantShell[data-has-notice="true"] {
|
|
grid-template-rows: auto minmax(0, 1fr);
|
|
}
|
|
|
|
.assistantToolbar {
|
|
display: flex;
|
|
width: min(var(--playground-content-width), calc(100% - 64px));
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 14px;
|
|
margin: 0 auto;
|
|
padding: 14px 16px;
|
|
border-bottom: 1px solid var(--border);
|
|
border-inline: 1px solid var(--border);
|
|
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
|
|
background: var(--surface);
|
|
}
|
|
|
|
.assistantToolbar .shSelect {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.assistantToolbar > div {
|
|
display: grid;
|
|
gap: 2px;
|
|
}
|
|
|
|
.assistantToolbar strong {
|
|
color: var(--text-strong);
|
|
font-size: var(--font-size-sm);
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
.assistantToolbar span {
|
|
color: var(--muted-foreground);
|
|
font-size: var(--font-size-xs);
|
|
}
|
|
|
|
.assistantApiKeyNotice {
|
|
display: flex;
|
|
width: min(var(--playground-content-width), calc(100% - 64px));
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
margin: 0 auto;
|
|
padding: 10px 12px;
|
|
border-bottom: 1px solid var(--border);
|
|
border-inline: 1px solid var(--border);
|
|
background: var(--surface-muted);
|
|
color: var(--muted-foreground);
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
.assistantThreadRoot {
|
|
display: grid;
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 0;
|
|
}
|
|
|
|
.assistantThreadViewport {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
height: 100%;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
padding: 22px 32px 0;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
.assistantEmptyStage {
|
|
display: grid;
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 0;
|
|
place-items: center;
|
|
overflow-y: auto;
|
|
padding: 64px 32px;
|
|
}
|
|
|
|
.assistantEmpty {
|
|
display: grid;
|
|
width: min(var(--playground-content-width), 100%);
|
|
align-content: center;
|
|
justify-items: center;
|
|
gap: 18px;
|
|
margin: 0 auto;
|
|
min-height: 0;
|
|
padding: 0;
|
|
color: var(--muted-foreground);
|
|
text-align: center;
|
|
}
|
|
|
|
.assistantEmptyComposer {
|
|
width: min(var(--playground-content-width), 100%);
|
|
min-height: 190px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.assistantEmptyComposer .composerFooter {
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.assistantEmptyInput {
|
|
min-height: 88px;
|
|
resize: none;
|
|
border: 0;
|
|
outline: 0;
|
|
background: transparent;
|
|
color: var(--text-normal);
|
|
font: inherit;
|
|
font-size: var(--font-size-sm);
|
|
line-height: var(--line-height-relaxed);
|
|
}
|
|
|
|
.assistantEmptyInput::placeholder {
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.composerSendButton {
|
|
display: grid;
|
|
width: 38px;
|
|
height: 38px;
|
|
place-items: center;
|
|
margin-left: auto;
|
|
border: 0;
|
|
border-radius: 999px;
|
|
background: var(--primary);
|
|
color: var(--primary-foreground);
|
|
}
|
|
|
|
.composerSendButton:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.45;
|
|
}
|
|
|
|
.assistantWelcomeComposer {
|
|
display: grid;
|
|
gap: 46px;
|
|
width: min(1280px, calc(100vw - 320px));
|
|
min-height: 245px;
|
|
padding: 28px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 26px;
|
|
background: var(--surface);
|
|
box-shadow: 0 24px 80px rgba(24, 24, 27, 0.08);
|
|
}
|
|
|
|
.assistantWelcomeBody {
|
|
display: grid;
|
|
grid-template-columns: 88px minmax(0, 1fr);
|
|
gap: 28px;
|
|
align-items: start;
|
|
}
|
|
|
|
.assistantWelcomeBody .composerUpload {
|
|
width: 66px;
|
|
height: 96px;
|
|
border-radius: 14px;
|
|
}
|
|
|
|
.assistantWelcomeInput {
|
|
min-height: 116px;
|
|
resize: none;
|
|
border: 0;
|
|
outline: 0;
|
|
background: transparent;
|
|
color: var(--text-normal);
|
|
font: inherit;
|
|
font-size: var(--font-size-lg);
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.assistantWelcomeInput::placeholder {
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.assistantWelcomeFooter {
|
|
display: flex;
|
|
min-width: 0;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.assistantWelcomeFooter .shSelect:first-child {
|
|
width: 150px;
|
|
}
|
|
|
|
.assistantWelcomeFooter .playgroundModelSelect {
|
|
width: min(460px, 38vw);
|
|
}
|
|
|
|
.assistantWelcomeKey {
|
|
color: var(--muted-foreground);
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
.assistantWelcomeSend {
|
|
display: grid;
|
|
width: 56px;
|
|
height: 56px;
|
|
place-items: center;
|
|
margin-left: auto;
|
|
border: 0;
|
|
border-radius: 12px;
|
|
background: var(--primary);
|
|
color: var(--primary-foreground);
|
|
}
|
|
|
|
.assistantWelcomeSend:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.45;
|
|
}
|
|
|
|
.assistantMessage {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
width: 100%;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.assistantMessageList {
|
|
flex: 0 0 auto;
|
|
width: min(var(--playground-content-width), 100%);
|
|
min-height: 0;
|
|
padding-bottom: 18px;
|
|
}
|
|
|
|
.assistantUserMessage {
|
|
display: grid;
|
|
justify-items: end;
|
|
gap: 8px;
|
|
width: fit-content;
|
|
max-width: min(560px, 78%);
|
|
margin-left: auto;
|
|
}
|
|
|
|
.assistantUserImageGrid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
gap: 6px;
|
|
max-width: min(420px, 100%);
|
|
}
|
|
|
|
.assistantUserImagePreview {
|
|
display: block;
|
|
width: min(168px, 100%);
|
|
overflow: hidden;
|
|
aspect-ratio: 4 / 3;
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
background: var(--surface-muted);
|
|
}
|
|
|
|
.assistantUserImagePreview img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.assistantBubble {
|
|
align-self: flex-start;
|
|
width: fit-content;
|
|
max-width: min(720px, 86%);
|
|
min-height: 0;
|
|
padding: 10px 12px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 14px;
|
|
color: var(--text-normal);
|
|
font-size: var(--font-size-sm);
|
|
line-height: var(--line-height-relaxed);
|
|
white-space: normal;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.assistantBubble.user {
|
|
max-width: min(520px, 78%);
|
|
margin-left: auto;
|
|
border-color: var(--primary);
|
|
background: var(--primary);
|
|
color: var(--primary-foreground);
|
|
}
|
|
|
|
.assistantUserMessage .assistantBubble.user {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.assistantBubble.assistant {
|
|
width: min(720px, 86%);
|
|
margin-right: auto;
|
|
background: var(--surface-muted);
|
|
}
|
|
|
|
.assistantPlainText {
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.assistantMarkdown {
|
|
display: grid;
|
|
gap: 8px;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.assistantMarkdown :where(p, ul, ol, pre, blockquote, table) {
|
|
margin: 0;
|
|
}
|
|
|
|
.assistantMarkdown > div,
|
|
.assistantMarkdown :where([data-streamdown="code-block"], [data-streamdown="table-wrapper"]) {
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.assistantMarkdown [data-streamdown="code-block"] {
|
|
overflow: hidden;
|
|
margin: 10px 0;
|
|
border-color: var(--border);
|
|
border-radius: 12px;
|
|
background: var(--surface);
|
|
padding: 8px;
|
|
}
|
|
|
|
.assistantMarkdown [data-streamdown="code-block-header"] {
|
|
height: 24px;
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.assistantMarkdown [data-streamdown="code-block-actions"],
|
|
.assistantMarkdown [data-streamdown="mermaid-block-actions"] {
|
|
gap: 2px;
|
|
border: 0;
|
|
background: transparent;
|
|
padding: 0;
|
|
box-shadow: none;
|
|
backdrop-filter: none;
|
|
}
|
|
|
|
.assistantMarkdown :where([data-streamdown="code-block-copy-button"], [data-streamdown="code-block-download-button"]),
|
|
.assistantMarkdown [data-streamdown="table-wrapper"] > div:first-child button {
|
|
display: inline-grid;
|
|
width: 26px;
|
|
height: 26px;
|
|
place-items: center;
|
|
border: 0;
|
|
border-radius: 7px;
|
|
background: transparent;
|
|
color: var(--text-soft);
|
|
padding: 0;
|
|
}
|
|
|
|
.assistantMarkdown :where([data-streamdown="code-block-copy-button"], [data-streamdown="code-block-download-button"]):hover,
|
|
.assistantMarkdown [data-streamdown="table-wrapper"] > div:first-child button:hover {
|
|
background: var(--surface-muted);
|
|
color: var(--text-strong);
|
|
}
|
|
|
|
.assistantMarkdown :where([data-streamdown="code-block-copy-button"], [data-streamdown="code-block-download-button"]) svg,
|
|
.assistantMarkdown [data-streamdown="table-wrapper"] > div:first-child button svg {
|
|
width: 15px;
|
|
height: 15px;
|
|
}
|
|
|
|
.assistantMarkdown [data-streamdown="code-block-body"] {
|
|
max-width: 100%;
|
|
overflow-x: auto;
|
|
border-color: var(--border);
|
|
background: var(--surface-subtle);
|
|
padding: 12px;
|
|
}
|
|
|
|
.assistantMarkdown [data-streamdown="table-wrapper"] {
|
|
overflow: hidden;
|
|
margin: 10px 0;
|
|
border-color: var(--border);
|
|
border-radius: 12px;
|
|
background: var(--surface);
|
|
padding: 8px;
|
|
}
|
|
|
|
.assistantMarkdown [data-streamdown="table-wrapper"] > div:last-child {
|
|
max-width: 100%;
|
|
overflow-x: auto;
|
|
border-color: var(--border);
|
|
background: var(--surface-subtle);
|
|
}
|
|
|
|
.assistantMarkdown :where(ul, ol) {
|
|
padding-left: 1.25rem;
|
|
}
|
|
|
|
.assistantMarkdown :where(li + li) {
|
|
margin-top: 3px;
|
|
}
|
|
|
|
.assistantMarkdown :where(strong) {
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
.assistantMarkdown :where(a) {
|
|
color: var(--primary);
|
|
text-decoration: underline;
|
|
text-underline-offset: 3px;
|
|
}
|
|
|
|
.assistantMarkdown :where(code) {
|
|
border-radius: 5px;
|
|
background: rgba(24, 24, 27, 0.08);
|
|
padding: 1px 4px;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.92em;
|
|
}
|
|
|
|
.assistantMarkdown :where(pre) {
|
|
max-width: 100%;
|
|
overflow-x: auto;
|
|
border: 0;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
padding: 0;
|
|
}
|
|
|
|
.assistantMarkdown :where(pre code) {
|
|
background: transparent;
|
|
padding: 0;
|
|
}
|
|
|
|
.assistantMarkdown :where(blockquote) {
|
|
border-left: 3px solid var(--border);
|
|
padding-left: 10px;
|
|
color: var(--text-soft);
|
|
}
|
|
|
|
.assistantBubble.error {
|
|
display: grid;
|
|
gap: 4px;
|
|
border-color: #f0d4d4;
|
|
background: #fff7f7;
|
|
color: #9f2f2f;
|
|
}
|
|
|
|
.assistantBubble.error strong {
|
|
color: #7f1d1d;
|
|
font-size: var(--font-size-sm);
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
.assistantErrorMessage {
|
|
color: #9f2f2f;
|
|
line-height: var(--line-height-relaxed);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.assistantTyping {
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.assistantComposerDock {
|
|
flex: 0 0 auto;
|
|
width: min(var(--playground-content-width), 100%);
|
|
position: sticky;
|
|
bottom: 0;
|
|
margin: auto auto 0;
|
|
padding: 12px 0 14px;
|
|
background: linear-gradient(180deg, rgba(250, 250, 250, 0), var(--surface-subtle) 40%);
|
|
}
|
|
|
|
.assistantComposer {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 38px;
|
|
gap: 8px;
|
|
padding: 10px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 16px;
|
|
background: var(--surface);
|
|
box-shadow: 0 16px 42px rgba(24, 24, 27, 0.08);
|
|
}
|
|
|
|
.assistantComposerInput {
|
|
min-height: 42px;
|
|
max-height: 140px;
|
|
resize: none;
|
|
border: 0;
|
|
outline: 0;
|
|
background: transparent;
|
|
color: var(--text-normal);
|
|
font: inherit;
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
.assistantComposerInput::placeholder {
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.assistantSendButton {
|
|
display: grid;
|
|
width: 38px;
|
|
height: 38px;
|
|
place-items: center;
|
|
align-self: end;
|
|
border: 0;
|
|
border-radius: 999px;
|
|
background: var(--primary);
|
|
color: var(--primary-foreground);
|
|
}
|
|
|
|
.assistantSendButton:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.45;
|
|
}
|
|
|
|
.composerUpload[data-active="true"] {
|
|
border-color: var(--primary);
|
|
color: var(--primary);
|
|
}
|
|
|
|
.mediaSettingsTrigger {
|
|
display: inline-flex;
|
|
min-height: 34px;
|
|
max-width: 260px;
|
|
align-items: center;
|
|
gap: 7px;
|
|
padding: 0 10px;
|
|
border: 1px solid var(--input);
|
|
border-radius: var(--radius-md);
|
|
background: var(--surface);
|
|
color: var(--text-normal);
|
|
font-size: var(--font-size-sm);
|
|
white-space: nowrap;
|
|
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
|
|
}
|
|
|
|
.mediaSettingsTrigger span {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.mediaSettingsPanel {
|
|
display: grid;
|
|
width: min(560px, calc(100vw - 24px));
|
|
gap: 12px;
|
|
padding: 12px;
|
|
border-radius: var(--radius-lg);
|
|
}
|
|
|
|
.mediaSettingsSection {
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
.mediaSettingsLabel {
|
|
color: var(--muted-foreground);
|
|
font-size: var(--font-size-xs);
|
|
font-weight: var(--font-weight-medium);
|
|
}
|
|
|
|
.mediaSettingsTitleRow {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
}
|
|
|
|
.mediaSettingsTitleRow strong {
|
|
color: var(--primary);
|
|
font-size: var(--font-size-sm);
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
.mediaAspectGrid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, 44px);
|
|
gap: 4px;
|
|
justify-content: start;
|
|
}
|
|
|
|
.mediaAspectGrid button {
|
|
display: inline-flex;
|
|
min-width: 0;
|
|
min-height: 46px;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
gap: 2px;
|
|
padding: 4px 2px;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
background: var(--surface);
|
|
color: var(--text-normal);
|
|
font-size: var(--font-size-xs);
|
|
}
|
|
|
|
.mediaAspectGrid button[data-active="true"] {
|
|
border-color: var(--primary);
|
|
background: color-mix(in srgb, var(--primary) 8%, var(--surface));
|
|
color: var(--primary);
|
|
box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 20%, transparent);
|
|
}
|
|
|
|
.mediaAspectIcon {
|
|
position: relative;
|
|
display: grid;
|
|
width: 13px;
|
|
height: 13px;
|
|
place-items: center;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.mediaAspectIcon::before {
|
|
content: "";
|
|
display: block;
|
|
border: 1.5px solid currentColor;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.mediaAspectIcon[data-visual="smart"]::before {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.mediaAspectIcon[data-visual="smart"] svg {
|
|
position: absolute;
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
.mediaAspectIcon[data-visual="wide"]::before {
|
|
width: 13px;
|
|
height: 4px;
|
|
}
|
|
|
|
.mediaAspectIcon[data-visual="landscape"]::before {
|
|
width: 12px;
|
|
height: 7px;
|
|
}
|
|
|
|
.mediaAspectIcon[data-visual="square"]::before {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
|
|
.mediaAspectIcon[data-visual="portrait"]::before {
|
|
width: 7px;
|
|
height: 12px;
|
|
}
|
|
|
|
.mediaAspectIcon[data-visual="tall"]::before {
|
|
width: 5px;
|
|
height: 13px;
|
|
}
|
|
|
|
.mediaAspectGrid strong {
|
|
overflow: hidden;
|
|
max-width: 100%;
|
|
font-size: var(--font-size-xs);
|
|
font-weight: var(--font-weight-medium);
|
|
line-height: 1;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.mediaResolutionSegment,
|
|
.mediaOutputModeSegment {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
|
|
gap: 6px;
|
|
}
|
|
|
|
.mediaResolutionSegment button,
|
|
.mediaOutputModeSegment button {
|
|
display: inline-flex;
|
|
min-height: 34px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
background: var(--surface);
|
|
color: var(--text-normal);
|
|
font-size: var(--font-size-sm);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.mediaResolutionSegment button[data-active="true"],
|
|
.mediaOutputModeSegment button[data-active="true"] {
|
|
border-color: var(--primary);
|
|
background: color-mix(in srgb, var(--primary) 8%, var(--surface));
|
|
color: var(--primary);
|
|
box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 20%, transparent);
|
|
}
|
|
|
|
.mediaResolutionSegment button:disabled,
|
|
.mediaOutputModeSegment button:disabled,
|
|
.mediaCountGrid button:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.56;
|
|
}
|
|
|
|
.mediaResolutionSegment svg,
|
|
.mediaSettingsHint svg {
|
|
color: #06a6bd;
|
|
}
|
|
|
|
.mediaAudioSegment.ant-segmented {
|
|
width: 100%;
|
|
padding: 2px;
|
|
border-radius: var(--radius-md);
|
|
background: var(--muted);
|
|
}
|
|
|
|
.mediaAudioSegment .ant-segmented-item {
|
|
min-height: 34px;
|
|
color: var(--muted-foreground);
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
.mediaAudioSegment .ant-segmented-item-label {
|
|
min-height: 34px;
|
|
line-height: 34px;
|
|
}
|
|
|
|
.mediaAudioSegment .ant-segmented-item-selected {
|
|
background: var(--surface);
|
|
color: var(--primary);
|
|
}
|
|
|
|
.mediaAudioSegment .ant-segmented-item-disabled {
|
|
color: var(--muted-foreground);
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.mediaDurationSlider.ant-slider {
|
|
margin: 8px 8px 18px;
|
|
}
|
|
|
|
.mediaDurationSlider .ant-slider-rail {
|
|
background: var(--border);
|
|
}
|
|
|
|
.mediaDurationSlider .ant-slider-track {
|
|
background: var(--primary);
|
|
}
|
|
|
|
.mediaDurationSlider .ant-slider-handle::after {
|
|
box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 65%, transparent);
|
|
}
|
|
|
|
.mediaDurationSlider .ant-slider-handle:hover::after,
|
|
.mediaDurationSlider .ant-slider-handle:focus::after {
|
|
box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 22%, transparent);
|
|
}
|
|
|
|
.mediaDurationSlider .ant-slider-dot {
|
|
border-color: var(--border);
|
|
background: var(--surface);
|
|
}
|
|
|
|
.mediaDurationSlider .ant-slider-dot-active {
|
|
border-color: var(--primary);
|
|
}
|
|
|
|
.mediaDurationSlider .ant-slider-mark-text {
|
|
color: var(--muted-foreground);
|
|
font-size: var(--font-size-xs);
|
|
}
|
|
|
|
.mediaDurationSlider .ant-slider-mark-text-active {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.mediaSizeRow {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.mediaSizeRow label {
|
|
display: grid;
|
|
grid-template-columns: 24px minmax(0, 1fr);
|
|
align-items: center;
|
|
gap: 6px;
|
|
min-height: 36px;
|
|
padding: 0 8px;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
background: var(--surface-muted);
|
|
}
|
|
|
|
.mediaSizeRow label span,
|
|
.mediaSizeRow strong {
|
|
color: #607080;
|
|
font-size: var(--font-size-sm);
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
.mediaSizeRow .shInput {
|
|
border: 0;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
color: var(--text-strong);
|
|
font-size: var(--font-size-sm);
|
|
text-align: right;
|
|
}
|
|
|
|
.mediaSizeRow > svg {
|
|
justify-self: center;
|
|
color: #607080;
|
|
}
|
|
|
|
.mediaCountGrid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
|
|
gap: 6px;
|
|
}
|
|
|
|
.mediaCountGrid button {
|
|
min-height: 32px;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
background: var(--surface);
|
|
color: var(--text-normal);
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
.mediaCountGrid button[data-active="true"] {
|
|
border-color: var(--primary);
|
|
background: var(--primary);
|
|
color: var(--primary-foreground);
|
|
}
|
|
|
|
.mediaCustomCount {
|
|
display: grid;
|
|
grid-template-columns: auto 110px;
|
|
align-items: center;
|
|
justify-content: start;
|
|
gap: 10px;
|
|
color: var(--text-soft);
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
.mediaUnsupportedNote {
|
|
margin: 0;
|
|
padding: 8px 10px;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
background: var(--surface-muted);
|
|
color: var(--text-soft);
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
.mediaSettingsHint {
|
|
display: inline-flex;
|
|
width: fit-content;
|
|
align-items: center;
|
|
gap: 6px;
|
|
color: var(--text-soft);
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
.mediaTaskPage {
|
|
--media-task-max-width: 1120px;
|
|
--media-composer-max-width: 960px;
|
|
display: grid;
|
|
grid-template-rows: minmax(0, 1fr) auto;
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.mediaTaskTimeline {
|
|
display: grid;
|
|
align-content: start;
|
|
gap: 22px;
|
|
justify-items: center;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
padding: 38px 40px 22px;
|
|
}
|
|
|
|
.mediaTaskTimeline h1 {
|
|
width: min(var(--media-task-max-width), 100%);
|
|
font-size: 1.875rem;
|
|
}
|
|
|
|
.mediaTaskTimeline > .playgroundError {
|
|
width: min(var(--media-task-max-width), 100%);
|
|
}
|
|
|
|
.mediaTaskItem {
|
|
display: grid;
|
|
gap: 14px;
|
|
width: min(var(--media-task-max-width), 100%);
|
|
}
|
|
|
|
.mediaTaskHeader {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
}
|
|
|
|
.mediaTaskHeaderMain {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
align-items: flex-end;
|
|
gap: 14px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.mediaTaskHeaderContent {
|
|
display: grid;
|
|
flex: 1 1 auto;
|
|
gap: 10px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.mediaTaskMetaLine {
|
|
display: flex;
|
|
min-width: 0;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: #7a8794;
|
|
font-size: var(--font-size-sm);
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.mediaTaskMetaLine svg {
|
|
flex: 0 0 auto;
|
|
color: #607080;
|
|
}
|
|
|
|
.mediaTaskMetaLine time,
|
|
.mediaTaskMetaLine strong,
|
|
.mediaTaskMetaLine span {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.mediaTaskMetaLine strong {
|
|
color: var(--text-normal);
|
|
font-weight: var(--font-weight-medium);
|
|
}
|
|
|
|
.mediaTaskPromptLine {
|
|
position: relative;
|
|
min-width: 0;
|
|
}
|
|
|
|
.mediaTaskPromptText {
|
|
display: block;
|
|
min-width: 0;
|
|
color: var(--text-strong);
|
|
font-size: var(--font-size-base);
|
|
font-weight: var(--font-weight-regular);
|
|
line-height: 1.65;
|
|
max-height: 4.95em;
|
|
overflow: hidden;
|
|
overflow-wrap: anywhere;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.mediaTaskPromptLine:hover {
|
|
z-index: 13;
|
|
}
|
|
|
|
.mediaTaskPromptLine:hover .mediaTaskPromptText {
|
|
max-height: none;
|
|
overflow: visible;
|
|
}
|
|
|
|
.mediaPromptResourceTag {
|
|
display: inline-flex;
|
|
max-width: min(220px, 86vw);
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin: 0 5px 3px;
|
|
padding: 2px 8px 2px 4px;
|
|
border-radius: 7px;
|
|
background: #438ce9;
|
|
color: #fff;
|
|
font-size: var(--font-size-xs);
|
|
font-weight: var(--font-weight-regular);
|
|
line-height: 1.25;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
.mediaPromptResourceThumb {
|
|
display: inline-grid;
|
|
width: 24px;
|
|
height: 24px;
|
|
min-width: 24px;
|
|
place-items: center;
|
|
overflow: hidden;
|
|
border-radius: 6px;
|
|
background: rgba(255, 255, 255, 0.18);
|
|
}
|
|
|
|
.mediaPromptResourceThumb img,
|
|
.mediaPromptResourceThumb video {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.mediaPromptResourceThumb svg {
|
|
width: 15px;
|
|
height: 15px;
|
|
}
|
|
|
|
.mediaTaskHeader time {
|
|
color: #7a8794;
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
.mediaTaskReferenceStack {
|
|
--task-reference-width: 54px;
|
|
--task-reference-height: 72px;
|
|
position: relative;
|
|
display: inline-block;
|
|
flex: 0 0 auto;
|
|
width: var(--task-reference-width);
|
|
height: var(--task-reference-height);
|
|
margin: 2px 2px 2px 0;
|
|
vertical-align: middle;
|
|
transition: z-index 120ms ease;
|
|
}
|
|
|
|
.mediaTaskReferenceStack:hover {
|
|
z-index: 14;
|
|
}
|
|
|
|
.mediaTaskReferenceCard {
|
|
position: absolute;
|
|
left: 0;
|
|
top: calc(var(--reference-y, 0px));
|
|
display: grid;
|
|
width: var(--task-reference-width);
|
|
height: var(--task-reference-height);
|
|
place-items: center;
|
|
overflow: hidden;
|
|
border: 1px solid rgba(255, 255, 255, 0.86);
|
|
border-radius: 7px;
|
|
background: var(--surface-muted);
|
|
color: var(--primary);
|
|
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.2);
|
|
transform: rotate(var(--reference-tilt, -8deg));
|
|
transition: left 180ms ease, top 180ms ease, transform 180ms ease, box-shadow 180ms ease;
|
|
}
|
|
|
|
.mediaTaskReferenceStack:hover .mediaTaskReferenceCard {
|
|
left: calc(var(--reference-index) * 58px);
|
|
top: 0;
|
|
transform: rotate(var(--reference-tilt, -5deg));
|
|
}
|
|
|
|
.mediaTaskReferenceCard:hover {
|
|
z-index: 6;
|
|
transform: translateY(-5px) scale(1.04) rotate(0deg) !important;
|
|
box-shadow: 0 16px 34px rgba(15, 23, 42, 0.24);
|
|
}
|
|
|
|
.mediaTaskReferenceCard img,
|
|
.mediaTaskReferenceCard video {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.mediaTaskReferenceCard svg {
|
|
width: 17px;
|
|
height: 17px;
|
|
}
|
|
|
|
.mediaTaskReferenceCard small {
|
|
position: absolute;
|
|
left: 4px;
|
|
bottom: 4px;
|
|
padding: 1px 4px;
|
|
border-radius: 999px;
|
|
background: rgba(24, 24, 27, 0.68);
|
|
color: #fff;
|
|
font-size: 10px;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.mediaTaskReferenceCard[data-kind="audio"],
|
|
.mediaTaskReferenceCard[data-kind="file"] {
|
|
background: linear-gradient(135deg, #f7fbff, #e7edf5);
|
|
}
|
|
|
|
.mediaTaskReferenceOverflow {
|
|
position: absolute;
|
|
right: -9px;
|
|
bottom: -7px;
|
|
z-index: 8;
|
|
display: inline-grid;
|
|
min-width: 22px;
|
|
height: 22px;
|
|
place-items: center;
|
|
padding: 0 5px;
|
|
border-radius: 999px;
|
|
background: var(--text-strong);
|
|
color: var(--surface);
|
|
font-size: var(--font-size-xs);
|
|
font-weight: var(--font-weight-semibold);
|
|
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.2);
|
|
}
|
|
|
|
.mediaTaskStatus {
|
|
flex: 0 0 auto;
|
|
min-height: 28px;
|
|
padding: 5px 9px;
|
|
border-radius: 999px;
|
|
background: var(--surface-muted);
|
|
color: var(--text-soft);
|
|
font-size: var(--font-size-xs);
|
|
}
|
|
|
|
.mediaTaskStatus[data-status="succeeded"] {
|
|
background: #eefdf4;
|
|
color: #15803d;
|
|
}
|
|
|
|
.mediaTaskStatus[data-status="failed"],
|
|
.mediaTaskStatus[data-status="cancelled"] {
|
|
background: #fef2f2;
|
|
color: #b91c1c;
|
|
}
|
|
|
|
.mediaPreviewStage {
|
|
display: grid;
|
|
position: relative;
|
|
width: 100%;
|
|
justify-items: center;
|
|
}
|
|
|
|
.mediaPreviewStage[data-count="1"] {
|
|
min-height: min(62vh, 600px);
|
|
max-height: 600px;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
border: 1px solid rgba(15, 23, 42, 0.05);
|
|
border-radius: 18px;
|
|
background:
|
|
linear-gradient(135deg, rgba(248, 250, 252, 0.96), rgba(234, 238, 243, 0.74)),
|
|
repeating-linear-gradient(90deg, rgba(15, 23, 42, 0.035) 0 1px, transparent 1px 28px),
|
|
repeating-linear-gradient(0deg, rgba(15, 23, 42, 0.03) 0 1px, transparent 1px 28px);
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
|
|
}
|
|
|
|
.mediaPreviewStage[data-count="1"][data-preview-state="loading"] {
|
|
background:
|
|
linear-gradient(110deg, rgba(237, 240, 242, 0.92) 0%, rgba(247, 248, 249, 0.94) 42%, rgba(230, 234, 238, 0.88) 78%),
|
|
repeating-linear-gradient(90deg, rgba(15, 23, 42, 0.035) 0 1px, transparent 1px 28px),
|
|
repeating-linear-gradient(0deg, rgba(15, 23, 42, 0.03) 0 1px, transparent 1px 28px);
|
|
background-size: 220% 100%, auto, auto;
|
|
animation: mediaLoadingShimmer 1.35s ease-in-out infinite;
|
|
}
|
|
|
|
.mediaPreviewStage[data-count="1"]::after {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.18) 44%, rgba(15, 23, 42, 0.035));
|
|
content: "";
|
|
pointer-events: none;
|
|
}
|
|
|
|
.mediaPreviewBackdrop {
|
|
position: absolute;
|
|
inset: -28px;
|
|
width: calc(100% + 56px);
|
|
height: calc(100% + 56px);
|
|
opacity: 0.2;
|
|
filter: blur(34px) saturate(1.08);
|
|
object-fit: cover;
|
|
pointer-events: none;
|
|
transform: scale(1.04);
|
|
}
|
|
|
|
.mediaGrid {
|
|
--media-grid-columns: 1;
|
|
display: grid;
|
|
position: relative;
|
|
z-index: 1;
|
|
grid-template-columns: repeat(var(--media-grid-columns), minmax(0, 1fr));
|
|
gap: 2px;
|
|
width: 100%;
|
|
max-width: var(--media-grid-max-width, 100%);
|
|
justify-self: center;
|
|
overflow: visible;
|
|
}
|
|
|
|
.mediaPreviewStage[data-count="1"][data-preview-state="loading"] .mediaGrid,
|
|
.mediaPreviewStage[data-count="1"][data-preview-state="empty"] .mediaGrid {
|
|
width: 100%;
|
|
max-width: none;
|
|
height: 100%;
|
|
align-self: stretch;
|
|
}
|
|
|
|
.mediaTile {
|
|
position: relative;
|
|
display: grid;
|
|
min-width: 0;
|
|
min-height: 210px;
|
|
max-height: 600px;
|
|
aspect-ratio: var(--media-result-aspect, 1 / 1);
|
|
place-items: center;
|
|
overflow: hidden;
|
|
border-radius: 2px;
|
|
background: #eef0f2;
|
|
}
|
|
|
|
.mediaTile[data-count="1"] {
|
|
min-height: min(62vh, 600px);
|
|
box-shadow: 0 18px 44px rgba(15, 23, 42, 0.14);
|
|
}
|
|
|
|
.mediaPreviewStage[data-count="1"] .mediaTile[data-placeholder="true"] {
|
|
width: 100%;
|
|
min-height: min(62vh, 600px);
|
|
border-radius: inherit;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.mediaTile[data-count="2"] {
|
|
min-height: min(48vh, 520px);
|
|
}
|
|
|
|
.mediaTile img,
|
|
.mediaTile video {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.mediaLoading,
|
|
.mediaEmptyTile {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
overflow: hidden;
|
|
background: linear-gradient(110deg, #edf0f2 0%, #f7f8f9 42%, #e6eaee 78%);
|
|
background-size: 220% 100%;
|
|
color: #6b7280;
|
|
font-size: var(--font-size-sm);
|
|
line-height: 1.4;
|
|
text-align: center;
|
|
animation: mediaLoadingShimmer 1.35s ease-in-out infinite;
|
|
}
|
|
|
|
.mediaLoading svg {
|
|
animation: mediaLoadingSpin 0.9s linear infinite;
|
|
}
|
|
|
|
.mediaEmptyTile {
|
|
animation: none;
|
|
background: #eef0f2;
|
|
}
|
|
|
|
.mediaPreviewStage[data-count="1"] .mediaTile[data-placeholder="true"] .mediaLoading,
|
|
.mediaPreviewStage[data-count="1"] .mediaTile[data-placeholder="true"] .mediaEmptyTile {
|
|
background: transparent;
|
|
}
|
|
|
|
.mediaPreviewStage[data-count="1"] .mediaTile[data-placeholder="true"] .mediaLoading {
|
|
animation: none;
|
|
}
|
|
|
|
.mediaTaskError {
|
|
display: grid;
|
|
gap: 4px;
|
|
width: fit-content;
|
|
max-width: 100%;
|
|
padding: 8px 10px;
|
|
border: 1px solid #fecaca;
|
|
border-radius: var(--radius-md);
|
|
background: #fef2f2;
|
|
color: #991b1b;
|
|
font-size: var(--font-size-sm);
|
|
line-height: var(--line-height-relaxed);
|
|
}
|
|
|
|
.mediaTaskError strong {
|
|
color: #7f1d1d;
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
.mediaTaskError span {
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.mediaTaskActions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.mediaTaskActions > span {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
margin-left: auto;
|
|
color: var(--text-soft);
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
.mediaTaskActions > span svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
color: #607080;
|
|
}
|
|
|
|
.mediaComposerDock {
|
|
padding: 10px 40px 14px;
|
|
background: linear-gradient(180deg, rgba(250, 250, 250, 0), var(--surface-subtle) 26%);
|
|
}
|
|
|
|
.mediaComposerDock .playgroundComposer {
|
|
width: min(var(--media-composer-max-width), 100%);
|
|
min-height: 190px;
|
|
margin: 0 auto;
|
|
border-radius: 26px;
|
|
}
|
|
|
|
@keyframes mediaLoadingSpin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes mediaLoadingShimmer {
|
|
0% {
|
|
background-position: 140% 0;
|
|
}
|
|
|
|
100% {
|
|
background-position: -80% 0;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1180px) {
|
|
.publicWorksMasonry {
|
|
column-count: 3;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 860px) {
|
|
.playgroundPage {
|
|
grid-template-columns: 1fr;
|
|
height: 100%;
|
|
min-height: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.playgroundSidebar {
|
|
display: none;
|
|
}
|
|
|
|
.playgroundStage {
|
|
padding: 0;
|
|
}
|
|
|
|
.playgroundHero {
|
|
padding: 42px 18px;
|
|
}
|
|
|
|
.playgroundHero[data-chat="true"] {
|
|
padding: 0;
|
|
}
|
|
|
|
.assistantThreadViewport {
|
|
padding: 18px 18px 0;
|
|
}
|
|
|
|
.assistantEmptyStage {
|
|
padding: 42px 18px;
|
|
}
|
|
|
|
.assistantWelcomeComposer {
|
|
width: 100%;
|
|
min-height: 220px;
|
|
gap: 26px;
|
|
padding: 18px;
|
|
}
|
|
|
|
.assistantWelcomeBody {
|
|
grid-template-columns: 1fr;
|
|
gap: 14px;
|
|
}
|
|
|
|
.assistantWelcomeBody .composerUpload {
|
|
width: 52px;
|
|
height: 68px;
|
|
}
|
|
|
|
.assistantWelcomeFooter {
|
|
align-items: stretch;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.assistantWelcomeFooter .shSelect:first-child,
|
|
.assistantWelcomeFooter .playgroundModelSelect {
|
|
width: 100%;
|
|
}
|
|
|
|
.assistantWelcomeSend {
|
|
width: 100%;
|
|
height: 42px;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.playgroundComposer.compact {
|
|
width: 100%;
|
|
}
|
|
|
|
.playgroundModeCards,
|
|
.composerBody {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.composerFooter,
|
|
.publicWorksHeader {
|
|
align-items: stretch;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.mediaSettingsTrigger,
|
|
.composerFooter .playgroundModelSelect,
|
|
.composerFooter .playgroundApiKeySelect,
|
|
.playgroundModelSelect,
|
|
.playgroundApiKeySelect {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.mediaSettingsPanel {
|
|
max-height: calc(100vh - 32px);
|
|
overflow-y: auto;
|
|
padding: 12px;
|
|
border-radius: var(--radius-lg);
|
|
}
|
|
|
|
.mediaAspectGrid {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
.mediaResolutionSegment button {
|
|
min-height: 34px;
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
.mediaSizeRow {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.mediaSizeRow > svg,
|
|
.mediaSizeRow > strong {
|
|
display: none;
|
|
}
|
|
|
|
.mediaTaskTimeline {
|
|
padding: 30px 18px 18px;
|
|
}
|
|
|
|
.mediaGrid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.mediaGrid[data-count="1"] {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.mediaTile[data-count="1"],
|
|
.mediaTile[data-count="2"] {
|
|
min-height: auto;
|
|
}
|
|
|
|
.mediaComposerDock {
|
|
padding: 10px 18px 14px;
|
|
}
|
|
|
|
.assistantComposerDock {
|
|
padding-bottom: 14px;
|
|
}
|
|
|
|
.publicWorksMasonry {
|
|
column-count: 2;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 560px) {
|
|
.playgroundSettingsField {
|
|
grid-template-columns: 1fr;
|
|
gap: 10px;
|
|
padding: 16px;
|
|
}
|
|
|
|
.playgroundSettingsNotice {
|
|
margin: 14px 16px;
|
|
}
|
|
|
|
.mediaAspectGrid,
|
|
.mediaCountGrid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.mediaGrid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.mediaTaskHeader {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.mediaTaskActions > span {
|
|
width: 100%;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.publicWorksMasonry {
|
|
column-count: 1;
|
|
}
|
|
}
|