Refine playground composer and settings layout
This commit is contained in:
@@ -613,23 +613,42 @@
|
||||
width: min(260px, 26vw);
|
||||
}
|
||||
|
||||
.composerQuickPrompts {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
.composerEstimatedCharge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
overflow: hidden;
|
||||
margin-left: auto;
|
||||
color: #526170;
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: var(--font-weight-medium);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.composerQuickPrompts button {
|
||||
min-height: 32px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid var(--border);
|
||||
.composerEstimatedCharge svg {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
color: #526170;
|
||||
}
|
||||
|
||||
.composerMediaSendButton.shButton {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
min-width: 40px;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
background: var(--surface);
|
||||
color: var(--text-soft);
|
||||
font-size: var(--font-size-xs);
|
||||
white-space: nowrap;
|
||||
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 {
|
||||
@@ -801,8 +820,8 @@
|
||||
}
|
||||
|
||||
.playgroundSidebar {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 22px 16px;
|
||||
border-right: 1px solid var(--border);
|
||||
@@ -816,6 +835,11 @@
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.playgroundSidebarNav {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.playgroundSideItem {
|
||||
display: flex;
|
||||
min-height: 38px;
|
||||
@@ -834,6 +858,75 @@
|
||||
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;
|
||||
@@ -1424,7 +1517,7 @@
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
margin: auto auto 0;
|
||||
padding: 18px 0 24px;
|
||||
padding: 12px 0 14px;
|
||||
background: linear-gradient(180deg, rgba(250, 250, 250, 0), var(--surface-subtle) 40%);
|
||||
}
|
||||
|
||||
@@ -1824,6 +1917,8 @@
|
||||
}
|
||||
|
||||
.mediaTaskPage {
|
||||
--media-task-max-width: 1120px;
|
||||
--media-composer-max-width: 960px;
|
||||
display: grid;
|
||||
grid-template-rows: minmax(0, 1fr) auto;
|
||||
width: 100%;
|
||||
@@ -1843,18 +1938,18 @@
|
||||
}
|
||||
|
||||
.mediaTaskTimeline h1 {
|
||||
width: min(1240px, 100%);
|
||||
width: min(var(--media-task-max-width), 100%);
|
||||
font-size: 1.875rem;
|
||||
}
|
||||
|
||||
.mediaTaskTimeline > .playgroundError {
|
||||
width: min(1240px, 100%);
|
||||
width: min(var(--media-task-max-width), 100%);
|
||||
}
|
||||
|
||||
.mediaTaskItem {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
width: min(1240px, 100%);
|
||||
width: min(var(--media-task-max-width), 100%);
|
||||
}
|
||||
|
||||
.mediaTaskHeader {
|
||||
@@ -1988,12 +2083,11 @@
|
||||
height: var(--task-reference-height);
|
||||
margin: 2px 2px 2px 0;
|
||||
vertical-align: middle;
|
||||
transition: width 180ms ease;
|
||||
transition: z-index 120ms ease;
|
||||
}
|
||||
|
||||
.mediaTaskReferenceStack:hover {
|
||||
z-index: 14;
|
||||
width: min(calc(var(--reference-count) * 58px), calc(100vw - 96px));
|
||||
}
|
||||
|
||||
.mediaTaskReferenceCard {
|
||||
@@ -2285,12 +2379,12 @@
|
||||
}
|
||||
|
||||
.mediaComposerDock {
|
||||
padding: 16px 40px 24px;
|
||||
padding: 10px 40px 14px;
|
||||
background: linear-gradient(180deg, rgba(250, 250, 250, 0), var(--surface-subtle) 26%);
|
||||
}
|
||||
|
||||
.mediaComposerDock .playgroundComposer {
|
||||
width: min(1240px, 100%);
|
||||
width: min(var(--media-composer-max-width), 100%);
|
||||
min-height: 190px;
|
||||
margin: 0 auto;
|
||||
border-radius: 26px;
|
||||
@@ -2450,15 +2544,11 @@
|
||||
}
|
||||
|
||||
.mediaComposerDock {
|
||||
padding: 12px 18px 20px;
|
||||
padding: 10px 18px 14px;
|
||||
}
|
||||
|
||||
.assistantComposerDock {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.composerQuickPrompts {
|
||||
flex-wrap: wrap;
|
||||
padding-bottom: 14px;
|
||||
}
|
||||
|
||||
.publicWorksMasonry {
|
||||
@@ -2467,6 +2557,16 @@
|
||||
}
|
||||
|
||||
@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));
|
||||
|
||||
Reference in New Issue
Block a user