fix(web): align playground chat layout
This commit is contained in:
@@ -0,0 +1,970 @@
|
||||
.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);
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.composerQuickPrompts {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
gap: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.composerQuickPrompts button {
|
||||
min-height: 32px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 999px;
|
||||
background: var(--surface);
|
||||
color: var(--text-soft);
|
||||
font-size: var(--font-size-xs);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.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"] {
|
||||
width: 100vw;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.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: grid;
|
||||
align-content: start;
|
||||
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;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.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 {
|
||||
border-color: #f0d4d4;
|
||||
background: #fff7f7;
|
||||
color: #9f2f2f;
|
||||
}
|
||||
|
||||
.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-top: 18px;
|
||||
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);
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
|
||||
.composerQuickPrompts {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.publicWorksMasonry {
|
||||
column-count: 2;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.publicWorksMasonry {
|
||||
column-count: 1;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user